この記事の目次 開く・閉じる
今回の仕上がりは、こんな感じ
「星あつめ｜準備完了」の画面に色が付き、「動作を確認」を押すと「準備OK！」に変わります。下はZIPを実際にダウンロードし、展開後のHTMLをPCブラウザで開いた画面です。サイト上のプレビューと、手元のファイルを開いた確認を分けて試しました。
まだ受け皿は動かず、星も落ちません。この回では、ゲームを作り始める前にファイルの読み込みを確かめます。
必要なものは？ 保存先はどこにする？
今回はPC、ブラウザ、ZIPを展開する方法が必要です。登録や有料サービス、ゲームエンジンのインストールは使いません。コードを書くためのテキストエディタは前回の説明を引き継ぎますが、今回は配布ファイルをそのまま開いて確認します。
第02回のファイルを残したまま、第03回用の新しいフォルダーに保存します。star-collector-03のように回を区別すると、後から前の状態へ戻りやすくなります。ZIPの中身は次の4ファイルです。
star-collector-03/
index.html
style.css
script.js
README.txtHTMLは画面の内容、CSSは色と配置、JavaScriptはボタンを押した後の動作です。READMEには開き方と、このサンプルの利用条件を記しています。
保存・展開・ブラウザ表示を順に確かめる
- 上の「第03回のZIPを保存」を押します。ブラウザのダウンロード一覧で
03-setup.zipを確認します。保存先を変更した場合は、その場所を控えます。 - ZIPを新しいフォルダーへ展開します。ZIPの中のHTMLだけを直接開くのではなく、CSSとJavaScriptも一緒に取り出します。Windowsでは、下のPowerShellの例で展開できます。
- 展開した
index.htmlをブラウザで開きます。ダウンロード元のプレビューではなく、手元のファイルを開いたときはアドレスがfile:///で始まります。 - 背景が濃い青、ボタンがミント色になったらCSSの読み込みを確認できます。次に「動作を確認」を押します。
- 「JavaScriptの確認：ボタンが動きました。準備OK！」と出たら成功です。Tabでボタンへ移動し、Enterで押す操作も今回確認しました。
- 再読み込みすると「まだ押していません。」へ戻ります。この準備画面には、クリック結果を保存する機能は入れていません。
Windowsでの展開コマンド
次の例はZIPが「ダウンロード」にある場合です。PowerShellへ一行ずつ入れます。保存先が違う場合は$setupZipのパスを直してください。展開先に同名フォルダーがあると止まり、既存の作業を上書きしません。
$setupZip = Join-Path $env:USERPROFILE "Downloads\03-setup.zip"
$setupDir = Join-Path $env:USERPROFILE "Documents\star-collector-03"
if (Test-Path -LiteralPath $setupDir) { throw "別の新しいフォルダー名に変えてください" }
Expand-Archive -LiteralPath $setupZip -DestinationPath $setupDir
Get-ChildItem -LiteralPath $setupDir | Select-Object Name
Start-Process (Join-Path $setupDir "index.html")編集側ではダウンロード済みZIPを新しい確認用フォルダーへ展開し、同じ4ファイルが出ることを確かめました。その後、展開したHTMLをブラウザで開いて操作しています。上のコマンドの個人フォルダー名は説明用で、読者のPCの保存先までは確認できません。
拡張子は、ファイル名のどこ？
index.htmlの.htmlが拡張子です。index.html.txtという名前になっていると、HTMLとして開けない場合があります。上のGet-ChildItemで表示する名前には拡張子も含まれるので、3つの名前をそのまま見比べてください。
配布HTMLは同じフォルダーのCSSとJavaScriptを、次の2行で読み込んでいます。途中でCSSだけ別のフォルダーへ移すと、その場所では見つからなくなります。
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>次回からエディタで変更するときは、名前と拡張子を保ち、文字コードをUTF-8にして保存します。保存後にブラウザを再読み込みすると、そのファイルの変更を確認できます。今回はエディタごとの保存ダイアログは実操作していないため、各アプリの画面は載せていません。
文字だけ出る、ボタンが動かない。どこを見る？
背景が白く、ボタンに色がない
まずstyle.cssがHTMLと同じフォルダーにあるか、名前がstyle.css.txtになっていないかを見ます。HTML内のhrefと実際の名前が一致することも確認してください。
色は付くのに、押しても文言が変わらない
script.jsの場所と名前を確かめます。今回はクリック前と後で文言が変わるので、変化がなければJavaScriptの読み込みや実行を確認する場面です。押せない理由を「ブラウザの故障」と決めつけず、3ファイルの名前から見直します。
このままWebへ公開したことになる？
手元のファイルを開いただけでは、他の人はその画面にアクセスできません。公開場所と公開用データは第10回以降で扱います。今は自分のPCで確認できれば十分です。
次回へ持っていくもの
第01回の企画シートと、今回保存した3ファイルを残します。題材は同じ「星あつめ」。30秒以内に10個、左右に動く受け皿、失敗したら再挑戦という方針は変えません。第04回では動く試作品を作ります。敵・ショップ・ログイン・ランキング・オンライン対戦は追加しません。
前回02：道具と3つのファイル · 次回04：動く試作品 · 全12回の目次。第04回は公開済みです。
出典・利用条件・確認した範囲
ファイルを開く考え方はMDNのHTML入門、ZIPの展開はMicrosoftのExpand-Archive公式資料を参照しています。-Forceによる上書きは使っていません。
2026年10月6日に、ZIP保存・展開・PCのローカルHTML表示・クリックとEnter・再読み込みを確認しました。記事とサンプルのスマホ表示は確認対象ですが、スマホだけで開発する手順、各OSのファイル管理画面、外部公開、完成ゲームは未検証です。画面は実際のブラウザ表示で、AI生成画像ではありません。
サンプルのHTML・CSS・JavaScriptとREADMEはみっけメディア制作で、CC0として提供します。外部素材を借りていない準備画面です。第三者のツール・素材・講座本文までCC0になるわけではありません。