Python Code Playground をつくりました

Webブラウザ上でPythonのコードを実行できる Python Code Playground をつくりました。

技術的には Pyodide と Monaco Editor を使用しており、GitHub Copilot の力を借りて制作しました。
(最近のLLMは、やりたいことを伝えるだけで大体動くコードを作ってくれるのでとても便利です。)

制作の動機

本ブログ内でPython関連の記事を書く際に、簡単に試せる実行環境があると便利だなと思い制作しました。

ブラウザ上で動作するPython実行環境としては、JupyterLabの軽量版であるJupyterLite などが存在しますが、埋め込みで利用しやすいものが見当たらなかったため自作しました。

主な機能紹介

1. パッケージインストール

   • Pyodideに導入済みのパッケージを追加できます。
     (例: numpy, matplotlib, gensim, openai, pandas, polars, scikit-learn, …)
   • PyPIからのインストールも可能です。
     (Python純正パッケージ等のPyodideにインストール可能なパッケージに限ります)
   • インストールしたパッケージは画面下部のステータスバーに表示されます。

2. ファイルアップロード機能

   • ローカルまたはURLからファイルを読み込み、実行環境上にアップロードできます。
   • CSVファイルを読み込んでpandasでデータ分析を行うことなどが可能です。

3. スクリプト読み込み機能

   • ローカルまたはURLからPythonスクリプトを読み込み、エディタに表示することができます。
   • URLパラメータに codeUrl=<url> を追加することで、指定したURLのコードをエディタに表示します。

4. URL共有機能

   • コードやインストールパッケージ等の設定を記録したURLを共有することができます。
     同じURLを開くことでプログラムを実際に実行して試すことができます。

5. 実行環境に関する細かい調整

   • デフォルトでは起動時にPython実行環境をプリロードしておき、実行ボタンを押してから結果が表示されるまでの時間を短縮しています。
   • 動作を軽くするため、デフォルトでは実行毎に環境をリセットせず引き継ぐ仕様になっていますが、
     毎回自動でリセットする設定も可能です。

6. シンタックスハイライトやコード補完などのリッチな機能を備えたテキストエディタを搭載

   • Monaco Editorを使用しているため、エディタが高機能です。

7. インラインモードでブログ記事への埋め込みに対応

   • mode=inline でエディタ+実行結果ウィンドウを全画面表示するインラインモードに設定可能。
   • このモードを用いて、以下のように簡単にPython実行環境を埋め込みできるようになりました。

8. Matplotlibのグラフ表示にも(一応)対応

   • Matplotlibのグラフ表示にも一応対応させています。
     少し強引に対応させているので、正しく動かない可能性があります。
     (本格的に対応させる際は@jupyterlab/outputareaを使用するのが良さそうです)

各ボタンの紹介

• 実行ボタン
  • 入力されたコードを実行します。実行結果はコンソールウィンドウに表示されます。
• リセットボタン
  • Python実行環境(Pyodide)をリセット(初期化)します。
• レイアウト切替ボタン
  • コードエディタと実行結果の表示レイアウトを縦分割/横分割で切り替えます。
• ファイルボタン
  • スクリプトを開く
    • ローカルにあるスクリプトファイルをエディタに読み込みます
  • スクリプトを開く(URL)
    • 指定したURLのコードをエディタに読み込みます
  • スクリプトを保存
    • エディタ上のコードをローカルに保存します
  • 共有用URLをコピー
    • コードの内容やインストールパッケージ等の設定を記録したURLをコピーします
  • データをアップロード
    • プログラムで使用するデータファイルをアップロードします
• 設定ボタン
  • コード補完
    • エディタのコード補完を有効化します
  • Enterで補完候補を確定
    • 上記コード補完で表示される候補をEnterで確定します
  • 行番号
    • エディタの行番号を表示します
  • 環境を毎回リセット
    • コード実行後に毎回実行環境(Pyodide)をリセットします
      (リセットを行わない場合、変数情報等が引き継がれます)
  • 起動時に初期化しない
    • 本アプリはデフォルトで起動時に実行環境をプリロードしますが、
      この設定をオンにするとその動作を無効化します
  • テーマ
    • システム、ダーク、ライトの3種類からテーマを選択します
  • フォントサイズ
    • エディタのフォントサイズを設定します
  • タブサイズ
    • インデントのサイズを設定します
  • レイアウト
    • コードエディタウィンドウと実行結果ウィンドウの位置関係を設定します
  • パッケージをインストール
    • Pythonのパッケージをインストールします
  • デフォルトに戻す
    • すべての設定をデフォルトに戻します