Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Senple

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

Last updated at Posted at 2019-02-07

Introduction

きっかけ

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

自己紹介

smile.jpg

自己紹介ページ

環境情報
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

16
12
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?