名刺登録WEBアプリの開発ステップ紹介
名刺登録Webアプリ（CatchCardｰパシャ名刺）は、名刺画像から名刺の各情報をAIのOCR機能で展開をして、その情報をメール送信する仕組みです。利用者の名刺を都度連絡帳に手入力する手間を大幅に削減することができます。システム構成図は下図の通りです。今回はアプリをノーコードで開発した時のAIに指示したプ開発ステップの概要を紹介します。
ノーコード開発はAIに要件を伝える方針が大事。
名刺登録のWebアプリはサーバ側javascript約700ステップ、Index.htmlや約1000ステップから構成されています。システム構成は上図の通りです。機能概要は「名刺画像から名刺項目を読み取り、登録されているメールアドレスに画像と共にその情報をメール本文に編集して送る」です。私は実施しませんでしたが、このプロンプトをAIに与えてWebアプリを作ることもできたかも知れません。今回は実現可能性を確認しながら確実な仕組みを作る為に、機能検証のプロンプトから開始して、最後に細かいUI調整のプロントで名刺登録アプりを完成しています。すなわち「Whatを実現するためにHowを繰り返す」という方針で臨みました。
Howをどのように実装するかを確かめるということは、ノーコード開発では重要な要素と私は考えます。AIが作成したコードを読むことは殆どしませんが、読むことができる事前学習をおこない、Howを伝える時に簡潔で明確な指示となるように努めました。
コピペでノーコード開発する道具立て
コード生成環境は、最近はVS Code(Visual Sauce Code)で行うことができ、AIを会話をする仕組みとして、CursorやClaudeCodeを利用することが最近のトレンドです。ただこの場合は、コードを見ながら必要な機能をAIに道具立てをしてもらうため、コードを読めることと素早くタイピングできる技術が必要となります。私はシルバー世代ですので画面をなぞることも素早いタイピングも苦手になっています。
そこで、私は自作のChatツールで、前回の複数のコードファイルを読み込ませて、そのを前提に新たな要件を加味したコードを全文表示させることで、機能追加を行いました。もちろん既存のAIツールでもファイル読込をして実現は可能な部分もあると思いますが、比較的長文の扱いにたけているGeminiをベースとした「CrossChat」を利用することで全文コピペを実現しています。
機能はイテレーション（反復）開発でステップアップ
イテレーションは次の通りです。
- **人間** 作成したい機能の概要をプロンプトでAIに伝える
- ** A I** 事前のソースコードとプロンプトを解析し、機能を追加した全体のソースコードを生成する
開発ステップ
ステップ1：基本フレームワーク構築
- 名刺画像から会社名、氏名などの情報を抽出し、コンソールに表示する機能を実装（app.js）
- 名刺画像を画面に表示し、抽出された情報を表示するHTMLを作成（index.html）
- 送信ボタンクリック時に、サーバー側で画像処理を行い、クライアントに結果を表示するよう、app.jsとindex.htmlを連携
- 基本的な動作確認と画面調整
ステップ2：名刺画像の整形
当初、AIに高度な画像処理を依頼しましたが、拒否されました。そこで、簡易的な切り出しツール（Jim, Sharp）の使用を提案し、AIに実装させました。名刺の背面が黒く、境界が明確であることを前提に、1200px幅で切り出す処理を実装しました。
ステップ3：名刺情報のメール送信
- 「名刺情報送信」ボタンを実装。ボタンクリックで、メールアドレス入力欄を表示するように変更。入力されたメールアドレス、名刺画像、名刺情報をサーバー側で受け取るように実装
- サーバー側で受け取った情報を元に、テストメールを送信する機能を実装
- 名刺情報と画像を指定のメールアドレスに送信する機能を実装。件名は名刺の名前、本文には名刺情報、添付ファイルには整形後の画像を添付。エラー発生時は、エラーメッセージを通知欄に表示
- 名刺情報を名刺太郎.vcfの様にして、各メーラーの連絡帳に登録できるファイルを添付
まとめ
CrossChatにapp.jsとindex.htmlを読み込ませ、変更要求をプロンプトで指示することで、ソースコード全体をAIに生成させました。この開発手法により、直接コードを読む作業はほとんど発生しませんでした。また、サーバー側の処理に関する概要説明書もAIに作成させました。開発期間は実質2日間（8時間×2日）でした。