Pyxel Webの利用
あなたが作ったゲームを誰かに遊んでもらおうと思ったとき，「相手にソースファイル一式を渡してPythonプログラムを実行してもらう」よりも簡単な方法がPyxelに用意されています。本記事ではPyxelで作成したゲームをWebブラウザで実行できる形式（HTMLファイル）に変換する手順を紹介します。
【公式サイトwiki】
How To Use Pyxel Web (日本語) · kitao/pyxel Wiki · GitHub
Wikiに3通りのPyxel Web利用方法が記載されています。今回はその2番目の「Pyxel アプリを HTML ファイルに変換する」を使います。（GitHubで公開する場合は1番目の方法を読んでください）
変換手順
HTMLファイルへの変換には，二段階の手順で行います。
- Pyxelアプリケーションファイル (.pyxapp) の作成
- PyxelアプリケーションファイルからHTMLファイルへの変換
※アプリケーションフォルダの内容が1つのHTMLファイルに変換されるイメージです。
01 Pyxelアプリケーションファイル (.pyxapp) の作成
【作成手順】
(1) 作成したゲームのソースコードとリソースファイルをアプリケーションフォルダに配置します。例では作業フォルダを mygame とし，作業フォルダの中にアプリケーションフォルダ mystg があるとします。
(2) コマンドラインからアプリケーションファイル作成コマンドを実行します。
（※Windows環境ではPyxelエディタ起動のコマンドと同じPowerShellウィンドウで実行できます。エクスプローラー上でmygameフォルダの何もない所をShiftキーを押しながら右クリックしてメニューからPowerShellウィンドウを開きましょう）
＜コマンド内容＞
pyxel package アプリケーションフォルダ 起動スクリプトファイル
起動スクリプトファイルには，アプリケーションフォルダ内にあるメインとなる.pyファイルを指定します。次の例で mystg\stg_main.py のようにフォルダ名も付けていることに注意してください。※フォルダとファイル名の区切り「\ バックスラッシュ」はWindows環境では「￥ 半角の円マーク」で入力・表示します。（/ 半角のスラッシュを使って区切ってもよいです）
＜PowerShellウィンドウでの実行例（入力は赤文字箇所）＞
PS C:\mygame> pyxel package mystg mystg\stg_main.py
added 'mystg\.pyxapp_startup_script'
added 'mystg\effects.py'
added 'mystg\enemies.py'
added 'mystg\player.py'
added 'mystg\sample.pyxres'
added 'mystg\sound.py'
added 'mystg\stages.py'
added 'mystg\stg_main.py'
(3) コマンド完了後，作業フォルダにアプリケーションファイルが作られていることを確認します。例では mystg.pyxapp が作成されました。
02 PyxelアプリケーションファイルからHTMLファイルへの変換
【変換手順】
(1) 作業フォルダでコマンドを実行します。
＜コマンド内容＞
pyxel app2html アプリケーションファイル名
＜PowerShellウィンドウでの実行例（入力は赤文字箇所）＞
PS C:\mygame> pyxel app2html mystg.pyxapp
(2) コマンド完了後，作業フォルダにHTMLファイルが作られていることを確認します。例では mystg.html が作成されました。
※元になったアプリケーションファイルも残ります。
ゲームを動かす（HTMLファイルをWebブラウザで開く）
エクスプローラー上でHTMLファイルをダブルクリック（または選択してEnterキーを押す）すると，Webブラウザが起動してページが表示されます。
※Webブラウザ内でPythonを動かす仕組みのために，インターネットに接続できる必要があります。
Pyxelロゴに続けてCLICK TO STARTが表示され，画面をクリックするとゲーム画面が表示されます。
このHTMLファイルを他のPCにコピーすれば，Pythonをインストールしていない環境でもゲームを遊ぶことができます。
【参考】 カレントディレクトリ，親ディレクトリ
※「フォルダ」のことを「ディレクトリ」ともよびます。
本記事のHTMLファイルへの変換手順では，アプリケーションフォルダの上のフォルダでコマンドを実行しました。アプリケーションフォルダでコマンドを実行するときは，次のようになります。
＜PowerShellウィンドウでの実行例（入力は赤文字箇所）＞
PS C:\mygame> cd mystg
PS C:\mygame\mystg> pyxel package . stg_main.py
added 'mystg\.pyxapp_startup_script'
added 'mystg\effects.py'
added 'mystg\enemies.py'
added 'mystg\player.py'
added 'mystg\sample.pyxres'
added 'mystg\sound.py'
added 'mystg\stages.py'
added 'mystg\stg_main.py'
PS C:\mygame\mystg> pyxel app2html mystg.pyxapp
・PowerShellウィンドウ（使用アプリによってはコンソール，ターミナル）では，「今いる場所」がコマンド実行場所（作業ディレクトリ）です。
・cdコマンド（chdir チェンジディレクトリの短縮コマンド）でフォルダを移動（作業ディレクトリを変更）します。上の例の2行目（cd mystg 実行後の行）コマンドプロンプト ">" の前の「今いる場所」の表示が mystg に変わっています。
・今いる場所のことはカレントディレクトリともよばれます。コマンド実行時にカレントディレクトリを示す記号が「. ピリオド（ドット）」です。上の例の2行目 pyxel package . stg_main.py ではアプリケーションフォルダの所の入力内容はドットでカレントディレクトリを指定しています。
・あるディレクトリに着目したとき，1つ上の階層のディレクトリが親ディレクトリとよばれます。例で言えば，mystg から見ると1つ上の mygame が親ディレクトリになります。親ディレクトリはドットを2つ続けて「..」（ドット-ドット）で表します。
＜cdコマンドで1つ上のディレクトリに移動する例＞
PS C:\mygame\mystg> cd ..
PS C:\mygame>
こういった内容はプログラミングやWebページの作成でファイルの場所（ファイルパス）を示すのに必要な知識になります。（カレントディレクトリのファイルを「./stg_main.py」と表記したり，親ディレクトリにある別のフォルダを「../lib」と表記したりします）
