用 swipla（swipla.co）发布 AI 制作的游戏并分享到 X 的步骤【单个 HTML 文件】🎮

テーマ「現場のセキュリティ対策」

ClaudeやChatGPTに作ってもらったブラウザゲームを、HTML1ファイルを置くだけで公開し、Xで遊んでもらうまでの手順をまとめます。公開先は swipla（スワイプラ、https://swipla.co）です。

この記事でやること

1. AIに「スマホ縦画面で遊べる1ファイルのHTMLゲーム」を作ってもらう
2. swiplaに置いて公開する
3. Xにポストして遊んでもらう
4. ゲームオーバー時のスコアをXに流す仕組みを入れる

プログラミングの知識がなくても進められます。

swiplaは、スワイプで次々遊べる小さなブラウザゲームの置き場です。AIで作ったゲームも歓迎されていて、HTMLを置くだけでスマホで遊べる公開URLができます。

• 審査待ちはなく、置いたらすぐ公開される
• 公開するとXのポスト画面が開き、リンクからゲームがすぐ遊べる
• ゲームオーバー時に「◯点。超えられる？」とポストするボタンを出せる
• 作者ページでプレイ数やいいねを確認できる

手順1：AIにHTMLゲームを作ってもらう

ClaudeでもChatGPTでも構いません。次のように頼みます。

スマホの縦画面で遊べる、1ファイルのHTMLゲームを作って

ポイントは「縦画面」と「1ファイル」です。swiplaはスマホの縦画面でタップやスワイプで遊べるゲームに向いています。

遊んでみて、気になる点は日本語で直してもらいます。

ボールが速すぎるので、最初はもう少しゆっくりにして
ゲームオーバーになったら、タップでもう一度始められるようにして
スコアを画面の上に大きく表示して

出力されたHTMLは index.html という名前で保存します。

手順2：swiplaに置く

1. https://swipla.co を開いて「投稿する」を押す
2. Xアカウントでログインする（取得されるのはXのID・表示名・アイコンだけで、ポストの閲覧や投稿はされない）
3. index.html を置く

画像や音を別ファイルにした場合は、index.html と一緒にzipにまとめて置きます。上限は次のとおりです。

手順3：Xにポストする

公開するとXのポスト画面が開きます。そのまま投稿すれば、ポストのリンクからゲームがすぐ遊べる状態で開きます。

ゲームの短い動画やGIFを付けると、遊び方が一瞬で伝わります。

スコアをXに流す

ゲームオーバーのときに次の1行を呼ぶと、遊んだ人に「◯点。超えられる？」とXにポストするボタンが出ます。

window.parent.postMessage({ type: "gameover", score: 128 }, "*")

128 は実際のスコアに置き換えます。スコアのないゲームなら score は省略できます。

コードを自分で書かなくても、AIにこう頼めば対応してくれます。

ゲームオーバーのときに、window.parent.postMessage({ type: "gameover", score: スコア }, "*") を呼ぶようにして

遊んだ人のポストからゲームが開くので、自分のフォロワー以外にも届きます。

動作環境の制約

ゲームは、安全のために別ドメインのiframe（sandbox: allow-scripts allow-same-origin）の中で動きます。

動かないときは、AIにこう伝えると直してもらえます。

swiplaで動かすので、外部サイトの画像や音は使わず、すべてHTMLに埋め込んで。ページ移動とポップアップも使わないで

AIから下書き投稿する（API）

AIが外部サイトに送信できる環境なら、投稿の下書きまで任せられます。swiplaの仕様は https://swipla.co/llms.txt にまとまっているので、AIにはこう頼みます。

このゲームを swipla.co に下書きとして投稿して。仕様は https://swipla.co/llms.txt にあります。投稿できたら preview_url を教えて。

下書きは公開されません。返ってきた preview_url を自分で開いて遊び、Xでログインして「公開する」を押したときだけ公開されます。

APIを直接呼ぶ場合は次のとおりです。

curl -X POST https://swipla.co/api/drafts \
  -H "Content-Type: application/json" \
  -d '{"title": "ゲームのタイトル", "html": "<!doctype html>..."}'

成功すると 201 で次の形のJSONが返ります（preview_url が自分で開くURLです）。

{"id": "abc123defg", "status": "draft", "preview_url": "https://swipla.co/d/abc123defg?k=...", "expires_at": "...", "next_step": "..."}

• 送れるのは単一のHTMLのみ、2MBまで（画像や音はdata URIで埋め込む）
• タイトルは40文字まで。省略すると <title> が使われる
• 下書きの作成は、同じ接続元から1日10件まで
• 24時間公開しない下書きは自動で削除される
• 公開後のURLは https://swipla.co/g/{id} になる

AIの環境によっては外部に送信できません。そのときは投稿ページからファイルを置いてください。

公開するときの注意

他人の著作物、キャラクター、商標、ゲームを無断で使ったものや、それらを模倣したものは禁止されています。個人情報やパスワードの入力を求めるものや、外部サイトへの誘導が目的のものも対象です。AIに「あの有名なゲームみたいに」と頼むと似すぎることがあるので、オリジナルの内容にしましょう。詳しくは swipla の利用規約で確認してください。

まとめ

• AIに「スマホ縦画面の1ファイルHTMLゲーム」を頼む
• index.html をswiplaに置くと、すぐ公開される
• Xにポストして遊んでもらう
• スコア連携の1行を入れると、遊んだ人が挑戦状をポストしてくれる
• AI経由の下書き投稿APIもある

プログラミング未経験の方向けに、同じ内容をnoteにも書いています。