はじめに

この記事はISerアドベントカレンダー2020の21日目の記事として書かれました。

この記事は何か

p5.jsからPythonの関数を呼び出したいと思っている人に、その方法の1つをお伝えします。
flaskでサーバーを立て、そこでpythonを動かします。javascriptからajaxを使ってアクセスします。

完成品

このページのようなカウントアプリを作ります。
- 初めてアクセスする際には、herokuの起動に数秒かかります。
- キーボードを叩くと、表示されている数字が増えます。
プログラムの構造
- sketch.jsのkeyPressed()でキーボード入力を受け取ります。
- ajaxを用いて/incrementにPOSTし、app.pyのplusone関数にcountという変数の値を渡します。
- plusone関数が、与えられた数値に1を加えた値を返します。
- sketch.jsで返ってきた値をcount変数に代入します。
- 一定周期でdraw関数が呼ばれ、count変数の値に従ってテキストを表示します。
コードはすべてGitHubに置いてあります。

手順

p5.jsでカウントアプリを書く

p5.jsで適当にカウントアプリを書きます。
次のようにsketch.jsを書いてみましょう。

let count = 0;
function setup() {
    createCanvas(100, 100);
    count = 0;
}
function draw() {
    background(220);
    textSize(60);
    textAlign(CENTER);
    text(count, 50, 70);
}
function keyPressed(){
    count += 1;
}

setupでcountを0に設定し、keyPressedでその値を1増やし、draw(一定周期で繰り返し呼ばれる)で
p5.js official editorなどを使うと、簡単にテストできます。
p5.jsについて詳しく知りたい方へ。
- 公式ページはこちらです。
- チュートリアルはこちらです。
- 公式リファレンスはこちらです。

index.htmlを書いて、ブラウザで開いてみる

次のようにindex.htmlを書いてみましょう。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
  <script src="../static/sketch.js"></script>
</head>
<body>
</body>
</html>

ディレクトリの構造を次のようにしましょう。

./
├── static
│   └── sketch.js
└── templates
    └── index.html

index.htmlを開くと、Chromeなどのブラウザでカウントアプリを開けます。
参考
- p5.js公式チュートリアル

flaskでローカルサーバーを立ち上げてみる

flaskのinstall

まず、flaskをinstallしましょう。

$ pip3 install Flask

参考：Flask installation

ローカルサーバーを立ち上げる

次のようにapp.pyを書いてみましょう。

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def main():
    return render_template("index.html")
  
if __name__ == "__main__":
    app.run(host = "0.0.0.0", port = 8080, debug = True)

ローカルサーバーを立ち上げてみましょう。

$ python3 app.py 
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://0.0.0.0:8080/ (Press CTRL+C to quit)
 * Restarting with fsevents reloader
 * Debugger is active!
 * Debugger PIN: 245-513-508

http://0.0.0.0:8080/ にアクセスして、カウントアプリが表示されればOKです。
参考：Flask QuickStart

Ajaxで通信してみる

ここからいよいよ、JavascriptからPythonコードを呼び出してみます。

sketch.jsでajaxを呼ぶ

keyPressedで、/incrementにアクセスするようにしてみます。

function keyPressed(){
    var post = $.ajax({
        type: "POST",
        url: "/increment",
        data: {count: count}, // post a json data.
        async: false,
        dataType: "json",
        success: function(response) {
            console.log(response);
            // Receive incremented number.
            count = response.count;
        }, 
        error: function(error) {
            console.log("Error occurred in keyPressed().");
            console.log(error);
        }
    })
}

参考
- jQuery.ajax公式リファレンス
- ajaxを使ってPythonを呼び出している他の人のプログラム

app.pyにplusone関数を作る

app.pyに次の関数を追加します。

@app.route("/increment", methods=["POST"])
def plusone():
    req = request.form
    res = {"count": int(req["count"])+1}
    return jsonify(res)

参考
- ajaxを使ってPythonを呼び出している他の人のプログラム

ajaxを使えるようにhtmlにソースを追加する

index.htmlに次の行を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

参考
- ajaxを使ってPythonを呼び出している他の人のプログラム

実行

実行します。

$ python3 app.py

デプロイ

このページでは、さらにherokuでのアップロードをしています。
heroku 公式リファレンスを参考にしつつ、デプロイを行います。

おわりに

いかがでしたでしょうか。
この技術を基に、明後日の記事のネタを作っていきたいと思っています。
明日はRisebbitくんによる記事です。楽しみですね！