この記事でわかること
- Codexに依頼してUI（Streamlit）を追加する流れ
- 安全なログ保存（メタ情報のみ、ローテーションあり）の設計
- README更新、画面起動、ログ確認、エラー相談の要点
- 料金・無料枠や上限設定、レート制限、PIIの扱い、再試行とタイムアウト
- 前回のCLIアプリから実用に寄せるステップ
まず結論
この記事では、UI追加と安全なログ保存を最短で形にします。
必要な操作はVS Code上でCodexに依頼します。
前回の「やさしく要約するPython CLI」を土台に、Streamlitで簡単な画面を用意し、loggingでメタ情報だけを残すログを組み込みます。
お手元にAIを用意して、文中で分からないことは聞くようにすると理解が早まります。
最初に知っておきたい用語
- VS Code：プログラムを書くための作業机のようなツール。
- Python：AI連携アプリを作る時によく使われるプログラミング言語。
- Codex：OpenAIが提供している、VS Codeの中で使えるAI。
- API：アプリからChatGPTに仕事を頼むための受付窓口。
- APIキー：OpenAIに「誰が使っているか」を伝える秘密の合言葉。
- .env：環境変数をローカル開発で読み込むための設定ファイル。
- 環境変数：APIキーなどの秘密情報をコードの外に置くための保管場所。
- SDK：APIを呼び出しやすくする公式の道具セット。
- モデル：文章を読んで返答を作るAI本体。
- エンドポイント：依頼を送る住所のようなURL。
- リクエスト：自分のプログラムからOpenAIへ送る依頼。
- レスポンス：OpenAIから返ってくる答え。
- トークン：文章を細かく切った単位。
料金計算にも使われる。 - レート制限：短時間に使いすぎないようにする上限。
何ができる技術なのか
APIを使うと、アプリが自動でChatGPTへ依頼を送り、結果を仕組みに組み込めます。
人が打ち込む画面と違い、繰り返し処理や保存、連携が得意です。
ChatGPT画面とAPIの違い
→
→
作れるものの例:
- 入力を初心者向けに要約するWebアプリ
- 定型報告のドラフト生成ツール
- チャット要約と議事録整形のワンクリック化
- FAQに基づく社内回答ボット
- 画像や音声を含むマルチモーダル変換
- CSVの列ごとに説明を添える補助ツール
- 定時に分析コメントを出すレポートメーカー
ChatGPT APIを使うための準備
今回は前回の記事の続きです。
前回までの完成状態は「Pythonで動く要約CLIアプリ」と「.envでAPIキー管理」です。
まだの方は、VS Code、Python、Codex、APIキー、.envの準備を先に整えてください。
AIを読む人から使う人へ：CodexでChatGPT APIアプリを作る #2
前回までの完成状態
- VS Codeで作業フォルダを開ける。
- CodexをVS Codeのサイドバーで使える。
- PythonのCLIアプリで要約ができる。
- .envでAPIキーを安全に読み込める。
仕組みを分解する
UIは人が触る窓口、APIは依頼の通路、ログは記録係です。
UI・API・ログの役割
→
→
→
注: UI→APIの呼び出しは非同期化や再試行で安定化できる。
用語のミニ解説
- レート制限：短時間の使いすぎ防止。
混雑時は待つ設計に。 - タイムアウト：返答が遅い時に打ち切る上限時間。
始め方
この章では、CodexにUI追加とログ保存、README更新を順に頼みます。
APIキーや入力本文などの秘密情報は、チャット欄に貼らないでください。
UIをどう作るか（Streamlitを選ぶ理由）
Streamlitは、PythonだけでシンプルなWeb画面を作れる軽量フレームワークです。
フォーム、ボタン、テキスト表示が数行で実装できます。
他の選択肢（FlaskやFastAPI）は柔軟ですが、初回はStreamlitの方が素早く形にできます。
終わると、ブラウザで http://localhost:8501 にアクセスして試せます。
ログをどう設計するか
保存するのは安全なメタ情報に限定します。
入力の全文やAPIキーは保存しません。
記録例は日時、処理タイプ、入力文字数、成功/失敗、エラー種別、処理時間、モデル名です。
サイズが増えるため、ローテーション（サイズ上限や日次）を入れて回し続けられるようにします。
Codexに依頼してUI付きアプリに育てる
このボックスをコピーしてCodexに送れます。
前回のプロジェクトのフォルダで実行してください。
フォルダが見つからない場合は、フォルダ名や場所を伝えるか、新規作成を依頼しましょう。
Codexに送るプロンプト
前回作成した「PythonのCLI要約アプリ」をUI付きに拡張したいです。
要件:
- UIはStreamlit。テキスト入力、要約ボタン、結果表示、エラー表示を用意。
- 軽い入力検証: 空文字は禁止。最大文字数も設定して警告表示。
- API呼び出しはタイムアウト(例: 30秒)とリトライ(指数バックオフ、最大3回)を実装。
- エラー時はユーザー向けのやさしいメッセージと技術用ログを分ける。
- .envからAPIキーを読み込む。秘密はハードコード禁止。
- Python loggingで安全なメタ情報のみを保存。入力本文やAPIキーは保存しない。
- 記録項目: 日時、処理タイプ(要約)、入力文字数、成功/失敗、エラー種別、処理時間、モデル名。
- ログはRotatingFileHandlerかTimedRotatingFileHandlerを採用。
- READMEをUI起動方法、必要な環境変数、ログの場所、注意点で更新。
- 依存関係のインストール方法と実行方法を明記。
- 推奨モデル名は「公開時点の汎用チャットモデルの例」を使い、将来変わる旨をREADMEに注記。
作業手順を案内しつつ、必要なファイルの作成(例: app.py、utils/logger.py、requirements.txt、.streamlit/config.toml など)と、実行・確認方法を出力してください。- Codexが作るもの: Streamlitのapp.py、ログ設定、README更新、依存関係。
- 確認ポイント: UIが http://localhost:8501 で開くか。
空入力で警告が出るか。 - 確認ポイント: ログにメタ情報だけが記録されるか。
本文が入っていないか。 - 確認ポイント: リトライとタイムアウトの挙動。
失敗時に丁寧なメッセージが出るか。 - 確認ポイント: スクリーンショットやポート番号の記載がREADMEにあるか。
OpenAI SDKの最小テストを依頼する
UI実装前に、SDKが動くかを短く確認します。
モデル例は公開時点の汎用チャットモデル（gpt-4.1, gpt-4o-mini等）を使います。
モデル名は将来変わる可能性があります。
Codexに送るプロンプト（SDK最小テスト）
OpenAI SDKの最小テストを追加してください。
要件:
- .envのAPIキーを読み込み、簡単なテキスト応答を1回だけ呼び出す関数を作る。
- モデル例: gpt-4.1 または gpt-4o-mini（公開時点の汎用モデル例）。将来変更される可能性があるのでREADMEに注意書き。
- 実行方法と、成功時/失敗時のコンソール出力例もREADMEに追記。READMEを整える依頼
利用者が迷わないよう、起動・設定・トラブルシュートを明確にします。
Codexに送るプロンプト（README更新）
READMEを更新してください。
含める内容:
- プロジェクト概要と目的(要約アプリにUIを追加)。
- 必要な前提( Python, VS Code, .envにAPIキー )。
- セットアップ手順(依存関係インストール、起動方法)。
- 起動URL例: http://localhost:8501 とスクリーンショットの貼り方。
- 入力検証とエラーメッセージの仕様。
- ログの場所、記録項目、RotatingFileHandler/TimedRotatingFileHandlerの説明。
- 料金とレート制限の注意、失敗時のリトライ間隔の目安(例: 1s→2s→4s)。
- モデル名は公開時点の例(gpt-4.1, gpt-4o-mini)で将来変わる注意。
- セキュリティ: APIキーは.env管理。GitやIssueに貼らない。PIIは入力しない。動作確認の流れ
- 目的 UIが開くか確認。Codexへ頼むこと 起動コマンドと停止方法を案内してもらう。確認 ブラウザで画面表示。
- 目的 入力検証の動作確認。Codexへ頼むこと テスト手順を出してもらう。確認 空入力で警告が出る。
- 目的 ログ保存の確認。Codexへ頼むこと ログファイルの場所と出力例を示してもらう。確認 本文やキーが入っていない。
- 目的 失敗時の再試行。Codexへ頼むこと 一時的エラー発生時のテスト方法。確認 指数バックオフで3回まで試す。
UI→API→ログの流れ
- 1入力UIで文章
- 2検証空/長さチェック
- 3送信APIへ依頼
- 4非同期/再試行バックオフ
- 5表示結果/エラー
- 6記録安全なメタ情報
よくあるつまずき
- プロジェクトが見つからない: VS Codeでフォルダを開き、Codexに場所を共有。
- APIキー未設定: .envに設定。
チャット欄には貼らない。 - ポート競合: 8501が使用中なら別ポートで起動。
- モデル名エラー: 現行名を公式で再確認。
料金・注意点・セキュリティ
- 料金: トークン課金です。
モデル・入出力量で変動します。
（公開日時点。
変更の可能性あり） - 無料枠/上限: ダッシュボードで上限設定。
小さく始め、月次上限と通知を有効に。 - レート制限: 上限超過時は待機して再試行。
指数バックオフを採用。 - APIキー管理: .envと環境変数で管理。
GitやIssue、スクショに載せない。 - PII/機微情報: 個人情報や社外秘は入力しない。
組織ポリシーに従う。 - 失敗時の再試行: 1→2→4秒などの間隔で最大3回。
恒常エラーは即座に中断。 - タイムアウト: ネットワークや混雑に備え、クライアント側で上限時間を設定。
| 項目 | ポイント |
|---|---|
| データの扱い | 本文は保存しない。 匿名化or要約のみ記録。 |
| ログ | メタ情報に限定。 ローテーションで肥大化防止。 |
| コスト管理 | 上限設定とダッシュボード監視。 |
実務での使いどころ
UIとログを加えると、業務の小さな自動化にすぐ使えます。
社内ナレッジ整形、定型メール下書き、議事録要約などに向きます。
PIIや機微情報は避け、公開資料を素材に試すのが安全です。
次にやること
- Codexの提案どおりにファイルを生成し、UI起動とログ出力を確認する。
- READMEのスクリーンショットとポート番号の記載を整える。
- ログのローテーション閾値を運用に合わせて調整する。
- 次回は、保存データの可視化や簡単なデプロイ（例: Streamlit Community Cloud）の検討に進む予告。
参考・出典
更新日: 2026年06月29日。
料金・仕様は変更される可能性があります。
