Zenn
🚀

【個人開発】AIフォーム入力自動化に挑戦したら、想像以上に大変だった話。

2025/02/05に公開
Chrome拡張
Firebase
Cloud Run
Vertex AI
Gemini
tech

こんにちは、個人開発をライフワークとしております入江と申します。過去にはMENTAなどのサービスをつくっていました。

じつは昨年末ごろからとあるプロダクトを個人開発していました。それがフォーム入力をAIで自動化するChrome拡張「Anput」です。

どんなときも新しいことには学びがあるもので...今回はそのお話をしたいと思います。開発における苦労やポイントが、これから同様のシステムを構築する人の参考になれば幸いです。

実はこの記事は「AI Agent Hackathon with Google Cloud」のエントリー記事にもなっています。
https://zenn.dev/hackathons/2024-google-cloud-japan-ai-hackathon

最初からエントリーするつもりでつくっていたわけではないのですが、応募要項をみていたらまさにGoogleプロダクトばかりを採用しており、当てはまったのでエイヤっと応募してみました。

Anput（アンプト）とは


Anputは、Google Chromeの拡張機能として動作し、ユーザーが入力フォームを開いたときにAIが自動で入力してくれるアプリです。

名称は「Input × AI」が元ネタですが、古代エジプトの女神Anput（アンプト）から “神の力を借りる” イメージも組み合わせています。やや大げさな響きではありますが(笑)。

どのような感じで動作するかはこちらをご覧ください。
https://www.youtube.com/watch?v=V7bamPZA8F4

開発の背景

面倒なフォーム入力もうちょっと楽にできないかな...

みなさんもよくあると思いますが、名前やメルアド、住所の入力をもとめられるシーンはたびたびありますよね。毎回めんどくさいなーと思っていました。

これをchrome拡張でAIを使ってサクッと入力できるとちょっといいかもなーというところからデモ的に開発をはじめてみたのがはじまりです。

しかし実は個人だけでなく、これは企業では特に強いニーズがあるはずです。

たとえばPDFをもとに商品を入力更新するとか、物件資料をみながら物件入力するとか、お問い合わせメールをもとに自社CRMに入力するとか。なんらかの情報をもとに人間が手入力する機会って毎日たくさんありますよね。それを楽にできたら...。

こうした「定型的な入力作業」の負荷を最小化できれば、日常の仕事も楽に、そして速くなるはず。Anputでは「画面のフォーム構造をAIが把握し、必要な情報を自動入力してくれる」機能を目指して開発を進めました。

開発は想像以上に大変だった

最初は 「1か月もかからずサクッとできるだろう」 と考えていましたが、実際は3か月くらいかかりました。本業の合間を縫って、早朝や夜、土日で作業を進めるとなれば仕方ない部分もあります。とはいえ、開発過程で特に苦労したのは以下です。

1. Chrome拡張のセキュリティや仕様理解

Chrome拡張をChromeウェブストアで公開する場合、ソースコードをすべてアップロードする必要があります。ユーザーがインストールすれば、ローカルにソースが保存されるのでリバースエンジニアリングが可能です。そのため、以下のような機密情報は拡張内に含めないよう注意が必要となります。

  • LLMを利用する際のAPIキー
  • Firebase等の認証情報
  • その他シークレットに当たるトークン類

さらに、manifest.json でのパーミッション指定や background.js と content_scripts の役割などを正しく理解しなければなりません。特にChrome拡張では下記のような概念があります。

  • manifest.json: 拡張機能の名前、バージョン、アイコン、アクセス権限などを定義する
  • background.js: バックグラウンドで動作し、ブラウザイベントを処理するスクリプト
  • content_scripts: Webページ上で動作し、そのページのDOMにアクセスできるスクリプト（フォーム解析などに使う）
  • permissions: どのドメインにアクセスできるか、あるいはタブ操作やクリップボードの操作など、拡張機能に許可する機能を指定する

最初はこのあたりを「すべてChrome拡張だけで完結させよう」と試みたものの、バックエンド側でも処理が必要になり、結果的に工数が増えてしまいました。自分単体で使うものならすぐにできるのですがこれをみなさんに利用してもらえるようなプロダクトにするにはいろいろと考慮する必要があり時間がかかってしまいました。

2. バックエンドとLLM連携

拡張機能がLLM（Gemini API in Vertex AI など）に直接リクエストを投げる方法をとる場合、APIキーを拡張内に埋め込むと前述の通りセキュリティ上問題が生じます。また、ユーザーごとに認証や利用上限、サブスク課金などを管理したいので、サーバー側でAPIを呼び出す構成にしました。

ということからサーバーでログイン処理を行い、トークンを発行したりログ（使用履歴）を残したりするための仕組みが必要となり、連携部分の実装に苦労しました。

システムアーキテクチャ

最終的に完成した構成は以下のとおりです。なるべく保守運用コストを下げるため、Google Cloud Run（コンテナ上でアプリを動作させるマネージドサービス）を採用し、Firebase Authenticationでユーザー認証を管理しています。

  1. Chrome拡張

    • サイドパネルでチャットUIを提供
    • ユーザーがPDFやテキストファイルを添付すると、その情報をバックエンドへ送信
    • フォーム要素の抽出やラベル情報などをAIに投げ、返ってきた結果を実際のフォームに入力する
    • よく使うプロンプト（命令文）を保存できるようにし、再利用を効率化

  2. バックエンド（Cloud Run上）

    • Google OAuth2でのログイン後、Firebase Authenticationを利用してカスタムトークンを発行し、認証管理
    • LLMへのAPIコールを担い、結果をChrome拡張へ返す
      • 具体的には Vertex AIのGemini 1.5 Pro（今後2.0になる予定）を呼び出す
      • 入力元ファイルやユーザーの指示をもとに、必要情報をまとめて返す
    • 利用クレジットの管理、サブスクプランの決済（Stripe）を実装

  3. LLM（Vertex AI Gemini API）

    • ユーザーから送られたソース情報と指示文をもとに、フォーム入力で必要なデータを抽出・生成
    • 正しいフィールドと適切なテキストを対応付けるヒントを多数与えることで精度を上げる

運用・課金システム

  • サブスクプラン：Stripeで決済を管理

CloudRunなど個人でもGoogleが提供しているあらゆるものを組み合わせることで、ずいぶんといろんなことが比較的容易にできるようになっていてありがたいです。

がんばりポイント

1. フォーム要素の抽出

WebページのHTMLソースをそのままLLMに渡すと、不要なタグや膨大な情報でノイズが多くなりがちです。そこで、以下の工夫をしました。

  • フォーム要素（<input>, <textarea>, <select>など）を解析
  • 「直近のラベル要素」「隣接するテキスト」「スクリーンショット」などをセットにしてLLMに渡す
  • 「フォーム要素に対して入力すべき情報を特定するための追加ヒント」を与える
    こうすることで、LLM側が「どのフィールドに何を入れるか」をより正確に推論できるようになります。

2. UIデザイン

機能を増やしすぎたり、ボタンや説明を増やしすぎると、かえってユーザーを混乱させる可能性があります。そこで、サイドパネルのチャットUIは最小限の操作で済むよう意識しました。

開発中は「機能を増やしたけれど使いにくい」「機能を絞ったけれど物足りない」を何度も繰り返し、最終的にシンプル且つ直感的なものに落ち着きました。

3. 多言語対応

日本語だけでなく、海外のユーザーでも使えるようにするため、多言語化対応を行いました。ユーザーのブラウザ言語設定を読んで、自動的にローカライズできるようにしています。

また、チュートリアルやヘルプページなどの文言は、JSONなどのリソースファイルから読み込む設計にし、言語ごとに翻訳が容易に行えるようになっています。

使ってみたいな、と思われた方はこちらからご利用ください。
https://anput.shingoirie.com/

AI時代の開発スピードと今後の展望

AIエージェント元年開幕

近年ではCursor や Windsurf, Cline, RooCode, Devin など、AIを活用したコード補完/生成ツールが続々登場し、個人でも短期間で高品質な開発が可能な時代になっています。最近はさらにDeepSeek、o3-mini のようにプログラミングに強いモデルも出てきており、複数のプロジェクトを一人でもリアルタイムにこなせるほどの生産性向上を実感できます。

https://www.youtube.com/watch?v=RiVeVu-P-G8

今後のバージョンアップ

現時点ではGemini 1.5 Proを利用していますが、まもなくGemini 2.0がVertex AIで利用可能になる見込みです。モデルの賢さやマルチモーダル能力が進化すれば、入力成功率も向上し、より高度な作業が自動化できるようになるはずです。

追記：25/02/06にGemini2.0がリリースされましたのでAnputもバージョンアップしました！

モデルが今後賢くなっていけば、CSVを渡して複数ステップのフォーム入力を連続で行う、または作業手順を記録させて自動反復するというような業務向け機能を追加していくかもしれません。

Autoronもお楽しみに


所属している「ランサーズ」では Autoron（オートロン） というAIアシスタントサービスを提供しています。外部アプリ（Google関連、Slack、Chatwork、Notionなど）とLLMを連携し、様々なワークフローを簡単に組み立てられる機能をまもなくリリース予定です。

まとめ

Anput（アンプト）は一見シンプルな「フォーム入力支援ツール」ですが、個人情報入力、商品情報登録、CRM入力、不動産情報管理、フォーム営業など多岐にわたる入力作業を効率化 できます。法人向けプランも用意しておりますので、興味がある方はお問い合わせください。

今年はAIエディタが加速的に進化していますので、毎月1本の個人開発プロダクトリリースという目標をかかげていきたいと思います。

https://x.com/iritec_jp/status/1886942401899716887

Discussion