見せっこラボに投稿できる作品の作り方を説明します。AIツールに作ってもらうときは、下の「AIに渡す仕様書」を使うと、投稿できる形で作ってもらいやすくなります。
投稿できる作品のかたち
見せっこラボの作品は、ブラウザだけで動く、静的なファイルの集まりです。
- 最初に開くファイルとして
index.htmlを用意します - JavaScript・CSS・画像・音声・フォントなどのファイルを、
index.htmlと一緒にアップロードします。フォルダに分けても構いません - サーバーで動くプログラム(PHP・Python・データベースなど)は使えません
使えるファイルの種類とサイズの上限は、投稿ガイドラインにまとめています。
AIに渡す仕様書(/llms.txt)
投稿できる作品の条件を、AIが読みやすい形にまとめた仕様書を、/llms.txt で公開しています。AIツールに作品を作ってもらうときは、次のように頼んでみてください。
次の仕様に沿って、ブラウザで遊べる〇〇のゲームを作ってください。
https://misekkolabo.com/llms.txtURLを読めないツールの場合は、/llms.txt を開いて、中身をそのまま貼り付けてください。仕様書には、次のようなことが書いてあります。
- ファイルの形式と、使える拡張子・サイズ
- ファイルの参照は相対パスで書くこと
- 作品が動く環境(iframe の中で動くこと、使えない機能)
- 自動チェックで止まる処理と、避けるべき処理
スターターテンプレート
一から作るのが大変なときは、最小構成のテンプレートから始められます。PC・スマホのどちらでも崩れない土台と、ボタンを押すと数が増える簡単な動きが入っています。
- ページの上の「スターターテンプレート」から、
index.htmlをダウンロードできます。ブラウザで開いて動きを見ることもできます - ダウンロードしたファイルをAIに渡して、「これを元に〇〇に作りかえて」と頼むのもおすすめです
作り方の流れ
- 作る: AIツールに仕様書を渡して作ってもらいます。できたら、手元のブラウザで
index.htmlを開いて動きを確かめます - まとめる: ファイルが多いときは、ZIPにまとめるとアップロードが楽です。ZIPの中身が1つのフォルダに入っている場合は、そのフォルダを外して公開します
- 投稿フォームで下書き保存: 投稿するから、ファイルと作品の情報を入力して下書き保存します。プレビューで、実際の環境での動きを確かめられます
- サムネイルを決める: 作品の画面を自動で撮影するか、画像を選びます。自動で撮影するときは、比率(1:1・16:9・9:16)と、開いてから撮るまでの待ち時間(0・0.5・2・5秒)を選べます
- 提出する: 「投稿する」を押すと自動チェックが行われ、通過すると仮公開になります。詳しくは審査についてをご覧ください
よくあるつまずき
手元では動くのに、投稿すると動かない
- ファイルの参照が絶対パスになっていないか:
/img/a.pngのように/から始まる書き方は、作品のフォルダの外を指してしまうことがあります。./img/a.pngやimg/a.pngのような相対パスにしてください - ビルドした出力を投稿しているか: React・Vite などで作った場合は、ビルドした後のフォルダ(
dist/など)を投稿します。Vite なら設定でbase: "./"を指定すると、参照が相対パスになります - 大文字・小文字が一致しているか: 手元(Windows・Mac)では区別されなくても、公開すると
Image.pngとimage.pngは別のファイルとして扱われます
ポップアップや alert が出ない
作品は、安全のために制限のかかった枠(iframe)の中で動きます。alert・confirm・prompt、新しいウインドウを開く処理、フォームの送信などは使えません。メッセージは、ページの中に表示するようにしてください。
音が鳴らない
ブラウザは、ユーザーが操作する前に音を鳴らすことを止めることがあります。「クリックでスタート」のように、操作をきっかけに音を鳴らしてください。
ファイルを差し替えたら、保存したデータが消えた
localStorage などに保存したデータは、作品のアドレスごとに分かれています。ファイルを差し替えると作品のアドレスが新しくなるため、前のデータは引き継がれません。
自動チェックで止まった
画面に表示された理由を確かめてください。止まる理由と中身は審査についてにまとめています。