この回では、保存されたファイルやベクトルストアを安全に「消せる」管理機能と、料金・認証・容量・ログを事前に点検するチェックを加えます。
準備からCodexへの依頼、動作確認、公開前チェックまでを一つひとつ画面操作でたどります。
この回のゴール
- できること：アプリ内のアップロード一覧と削除、OpenAI側（File Search/ベクトルストア）の削除、公開前チェックの画面を追加する。
- 用意するもの：VS Code、OpenAI Codex拡張、OpenAIアカウントとAPIキー（環境変数で管理）、OpenAIダッシュボード。
- 大切な約束：APIキーやIDの実値を画面やコードに書かない。匿名アップロードのまま公開しない。料金や仕様は変わるため公式ページで確認する。
最初に知っておきたい用語
- RAG：質問に関係する資料を先に探し、その内容を見ながらAIが答える仕組み。
- File Search：OpenAIが提供する資料検索の機能。ベクトルストアに登録したファイルを探して使う。
- ベクトルストア：資料を意味で探せるように数値の形で整理して保管する場所。
- Responses API：AIに質問を送り、回答を受け取るためのOpenAIのAPI。
- 環境変数：パソコンの中に秘密をしまう引き出しのような設定。コードに鍵を書かないために使う。
- 認証：利用者が誰かを確かめる仕組み。ログインのこと。
- 監査ログ：いつ誰が何をしたかを後から確認できる記録。
- ソフトデリート：見えなくするが完全には消さない削除方法。元に戻せるようにするために使う。
1. この記事でできること
今回は「消せる設計」と「公開前チェック」を最小構成で追加します。
前回までは、資料の登録・質問・回答・参照元表示ができました。今回は、保存データの一覧と削除、料金・認証・容量・ログの点検を足します。
イメージは、家の片づけで「棚のラベル付けとゴミ出し日を確認する」に近いです。たとえ話ですが、実際にはOpenAIのFile Searchとベクトルストアの削除APIを正しく呼び分けます。
2. 完成イメージ
- 設定または管理ページに「アップロード一覧・削除」ボタンと「公開前チェック」リンクが追加される。
- OpenAIのファイル/ベクトルストア削除APIを呼ぶ管理フローがある。
- 料金と使用量をOpenAIダッシュボードで開ける導線がある。
日常の例えで言うと、学級の掲示板に「持ち物リスト」と「忘れ物の回収箱」を置く感じです。リストで状況を見て、箱から要らない物を回収します。技術的にはアプリ側の表示削除とOpenAI側のストレージ削除を分けます。
3. 最初に知っておきたいこと
- 削除は2段階です。アプリの表示や自前DBから消す操作と、OpenAI側（File Search/ベクトルストア）のストレージを消す操作は別です。
- 料金はモデル利用・ツール利用・保存容量で変わります。固定額は断定しません。現在の金額はOpenAIの料金ページで確認します。
- 匿名アップロードのまま公開しません。認証、ユーザーごとのデータ分離、容量・回数の上限、ログが必要です。
たとえば家計簿では「食費」「光熱費」「日用品」を分けますね。ここでも「モデル」「ツール」「保存」を分けて考えます。事実の確認は公式ドキュメントとダッシュボードで行います。
4. 対象読者
- RAGの試作が終わり、共有・公開を考えている人。
- 料金・データ保持・安全運用の基本をおさえたい人。
「配布前の最終チェックリストを作る」感覚です。配る前に中身をもう一度点検します。
5. 必要なものと入れ方
VS Code
- これは何？：ノートのようにファイルを開いて編集できる作業机です。
- 用意するもの：インターネットに繋がるPC、Webブラウザ。
- 入れ方・開き方：公式サイトからダウンロードし、案内に従ってインストール。アプリを起動します。
- 最初の設定：左の四角いアイコン（拡張機能）を開けるようにしておきます。
- できたか確認：「Visual Studio Code」というタイトルと、左にアイコンの列が見えたら成功です。
OpenAI Codex 拡張
- これは何？：作りたいものを日本語で伝えると、コードを提案・修正してくれる相棒です。
- 用意するもの：OpenAIのアカウント、サインイン用のメール。
- 入れ方・開き方：VS Codeの拡張機能アイコンを押し、検索欄に「Codex」と入力し、OpenAIのCodex拡張を選んで「インストール」。インストール後、サイドバーのCodexアイコンを押してチャット欄を開きます。
- 最初の設定：案内に従ってサインインします。Chat欄に「こんにちは」と送れることを確認します。
- できたか確認：右側にCodexのチャットが開き、入力欄が表示されれば成功です。
OpenAI Platform（ダッシュボード）
- これは何？：料金や使用量、ファイル管理を確認する管理画面です。
- 用意するもの：OpenAIアカウント、Webブラウザ。
- 入れ方・開き方：Webブラウザで開き、アカウントでサインインします。
- 最初の設定：UsageやFiles、Playgroundなどのメニュー位置を把握します。
- できたか確認：Usageでグラフ、Filesでファイル一覧が見えればOKです。
Node.js（今回の実行環境）
- これは何？：ブラウザの外でJavaScriptを動かすためのエンジンです。
- 用意するもの：インストーラーを動かせるPC。
- 入れ方・開き方：公式サイトからLTS版をダウンロードしてインストール。VS Codeでプロジェクトフォルダを開きます。
- 最初の設定：プロジェクトを前回の続きとして開きます。
- できたか確認：Codexに「依存関係を確認して」と伝え、エラーがないことを確認します。
工具箱をそろえるイメージです。ドライバー（VS Code）、補助ロボ（Codex）、倉庫の管理盤（OpenAI Platform）を準備します。
6. エージェントと作るものの全体像
今回の最小成果物は次の3点です。
- 管理ページ（アップロード一覧・削除ボタン、公開前チェックのリンク）
- OpenAIのFile Searchで使うファイル/ベクトルストアの削除API連携
- 公開前チェック表（料金・認証・容量・ログ・APIキー）
流れは「アップロード→索引→検索→削除要求→OpenAI側削除」。
権限は管理者のみが操作し、監査ログで誰が何をしたかを残します。
たとえれば、図書室の本（ファイル）を台帳（一覧）で見て、廃棄票（削除）を切り、倉庫（OpenAI側）からも確実に回収します。
7. 手順1: ツールを準備する
目的と全体の流れ
VS Codeで前回までのプロジェクトを開き、Codexと会話できる状態にします。
読者が行う画面操作
- VS Codeを開き、前回のフォルダを「フォルダーを開く」で選びます。
- 左の拡張機能で「Codex」を検索し、OpenAIのCodex拡張が「有効」になっているか確認します。
- 左のサイドバーからCodexアイコンを押し、チャット欄を開きます。
成功の見分け方
- Codexのチャットで「準備できたらOKと返して」と送ると返事が来る。
- プロジェクト内のファイルツリーが見える。
つまずいたら
Codexのサインイン画面で止まる場合は、OpenAI Platformにブラウザでサインインできるか先に確認します。
8. 手順2: APIキーを安全に用意する
目的
APIキーを環境変数で管理し、コードや画面に出さないようにします。開発・本番のキーは分け、上限やアラートも設定します。
読者が行う画面操作
- OpenAI PlatformでAPIキー管理の画面を開きます。
- 新規キーを作る場合は名前を分かるように付けます。作成後は表示をすぐ閉じます。
- VS Codeでプロジェクトを開き、Codexに「.envを使って安全に読むよう設定して」と依頼します。
成功の見分け方
- アプリの設定ファイルにキーの実値が見えない。
- サーバー側からのみキーが参照される。
つまずいたら
キーの貼り付けは行いません。必要ならCodexに「環境変数から読む仕組みとダミー値で動作確認できるように」と伝えます。
9. 手順3: エージェントにアプリを作ってもらう
目的
管理ページの追加、ファイル一覧・削除、ベクトルストア削除、認証と上限、監査ログ、公開前チェック表を最小構成で実装します。
このボックスをコピーして、VS Code内のCodexチャットに送ります
Codexに送るプロンプト
目的：RAGアプリ（前回までのプロジェクト）に「アップロード一覧・削除」「OpenAI側のファイル/ベクトルストア削除」「公開前チェック」機能を最小構成で追加してください。
必ず守ること：
- OpenAI Responses APIとFile Searchを使う。Assistants API主体の実装にはしない。
- APIキー、ベクトルストアIDなどの秘密はサーバー側の環境変数のみで管理。.envにプレースホルダーを用意し、実値は書かせない。ブラウザやGitに流さない。
- アプリ側の削除（表示/自前DB）とOpenAI側の削除（Files/ベクトルストア）を明確に分け、両方の状態を画面で確認できるUIを用意する。
- 管理ページ（/admin など）を追加し、管理者のみアクセス可にする。認証は簡易ログインでもよいが、Cookieセッションで保護する。
- 「アップロード一覧」では、アプリ側の登録記録とOpenAI側のFiles/ベクトルストアのIDを突き合わせて表示する。
- 「削除」操作は2段階：まずアプリ側をソフトデリート→次にOpenAIのFiles削除APIとベクトルストア削除APIを順に呼ぶ。成功/失敗を監査ログに記録。
- 監査ログ：時刻・操作者・対象ID・結果（成功/失敗と理由）をサーバー側に保存。本文やAPIキーは残さない。
- 認証必須化：匿名アップロード不可。ユーザーごとにデータ分離（自分の資料だけ見える）。
- 容量/回数上限：ユーザーごとにアップロード容量（月間合計MB）と質問回数（日次）を設定し、超えたら丁寧なメッセージ。
- 公開前チェック表：画面に（1）料金確認リンク（OpenAI Pricing）（2）Usageダッシュボードへの導線（3）環境変数の検査結果（設定済/未設定）（4）認証の有無（有/無）（5）ログ有効（有/無）（6）上限値の現在値 を一覧表示。
- 前回までの機能（アップロード、質問、回答、参照元表示）を壊さない。必要なら既存UIを最小の変更で。
- 資料は安全なダミーサンプルのみを使う。個人情報や第三者の著作物は使わない。
- 実装前に、わからない点（既存のフォルダ構成や使用フレームワークなど）があれば日本語で質問してから進める。
必要なファイル：ルーティング、コントローラ、ビュー（管理ページ）、認証・上限制御、監査ログ保存、File Searchの削除呼び出し、.envテンプレート、READMEの動作確認手順。
動作確認：
1) ダミーファイルをアップロード→一覧に表示され、OpenAI側のIDも見える。
2) 削除を実行→アプリ側がソフトデリートされ、OpenAI側のFiles/ベクトルストアも削除される。結果が監査ログに記録される。
3) 公開前チェック表にすべての項目が表示され、リンクが動く。
失敗時：画面に理由を表示し、質問回数や容量の上限に達した場合は再開時刻や対処を提案して。Codexが作るものと、あなたが確認する点
- 管理ページの画面が追加される。
- 一覧にOpenAI側のIDが表示される。
- 削除後、OpenAIダッシュボードのFiles/ベクトルストアからも対象が消える。
- 公開前チェック表に料金ページとUsageのリンクが並ぶ。
10. 手順4: 動かして確認する
目的
ダミーファイルのアップロードから削除までを通しで試し、OpenAI側でも消えたことを確かめます。料金の増分はダッシュボードで見ます。
読者が行う画面操作
- 管理者でログインし、管理ページを開きます。
- ダミーファイルを1つアップロードします（安全なサンプル）。
- 「アップロード一覧」にOpenAIのファイルIDとベクトルストアIDが表示されることを見ます。
- 「削除」を押し、確認ダイアログで進めます。
- OpenAIダッシュボードのFilesと関連のベクトルストア一覧を開き、対象が消えているかを確認します。
- Usageを開き、使用量の増分が反映されたかを見ます（金額はページで最新を確認）。
成功の見分け方
- アプリの一覧から対象が非表示（ソフトデリート状態）になる。
- OpenAI側のFiles/ベクトルストアから該当が消える。
- 監査ログに成功の記録が残る。
つまずいたら
一覧にIDが出ない場合は、Codexに「索引時に保存するIDの項目名と保管場所を教えて」と質問します。
11. 手順5: エージェントと直す
目的
権限や削除の失敗を再現し、Codexに修正を依頼します。
読者が行う画面操作
- 管理者以外でログインして管理ページにアクセスし、拒否されるか確認。
- 存在しないIDに対する削除をわざと試し、エラーメッセージを確認。
- 上限を小さく設定し、超過時の表示を確認。
Codexに送る内容
「この操作で403と出た」「このIDで削除に失敗し、監査ログのメッセージはこう」と、画面に見える現象だけを伝えます。秘密情報は送らないようにします。
成功の見分け方
- 意図した権限エラーが出る。
- 削除失敗時でも監査ログに理由が残る。
- 上限超過で丁寧な案内が出る。
12. よくあるエラー
権限エラー（401/403）
- 画面で見えること：ログイン画面へ戻る、または「権限がありません」。
- よくある原因：APIキーの権限やプロジェクトの紐付け、管理者ロールの設定ミス。
- 最初に確認する場所：OpenAIのダッシュボードでキーが有効か、アプリの認証設定。
- エージェントへの質問：「認証ミドルウェアで管理者判定をログに出すよう追加して。どこでfalseになっているか可視化して。」
存在しないファイルID/ベクトルストアID
- 画面で見えること：「対象が見つかりません」や削除が無反応。
- よくある原因：アップロード記録とOpenAI側の同期ずれ、途中のエラーでID未保存。
- 最初に確認する場所：管理ページの一覧で、アプリ側の記録とOpenAI側のFiles一覧。
- エージェントへの質問：「索引時に取得したOpenAIのIDを確実に保存し、欠損時は再同期するタスクを追加して。」
レート制限・費用上限
- 画面で見えること：「しばらくしてから」や429エラー、課金上限の警告。
- よくある原因：短時間の連続操作、上限未設定。
- 最初に確認する場所：OpenAIのUsageと料金設定。
- エージェントへの質問：「指数バックオフでリトライ実装と、超過時のユーザー向け案内を入れて。」
13. 次に試すこと
- ソフトデリート後に一定期間で物理削除する自動ジョブ。
- 利用者が自分のデータをエクスポートできるページ。
- 使用量の月次レポートを自動生成し、管理者にメール通知。
14. まとめ
公開の鍵は「消せる設計」と「確認できる運用」です。小さく作って安全に広げましょう。
前回の機能を保ちつつ、今回は保存データの削除と公開前チェックを追加しました。
続けて試す場合は、前回の記事も復習に役立ちます：中学生にも分かる 自分の資料に答えるAI検索アプリの作り方 #5
