← Back

AIで作ったHTMLゲームを投稿する

FOR CREATORS

動画で見る(4分33秒)

指示文のコピーから、AIでの生成・修正、投稿、フィード公開まで。実際の画面の実録でたどるチュートリアルです。

技術要件

  • 1ファイルで完結するHTMLであること。CSSとJavaScriptは同じファイルの中に書いてください。
  • アップロードするHTMLは1MBまでです。許可CDNのスクリプトをインライン化した後は5MBまで許容されます。
  • 外部スクリプトは次の4本のみ許可されています。それ以外のCDNは使えません。原則は素のJavaScriptの利用を推奨します。
    • cdn.tailwindcss.com（Tailwind Play CDN）
    • cdnjs.cloudflare.com/ajax/libs/matter-js/（Matter.js: 2D物理）
    • cdnjs.cloudflare.com/ajax/libs/three.js/（three.js: 3D）
    • cdnjs.cloudflare.com/ajax/libs/howler/（Howler.js: 音声）
  • ゲームは <iframe sandbox="allow-scripts">(opaque origin)と厳格なCSPの下で動きます。fetch / eval / document.cookie は実行時に無効です。localStorageはメモリ上だけの実装に差し替わり、リロードのたびに中身が空になります。ハイスコアなどの保存には使えません。外部リンクや画面遷移(window.open / location)もブロックされます。遷移はゲーム内の画面切り替えで表現してください。
  • 固定pxや固定のアスペクト比にせず、実際の画面比に追従させてください。固定比で作ると、他の端末で黒帯や見切れが発生します。
  • スコアの送信は parent.postMessage({ type: 'gameOver', score }, '*') を呼び出してください。この呼び出しはリザルト画面へ移る合図も兼ねています。PUNIPOは受け取った直後から画面を監視し、動きが止まった時点(最長3秒)でリザルトを重ねます。爆発や崩壊などの終了演出を見せたい場合は、演出を見せ切ってから呼び出してください。

投稿手順

  1. /create を開く
  2. HTMLファイルを選ぶか、コードを貼り付ける
  3. 名前と説明を入力する
  4. 送信する
  5. 審査後、フィードに公開される

AIに貼るプロンプト

上の技術要件をまとめた指示文です。AIチャットにそのまま貼り付けてゲームを生成させてください。 

HTML5のミニゲームを1つ作ってください。以下の条件をすべて満たしてください。

- 1ファイルで完結するHTMLにすること。CSSとJavaScriptは同じファイルの中に書き、外部ファイルを読み込まないこと
- 完成したHTMLファイルは1MB以内に収めること
- 画面サイズを固定pxや固定のアスペクト比で決め打ちにせず、実際の画面の縦横比に追従させること(縦長・横長のどちらでも黒帯や見切れが出ないようにする)
- fetch・XMLHttpRequest・evalなど、外部通信やeval系の機能は使わないこと(実行環境で無効化されます)
- localStorageは実行環境ではメモリ上だけの実装に差し替えられ、リロードのたびに中身が空になること。ハイスコアやセーブデータの保存には使わないこと
- 外部リンクや画面遷移(window.open・location での遷移)は使わないこと。フレームの外へ出る遷移はブロックされます。参考ページを見せたいときも含め、すべてゲーム内の画面切り替えで完結させること
- ゲームが終了したら parent.postMessage({ type: 'gameOver', score }, '*') を呼び出し、scoreに数値のスコアを入れること。この呼び出しの直後にリザルト画面が重なるので、ゲームオーバーの演出がある場合は演出が終わってから呼ぶこと

完成したら https://punipo.com/create から投稿してください。

よくある失敗

  • 固定のアスペクト比で作ってしまい、縦長の端末で黒帯が出る。
  • 見本と盤など隣接する要素の座標をそれぞれ別々に計算してしまい、特定の画面比でだけ重なる(片方の実寸から、もう片方の位置を導出すること)。
  • fetchでデータを取りに行こうとする(CSPにより実行時に通信できない)。
  • 外部サイトを開くリンクや画面遷移を入れてしまう(window.open / location は遷移がブロックされる。ゲーム内の画面切り替えで表現する)。
  • スコアを送信していないため、リザルトが表示されない。

次にすること

準備ができたら投稿ページからゲームを送信してください。 よくある疑問はよくある質問にまとめています。 他の投稿先と比べたい人向けに、7サイトの比較記事(Zenn)も書きました。