# 見せっこラボ 作品の制作仕様

> 見せっこラボ(misekkolabo)に投稿する作品を、AIツールで作るときの仕様です。この文書をそのままAIに渡し、「この仕様に沿って作って」と頼んでください。人向けの解説は /submit/guide、投稿のルールは /submit/guidelines にあります。

## 作品の形式

- ブラウザだけで動く静的なファイル(HTML・JavaScript・CSS・画像・音声・フォントなど)で作る
- サーバー側のプログラム(PHP・Python・Node.js のサーバー・データベース)は使えない。ファイルはそのまま配信されるだけ
- 最初に開くファイルは `index.html`。サブフォルダを使ってよい(フォルダの構成は保たれる)
- ファイルの参照は相対パスで書く(例: `./img/player.png`、`js/main.js`)。`/` から始まる絶対パスは使わない
- ビルドが必要なツール(React・Vite など)を使う場合は、ビルドした後の出力(`dist/` など)を投稿する。その際、出力のパスを相対パスにする(Vite なら `base: "./"`)

## 使えるファイル

- 拡張子: html htm js mjs css json txt md png jpg jpeg gif webp svg ico mp3 ogg wav woff woff2 ttf
- 1ファイル15MBまで、合計30MBまで。ZIPでまとめる場合はZIPが30MBまで、展開後の合計が90MBまで
- 拡張子と中身が一致していること(中身を確かめる)
- JSONは厳密に正しい形式であること(コメント・末尾のカンマは不可)
- SVGの `<script>`・イベント属性(`onclick` など)・`javascript:` のリンク・`<foreignObject>` は、公開前に取り除かれる

## 動作する環境

- 作品は、作品ごとに専用のサブドメインから配信され、見せっこラボのページに sandbox 付きの iframe で埋め込まれる
- 許可されている sandbox は `allow-scripts allow-same-origin` だけ。フォームの送信、ポップアップ・新しいタブ、トップの画面の移動、モーダルダイアログ(alert・confirm・prompt)、ポインターロックは使えない前提で作る。全画面表示(Fullscreen API)・ゲームパッドは使える
- iframe は横長(16:9)で、大きさは作品詳細のページの幅に合わせて変わる(スマホでは幅が300px台まで狭くなる)。見る人は全画面表示にもできる。固定の大きさを決めずに、iframe の大きさに合わせて表示する
- `localStorage` などの保存は、その作品のサブドメインの中だけで使える。ファイルを差し替えるとサブドメインが変わるため、保存したデータは引き継がれない。保存を読み書きするときは try/catch で囲む
- 音は、ユーザーが操作した後に鳴らす(自動再生は止められることがある)

## 使ってはいけない処理(提出時の自動チェックで止まる)

- `document.domain` の書き換え
- Service Worker の登録(`navigator.serviceWorker.register`)
- 暗号資産のマイニング(マイニングサービスの読み込みを含む)
- 読み込みに失敗するページ(HTTP のエラー、ページのクラッシュ、15秒以内に読み込みが終わらない)

## 避けるべき処理(運営者が注意して確認する)

- 親の画面の操作(`window.top`・`window.parent` の `location`・`document`、`window.opener`)
- 難読化(パッカー、`eval(atob(...))`、`_0x...` のような変数名、長い16進エスケープ)
- 読み込み時の JavaScript のエラー

## 禁止されている内容

- 閲覧者の個人情報を同意なく集める・外部に送る処理、パスワードなどを入力させる処理
- 他人の著作物・キャラクター・ロゴ・音楽の無断使用
- アダルト・性的な表現、差別的な表現、違法行為を助長する内容

## よい作品にするために

- 最初の画面で、何をすればよいかが分かるようにする(「クリックでスタート」など)
- マウスとタッチの両方で操作できるようにする(`pointer` イベントを使うと両方に対応できる)
- 画面の幅に合わせてレイアウトを変える(`<meta name="viewport" content="width=device-width, initial-scale=1">` を入れる)
- 画像・音声は、必要な大きさに縮める
- 外部の CDN はできるだけ使わず、必要なライブラリはファイルに含める

## 最小構成のテンプレート

最小構成の `index.html` を /starter/index.html で配布している。