ChatGPT や Gemini で作ったアプリを公開する

ChatGPT や Gemini などの AI で作った Web アプリは、このページのプロンプトを 1 回貼り付けるだけで、hanamii の ZIP デプロイで検証を通る構成の生成から ZIP 化までまとめて実行できます。AI が自由に生成したコードは「静的 HTML だけで package.json がない」「成果物を dist フォルダに入れる」など、デプロイ検証で落ちる形になりがちです。技術条件の正本は機械可読ページ https://hanamii.jp/ai/zip-deploy.txt にあり、プロンプトが AI にこれを読ませます（2026年8月時点）。

ステップ 1: コピペ用プロンプト（生成から ZIP まで 1 回で）

「作るもの」の行を書き換えて、そのまま AI に貼り付けてください。

hanamii（https://hanamii.jp）に公開できる Web アプリを作り、ZIP にしてください。

【作るもの】
（ここに作りたいアプリの内容を書く。例: タスクを追加・完了できるTodoアプリ）

【手順】
1. まず https://hanamii.jp/ai/zip-deploy.txt を読み、そこに書かれた技術条件にすべて従うこと
2. 条件に従って Next.js（App Router）のプロジェクト一式を作ること。
   package.json はプロジェクトの一番上に置き、scripts に
   "dev": "next dev" / "build": "next build" / "start": "next start" を必ず定義すること
3. ファイルを実行環境で実際に書き出し、1つの ZIP（ファイル名 app.zip）に圧縮して
   ダウンロードリンクを提示すること。コードをチャットに貼るだけにしないこと。
   ZIP は開いたとき一番上の階層に直接 package.json が来る構造にし、
   node_modules・.next・dist・build・.git・.env は含めないこと

上記 1 の URL が読めない場合は、その旨をひとこと伝えたうえで、2〜3 の条件に従って作ること。

ステップ 2: ZIP を受け取る

ChatGPT の場合

上のプロンプトだけで、生成から ZIP のダウンロードリンク提示まで完了します（Python ツールが自動で使われます）。ダウンロードリンクは時間が経つと無効になるため、表示されたらすぐダウンロードしてください。リンクが切れたら「もう一度 app.zip を作って」と頼めば再生成されます。無料プランでも使えますが、コード実行に回数制限があります。

Gemini の場合

Gemini は ZIP ファイルのダウンロード提供が安定していないため（2026年8月時点、公式のファイル生成機能の対応形式に ZIP が含まれていません）、同じプロンプトで生成まで行い、ZIP 化だけ手元で行います。

1. 生成されたファイルを、ファイルパスどおりのフォルダ構成でパソコンに保存する（例: my-app/package.json、my-app/app/page.tsx）
2. ターミナルでフォルダに入り、ZIP を作る:

cd my-app
zip -r app.zip . -x "node_modules/*" ".next/*" ".git/*" ".env*"

ターミナルを使わない場合は、my-app フォルダを右クリック →「圧縮」（Windows は「送る」→「圧縮フォルダー」）でも構いません。フォルダごと 1 つに包まれた ZIP はそのままアップロードできます（フォルダの外に別のファイルを入れないことだけ注意）。

ステップ 3: hanamii にアップロードする

ZIP からデプロイするの手順どおり、プロジェクト作成画面で「ファイルをアップロード」を選び、ZIP をドラッグ＆ドロップします。検証を通過したら、30 分以内にそのままデプロイまで進めてください（時間が経つと一時ファイルが削除され、再アップロードが必要になります）。

検証エラーが出たときは

エラー画面の 「全エラーを AI 用にコピー」 ボタンでエラー内容をコピーし、そのまま ChatGPT / Gemini に貼り付けて「このエラーを直して、app.zip を作り直して」と伝えるのが最短のリカバリです。

よくあるエラーと原因は次のとおりです。

AI が URL を読めない環境向けの全文プロンプト

ブラウジングが使えない AI では、URL 参照の代わりに以下の全文版を使ってください。

以下の条件をすべて守って、Web アプリを Next.js プロジェクト一式として作ってください。

【作るもの】
（ここに作りたいアプリの内容を書く）

【必ず守る技術条件】
- Next.js（App Router）を使う。TypeScript を使う場合は devDependencies に typescript と @types/node を必ず入れる
- package.json はプロジェクトの一番上の階層に置き、scripts に次の3つを必ず定義する:
  "dev": "next dev" / "build": "next build" / "start": "next start"
- package.json は有効な JSON にする（コメントや末尾カンマは書かない）
- ソースコードは app/ フォルダ、画像などは public/ フォルダに置く
- 次の名前のフォルダは絶対に作らない: dist, build, vendor, node_modules, .next
- composer.json、Pipfile、.env、ビルド済みファイルは作らない
- ファイル名・フォルダ名は半角英数字・ハイフン・ドットのみ（日本語・スペースを使わない）
- API キーなどの秘密情報はコードに書かず process.env から読む。ブラウザ側で使う値だけ
  NEXT_PUBLIC_ で始まる名前にする
- 環境変数が未設定でもエラーで落ちずに起動するよう、デフォルト値やガードを入れる
- ポート番号はコードに固定しない

【出力形式】
- プロジェクトの全ファイルを、ファイルパス付きで漏れなく出力する（事前ビルド不要）
- ファイル生成と ZIP 圧縮ができる環境なら、実際に書き出して app.zip に圧縮し、
  ダウンロードリンクを提示する。ZIP は一番上の階層に直接 package.json が来る構造にし、
  node_modules・.next・dist・build・.git・.env は含めない

そのほかのトラブルはトラブルシューティングを参照してください。