今回の完成形と前提
第09回で確かめた星あつめを、公開候補のZIPにまとめました。元は第08回のHTML/CSS/JavaScriptと同じゲームです。30秒で10個、停止と再挑戦、画像・任意の音・フォントを変えず、READMEだけ今回の説明へ更新しています。今回は外部サービスにゲームを投稿しません。
第10回の公開候補ZIPを保存 · 同じ公開候補を別画面で確認
公開場所を選ぶ
この講座はブラウザで遊ぶ形を主ルートにします。ゲームの紹介ページとブラウザ実行を一緒に用意したい場合はitch.io、静的なファイルを自分のページとして置きたい場合はGitHub Pagesなどが候補です。Steamやアプリストアへ話を広げず、まずHTML/CSS/JavaScriptを置ける場所を選びます。
itch.ioの公式HTML5資料は、複数ファイルのゲームをZIPにし、入口のindex.htmlと必要な素材を入れるよう案内しています。GitHub Pagesの公式手順はリポジトリと公開設定を使います。今回これらのアカウント作成・アップロード・公開設定は行っておらず、投稿画面の実操作を完了したとは扱いません。
必要なファイルをZIPにする
前回までのサンプルを別の作業フォルダーへコピーし、次の7ファイルをそろえます。今回のZIPは、開いてすぐindex.htmlが見える構成です。フォルダー自体を包んで入口が一段奥に入っていないか確かめてください。
10-package.zip
├ index.html
├ style.css
├ script.js
├ star.svg
├ noto-title.ttf
├ OFL.txt
└ README.txtWindowsなら7ファイルを選び、圧縮してZIPにする操作を使います。メニュー名はWindowsの版で異なるため、出来上がったZIPを開いて構成を確かめます。この実行では7ファイル・展開後43,432バイト、入口が直下にあることを確認しました。これは非圧縮の内容サイズで、通信速度の測定ではありません。
<!-- index.html：先頭に / を付けない相対パス -->
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- CSS内の素材も同じフォルダーの名前と一致させる -->ファイル名の大文字・小文字と参照先を一致させます。自分のPCだけで通る絶対パスにしないでください。OFL.txtは「ゲームが動くか」だけを見ると忘れがちですが、同梱フォントの条件を残すために必要です。
展開して動作を確認する
- ZIPを保存し、元とは別の空フォルダーへ展開します。
- 展開先のindex.htmlをブラウザで開きます。画像とフォントが読み込めるか確認します。
- 「ゲームを始める」、左右操作、Escapeの停止、「最初からやり直す」を試します。
- Consoleのエラーと、失われたファイルがないか確認します。公開先のサブフォルダーでも同じ相対パスが使える構成にします。
今回の公開候補は開始・停止・リセットを確認し、ZIPの中身は元の6ファイルとハッシュが一致しました。READMEだけ変更しています。自作コード・星・READMEはCC0、Noto Sans JPは同梱のOFL 1.1です。文字限定版を日本語全体に対応するフォントとして配布していません。
次へ引き継ぐのは、このZIPと、確認したこと・未確認のことのメモです。2026年10月15日確認。外部投稿先での起動、スマホ実機、直接試聴、全ルートの人によるクリアは未確認。次は第11回「紹介文・画像からゲームへつなぐ」を読めます。全12回の目次へ戻れます。