AIを読む人から使う人へ：中学生にも分かるAIアプリをリリース前に確認するチェックリスト #5

この記事では、VS CodeのOpenAI Codexにプロンプトを渡すだけで、「安全・料金・データ」の公開前チェック機能をあなたの小さなWeb/CLIアプリに組み込みます。

準備から導入、確認、直し方までを一つずつ画面操作で案内します。

この記事でできること

この回では、Codexにプロンプトを渡すだけで次を実現します。日常で「出発前にカギ・財布・スマホを触って確かめる」ように、公開前の必需品を機械的に確認できるようにします。

• 公開直前の安全・料金・データのチェックを、自動タスクとUIで実装。
• APIキーや個人情報がコードやログに出ない仕組みを追加。
• 料金上限メモ、失敗時の案内、問い合わせ先をアプリに組み込み。

完成イメージ

• アプリ内に「公開前チェック」画面（またはCLIメニュー）と、RELEASE_CHECKLIST.mdが生成される。
• .envで安全にキー管理し、GitHub secret scanning（任意）で漏えい検知を有効化できる。
• 失敗時は、利用者向けの短いエラー表示と、開発者向けの詳しいログを分けて出す。
• レート制御と料金の上限額メモ、使用量の確認先リンクを設置。

最初に知っておきたいこと

APIキーは「家の鍵」と同じです。鍵を玄関に差しっぱなしにしないのと同じで、コードや画面に直書きしません。.envと環境変数で管理します。
料金管理は「家計簿」に似ています。どれだけ使ったかを把握し、上限を決めて通知を受けると安心です。
チェックリストは「出発前の持ち物確認」。公式の安全・本番ベストプラクティスに沿うことで、見落としを減らします。

料金・仕様は変わることがあります。必ずOpenAI公式の最新ガイドを確認してください。参照先は記事末の出典にまとめています。

対象読者

• 初めて自作AIアプリを他者へ共有・公開する人。
• コードを書かず、Codexへのプロンプト操作で進めたい人。
• Windows/MacどちらでもOK。

必要なものと入れ方

ここでは、使う道具ごとに「これは何？」「用意するもの」「入れ方・開き方」「最初の設定」「できたか確認」を順番に説明します。初めてでも、迷子にならないように画面で何を探すかを書きます。

VS Code（コード編集アプリ）

1. これは何？：大きなノートと引き出しが一体になった作業机のようなアプリ。ファイルを並べ、拡張機能で力を足せます。
2. 用意するもの：インターネット接続、PC（WindowsまたはmacOS）。
3. 入れ方・開き方：公式サイトを開き、案内に従ってインストールします。インストール後、アプリを起動します。
4. 最初の設定：日本語表示やテーマは後からでOK。この後、拡張機能を入れる画面を使います。
5. できたか確認：「Visual Studio Code」というタイトルのウィンドウが開き、左に縦のアイコンバーが見えたら成功です。

OpenAI Codex拡張（VS Code内のAIコーディング相棒）

1. これは何？：となりの席で一緒に作業してくれる相棒のような存在。あなたの依頼を読み、ファイルや設定を作ってくれます。
2. 用意するもの：OpenAIのアカウント（ChatGPTアカウントまたはOpenAI APIキーでサインイン）。
3. 入れ方・開き方：VS Codeの左端の四角形アイコン（拡張機能）を押します。検索欄に「Codex」と入力し、OpenAIのCodex拡張を選んで「インストール」を押します。完了後、「有効にする」が表示されていればOKです。
4. 最初の設定：「サインイン」ボタンが出たら押して、案内に従ってサインインします。終わったら、左端または下部に「Codex」チャットの入口が出ます。そこを押してチャット欄を開きます。
5. できたか確認：VS Code内にチャット欄が開き、メッセージを入力できるテキストボックスが見えれば成功です。

OpenAIアカウント（APIの利用）

1. これは何？：AIに質問したり、文章を作るための入り口。アプリからAIを使うときに必要です。
2. 用意するもの：メールアドレス、支払い方法（必要に応じて）。
3. 入れ方・開き方：OpenAIにサインインします。APIの使用量や請求の確認先は公式ドキュメントで案内されています。
4. 最初の設定：APIキーを発行できますが、この後の記事で安全に扱うので、画面に表示された値はメモせず閉じても大丈夫です。
5. できたか確認：ダッシュボードにアクセスでき、使用量や設定のメニューが見えればOKです。

GitHubアカウント（任意：secret scanning）

1. これは何？：作品フォルダを保管できる倉庫のような場所。secret scanningで、鍵の混入チェックが自動で行えます。
2. 用意するもの：メールアドレス。必要に応じてプランを用意。
3. 入れ方・開き方：サインインして、リポジトリ（保管箱）を作れます。
4. 最初の設定：secret scanningやPush Protectionは、対象プランで有効化できます。詳細はGitHubの公式ドキュメントを確認します。
5. できたか確認：リポジトリの設定画面にsecret scanningの項目が表示され、有効化の状態が分かればOKです。

エージェントと作るものの全体像

Codexに依頼し、あなたの小さなWebまたはCLIアプリに次の機能を足します。引っ越し前に「水道・電気・ガス」を一つずつ点検するイメージで、公開前の最低限を確実に整えます。

• 公開前チェック機能（画面またはコマンド）。
• チェック対象：秘密情報の露出、エラー画面と開発者ログの分離、料金上限とレート制御、利用データの保存と削除方針。
• 成果物：RELEASE_CHECKLIST.md、設定ファイル（例：.env.example、設定JSON/YAML）、エラーUIコンポーネント。

手順1: ツールを準備する

目的と全体像

ここでは、VS CodeとCodexを使える状態にし、OpenAIと（任意）GitHubへサインインします。道具箱を整える工程です。

画面操作

• VS Codeを開き、拡張機能アイコン→検索「Codex」→OpenAI Codex拡張→「インストール」→「サインイン」。
• Codexチャットを開けることを確認。
• OpenAIにサインインし、APIの使用量ページへ移動できるか確認（公式ガイド参照）。
• GitHubにサインイン（任意）。リポジトリ設定でsecret scanningの項目を確認。

終えたら確認

• VS CodeでCodexチャット欄が開く。
• OpenAIのダッシュボードにアクセスできる。
• （任意）GitHubのsecret scanning設定が見える。

手順2: APIキーを安全に用意する

目的と理由

APIキーを「見せない」「残さない」ための準備をします。家の合鍵を透明な袋に入れて配らないのと同じで、.envと環境変数で隠して渡します。

画面操作

• VS Codeで作業フォルダを開く（ファイル→フォルダーを開く）。
• Codexチャットを開いたままにする。

Codexに送る内容

次のボックスをコピーして、VS Code内のCodexチャットに送ります。

小さなWeb/CLIアプリに、安全なAPIキー管理を追加してください。条件は次です。
- .env を使い、OpenAI_API_KEY などの値は環境変数から読み込む。
- .env は .gitignore で必ず除外する。.env.example を作り、空のキー名だけを記載する。
- アプリ起動時、必要な環境変数が未設定なら分かりやすいメッセージで起動を止める。
- ログや画面にキー値を絶対に表示しない。キーは末尾4文字のマスク表示のみ許可（表示が必要なときに限る）。
- READMEに「APIキーは実値を貼らない」「.envを共有しない」等の注意を書き加える。
- 変更点をファイル単位で提案し、私に確認の質問をする。

成功の見分け方

• プロジェクトに.env.exampleが追加される。
• .gitignoreに.envの記述が入る。
• 未設定時の丁寧な警告メッセージの案内が出る。

手順3: エージェントにアプリを作ってもらう

目的と理由

公開前チェック機能、チェックリスト、エラーUI、料金上限・レート制御を、Codexにまとめて実装してもらいます。空港の出発ゲートで行う手荷物・搭乗券・パスポートの確認を、自動で行うイメージです。

Codexに送る内容

このボックスをコピーして、VS Code内のCodexチャットに送ります。

私の既存の小さなWeb/CLIアプリに「公開前チェック」機能を追加してください。以下を満たしてください。
[作るもの]
- 1) RELEASE_CHECKLIST.md を自動生成するスクリプト（npm/py/cliいずれでも可）。
- 2) アプリ内に「公開前チェック」画面（またはCLIメニュー）を追加。
- 3) エラーUI：ユーザー向けは短い案内、開発者向けは詳細ログを分離（PIIやキーはマスク）。
- 4) レート制御（一定間隔で送信）と、低めの試験用上限（リクエスト回数または推定コスト）を設定可能に。
- 5) .env.example に必要変数を追記（OPENAI_API_KEY, RATE_LIMIT等）。
- 6) 使用データの保存方針（保存/しない/期間）と削除手順を設定ファイルに記述し、UIから見えるように。

[チェック観点]
- 秘密情報がコード/ログ/例外に出ない。
- 料金とレートを制御し、上限に達したら安全に停止。
- 失敗時、ユーザーは原因の種類だけが分かる（詳細はログ）。
- GitHub secret scanning に配慮（.envは無視、誤検知を避ける）。

[参考にする公式ガイド]
- OpenAI API safety best practices: https://developers.openai.com/api/docs/guides/safety-best-practices
- OpenAI API production best practices: https://developers.openai.com/api/docs/guides/production-best-practices
- GitHub secret scanning: https://docs.github.com/code-security/secret-scanning/introduction/about-secret-scanning

[依頼のしかた]
- 既存のプロジェクト構成を質問してから、追加/変更ファイルを提案。
- .envと環境変数の取り扱い、README追記、RELEASE_CHECKLIST.mdの項目（安全・料金・データ）を自動生成できるコマンドを用意。
- 動作確認手順を、私が手でコードを書かなくても実行できる形で説明。
- 分からないことは必ず私に質問してから進める。

Codexが作るものと確認ポイント

• RELEASE_CHECKLIST.mdに、安全・料金・データの項目が並ぶ。
• エラーUI/ログ分離の実装案が提示される。
• レート制御と上限到達時の停止ロジックが設定で変えられる。
• .env.exampleと設定ファイルが更新される。

手順4: 動かして確認する

目的と理由

低リスクで試運転し、エラー表示、ログ、料金・レート制御が意図通りか確かめます。自転車のブレーキを公道に出る前に空き地で試すのと同じです。

画面操作

• Codexの案内に従い、環境変数を読み込んだ状態でテスト実行する（具体コマンドはCodexが提示）。
• 失敗をわざと起こすテスト（未設定キー、過剰な連続実行）を案内どおりに実施。

確認ポイント

• ユーザー画面は短い説明で混乱させない。詳細は開発者ログへ。
• 上限に達すると安全に停止し、次の手がかり（上限を上げる/待つ）が表示される。
• RELEASE_CHECKLIST.mdの全項目が「完了」になっている。

手順5: エージェントと直す

目的と理由

失敗や気づきをCodexへ伝え、改善ループを回します。料理の味見をして塩加減を調整するように、少しずつ整えます。

Codexに送る内容

テスト結果を共有します。次を改善してください。
- どの画面/操作で何が起きたか（私が追記）
- 期待：ユーザー向けは短い案内、詳細はログ、機密はマスク
- 料金上限に早く達する/達しない場合の調整
- RELEASE_CHECKLIST.md に未完の項目があれば再生成
- 変更は差分で示し、必要なら私に質問してください

成功の見分け方

• 問題点が差分で直り、説明が短く分かりやすくなる。
• チェックリストの未完が解消する。

よくあるエラー

• 環境変数未設定/読み込みパス違い
  画面で見えること：起動時に「APIキー未設定」や「環境変数が見つからない」。
  よくある原因：.envの場所が違う、ファイル名の打ち間違い。
  最初に確認：.envがプロジェクトのルートにあるか、.env.exampleのキー名と一致しているか。
  Codexへ送る質問：「.envの読み込みでエラー。現在のフォルダ構成は…。正しい読み込み方法を提案して、失敗時のメッセージも改善して。」
• .envの誤ってコミット
  画面で見えること：Gitの差分に.envが表示される、またはGitHubから秘密情報検出の警告。
  よくある原因：.gitignoreに.envを入れていない、既に追跡中。
  最初に確認：.gitignoreの設定、.envがGitの追跡対象か。
  Codexへ送る質問：「.envを誤ってコミットしました。履歴から削除し、キーをローテーションする手順をファイル名付きで教えて。」
• 429/Rate limit
  画面で見えること：短時間にリクエストしすぎのエラー表示。
  よくある原因：レート制御が緩い、並列処理しすぎ。
  最初に確認：設定のレート間隔、上限。
  Codexへ送る質問：「429が頻発。現在のレート制御のコードと設定は…。（貼付）待ち時間とリトライ戦略をベストプラクティスに合わせて見直して。」
• 400/Invalid request
  画面で見えること：入力が不正という趣旨のエラー。
  よくある原因：必須パラメータ不足、モデル指定や形式の不一致。
  最初に確認：入力の必須項目、モデル名やパラメータの最新仕様。
  Codexへ送る質問：「400が出ます。送信しているパラメータ（赤線部分）を確認し、正しい形式に直して。必要なバリデーションも追加して。」
• APIレスポンスの想定外フォーマット
  画面で見えること：UIで表示崩れ、パースエラー。
  よくある原因：レスポンス構造の変更、エラー時のレスポンス未対応。
  最初に確認：成功時/失敗時の両方のレスポンス例と、パース処理。
  Codexへ送る質問：「成功/失敗のレスポンス例（貼付）に合わせて、堅牢なパースとフォールバック表示を実装して。」

次に試すこと

• 監視とアラートの追加（使用量やエラー率の通知）。
• 利用規約/プライバシーの明示（収集するデータ、保存期間、連絡先）。
• ロギングの匿名化強化（ユーザーIDのハッシュ化、不要データの破棄）。

まとめ

Codexと一緒に、公開直前の「安全・料金・データ」を最小構成で仕上げました。鍵（APIキー）を隠す、家計簿（料金）を管理する、出発前の持ち物（チェックリスト）を確認する──この3点を毎回回せば、安心して公開に踏み出せます。
前回の続きから進めたい方は、シリーズ第4回「AIを読む人から使う人へ：中学生にも分かるCodexでChatGPT APIアプリを修正する #4」も参考にしてください。

関連記事

Claude TagがSlackで企業知識を自動学習──AI同僚化の衝撃と導入のポイント

AIを読む人から使う人へ：ChatGPT APIアプリを見える化して公開する #4

Lean×AIで現場が変わる：BPM再設計とROI最大化の実践フレームワーク

生成AIの成果指標は“工数削減”だけではない—MITの新研究で示すKPI設計と業務変革の実務