Start_python’s diary

ふたり暮らし

アラフィフ夫婦のフリーランスプラン

PythonでWEBアプリの三目並べを作る（準備編：FlaskとBrythonを利用）

はじめに

三目並べをブラウザ上で動かすにはどうしたらいいか考えました。本当はJavaScriptを使うのがいいのでしょうが、Brythonモジュールを使えばJavaScriptの代わりができるみたいです。

 

動作環境

Windows10
Python 3.7.5
Flask 1.1.1
Brython 3.8.7

作業フォルダ/
 ├ static/
 │  ├ brython.js
 │  ├ brython_stdlib.js
 │  └ test.py
 ├ templates/
 │  └ sample.html
 └ main.py

 

Brythonを使ってみる

Brythonは、Pythonをブラウザ上で動かすことができるようにするモジュールです。

Brythonの公式サイトはこちらです。
https://brython.info/

 

モジュールのインストール

pip install brython

 

「brython.js」と「brython_stdlib.js」をダウンロード

https://github.com/brython-dev/brython/releases

こちらのサイトから「Brython-3.8.7.zip」をダウンロードしました。

 

これで準備完了です。簡単はテストページを作成してみます。

 

ソースコード

「作業フォルダ」

main.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('sample.html')

if __name__ == '__main__':
    app.run(debug=True)

Flaskの基本になる起動プログラムです。ブラウザページを開くと「sample.html」が表示されます。

 

「作業フォルダ/templates/」

sample.html

<html>
    <head>
        <script type="text/javascript" src="static/brython.js"></script>
    </head>
    <body onload="brython()">
        <script type="text/python" src="static/test.py"></script>
        <input id="text1">
        <button id="btn1">click !!</button>
    </body>
</html>

<script type="text/javascript" src="static/brython.js"></script>

staticファルダにある「brython.js」を呼び出します。

<script type="text/python" src="static/test.py"></script>

staticファルダにある「test.py」を呼び出します。

 

「作業フォルダ/static/」

test.py

from browser import document, alert

def echo(event):
    alert(document["text1"].value)

document["btn1"].bind("click", echo)

alert(document["text1"].value)

id「text1」（テキストボックス）のテキストを、ポップアップで表示します。

document["btn1"].bind("click", echo)

id「btn1」（ボタン）をクリックした時に、「echo関数」を呼び出します。

 

「main.py」を実行して、ブラウザで「127.0.0.1:5000」を開きます。

f:id:Start_python:20200314122513p:plain

 

まとめ

アラートを表示する方法で、print関数の代わりに変数の値を確認したりできます。

これでJavaScriptを一切使わずにPythonでWEBアプリが作れそうです。
JavaScriptを使えばまったく必要ないのでJavaScriptを勉強したほうが早いかもしれませんが、とりあえずこの方法で三目並べを完成させたいと思います。