CatchCard（名刺登録アプリ）は、名刺画像から情報を読み取り、連絡帳に登録できるアプリケーションです。
Node.js（JavaScript）とindex.html（JavaScriptおよびCSS）は、AIエージェント（Gemini）にCatchCardの入出力と機能要件を文章で与えることで、プログラムコードを丸投げで作成してもらいました。
私は全くコードを作成していません。一部の機能は後から追加しましたが、実質的な作成期間は2日です。
横書き・縦書き、日本語・英語などの表記の違いはAIが判断して編集するため、手修正はほとんど発生しません。（AIが誤る場合もありますので、点検は必要です）。以下に機能と運用方法を紹介します。
「名刺登録アプリの機能」
概要は以下の通りです。
- PCの場合は名刺画像フォルダーから、スマホの場合には撮影した画像をアプリに取り込みます。
- AIに氏名、会社名、住所、電話番号などの名刺情報の展開を指示します。
- 展開された名刺情報を確認後、その情報を指定されたメールアドレスに送信指示をします。
- サーバーアプリは名刺情報を受け取ると、件名に氏名、本文に名刺詳細情報、整形した名刺画像、および連絡帳にそのまま登録可能な「氏名.vcf」ファイルを添付してメール送信します。
- 処理の正常/異常は通知欄に表示されます。
- 終了ボタンで表示項目をクリアします。ローカル起動の場合は、画面を閉じるとサーバー処理も終了します。
この処理を行うプロンプトは改めて報告します。
「使用するための事前準備」
- GeminiのAPI_KEYを取得します。
- SMTPのホスト名、ポート番号を登録します。
- SMTPのユーザー名（メールアドレス）とパスワードを登録します。このパスワードは、アプリでメール送信を行うための認証に必要です。
「A: ベーシックな運用操作」
※ この操作は、PCサーバーを立ち上げたPCの画面で実行します。名刺画像は事前にPCの任意のディレクトリに保存が必要です。
- CatchCardアプリ（localapp.js）が存在するディレクトリをカレントにします。
- node localapp.js
を実行し、Node.jsを起動します。CatchCardのWeb画面（http://localhost:3000`）が立ち上がります。 - CatchCardの画面から名刺の読み込み、メール送信処理まで一連の操作を行います。
- 名刺登録処理終了時に「終了」ボタンを操作し、画面をクリアします。5秒後に画面が消え、localapp.jsは自動で終了します。
- 誤ってブラウザを閉じた場合、タスクが残るケースがあります。その場合は、タスクマネージャーなどからプロセスを終了してください。
「B: ローカルネットワーク上でスマホで操作する」
※ この操作は、PCサーバーを立ち上げたPCと同一ネットワーク内のスマートフォンから実行します。スマートフォンでカメラを起動して名刺登録処理ができます。
- CatchCardアプリ（localapp.js）が存在するディレクトリをカレントにします。
- node app.js` を実行し、Node.jsをサーバーとして起動します。
- スマートフォンで
http://[PCサーバーのIPアドレス]:3000/index.htmlにアクセスして、CatchCardの画面を開きます。 - CatchCardの画面から名刺の読み込み、メール送信処理まで一連の操作を行います。
- 名刺登録処理終了時に「終了」ボタンを操作し、画面の内容をクリアします。この時画面は消えません。画面が不要であれば、スマートフォンの操作で該当画面を閉じます。
- app.jsは起動したままなので、強制終了する場合はターミナルで
Ctrl+Cを押して終了します。
※ この操作では、PCサーバーのIPアドレスのポート番号3000に他の端末からアクセスできるよう、ネットワーク管理者に依頼する必要があります。
「ウェブアプリ”名刺登録”を立ち上げて操作する」
※ 本アプリをGCPにデプロイしてWebアプリとして画面操作をすることも可能です。この処理はGCPのCloud Runアプリとして動作しますが、登録手順等は公開していません。個別にご相談ください。
「まとめ」
CatchCardは、名刺から連絡帳へ簡単に登録ができる便利なアプリです。このアプリはAIを使いノーコードで作成しました。シングルページアプリケーション（SPA）として、同様な画面構成の仕組みは、その応用としてノーコードで十分に作成可能と判断します。