AIエージェントでノーコード開発(1)で要件の概要を示しました。このコラムでは実際のプロンプトを掲載します。

ステップ1：基本フレームワーク構築

1. 名刺画像の解析とコンソール表示の指示

./image/Meisi.png`を読み込み、会社名、氏名、読み仮名、電話番号などの情報を抽出してコンソールに表示してください。Geminiで適切なプロンプトを生成し、画像解析を実行してください

2. HTMLの構築（レイアウトとボタン）

名刺の表面と裏面を表示するコンテナ、処理状況を表示するコンテナ、名刺情報を表示するコンテナを配置したHTMLを作成してください。送信ボタンと終了ボタンは画像表示コンテナ内に配置し、各要素は画面サイズに合わせて調整されるようフレックスボックスレイアウトを使用してください。

3. app.jsとindex.htmlの連携

送信ボタンがクリックされた際に、サーバー側で画像を受け取り、名刺情報を解析してクライアントに表示するよう、app.jsとindex.htmlを変更してください。また、名刺解析の成功/失敗状況を通知欄に表示する機能も追加してください。

ステップ2：名刺画像の整形

1. 画像の切り出し

読み込んだ画像から名刺部分のみを切り出し、./gazou.pngとして保存してください。

(AIからの返答を受けて) 名刺の背面は黒で、名刺との境界が明確であると仮定して、JimとSharpなどの簡易的なツールを用いて画像を切り出してください。完全な長方形である必要はなく、横幅は1200pxとしてください。切り出しができない場合は、元の画像を幅1200pxにリサイズしてください。

ステップ3：名刺情報のメール送信

1. メール送信ボタンとメールアドレス入力欄の追加

名刺情報コンテナに「名刺情報送信」ボタンを追加し、クリック時にメールアドレスを入力するテキストエリアを表示してください。送信ボタンクリック時に、入力されたメールアドレス、名刺画像、画面に表示されている名刺情報をサーバー側で受け取るようにしてください。受け取った情報は、まずはコンソールに出力してください。画像は受け取ったメッセージで問題ありません。

２．テストメール送信

受信したメールアドレスに「テスト」という件名でメールを送信してください。

3. 名刺情報と画像のメール送信

画面から受け取った名刺情報と画像を指定のメールアドレスに送信してください。件名は名刺の名前、本文には整形された名刺情報、添付ファイルには整形後の画像を添付してください。エラーが発生した場合は、エラーメッセージを整形して通知欄に表示してください。

メールの添付に名刺情報を編集して氏名.vcfを作成して添付してください。項目の値が？またはN/A、空白の場合は出力項目に含めないでください。

これらのプロンプトは、開発の各ステップにおけるAIへの指示を示す例です。実際には、これらのプロンプトをベースに、さらに詳細な指示や修正を加えながら開発を進めました。特に、AIが期待通りの動作をしなかった場合などは、プロンプトを修正したり、追加の情報を提供したりする必要がありました。この試行錯誤のプロセスは、ノーコード開発の醍醐味とも言えるでしょう。