この記事でわかること
- 保存したメタ情報（日時、成功/失敗、処理時間、入力文字数、モデル名）の可視化方法
- Streamlit Community Cloudでのデプロイ手順とSecrets管理
- GitHub連携、requirements.txt、mainファイル、READMEの整え方
- 公開時のAPIキー保護、料金・レート制限、よくあるエラーの切り分け
- Codexに依頼して可視化画面と公開準備を自動化するプロンプト例
まず結論
本記事は、人がコードを全部書くのではなく、VS Code内のAIアシスタント（Codex）に作業を依頼しながら、小さなAIアプリを「見える化して公開」するための実践編です。
前回#3で作成したログ保存を前提に、可視化ダッシュボードを追加し、Streamlit Community Cloudに安全にデプロイします。
前回の完成物がない場合も、ダミーログで可視化だけ体験できます。
お手元にAIを用意して、文中で分からないことは聞くようにすると理解が早まります。
最初に知っておきたい用語
- API：アプリからChatGPTに依頼を送るための受付窓口。
- APIキー：OpenAIに「誰が使っているか」を伝える秘密の合言葉。
- モデル：文章を読んで返答を作るAI本体。
- トークン：文章を細かく分けた単位。
料金計算にも使われる。 - レート制限：短時間の使いすぎを防ぐ上限。
超えると一時的にエラー。 - Secrets：公開環境でAPIキーなどを安全に保管する仕組み。
何ができる技術なのか
ChatGPT APIを使うと、アプリが自動で文章処理を依頼できます。
画面の操作ではなく、仕組みとして動かせます。
今回は、その利用状況を可視化し、小さく公開して共有します。
- 成功/失敗の割合を日別にグラフ化
- モデル別の平均処理時間を棒グラフで比較
- 入力文字数の分布をヒストグラムで把握
- 時間帯ごとのリクエスト数を折れ線で表示
- 直近N件のログをテーブルで確認（本文は保存しない）
- エラーコードの上位一覧を可視化
- 1リクエストあたりの概算コストを集計（トークン数ベース）
ChatGPT画面とAPIの違い
人が入力
ChatGPT画面
→
AIが回答
手作業向き
アプリが依頼
API利用
→
結果を自動利用
仕組み化向き
凡例：バッジ色=立場（人/AI/アプリ）、矢印=処理の流れ、丸番号は手順図で登場します。
ChatGPT APIを使うための準備
本記事は#4の実践編です。
前回#3までのStreamlitアプリ（UIと安全なログ保存）がある前提で進めます。
未所持の方は、ダミーログを生成して可視化だけ先に体験できます。
VS Codeとは何か
プログラムを書くための作業机のようなツールです。
なぜ使うのか
ファイル編集、AIへの相談、フォルダ確認を同じ画面で扱えるためです。
他の選択肢との違い
他エディタでも可能ですが、拡張が豊富で迷いにくいです。
ここまで終えるとできること
作業フォルダを開き、Codexに「この場所で可視化と公開を整えて」と依頼できます。
Codexとは何か
OpenAIが提供する、VS Codeの中で使えるAIです。
作成・変更・確認の手順を伴走します。
なぜ使うのか
人は意図を伝え、AIにファイル作成や設定案内を任せるためです。
他の選択肢との違い
他のコードアシスタント拡張でも代替可能です。
本記事ではVS Codeの「OpenAI Codex（名称が変わる場合あり）」や「ChatGPT/Codeアシスタント系拡張」を使います。
ここまで終えるとできること
VS Code内のチャット欄に、可視化と公開の依頼を送れます。
VS Codeをインストールする
- 画面操作 公式サイトからOSに合うVS Codeを入れる。確認 VS Codeが起動する。
VS CodeにCodex拡張を入れる
- 拡張機能画面を開く。
Windows/Linuxは Ctrl+Shift+X、macOSは Cmd+Shift+X。 - 拡張名で検索。
公式名称が変わる可能性があるため「OpenAI Codex」「ChatGPT」「Code Assistant」なども試す。 - 拡張をインストールする。
- サインインを実行。
ボタン例：「Sign in with ChatGPT account」「Sign in with API key」。 - ChatGPTアカウントの場合はブラウザ連携の承認を行う。
APIキーの場合は拡張の設定画面に貼り付ける欄を開く。 - 右サイドバーのアイコン、またはコマンドパレット（Windows/Linux: Ctrl+Shift+P、macOS: Cmd+Shift+P）から「Open Codex/Chat Sidebar」を選ぶ。
- Codexのチャット欄が表示されたことを確認する。
ここで初めてCodexに送る
ここまで終わると、VS Code内のCodexチャットにプロンプトを送れます。
以下をコピーして使えます。
Codexに送るプロンプト
このプロジェクトは、Streamlitで作ったChatGPT APIアプリの「ログ可視化と公開」を進めたいです。
前回#3の完成物がない場合は、ダミーログを自動生成して可視化だけ体験できる形で進めてください。
次の内容を、必要なファイル作成と手順案内を伴って提案・実行してください。
- 可視化用のページ/タブ（成功率、処理時間、入力文字数、モデル別集計）
- ログ読み込みと簡単な集計のコード雛形（本文は保存しない設計のまま）
- READMEの更新（セットアップ、Secretsの設定、デプロイ手順、動作確認方法）
- 変更点の説明と実行・確認手順の箇条書き
必要なら最小限のユーザー操作を案内し、完了後に確認ポイントのチェックリストを出してください。Codexはファイル作成と手順を提示します。
次を確認します。
- 本文データを保存しない設計が保たれているか
- グラフで使うのは日時、成功/失敗、処理時間、入力文字数、モデル名などのメタ情報だけか
- READMEにSecrets設定とデプロイ手順があるか
前回#3の記事も必要に応じて参照してください。
仕組みを初心者向けに分解する
アプリが記録したメタ情報を表やグラフに変換し、Webに公開します。
本文は保存せず、可視化対象は操作ログの要点だけにします。
これは「家計簿のレシート番号だけを集計して支出傾向を見る」ようなものです。
可視化と公開の流れ
- 1ログを読むメタ情報のみ
- 2集計する日別・モデル別
- 3描画する棒/線/ヒストグラム
- 4Secrets設定APIキーはコード外
- 5デプロイCommunity Cloud
凡例：丸番号=手順、矢印=順序、青=アプリ処理、オレンジ=公開設定。
用語のミニ解説
- Secrets：公開環境の秘密情報保管。
st.secretsから参照。 - Community Cloud：Streamlitの無料ホスティング。
GitHub連携で動く。
始め方
ここでは、可視化の実装と公開準備をCodexに進行させます。
人は意図を伝え、出来上がりを確認します。
- 目的 可視化ページの追加。Codexへ頼むこと ログ読み込み、集計、st.line_chart/st.bar_chartでの表示、Altair版も選択可。確認 本文を読まない実装か、Altair利用時はpandas/altairの互換バージョンがrequirements.txtに指定されているか。
- 目的 README更新。Codexへ頼むこと セットアップ、Secrets、デプロイ、動作確認、よくあるエラーの章を追記。確認 公開先でのSecrets手順が明確か。
- 目的 デプロイ準備。Codexへ頼むこと requirements.txt、mainファイル名（例：app.py）、.streamlitディレクトリの設定テンプレート。確認 依存関係が最小で再現性があるか。
Codexに依頼してAPI連携アプリを見える化＆公開する
ここからは、可視化UIの作成、ダミーログ生成（任意）、デプロイ準備、README更新までを一気に依頼します。
以下をコピーして使えます。
Codexに送るプロンプト
Streamlitで作ったChatGPT APIアプリの可視化ダッシュボードを追加し、Streamlit Community Cloudへデプロイ可能な形に整えてください。
前提：入力本文は保存しない。メタ情報（timestamp, success, error_code, duration_ms, input_chars, model）を対象にする。
要望：
1) pages/ に「Usage Dashboard」ページを追加。
- 日別リクエスト数の折れ線、成功/失敗の積み上げ棒、モデル別平均処理時間の棒、入力文字数分布のヒストグラム。
- st.line_chart/st.bar_chartベースでOK。Altair版も選択肢として提案し、必要なrequirementsのバージョンを固定。
2) ログ読み込みユーティリティ（例：utils/log_reader.py）。
- 既存のログ保存形式を読み込む。なければダミーログを一定件数生成する関数を用意。
3) README更新。
- ローカル確認→GitHub公開→Streamlit Community Cloudデプロイ→Secrets設定→再デプロイ方法→ログ閲覧（Manage app→Logs）→トラブル時の切り分け。
4) デプロイに必要なファイル。
- requirements.txt、mainファイル（app.py）、.streamlit/secrets.toml の雛形（ローカルのみ。Gitにはコミットしない）。
- 公開環境ではSecretsに OPENAI_API_KEY を登録して st.secrets["OPENAI_API_KEY"] で参照する実装案内。
5) 最小限のユーザー操作があれば手順化し、最後にチェックリストを出力。
Codexが用意するものと確認ポイント：
- Usage Dashboardページが表示され、本文を読み込まないこと
- Altair採用時はaltair/pandasの互換バージョンをrequirements.txtで固定
- st.secrets[“OPENAI_API_KEY”] 参照になっていること（サンプル名のみ）
- READMEに「Manage app→Logs」でサーバーログ確認の記述があること
- ダミーログ生成関数により、前回資産がなくても動作を体験できること
料金・注意点・セキュリティ
公開日時点の情報です。
今後変わる可能性があります。
| 項目 | 要点 |
|---|---|
| OpenAI API料金 | モデルとトークン量で従量課金。 最新は公式のPricingを確認。 |
| 無料トライアル | 提供の有無・条件は時期で変動。 ダッシュボードで残高を確認。 |
| レート制限 | 短時間の上限あり。 超過時は一定時間待って再試行。 |
| 失敗時の課金 | 受付に到達し処理が走った分は課金対象になる場合あり。 |
| Streamlit Cloud | 無料で公開。 GitHub連携。 重い処理や私的データの本番用途には不向き。 |
| Secrets管理 | GitにAPIキーを入れない。 Community CloudのApp settings→Advanced settings→Secretsで管理。 |
| 公開範囲 | URLを知る全員がアクセス可能。 検索エンジンに拾われる可能性あり。 robots.txtの効力やパスワード保護の有無を確認。 |
| ログ設計 | 個人情報や本文は保存しない方針。 必要なら匿名化・要約のみを検討。 |
Community Cloudでは書き込みの永続化が基本的に保証されません。
ローカル書き込み前提の実装は公開先で失敗します。
代替として、st.session_stateで一時保持、外部DB（例：SQLiteを外部に置く、Supabase、Firestore）、スプレッドシート（Google Sheets API）などを検討してください。
APIキーの安全運用：プロジェクトごとにキーを分け、最小権限・最小共有。
定期的にローテーションし、漏えい疑い時はダッシュボードから即時失効・再生成します。
公開リポジトリに誤ってコミットした場合は履歴を含めて削除し、キーを再発行してください。
実務での使いどころ
社内検証や個人開発で、利用状況の把握とエラー傾向の共有に向きます。
小さく公開し、関係者のフィードバックを早く得る場として役立ちます。
本番の高負荷や秘匿データには、VPSやクラウドの専用環境を検討してください。
次にやること
- GitHubでリポジトリを作成し、requirements.txtとapp.pyをプッシュする。
- Streamlit Community Cloudでリポジトリを選び、Deploy。
Advanced settings→SecretsにOPENAI_API_KEYを追加。 - デプロイ後はManage app→Logsでエラーを確認し、必要に応じて再デプロイ。
- 必要に応じてAltair版の可視化に切り替え、バージョンを固定。
- ここまでで、準備、API連携、UI追加、ログ保存、可視化、簡単な公開まで一通り体験できました。
このシリーズはいったんここで一区切りです。
参考・出典
公開日時点の情報です。
料金・仕様は変更される可能性があります。
