「ZIPのどこにindex.htmlを置けばよいですか」：フォルダ構成の正解

「直下」と「サブフォルダ」は何が違うのか

ZIPは、ファイルとフォルダの入れ物です。開いたときに最初に見える階層が「直下」です。

• 直下にindex.html、ZIPを開いたときの見え方：index.htmlとcss・js・imgなどが並ぶ、案内との関係：案内どおりの形です
• フォルダで包んだ、ZIPを開いたときの見え方：mygameというフォルダ1つだけが見え、その中にindex.htmlがある、案内との関係：「直下のindex.html」には当てはまりません。扱いは現在の案内か、表示の確認で確かめます
• 素材だけサブフォルダ、ZIPを開いたときの見え方：index.htmlは直下、素材はimg/などの中、案内との関係：問題ありません。素材は相対パスで指します

押さえておきたい区別は、「index.htmlの位置」と「素材の位置」は別の話だということです。入口は直下に1つ置きます。素材はサブフォルダに整理して構いません。ただし、index.htmlから見た相対パスで書く必要があります。

関連する確認済みの制限もあります。ZIPは20MiB以内、展開後は合計100MiB・1,000ファイル以内、1ファイルは30MiB以内です。サーバー用コード、サービスワーカー、SharedArrayBufferを使うマルチスレッドは対象外です。構成を直しても、これらに当たれば投稿できません。

試験用のミニ作品を作る

構成の違いだけを見るために、小さな試験用作品を用意します。ねらいは、入口のHTMLが開くこと、CSSが効くこと、JavaScriptが動くこと、画像が出ること、の4つを画面上で別々に判定できるようにすることです。

mytestというフォルダを作り、次のファイルを入れます。

mytest/index.html

<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><title>構成テスト</title>
<link rel="stylesheet" href="css/style.css"></head>
<body>
<h1 id="t">index.html は読み込めました</h1>
<p id="js">JS: 未実行</p>
<img src="img/dot.svg" alt="緑の丸" width="48" height="48">
<script src="js/main.js"></script>
</body></html>

mytest/css/style.css

h1 { color: #c0392b; }

mytest/js/main.js

document.getElementById("js").textContent =
  "JS: js/main.js が実行されました";

mytest/img/dot.svg

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><circle cx="24" cy="24" r="20" fill="#2a7"/></svg>

判定の目印は次のとおりです。

• 見出しの文字が出れば、index.htmlが入口として開いています。
• 見出しが赤ければ、CSSが読めています。
• 「JS: js/main.js が実行されました」と出れば、スクリプトが読めています。
• 緑の丸が出れば、画像が読めています。

この4つのうち、どれが欠けたかで原因を切り分けられます。

ZIPを3通り作って、表示の確認で見比べる

問いと条件

問いは「index.htmlの位置と素材の指し方を変えると、表示の確認の画面はどう変わるか」です。作る構成は3つです。

1. 構成1（直下に入口）：mytestフォルダの中身を選んで圧縮します。ZIPを開くと、index.html、css、js、imgが並びます。
2. 構成2（フォルダで包む）：mytestフォルダごと圧縮します。ZIPを開くと、mytestフォルダが1つだけあります。
3. 構成3（ルート始まりのパス）：構成1をもとに、index.html内のimg/dot.svgを/img/dot.svgに書き換えます。先頭の/は「サイトの一番上から」という意味の絶対パスです。作品がどの場所から配信されるかによって、指す先が変わる書き方です。

ZIPの作り方

ターミナルが使える場合は、次のコマンドが確実です。

cd mytest
zip -r ../A-root.zip .
unzip -l ../A-root.zip

1行目でmytestの中に入り、2行目で、その中身をそのまま圧縮します。3行目はZIPの一覧表示です。一覧の最初のほうにindex.html、css/style.cssのように、先頭にフォルダ名のないパスが出ていれば直下です。

構成2は、mytestの1つ上の階層でzip -r B-wrapped.zip mytestを実行すると作れます。一覧のパスがmytest/index.htmlのように始まっていれば、包まれた状態です。

ターミナルを使わない場合は、エクスプローラーやFinderでmytestを開き、中のファイルとフォルダをすべて選んでから圧縮します。フォルダ自体を選ぶと、構成2になります。ZIPを作ったら、いったん開いて、最初に見える階層にindex.htmlがあるかを目で確かめてください。

記録の取り方

各構成を、投稿画面の「入力→表示の確認→公開」のうち、「表示の確認」まで進めます。公開はしません。その時点で次の項目を記録します。

• 構成名、書き方：構成1／2／3
• 入力段階の反応、書き方：エラー表示の有無。出たら文言をそのまま写す
• 見出し、書き方：出た／出ない
• 見出しの色、書き方：赤／黒
• JS行、書き方：実行された／未実行のまま
• 緑の丸、書き方：出た／出ない

回数は、各構成で最低1回です。結果が意外だったときだけ、同じZIPをもう1回上げて再現するかを見ます。アップロードには、1人あたりUTC1日10回という上限があります。UTCは日本時間の午前9時で日付が切り替わります。3構成を各2回で6回です。本番用の投稿に使う分を残すため、試験は上限の半分程度に収めると安心です。途中で保存した下書きや確認用の投稿が残った場合は、案内にある非公開化や削除で整理できます。

結果の読み方

• 構成1で4項目すべてがそろう：直下に入口を置き、素材をサブフォルダで相対パスにする形が、そのまま通っています。本番はこの形を基準にします。
• 構成2で見出しが出ない、またはエラーになる：「直下」という案内のとおり、包んだZIPは入口として扱われていないと読めます。ZIPを作り直します。
• 構成2でも4項目がそろう：取り込み時に包みが吸収されている可能性があります。ただし、案内に書かれていない挙動です。将来の仕様変更や別の経路で変わるかもしれないので、本番は構成1の形で作ってください。
• 構成3で緑の丸だけが出ない：入口は開き、/始まりのパスだけが合っていません。相対パスに直します。
• 構成3でも緑の丸が出る：今回の配信条件でたまたま届いただけかもしれません。他の環境へ持ち出すと崩れやすい書き方なので、直しておくのが無難です。

起こりやすい誤り

• 圧縮するときにフォルダごと選んでしまう：ZIPを作った直後に、開いて最初の階層を見る習慣をつけると防げます。一覧確認のコマンドも有効です。
• index.htmlの名前が違う：Index.htmlやindex.htm、top.htmlでは、入口の指定とずれます。多くの環境でファイル名の大文字小文字は区別されるので、小文字のindex.htmlにそろえます。
• 素材のパスの大文字小文字が合っていない：自分のパソコンでは動いても、環境が変わると見つからなくなることがあります。Img/Dot.svgとimg/dot.svgは別物と考えて書きます。
• ルート始まりのパスを使う：前述のとおり、配信場所に依存します。img/dot.svgや./img/dot.svgのように書きます。
• サーバー用のコードやサービスワーカーを同梱する：構成が正しくても、対象外の機能は使えません。外部通信が必要な作りも含めて、設計から見直します。
• ZIPの中に不要なファイルを入れる：制作中のメモや使わない大きな素材は、ファイル数・容量の上限を圧迫します。投稿用のフォルダは、完成品だけにします。
• 1つのZIPに複数の作品を入れる：入口は直下のindex.html1つです。作品ごとにZIPを分けます。

公開前に確認しておくこと

ここまでは、案内に書かれた範囲と、手元で確かめられる範囲です。次の点は、この記事では答えを出していません。

• 包んだZIPが受理されるか、エラーになるか、どう扱われるか
• エラー表示の具体的な文言や、対処のガイド
• 公開済み作品を更新するときの構成の扱い

これらは、現在の投稿画面の案内で確認してください。公開にはメールアドレスの確認が必要です。また、公開内容の更新、非公開化、削除はあとから行えるので、入口の位置を取り違えても直す道はあります。

次の行動

試験用のmytestを作り、構成1と構成2のZIPを用意して、投稿画面の「表示の確認」で見出し・色・JS・画像の4項目を記録してください。そのうえで、自分の作品のZIPも、開いて最初の階層にindex.htmlがあることを確かめてから投稿してください。構成2の結果が基準と違っても、本番は直下に置く形で作れば確実です。