必要なのは、PCで動くCodexまたはClaude Codeと、Blueのアカウント。ツールの準備はインストールの案内から。
ここで使うのはBlueの公開用APIキーです。OpenAI・AnthropicのAPIキーではありません。AIツールの契約とBlueの利用料は別で、この手順はAI Buildの生成枠を使いません。
1. 小さなクイズを作る
入門記事で作成済みなら、そのアプリを使って公開の準備へ進めます。これから作る場合は次の3つだけ。
- ドキュメント内に空の「blue-quiz-demo」フォルダを作る。
- Codexでそのフォルダを開くか、Claude Codeの「Code」→「Local」→「Select folder」で選ぶ。
- 下の依頼文をコピーし、AIのメッセージ欄に貼って送る。
できた「index.html」をブラウザで開き、回答・採点・やり直しを試します。画面を狭くしても操作できれば、公開の準備へ。
2. 公開の準備を任せる
先に送信ファイルとキーの設定方法を用意します。キーはまだ発行しなくて大丈夫です。
BLUE_DEPLOY_KEYは、手元の公開用スクリプトが読む変数名です。自動で設定されるものではありません。AIの操作許可は内容を確認し、外部通信が使えない環境では手動アップロードを使います。
3. BlueのAPIキーを設定する
- コンソールの「APIキー」を開く。未登録ならBlueのアカウントを作成する。
- メモに「クイズ公開用」などと入れ、「ハッシュ化」を選び、「APIキー作成」を押す。
- 発行直後のキーをコピーし、AIが案内した非公開の設定先へ自分で入力する。AIのメッセージ欄には貼らない。
- 値を表示せずに、AIの実行プロセスで使える状態か確認してもらう。
初期の有効期限は30分です。準備が済んでから発行し、最初は「永続化」を使いません。期限が切れたら必要なときに再発行します。
本手順では「AIテンプレートをコピー」は使いません。既存ボタンはキーを含む文章をコピーするためです。公開用キーはGitやZIP、アプリ用の.env、Blueのアプリ実行用Secretsにも入れないでください。
4. 公開して、URLを開く
AIが示す送信先・アプリ名・ファイルを確認し、問題なければ次を送ります。公開される内容は、このサンプルのクイズだけです。
返ってきたURLで回答・採点・やり直しをもう一度試します。URLだけでなく、動くところまで確認して完了です。
noindexは検索への掲載を避ける設定です。URLを知っている人は閲覧できるので、個人情報や社内情報は公開しません。
同じアプリを更新する
次は見出しだけを変えてみます。app IDは公開済みアプリを指定する識別子です。前回のID・URLを確認し、新しいアプリを増やさず更新します。
更新対象と内容を確認して「更新して」と送り、同じURLで変更を確認します。動いているファイルは更新前に手元へ残しておきましょう。
作業が終わったら、コンソールで今回のキーを無効化し、手元の設定も削除します。後日の更新では、必要な時だけ新しいキーを用意できます。
止まったときは
- キーが無効：有効期限と権限をコンソールで確認。キーの値はチャットに貼らない。
- 公開先の応答がない：コンソールで作成済みか確認してから再試行。闇雲に再送しない。
- 画面が動かない：操作・期待した結果・実際の結果をAIへ伝え、公開先と同じファイルで直す。