Introduction

きっかけ

PythonのWebアプリケーションを作成しようとしたのですが、BottleやDjangoといったフレームワークを使おうにも完全にJavaScriptの使い方を忘れてしまいました。そこで、フロントエンドで簡単にPythonを使う方法がないかと思い、Googleで検索してみたところBrythonというJavaScriptのモジュールを見つけました。忘れっぽいので使い方など備忘録としてまとめておきます。

自己紹介

自己紹介ページ

環境情報 
Python 3.6.5 |Anaconda, Inc.| 
Windows10

問題点

参考情報が古いものばかりですね。BottleやFlask、DjangoといったPythonのフレームワークが使える人には必要ないですからね…。

20190208

また上記のフレームワークとくらべて圧倒的にトラブルに対する情報量が少ないです。

僕はあきらめました。(理由後述)

対象者

・Python3系を使っているユーザー(Anacondaでインストール)

・Brythonの初心者の方

・1を聞いて10を理解できるエンジニア

・Windowsの人

非対象者

・Bottle, Djangoなどのフレームワークが自分の手足のように使える人~~(教えてください)~~

・JavaScriptを使い慣れている人

・説明下手な筆者を攻撃しようとするエンジニア

・Macの人

Let's Start

こちらの参照サイトにお世話になりました。

上記のサイトを軸にわからないとこなどで適宜調べたもの、エラー対処などをまとめておきます。

それでは張り切ってまいりましょう。

1.Brythonとは？

PythonをWebブラウザ上で動かすことができるようにするJavaScriptのライブラリだそうです。

開発自体はだいぶ前ですが、Python3にも対応しています。

ダウンロードはこちら

上のページがよくわからない場合はこちら

Cf)
GitHubからのダウンロードについて

大事なのは、

brython.js 
brython_stdlib.js

の二つのファイルだそうです。
~~でもbrython_stdlib.jsの使い道はよくわかっていません。~~

Sample Code

Sample.html

<html> 
    <head> 
        <script type="text/javascript" src="brython\www\src\brython.js"></script> 
      </head> 
    <body onload="brython()"> 
      <script type="text/python" > 
        from browser import document, alert 
 
        def echo(event): 
           alert(document["zone"].value) 
 
        document["mybutton"].bind("click", echo) 
         </script> 
       <input id="zone"> 
       <button id="mybutton">click !</button> 
      </body> 
  </html>

これを「Sample.html」というファイル名で保存すればweb上でPythonが動く姿を目の当たりにできます。

上から7行目のbrowserというモジュールはBrython特有のモジュールらしいです。

2.Brythonでの応用

最初に断っておきますが、僕は失敗しました。

ファイルの分割方法

課題：

可読性の高さが、Pythonの良さなので可読性を上げるためにも、PythonのファイルとHTMLのファイルを分割します。もちろん以下のような理由でも、分割したかったです。

20190208

AtomというEditorでコードを書いていますが、Htmlファイル内のPythonはコメントアウトが、Python式のコメントアウトになるので、そのまま保存してしまうと、Htmlファイルの実行時にエラーが生じる点は地味ですが面倒な問題ですね。

解決策としては、Pythonファイルを外部から取得する形？したほうがいいですね。

Sampleコードの場合で説明しますと、以下のような二つのファイルで作成します。

Sample.html 
Sample.py

「Sample.html」のscriptの部分を外部ファイルで置き換えます。

Sample.html

<html> 
    <head> 
        <script type="text/javascript" src="brython\www\src\brython.js"></script> 
      </head> 
    <body onload="brython()"> 
      <script type="text/python" src="Sample.py"> 
         </script> 
       <input id="zone"> 
       <button id="mybutton">click !</button> 
      </body> 
  </html>

Sample.py

from browser import document, alert 
def echo(event): 
    alert(document["zone"].value) 
 
document["mybutton"].bind("click", echo)

再度述べますが、この部分で失敗しました。
こちらのサイトでは成功しているようです。

Access to XMLHttpRequest at 'ローカルファイルのPath' from origin 'null' has been blocked by CORS policy:  
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

CORSという問題があるようです。

調べたところローカルファイルにアクセスするには、「http, data, chrome, chrome-extension, https」という方法でのみやり取りできるようです。

つまりローカルファイル同士で、値のやり取りをすることができないようです。
~~このあたりでBrythonが面倒になってきました。~~

Cf)CORSに関連する情報(結局よくわからなかった)
Qiita記事
英語のDocument

Cf)CORSに関連したBrython情報(結局よくわからなかった)
作者への質問
BrythonのDocument

3.結論 (またの章名をあきらめた理由ともいう)

サーバーの問題

もともとのきっかけとしてローカルサーバーを立てるのが、面倒でBrythonを始めましたが、CORSの問題に対処していろいろ調べているうちに、サーバーを立てる必要が出てきました。サーバーの詳細は先ほど紹介したこちらのサイトの中で記述されています。

しかし「server.py」の格納位置やディレクトリの構造などを考えていたら、Bottleなどのフレームワークで実装したほうが簡単と思いました。

拡張性に対する不安

Brythonによる実装で使おうとしていた分野が、Brython上で実装できるほどの技術力が自分にはないためです。
あきらめを決めたサイトから以下引用

例えば、BrythonはJavaScript実行環境で動きますし、JythonはJava環境、IronPythonは.NET系ですね。ただし、実装具合はあまり期待しないほうが良いでしょう。

以下にイメージを書きます。

上ほど簡単、下ほど難しい

・Pythonの基本的文法の実装

・標準ライブラリの基本的なものだけ実装

・標準ライブラリの応用的なものも実装

・外部ライブラリの基本的なものなら動く実装

・外部ライブラリの応用的なものも動く実装

最下段ともなると、C言語でのPython実装（つまり普通のPython実装）以外にはないでしょう。なぜなら、大抵の応用的な大規模な外部ライブラリは、一部にC言語による拡張が使われており、これを他のプラットフォームで工数をかけずにそのまま動作させるのは至難だからです。

仮にピュアPythonで書かれたライブラリであっても、その内部で色々な標準ライブラリを必要としていると、そのどこかの中で「まだ実装されていない」例外が飛ぶ可能性が高いからです。

とはいえ、JythonやIronPythonあたりはある程度まともに動くようになってきたので、モノ好き連中がいろいろ試しているようです。

やりたいことが自然言語処理分野だったのですが、上の5つの中でいうと、一番難しいものです。

そこで普通にBottleをはじめとしたフレームワークを使おうと思いました。

今回BrythonをいじっているうちにそれなりにJavaScriptを思い出してきたので…

Brythonでは、外部Scriptを使うような実装は向かないです。

あくまでPythonの既存ライブラリのみをJavaScript上で動かしたいときは強い破壊力を秘めています。

今後Brythonを使う人にとって少しでも参考になればと思い、記録しておきます。

その他参照サイト

http://blog.livedoor.jp/hamu_nbr/archives/43114283.html
https://hitoribucho.com/post/20170623180316
https://tech-joho.info/python%E5%85%A5%E9%96%80%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E3%81%8A%E4%BE%9B%E3%81%ABbrython/

Cf.)QiitaのBrython関係のサイトはほとんど古いものばかりですが、参考までに載せておきます。
https://qiita.com/ryo_grid/items/5e34220ed48f4580126d
https://qiita.com/jack-low/items/8e17b26030440217c18c
https://qiita.com/n_0r2/items/90d1d61b14c6a2865289
https://qiita.com/SaitoTsutomu/items/32a89fa45b1aad41da5d

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫

Brython初心者のための覚え書き