PythonをHTMLで動かす！PyScript入門

PyScriptは、HTMLにPythonコードを書くだけで、Webブラウザ上でPythonスクリプトを実行できる新しいライブラリです。

これにより、PythonとJavaScriptの統合が簡単になり、従来Pythonで行っていたデータ処理やグラフ描画をブラウザ上で表示できるようになります。

この記事では、PyScriptの基本的な使い方と簡単なサンプルコードを使って、Webブラウザ上でPythonコードを実行する方法を紹介します。

ごまこ

matplotlibやpandasを使ってPythonで視覚化したものをHTMLの中で表示したいんですが、Webアプリケーションとしてきちんと開発しないと実現できないですか？

ごまお

単体のHTMLファイルの中でPythonを実行するならPyScriptがおすすめです！
JavascriptのようにHTMLの中にPythonを書いて表示を確認できます！
初心者でもわかるように使い方を説明した上で応用例も紹介します！

1. PyScriptとは？
1. PyScriptの主な機能
2. PyScriptの基本設定
3. WebブラウザでPythonコードを実行する方法
4. サンプルコード：ブラウザでmatplotlibグラフを表示
1. サンプルコード
2. コード解説
5. 応用例：データ可視化や簡易Webアプリの作成
1. 応用例1：データ分析の可視化
2. 応用例2：インタラクティブなユーザー入力
6. まとめ

リンク

1. PyScriptとは？

PyScriptは、PythonコードをHTMLファイル内に直接埋め込み、Webブラウザ上で実行できるようにするためのライブラリです。

従来、PythonをWebで実行するためには、サーバーサイドでの処理が必要でしたが、PyScriptを使えば、HTMLファイル内にPythonコードを記述するだけで、JavaScriptのようにブラウザ側でPythonを実行できます。

PyScriptの主な機能

HTMLと統合：HTMLの中に直接Pythonコードを記述可能。
ライブラリサポート：matplotlibやpandasなどのPythonライブラリも使用可能。
ブラウザ内実行：特別な環境構築なしで、ブラウザだけでPythonスクリプトを動作させることが可能。

2. PyScriptの基本設定

PyScriptを使うためには、HTMLファイルの<head>タグ内にPyScriptのCSSとJavaScriptファイルを読み込む必要があります。

以下の2行をHTMLの<head>タグ内に追加しましょう。

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

これにより、HTMLファイル内でPyScriptの機能が使えるようになります。

リンク

3. WebブラウザでPythonコードを実行する方法

PythonコードをHTML内で実行するには、<py-script>タグを使用します。

このタグの間にPythonコードを記述することで、ブラウザ上でそのコードが実行されます。

以下は、基本的なHTMLの構造です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>PyScriptサンプル</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <h1>PyScriptでブラウザ上でPythonを実行</h1>
    <py-script>
        # Pythonコードをここに記述
    </py-script>
</body>
</html>

4. サンプルコード：ブラウザでmatplotlibグラフを表示

次に、PyScriptを使って、Pythonのグラフ描画ライブラリmatplotlibを用いてブラウザ上にグラフを表示する例を紹介します。

このサンプルでは、簡単な棒グラフを描画します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>PyScriptでmatplotlibグラフを表示</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <h1>PyScriptでmatplotlibグラフを表示</h1>
    <py-script>
        import matplotlib.pyplot as plt

        # データの設定
        names = ["A", "B", "C"]
        values = [10, 20, 15]

        # グラフ描画
        plt.bar(names, values)
        plt.xlabel("Category")
        plt.ylabel("Values")
        plt.title("Sample Bar Chart")
        plt.show()
    </py-script>
</body>
</html>

リンク

コード解説

<py-script>タグ：
このタグ内に記述したPythonコードは、Webブラウザ上で実行されます。
import matplotlib.pyplot as plt：
通常のPythonコードと同じように、matplotlibライブラリをインポートして使用します。
plt.bar()：
棒グラフを作成します。名前（カテゴリ）と値を指定しています。
plt.show()：
グラフを表示します。このコマンドで、Webブラウザ上にグラフが描画されます。

このコードを実行すると、Webブラウザに棒グラフが表示されます。

5. 応用例：データ可視化や簡易Webアプリの作成

PyScriptを使うことで、さらに高度なデータ可視化やWebアプリの構築も可能です。

以下は応用例のアイデアです。

応用例1：データ分析の可視化

pandasを使ったデータ処理を行い、その結果をmatplotlibで可視化してブラウザ上に表示できます。
データをCSVファイルから読み込んで、ブラウザ上でインタラクティブなグラフを生成することも可能です。

応用例2：インタラクティブなユーザー入力

HTMLの入力フォームと連携させ、ユーザーからの入力値を基にグラフを生成するWebアプリを構築できます。
JavaScriptのようにブラウザ上でリアルタイムに処理結果を表示することができます。

リンク

6. まとめ

今回は、PyScriptを使って、Webブラウザ上でPythonコードを実行する方法について解説しました。

HTMLファイル内に直接Pythonコードを書き込むことで、WebアプリにPythonの機能を組み込むことができ、データの可視化や簡易Webアプリの構築が簡単に行えます。

PyScriptはまだ開発中のプロジェクトですが、Web開発におけるPythonの可能性を広げる画期的なツールです。

今後も新しい機能が追加されることが期待されているため、興味がある方はぜひ試してみてください。

また、複雑なデータ可視化や、Webアプリケーション開発でのPythonの活用を目指して、PyScriptでさまざまなPythonライブラリと組み合わせてみましょう。