Skip to content

Latest commit

 

History

History
152 lines (98 loc) · 7.23 KB

pyxel-web-ja.md

File metadata and controls

152 lines (98 loc) · 7.23 KB
Raw

Web 版 Pyxel の使い方

Web 版 Pyxel を使うと Python や Pyxel をインストールせずに、PC、スマートフォン、タブレット等の Web ブラウザーで Pyxel のアプリケーションを実行できます。

Web 版 Pyxel の利用方法には、次の 3 種類があります。

  • Pyxel Web Launcher に GitHub リポジトリを指定する
    Pyxel Web Launcher の URL に GitHub のリポジトリ名を指定すると、指定したリポジトリを直接読み込み、Web ブラウザ上でアプリを実行できます。アプリを GitHub で公開している場合、最も簡単な実行方法です。

  • Pyxel アプリを HTML ファイルに変換する
    アプリが Pyxel アプリケーション形式 (.pyxapp) になっている場合は、pyxel app2htmlコマンドを使って HTML ファイルに変換できます。変換後の HTML ファイルはサーバーを必要とせず、単体で実行可能です。

  • Pyxel カスタムタグを使って HTML ファイルを作成する
    Pyxel 専用のカスタムタグを使用して、アプリ実行用の HTML ファイルを作成します。作成した HTML ファイルはサーバーでホスティングする必要がありますが、既存の HTML ページへの組み込みやカスタマイズが可能です。

それぞれの利用方法について説明します。

Pyxel Web Launcher に GitHub リポジトリを指定する

Python コードや Pyxel アプリ (.pyxapp) が GitHub 上で公開されている場合、Pyxel Web Launcher を使用して直接実行できます。

Pyxel Web Launcher の URL 書式は以下の通りです。

https://kitao.github.io/pyxel/wasm/launcher/?<コマンド>=<githubのユーザー名>.<リポジトリ名>.<アプリのディレクトリ>.<拡張子を取ったファイル名>

コマンドには次の３つが指定できます。

  • run: Python スクリプトを実行する (別ファイルやディレクトリのインポートは不可)
  • play: Pyxel アプリを実行する
  • edit: Pyxel Editor を起動する

例えば、ユーザー名がtaro、リポジトリ名がmy_repo、ファイルのディレクトリがsrc/scenes、Python スクリプトがtitle.pyの場合は、URL は以下のようになります。

https://kitao.github.io/pyxel/wasm/launcher/?run=taro.my_repo.src.scenes.title

runコマンドでは、Web の仕様上の制約により、ローカルの別ファイルやディレクトリをインポートすることができないのでご注意ください。

dist/gamesにあるshooter.pyxappを実行する場合の URL は次の通りです。

https://kitao.github.io/pyxel/wasm/launcher/?play=taro.my_repo.dist.games.shooter

runおよびplayコマンドには、バーチャルゲームパッドを有効にするgamepad属性や、追加パッケージを指定するpackages属性を指定することが可能です。

例えば、バーチャルゲームパッドを有効にし、追加パッケージとして NumPy と Pandas を使用する場合は、次のような URL になります。

https://kitao.github.io/pyxel/wasm/launcher/?run=taro.my_repo.src.scenes.title&gamepad=enabled&packages=numpy,pandas

なお、追加できるパッケージはPyodide 対応パッケージに限られます。

editコマンドを使用する場合、editor属性で Pyxel Editor の起動画面を指定できます。

例えば、assetsディレクトリにあるshooter.pyxresファイルをタイルマップエディタ画面で起動するには、以下の URL を使用します。

https://kitao.github.io/pyxel/wasm/launcher/?run=taro.my_repo.assets.shooter&editor=tilemap

Pyxel Web Launcher ページで必要な情報を入力して、アプリの起動 URL を自動作成することも可能です。

Pyxel アプリを HTML ファイルに変換する

Pyxel アプリケーションファイル (.pyxapp) は、次のコマンドで単独で動作する HTML ファイルに変換できます。

pyxel app2html your_app.pyxapp

作成された HTML ファイルでは、バーチャルゲームパッドがデフォルトで有効になっていますが、カスタムタグを編集することで無効にすることも可能です。

Pyxel カスタムタグを使って HTML ファイルを作成する

HTML ファイルに Pyxel 専用のカスタムタグを記述することで、Pyxel アプリを実行できます。

Pyxel カスタムタグを利用するには、以下のスクリプトタグを HTML ファイルに追加します。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>

Python コードを直接実行するには、次のようにpyxel-runタグのscript属性にコードを記述します。

<pyxel-run
  script="
import pyxel
pyxel.init(200, 150)
pyxel.cls(8)
pyxel.line(20, 20, 180, 130, 7)
pyxel.show()
"
></pyxel-run>

外部の Python ファイルを読み込んで実行する場合は、pyxel-runタグにrootとname属性を指定します。

rootは検索の起点となるディレクトリ、nameはファイルパスです。

例えば先ほどのコードをtest.pyというファイルに保存し、HTML ファイルと同じディレクトリに配置した場合、次のように記述します。

<pyxel-run root="." name="test.py"></pyxel-run>

rootがカレントディレクトリの場合(root=".")、root属性は省略可能です。

ローカルの HTML ファイルから外部ファイルを読み込むにはサーバーでのホスティングが必要です。

Python 環境があれば、次のコマンドで簡易サーバーを起動できます。

python -m http.server
# MacやLinuxの場合はpython3を使用してください

サーバー起動後、ブラウザでhttp://localhost:8000/test.htmlにアクセスできます。

同様に、Pyxel アプリ(.pyxapp)はpyxel-playタグで実行できます。

<pyxel-play
  root="https://cdn.jsdelivr.net/gh/kitao/pyxel/python/pyxel/examples"
  name="megaball.pyxapp"
></pyxel-play>

この例では、root属性に URL を指定しています。

pyxel-runタグとpyxel-playタグには、バーチャルゲームパッドを有効にするgamepad属性や、追加パッケージを指定するpackages属性を指定できます。

例えば、バーチャルゲームパッドを有効にし、NumPy と Pandas を使用する場合は次のようになります。

<pyxel-run name="test.py" gamepad="enabled" packages="numpy,pandas"></pyxel-run>

使用できるパッケージはPyodide 対応パッケージに限られます。

また、pyxel-editタグを使って Pyxel Editor を起動できます。

例えば、assetsディレクトリにあるshooter.pyxresファイルをイメージエディタ画面で起動するには、次のように記述します。

<pyxel-edit root="assets" name="sample.pyxres" editor="image"></pyxel-edit>