PyScript Webブラウザ上(HTML内)でPython実行

スポンサーリンク
Python/DeepLearning
2022.05.14

こんにちは！みやしんです。

今回は2022年5月にAnaconda社より公開されたPySCriptについてご紹介します。

みやしん
みやしん

Pythonの活躍の場が、また一つ広がる気がします！

スポンサーリンク

PyScriptとは？

HTMLの中にPythonコードを書ける

PyScriptを使うとPythonをWebブラウザ上で実行できるようになります。

具体的には、HTMLの中にPythonコードを書いて、Webブラウザ上で実行できるようになります。

PyScript特有のタグ(例 <py-script>)を使ってHTMLに記述し、Webブラウザ上に実行＆表示できます。

JavaScriptの代わりになるかも！？

上記のようにmatplotlibを使ってグラフを書いたりもできますので、今後、JavaScriptなしでもいい感じに表現できるようになるかもしれません。Pythonは書けるけどJavaScriptは書いたことないな～という方におススメなライブラリになっていきそうです。

PythonやAIをもっと勉強したい方🤗

Pyサブスクール：サブスク8,030円/月でPythonを始められるプログラミングスクール
サブスク8,030円/月でPythonを始められるプログラミングスクール。現役エンジニアへの質問も自由に出来ます。話題のPythonを学びたいけどスクールに60万円は高すぎる！でも独学だと挫折が恐い。そんな不満と不安を解決するサブスク型のプ...
pysubschool.net

エンジニアではない人へ見せるのに良さそう

エンジニアではない人に説明するときに、例えばJupyter Notebookとかを使うと、コードがたくさん書いてあって、それだけで拒絶反応を示す人もいましたが、Webブラウザ上にまとめればコードを相手に見せることなく実行＆表示できます。

2022年5月現在ではalpha版

この記事を書いている現在(2022年5月)では、PyScriptはalpha版となっており、お試し期間中のようですので本番環境ではまだ使わないように公表されていますが、今のうちに色々試してみると面白そうです。

PyScriptの使い方

HTMLの準備

HTMLファイルを準備しましょう！まずはこんな感じで記述します。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>


</head>
<body>


</body>
</html>

そして、<head></head>の間にこの2行を入れます。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

PyScriptに必要な2ファイル「pyscript.css」と「pyscript.js」がネット上に配置されていますので、それを使います。これでPyScriptが使えるようになりました。pip installしないので面白いですね！

ただ、よく見てみますと、URLの途中に「alpha」と書いてあるのが分かると思います。
<link rel=”stylesheet” href=”https://pyscript.net/alpha/pyscript.css” />
<script defer src=”https://pyscript.net/alpha/pyscript.js”></script>
おそらくVerが変わっていくと、このalphaの部分が変わっていくのではないかと予想します。注意が必要ですね！この記述はPyScriptの公式ページに載っていますので、PyScriptを使う際は念のため確認してから使った方が良さそうですね！

2行を追加するとこんな感じです。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>


</body>
</html>

Pythonコード記述 <py-script> </pyscript>

Pythonコードを記述するには、<body>タグの間に<py-script> タグを書きます。これはPyScript特有のタグでこの中にPythonコードを書いていきます。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <py-script>

    </py-script>
</body>
</html>

たとえば、<py-script>タブの間に簡単なコードを書いてみましょう。print(“PyScript デビュー！”)にします。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <py-script>
print('PyScript デビュー！')
    </py-script>
</body>
</html>

これをブラウザで表示してみるとこんな感じです。ブラウザはChromeが推奨されているようです。

おおお！こんな簡単に出来てしまうんですね！

関数も使える

もう少し複雑なコードも書いてみましょう。簡単な関数を作ってみます。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <py-script>
def test1(n):
    print(n)

for i in ['Papa', 'Mama', 'Baby']:
    test1(i)
    </py-script>
</body>
</html>

実行するとこんな感じです。関数もしっかり機能しますね。

ただ、まだ試用版というのもあるのか、上手く表示されないこともありますね。

画面が真っ白だったり、こんな風になぜか赤い線が出ることもありましたが何回か実行していると成功しました。。。

標準モジュールをインポートする

標準モジュールは<py-script>タグ内に通常通り記述することでインポートできます。

datetimeをインポートして現在時刻を表示してみましょう。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <py-script>
import datetime

print(datetime.datetime.now())
    </py-script>
</body>
</html>

ブラウザで表示してみるとこんな感じで現在の時刻が表示されました。

HTMLタグに結果を出力する　pyscript.write()

これまではシンプルに文字だけを出力しましたが、背景色を付けるなどHTMLの機能も使って表現することができます。下記の図のように、<div>タグでidとstyleを設定し、<py-script>タグ内にpyscript.write(id, 表示したいオブジェクト)で表示することができます。

コピペ用のサンプルコードも添付します。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <div id="current_time" style="background-color: skyblue">
    </div>
    <py-script>
import datetime

pyscript.write('current_time', datetime.datetime.now())
    </py-script>
</body>
</html>

これを表示すると、こんな感じになります。

実行結果

背景に色を付けられました！

外部ライブラリを使う

外部ライブラリも使うことができます！

使えるものが決まっていますので何が使えるか知りたい時は、pyodide公式サイトで確認できます。

外部ライブラリを使うには、<head>タグ内に<py-env>タグを作って下記のように記述します。

コピペ用のサンプルコードも載せておきます。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <py-env>
        - pandas
        - matplotlib    
    </py-env>

</head>
<body>
    <div id="plot"></div>
    <py-script>
import pandas as pd
import matplotlib.pyplot as plt

df = pd.DataFrame({
    '名前':['GOKU', 'LUFFY', 'NARUTO'],
    '年齢':[43, 19, 17]})

fig, ax = plt.subplots()
ax.bar(df['名前'], df['年齢'], color='pink')
plt.title('Age of the hero')

pyscript.write('plot', fig)

</py-script>
</body>
</html>

表示するとこのようになります。

ちなみにドラゴンボールの孫悟空は43歳らしいです。(笑)

自作モジュールをインポートする

自作のモジュールをインポートすることもできます！

まずは、htmlファイルと同じ階層内にmy_module.pyを作成します。

my_module.py

def my_func(n):
    return n*2

引数で受け取った数字を2倍するだけの簡単な計算をします。

これをPyScriptを使ってHTMLファイルにインポートして使っていきます。

先程と似た感じになりますが<head>タグに記載します。

コピペ用のスクリプトになります。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <py-env>
        - paths:
            - ./my_module.py    
    </py-env>

</head>
<body>
    <div id="plot"></div>
    <py-script>

from my_module import my_func

result = my_func(11)
print(result)

    </py-script>
</body>
</html>

ブラウザで表示すると、こんな感じになります。

py-repl で対話的にPython実行

<py-repl>タグを使うとWebブラウザ上でPythonを対話的に使えるようになります。

<body>タグの中に<py-repl></py-repl>と書いて実行してみます。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>

    <py-repl></py-repl>

</body>
</html>

すると、こんな感じでJupyter Notobookのような画面が表示されます。

ここに簡単な計算式を書いたら「Shiftボタン + Enterボタン」で実行できます。

30と答えが出力されました。

<py-repl>タグを使って、<py-script>タグ内の関数を呼び出す

さらに<py-script>タグに定義した処理を<py-repl>側から呼び出すこともできます。

つまり、HTML側からPyScriptへ値を渡して処理を実行することができます。

たとえば、先程も使った受け取った数値を2倍数にする関数の my_func(n)を使ってみます。

<!DOCUTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>

    <py-repl></py-repl>

    <py-script>
def my_func(n):
    return n*2
    </py-script>

</body>
</html>

my_func(11)とWebブラウザ側に書いて実行すると、正しく計算処理が行われました。

n=11、11×2で22ですね！

本当に色々なことができて便利ですね！

PythonやAIをもっと勉強したい方🤗

Pyサブスクール：サブスク8,030円/月でPythonを始められるプログラミングスクール
サブスク8,030円/月でPythonを始められるプログラミングスクール。現役エンジニアへの質問も自由に出来ます。話題のPythonを学びたいけどスクールに60万円は高すぎる！でも独学だと挫折が恐い。そんな不満と不安を解決するサブスク型のプ...
pysubschool.net

Python/DeepLearning
スポンサーリンク
記事が良かったらSNSでシェアを宜しくお願いします！
みやしんをフォローすると役立つ情報がいっぱいにゃ！
スポンサーリンク
みやしん
スポンサーリンク

コメント

タイトルとURLをコピーしました