AIエージェント開発アプリからプロンプトを逆生成
AIエージェントでノーコード開発(2)の様に、名刺登録アプリはAIに与えるプロンプトを実装機能単位で与え、ステップアップしてアプリケーションを完成させました。ある程度コードが読めるエンジニアであれば、実装されたコードはイベントドリブン型で記述されており、読み易いと感じると思います。では、実際作成されたコードからAIは人がわかるプロンプトを出力することはできるでしょうか。以下に示すプロント文は、AIに作成してもらいさらに400文字から600文字の間で要約してもらったものです。
index.htmlから逆生成したプロンプト文
以下に要約全文を記します。
1. 基本的なHTML構造とスタイリング:
HTML5に準拠し、日本語設定、適切なmetaタグ、ファビコンを含みます。外部JSライブラリencoding-japaneseを読み込みます。CSSはインラインで記述され、ボディ背景、コンテナ、画像アップロードセクション、ボタン、テキスト入力フィールドの見た目を統一。名刺情報入力欄は太字表示、自動高さ調整機能を持ち、addressは2行、emailToSendは読み取り専用で薄いグレー背景です。Flexboxを活用し、PCとスマートフォン双方で適切に表示されるレスポンシブデザインが採用されています。広告エリアとシステム概要図表示エリアもスタイルが定義されています。
2. 主要なコンテンツセクション:
- ヘッダー: アプリケーションのタイトルと簡単な説明。
- 画像アップロード: 名刺の正面・裏面画像アップロード機能を提供し、プレビューを表示。ギャラリー選択とカメラ選択のラジオボタンで入力モードを切り替え可能です。「解析」と「終了」ボタンを配置。
- 通知欄: ユーザーへのメッセージやサーバーからの通知を表示するテキストエリア。
- 名刺情報: AI解析で抽出される組織名、氏名、連絡先など各種情報を表示・編集するテキストエリア（氏名は特に太字）。新設された「ノート」欄と「更新日付」入力欄も備えます。送信宛先フィールドと「名刺情報送信」ボタン、もう一つの「終了」ボタンも配置。
- 広告エリア: スポンサーリンクのプレースホルダー。
- 概要説明・概要図: アプリの簡単な手順説明とシステム概要図を表示。
- フッター: 運営会社、問い合わせ、プライバシーポリシー、著作権情報。
3. JavaScriptの機能:DOMContentLoadedイベントで全機能を初期化。画像ファイル選択時、プレビュー表示と同時に名刺情報・通知欄・送信先フィールドをクリアし、通知欄をリセットします。ラジオボタン選択に応じて画像入力フィールドのcapture属性を動的に制御し、スマートフォンでのカメラ直接起動に対応。全てのテキストエリアは入力内容に応じて自動で高さ調整され、ダブルクリックでリセット可能です。
「解析」ボタンは、名刺画像をBase64でサーバーの/analyze-imagesへ送信し、AI解析結果をUIに反映。サーバーから返されるsmtpUser値を送信先に設定します。
「名刺情報送信」ボタンは、UI上の名刺情報と画像を/send-card-infoへ送信。
両ボタンとも処理中は無効化され、ステータスが通知欄に表示されます。
「終了」ボタンは、UIの全情報をクリアし、サーバーの/endへ通知。ローカル環境では5秒後にウィンドウを自動で閉じ、Webサーバー環境では手動でタブを閉じるよう促すメッセージが表示されます。
node.jsから逆生成したプロンプト文
以下に要約全文を記します。
このNode.jsサーバーは、名刺画像のAI解析、情報メール送信、サーバー終了を担うバックエンドシステムです。
1. 名刺情報解析機能 (/analyze-images):
クライアントから送られた名刺の表面・裏面画像をBase64形式で受け取ります。@google/generative-aiライブラリを使用し、Gemini 1.5 FlashモデルでAI解析を実行。カスタムプロンプト（prompt_business_card.txtと追加指示）に基づき、組織名、氏名、連絡先（電話、メールなど）の11項目を抽出します。抽出不能な項目は「？」または「不明」を返却。結果はJSON形式でクライアントに返し、SMTP_USER値も付与します。主要項目に抽出漏れがあれば、ステータスを「warning」として通知します。
2. 名刺情報メール送信機能 (/send-card-info):
解析された名刺情報と元の画像データを受信。nodemailerを使って指定宛先へメールを送信します。重要なセキュリティ制約として、送信先アドレスがSMTP_USERと完全に一致しない場合、送信を拒否しエラーを返します。メール件名は「[氏名]様名刺情報」、本文は抽出情報をリスト形式で記載し、不明項目は「N/A」と表示します。
画像添付においては、Jimpで名刺境界（明るさ閾値200）を自動検出し、余白をトリミングします。トリミングが困難な場合はスキップ。その後、Sharpで画像を横幅1200px（拡大しない）にリサイズし、JPEG品質80%で圧縮して添付します。VCFファイルも生成し、メールに添付されます。
3. サーバー終了機能 (/end):
このエンドポイントへのリクエストがローカルホスト（127.0.0.1または::1）から来た場合のみ、サーバーを5秒後に正常終了させます。
技術的要件:
ExpressフレームワークでWebサーバーを構築。dotenvでGEMINI_API_KEY、PORT、SMTP_USER、SMTP_PASS、SMTP_HOST、SMTP_PORT、SMTP_SECUREといった環境変数を読み込みます。サーバー起動時、指定ポートが使用中の場合は、ユーザーに開放方法のヒントと共にエラー終了する堅牢なエラーハンドリングが実装されています。
評価
1．index.html説明文の評価
このプロンプト文は、UI定義や各ボタンの機能を適切に表現できていると評価できます。また、html構文やJavaScriptを知らない方でも内容把握ができます。 概要説明書としてコードを補完するドキュメントの活用が可能ではないでしょうか。
2. nodejs(app.js)説明文の評価
このプロンプト文は、詳細を作成させてプロンプトより画像処理の部分が薄くなった記述となっていますが、全体機能を分かり易く整理してまとめている文章になりました。 index.html文同様、概要説明書としての利用が可能ではないでしょうか。
3. AIが作ったプロンプトでの管理の課題
逆プロンプト文は読みすい文章ですが、コードの機能もれなく表現している訳ではありません。文章作成は言語生成の確率的モデルがベースですから、このコードに変更をいれた場合に、前回の文章とはまた異なる説明書を作る可能性が高いです。すなわち変更管理をするシステムの場合には、追加機能がより明確にできるプロンプト作成をする必要があります。