フェーズ 10 パッケージ化して Web で公開する

2 つのコマンドで HTML 1 枚にまとめ、GitHub Pages に置く

ゴール

完成した Candy Hunt を、インストールなしでブラウザから遊べる形にして公開します。これで step1 は完了です。

手順は step0 の Star Voyager でやったものと同じです。やり方そのものは step0 フェーズ 8 にくわしく書いてあるので、このページは手順を短くおさらいし、step1 で新しく出てくることだけを厚く扱います。

step1 で新しく出てくるのは、この 3 つだけです ① フォルダの中身が丸ごと公開される（余計なファイルが混ざっていないか）／ ② 音のあるゲームを Web に出すときの決まり（クリックするまで鳴らない）／ ③ 2 本目の作品をリポジトリに足すときのリンクの張り方。

1. 考え方

1-1. 2 つのコマンドが、何をしているか

pyxel package と pyxel app2html は、 フォルダ → 1 つのファイル → 1 枚の HTML と、順にまとめていくコマンドです。実際に step1 で実行して、できたファイルの中身と大きさを確かめました。

ゲーム本体は 6 KB ほど。絵も音もコードも、この 1 枚に入っています

HTML 1 枚で完結——ただし、ネットは必要です できた HTML の 1 行目は、こうなっています。

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

ゲーム（6 KB）は埋め込まれていますが、Pyxel 本体は毎回ネットから読み込みます。 だからオフラインでは動きません。そしてバージョンが 2.9.9 と書き込まれているので、あとで Pyxel を新しくしても、この HTML は作ったときのバージョンで動き続けます。

1-2. フォルダの中身は、全部そのまま公開される

pyxel package は、指定したフォルダの中身を丸ごと詰め込みます。「起動スクリプトと、それが読むファイルだけ」を選んでくれるわけではありません。

実際に step1 フォルダをパッケージ化したら、中身はこうなりました。

入ったもの	大きさ	これは？
`step1/candy_hunt.py`	10,190	ゲーム本体。当然入る
`step1/candy_hunt.pyxres`	589	絵と音。当然入る
`step1/.pyxapp_startup_script`	13	Pyxel が作るメモ。中身は `candy_hunt.py` という文字列だけ。どれで起動するかを記録している
`step1/tempCodeRunnerFile.py`	67	これは要りません。VS Code の拡張機能が作った一時ファイルです

身に覚えのないファイルが、そのまま世界に公開されます tempCodeRunnerFile.py は、動作には影響しません。ただし公開する HTML の中に、そのまま入って配られます。
試し書きのメモ、書きかけの別バージョン、他人からもらった素材—— そのフォルダに置いたものは全部ついていくと考えてください。 パッケージ化の前に、フォルダを見て掃除するのを習慣にします。
なお __pycache__ フォルダ（Python が自動で作る中間ファイル）は Pyxel が自動で除いてくれます。これは気にしなくて大丈夫です（実測で確認）。

.gitignore に書いてあっても、パッケージには入ります このリポジトリの .gitignore には、すでに tempCodeRunnerFile.py が書いてあります。それでもパッケージには入りました（実測）。
.gitignore は Git に対する「これは記録しなくていい」という指示であって、ファイルを消すものではありません。pyxel package は .gitignore をまったく見ていません。ディスクにあるものは、そのまま入ります。
「Git に無視させる」と「フォルダから消す」は別のこと—— ここは混同しやすいので、覚えておいてください。

1-3. 音のあるゲームを Web に出すときの決まり

ブラウザには、ユーザーが 1 度も操作していないページから音を出してはいけない という共通のルールがあります。広告が勝手に鳴り出すのを防ぐためのものです。

Pyxel はこれに合わせて、始める前に CLICK TO START をはさむ作りになっています。このクリックが「ユーザーの操作」になるので、そのあとは自由に音を鳴らせます。

この 1 クリックがあるおかげで、コードを書き換えずにそのまま公開できます

Candy Hunt は、たまたま Web と相性のよい作りになっています BGM を鳴らし始める pyxel.playm() は、フェーズ 9 で start_game() の中に置きました。 タイトル画面で Enter を押してから鳴り始めるということです。
Web で遊ぶ人から見ると、クリック → タイトル → Enter → 音が鳴ると進むので、音が出るころにはとっくに操作が済んでいます。 「操作してから音を鳴らす」設計は、そのまま Web でも安全という覚え方ができます。

2. 使うコマンド

コマンド	すること
`pyxel package APP_DIR STARTUP_SCRIPT`	フォルダを `.pyxapp` 1 つにまとめる。出力名はフォルダ名で決まる
`pyxel play FILE.pyxapp`	できた `.pyxapp` を手元で動かして確かめる
`pyxel app2html FILE.pyxapp`	`.pyxapp` を HTML 1 枚にする
`python -m http.server`	手元で Web サーバーを立てて、公開前の HTML を確かめる

出力名はフォルダ名で決まります pyxel package step1 step1/candy_hunt.py なら step1.pyxapp ができます（candy_hunt.pyxapp ではありません）。 1 つのフォルダに作品を 2 つ入れると名前がぶつかって上書きされます。くわしくは備忘録の 1 つのフォルダに複数の作品があるにまとめてあります。

3. 手順

3-1. フォルダを掃除する

まず step1/ の中を見て、ゲームに要らないファイルを消します。 .gitignore に書いてあるかどうかは関係ありません（上の警告のとおりです）。

step1/
├── candy_hunt.py         ← 要る
├── candy_hunt.pyxres     ← 要る
├── tempCodeRunnerFile.py ← 消す（VS Code の拡張が作った一時ファイル）
└── __pycache__/          ← 消さなくてよい（Pyxel が自動で除く）

3-2. パッケージ化する

リポジトリのいちばん上（step1 フォルダが見える場所）で実行します。

pyxel package step1 step1/candy_hunt.py

成功すると、追加されたファイルが 1 行ずつ表示され、 step1.pyxapp ができます。 ここに表示された一覧が、そのまま公開される中身です。目を通してください。

3-3. 手元で動かして確かめる

pyxel play step1.pyxapp

ブラウザにする前に、ここで必ず確かめます。 ここで動かなければ HTML にしても動きません。とくに pyxel.load("candy_hunt.pyxres") のパスが合っているかは、この段階で分かります。

3-4. HTML にする

pyxel app2html step1.pyxapp

step1.html ができます。

3-5. ブラウザで確かめる

python -m http.server

そのまま http://localhost:8000/step1.html を開きます。

HTML をダブルクリックで開いても動きません ファイルを直接開くと file:// という開き方になり、 ブラウザが wasm の読み込みを断ります。必ず python -m http.server 経由（http://）で開いてください。真っ黒のまま何も起きないときは、たいていこれです。

確かめること：

CLICK TO START をクリックしてタイトルが出るか
ゲーム画面を 1 度クリックしてから矢印キーで男の子が動くか（クリックしないとキー入力がページに届きません）
お菓子を取る音、お化けが増える音、BGM が鳴るか
捕まったときにジングルが鳴り、Enter でやり直せるか

3-6. 公開する場所へ置く

step1.html を docs/site/step1/candy_hunt.html という名前で置きます。 ファイル名がそのまま URL になるので、step1 ではなく作品名にします。

https://mrgarita.github.io/learning_pyxel/site/step1/candy_hunt.html

コピーではなく「移動」します pyxel app2html は、リポジトリの直下に step1.html を作ります。コピーで済ませると、直下にも 1 枚残ります。
.gitignore にある step1/*.html は step1 フォルダの中だけが対象なので、 直下の step1.html には効きません。そのままにすると、git status に毎回顔を出します。 移動して、直下には残さないのがいちばん簡単です。

解説ページと同じフォルダに置きます docs/site/step1/ には phase1.html 〜 phase10.html が並んでいます。そこに作品の HTML を 1 枚足す形です。 step0 も docs/site/step0/star_voyager.html と、同じ置き方をしています。

3-7. 全画面ボタンを足す

app2html が出す HTML には、全画面にする仕組みが入っていません。 F11 も効きません（Pyxel がキー入力を横取りするため）。ボタンを自分で足します。コードは備忘録の Web に公開した Pyxel 作品を全画面にしたい にあります。

HTML を作り直すたびに、足し直しになります pyxel app2html はまっさらな HTML を上書き出力します。手で足したボタンは毎回消えます。ゲームを直して公開しなおすたびに、この作業が発生する——ということを覚えておいてください。 先に docs/site/step1/ へ置いてから、そこで足すと混乱しません。

3-8. リンクを張る

2 か所です。step0 のときに作った並びに、1 行足す形になります。

トップページ（docs/site/index.html）の「作品を公開しています」に ▶ Candy Hunt をブラウザでみる を足す
step1 概要（docs/site/step1/index.html）から、遊べる場所へ案内する

3-9. コミットして公開を確かめる

step1.pyxapp と step1.html はリポジトリの外に置いたままにします （.gitignore に *.pyxapp を書いてあります）。コミットするのは docs/ の中に置いたほうです。

push して数分待つと、公開 URL で遊べるようになります。 古い内容が出るときは Ctrl＋F5 で強制再読み込みしてください。

4. うまくいかないときは

公開まわりのトラブルは、step0 フェーズ 8 の一覧がそのまま使えます。ここではstep1 で新しく出るものだけ挙げます。

症状	見るところ
公開した HTML に、身に覚えのないファイルが入っている	`pyxel package` はフォルダを丸ごと詰めます。掃除してからパッケージ化しなおします
`CLICK TO START` の前に音が鳴らない	仕様です。ブラウザは、操作されていないページから音を出しません
クリックしたのに、まったく音が鳴らない	① タブがミュートになっていないか（タブのスピーカーアイコン）。 ② `.pyxres` を保存してからパッケージ化したか。保存前の .pyxres を詰めていると、手元では鳴るのに Web で鳴りません
矢印キーで動かない	ゲーム画面を 1 度クリックします。ブラウザは、選ばれている場所にしかキー入力を送りません
`git status` に `step1.html` が出てくる	リポジトリ直下に残っています。`docs/site/step1/` へ移動したか確認します（`.gitignore` の `step1/*.html` は直下のファイルには効きません）
全画面ボタンが消えた	`app2html` をやり直したためです。手で足し直します（3-7）
ゲームを直したのに、公開版が古いまま	package → app2html → 置きなおすの 3 つを全部やり直す必要があります。 `.py` を直しただけでは公開版は変わりません

5. step1 をふりかえる

10 フェーズで、1 本のゲームが最後まで通りました。身についたことを並べておきます。

フェーズ	できるようになったこと
1・2	ドット絵を描いて動かす。絵はコードではなくエディタで作る
3	当たり判定と乱数。関数に切り出して戻り値を返す
4	スコアの表示。数を覚えておく変数
5	追いかける動き。相対位置による場合分け
6・7	画面遷移。状態を変数で持ち、処理を振り分ける
8	リストで複数を管理する。`class` の使いどころ
9	音。チャンネルの割り当て、鳴らすタイミングの設計
10	公開。人に遊んでもらえる形にする

いちばん大きいのは「手ざわり」を直せるようになったこと 当たり判定を 4 に縮め、お化けの速さを動く回数で調整し、出現時に点滅させ、音を重ならないように鳴らし分ける—— どれも「動く／動かない」ではなく、「気持ちいい／気持ちよくない」の調整です。 step1 で時間をかけたのは、ほとんどここでした。

6. 次の step

step2 は「倉庫番」です。10 ステージ制とタイトル画面をつけます。 step1 と大きく変わるのは、次の 2 点です。

ステージのデータを持つ … 壁・荷物・ゴールの配置を書いたデータを用意し、それを読んで画面を組み立てます。プログラムとデータを分けるという考え方が入ります
動けるかどうかを先に調べる … 押した先に壁があれば動けません。「動かしてから判定」ではなく「動かす前に判定」に変わります

step1 で作った土台——シーンの切り替え、当たり判定、リストでの管理、音の鳴らし分け——は、 そのまま step2 でも使います。