WebページをAIが分析するアプリを作ってみた——AIエージェントの設計と実装
こんにちは。yuto_engineeringです。
普段は組み込みソフトウェアの開発に携わりながら、個人でWebアプリケーションや生成AIを活用したシステムを開発しています。
突然ですが、Webページを見ていて「必要な情報だけAIが整理してくれたら便利なのに」と思ったことはありませんか？
実は私自身、転職活動を進める中で、そんなことを考えるようになりました。
求人情報を一つひとつ確認して、仕事内容や必要なスキル、勤務条件を整理する。さらに、自分の経験や希望条件と照らし合わせて比較する。
これが結構大変なんですよね。
「この作業を自動化できれば、もっと転職活動そのものに集中できるのにな……」
そんな思いから開発したのが、今回紹介する 「AI Web Scout」 というWebページ分析AIエージェントです。
この記事では、アプリの機能や技術構成だけでなく、AIエージェントをどのように設計したのか、開発中に直面した問題なども紹介します。
ちなみに、転職活動そのものについても、いずれ別の記事で振り返ってみたいと思っています。
今回は、その過程で生まれた個人開発のお話です。
1. 作ったのは、Webページを分析するAIエージェント
AI Web Scoutは、Chromeで閲覧しているWebページをAIが分析し、重要な情報を整理してくれるアプリです。
Chrome拡張機能とWebアプリケーションを組み合わせて開発しました。
基本的な使い方はシンプルです。
Chromeで分析したいWebページを開く
拡張機能からページ情報を取得する
送信する内容を確認して、AI分析を実行する
Webアプリで分析結果を確認する
ページの種類によって分析内容を変える
最初は求人情報の整理が目的でしたが、せっかく作るなら、ほかのWebページにも活用できるようにしたいと考えました。
そこで、現在は以下の5種類のページに対応しています。
ページの種類主な分析内容求人・副業案件必要なスキル、勤務条件、適合度、応募判断技術記事技術的な要点、難易度、実務への応用GitHubリポジトリ技術スタック、構成、品質面の注目点企業・サービス紹介サービスの特徴、顧客、ビジネスモデル一般Webページ要約、有用性、信頼性に関する注意点
例えば、求人情報なら応募を検討するための情報を整理し、技術記事なら学習や技術調査に役立つ情報を中心に分析します。
さらに、ユーザーのスキルや希望条件を登録しておけば、必要に応じて分析へ反映することもできます。
単なる要約ではなく、「自分にとって、その情報がどのような意味を持つのか」 まで整理できる仕組みを目指しました。
2. システム構成と使用技術
では、実際にどんな技術を使って作ったのか。
今回の主な技術構成は以下のとおりです。
分野使用技術フロントエンドNext.js / React / TypeScriptバックエンドNext.js Route HandlersAIOpenAI Responses API / Structured Outputs / Tool Callingデータベース・認証Supabase / PostgreSQL / Supabase Authデータ検証ZodChrome拡張機能Manifest V3 / TypeScript / ViteテストVitest
全体としては、Chrome拡張機能がWebページの情報を取得し、Next.jsのバックエンドがAI分析を実行、Supabaseが結果を保存する構成です。
今回はFastAPIを使わなかった理由
前回の記事では、Next.jsとFastAPIを組み合わせた生成AIアプリのスターターキットを紹介しました。
一方、今回のAI Web Scoutでは、バックエンドにもNext.jsのRoute Handlersを採用しています。
理由は、今回のアプリで必要な機能や開発規模を考えたときに、バックエンドをPythonで分離する必要性が高くなかったためです。
TypeScriptを中心にまとめることで、フロントエンドとバックエンドのデータ構造を共有しやすくなります。
もちろん、FastAPIにもPythonのAI関連ライブラリを活用しやすいなどのメリットがあります。
どちらが優れているということではなく、作りたいものに合わせて技術を選ぶことが大切だと考えています。
処理の役割も分けておく
また、今回の開発では、画面表示、AI分析、データ保存などの役割を分離しました。
AI連携にはAiAgentGatewayというインターフェースを設け、OpenAI API固有の処理を独立させています。
データ保存についてもRepository Patternを採用し、アプリケーションの主要な処理がSupabaseへ直接依存しない構成にしました。
MVP（実用最小限の製品）ではありますが、今後の変更や機能追加を考え、なるべく見通しのよい設計を意識しています。
3. AIエージェントに、どこまで任せるか？
今回の開発で特に考えたのが、**「AIにどこまで処理を任せるか」**という点です。
AIエージェントと聞くと、AIが自分で考えて、必要なツールを自由に使いながら作業を進めるイメージがあるかもしれません。
しかし、業務システムとして考えると、自由に動けることが必ずしもメリットになるとは限りません。
想定外のツールを実行したり、処理が終わらなくなったりすると困りますよね。
そこでAI Web Scoutでは、AIが判断する部分と、プログラム側で制御する部分を明確に分けることにしました。
制限付きのAIワークフロー
分析処理は、大きく次の流れになっています。
ページ情報を検証・整形する
AIがページの種類を分類する
分類結果に応じて分析方針を選ぶ
AIがページを分析する
分析結果を検証して保存する
ページの分類にはAIを使用しますが、分析方針はアプリケーション側であらかじめ定義したものから選択します。
また、AIが外部の機能を呼び出すTool Callingも利用していますが、現在使用できるツールはユーザープロフィールの取得のみです。
呼び出し回数も最大1回に制限しています。
つまり、AIに何でも自由に実行させるのではなく、必要な範囲で能力を活用する設計です。
AIの回答も検証する
もう一つ重視したのが、AIから返ってくるデータの扱いです。
生成AIは便利ですが、期待した形式の回答が必ず返ってくるとは限りません。
そこで、OpenAI APIのStructured Outputsを使い、分析結果を決められたデータ構造で受け取るようにしました。
さらに、Zodで受信データを再検証しています。
例えば、最初に「求人情報」と分類したページが、最終的に「技術記事」として分析された場合は、結果を保存せずエラーとして扱います。
AIが回答を生成できることと、アプリケーションとして正しく処理できることは別の話です。
このあたりは、生成AIを実際のシステムに組み込むうえで大切なポイントだと考えています。
4. Webページを安全に取得するための工夫
AIでWebページを分析するには、まずページの情報を取得する必要があります。
ただし、ページ内の情報を何でも取得してAIへ送信すればいい、というわけではありません。
例えば、入力フォームの内容や認証情報などが含まれていたら困りますよね。
そこで、Chrome拡張機能では取得する情報を制限しています。
取得対象は、ページタイトル、URL、本文テキスト、選択テキスト、meta descriptionなどです。
一方、フォームや編集可能な領域などは除外し、HTMLそのものは送信しません。
また、パスワードやAPIキー、認証トークンらしい文字列をマスクする処理も実装しました。
こうした自動処理だけですべての機密情報を検出できるわけではないため、AIへ送信する前にユーザーが内容を確認する仕組みも設けています。
AIへの不正な指示にも注意する
Webページには、AIに対する命令のような文章が含まれている可能性もあります。
これはPrompt Injectionと呼ばれる問題の一つです。
AI Web Scoutでは、Webページの本文を信頼できない外部データとして扱い、アプリケーション側の指示とは分離しています。
さらに、AIが利用できるツールや実行回数を制限し、ページ内の文章だけで処理範囲が勝手に広がらないようにしています。
完全な対策ができるわけではありませんが、AIへ渡す情報と、AIに許可する操作の両方を考えることが重要だと思っています。
5. 分析結果を見える化する
AI Web Scoutでは、分析結果だけでなく、処理の進行状況も確認できるようにしました。
そのために実装したのが「Agent Workspace」という画面です。
この画面では、ページの情報、処理ステップ、最終的な分析結果を確認できます。
例えば、入力の検証、ページ分類、分析方針の選択、AI分析、結果の保存といった工程を表示します。
各工程の実行状態や所要時間、エラーが発生した箇所なども確認できます。
なお、表示しているのはアプリケーションが記録した処理情報であり、AIモデルの内部思考そのものではありません。
分析結果は履歴として保存
分析結果はSupabaseのPostgreSQLに保存しています。
過去の分析を検索したり、詳細を確認したり、同じページ情報を使って再分析したりすることも可能です。
また、ユーザー認証とRow Level Security（RLS）を組み合わせ、ユーザーごとにデータへのアクセスを制御しています。
一度分析して終わりではなく、後から情報を見返して活用できることも意識しました。
6. 手動テストで発見した、Chrome拡張の問題
今回の開発では、自分で動作テストをしている中で発見した問題もありました。
その一つが、Chrome拡張機能のactiveTabに関する問題です。
別のサイトへ移動すると取得できない？
Chrome拡張機能では、閲覧中のページへアクセスするためにactiveTabという権限を使用しています。
これは、ユーザーが明示的に操作したタブに対して、一時的なアクセス権限を取得する仕組みです。
ところが、実際に動作テストをしていたところ、別のWebサイトへ移動した後に、ページ情報を取得できなくなるケースを発見しました。
調べてみると、原因はChromeの権限仕様でした。
activeTabの権限は、別のオリジンへ移動すると失効します。
つまり、最初のサイトで取得できていても、別のサイトへ移動すると、同じ権限では取得できなくなるわけです。
権限を増やさずに解決する
この問題に対して、広いアクセス権限を要求するという方法も考えられます。
ただ、それでは最小限の権限で動作させたいという設計方針と合いません。
そこで、別のサイトへ移動して権限が失効した場合は、ユーザーに再接続を案内する仕組みにしました。
Side Panel上に「Reconnect required」と表示し、Chromeのツールバーから現在のページへ接続し直してもらう流れです。
これにより、必要なページだけにアクセスするという方針を維持できました。
今回の問題は、実際にブラウザを操作して確認していたからこそ発見できたものです。
仕様書やコードだけでは気付かない問題もあるので、利用者の操作を想定したテストはやっぱり大切だなと感じました。
7. 品質面で意識したこと
個人開発ではありますが、機能を作るだけでなく、異常時の動作やデータの扱いも確認しています。
開発フェーズ8の完了時点では、Vitestによる109件の自動テストを用意しました。
主に確認しているのは、次のような内容です。
入力データやAI出力が仕様どおりの形式になっているか
未許可のツールをAIが呼び出そうとした場合に拒否できるか
認証されていないユーザーがデータへアクセスできないか
機密情報らしい文字列が適切にマスクされるか
エラーが発生したときに、安全な形で処理を終了できるか
また、AI分析に失敗した場合は、その状態を保存し、どの工程で問題が発生したか確認できるようにしています。
もちろん、今回のアプリはまだMVPです。
大規模運用を想定したジョブキューや自動再試行、負荷テストなど、今後対応したい課題も残っています。
ただ、最初からすべてを作り込むのではなく、必要な機能を実装しながら、将来の拡張も考えて設計することを大切にしました。
まとめ——AIを「便利な機能」から「使える仕組み」へ
今回は、個人開発したWebページ分析AIエージェント「AI Web Scout」を紹介しました。
開発のきっかけは、転職活動で感じた「求人情報の整理が面倒」という、かなり身近な困りごとでした。
そこから、ページの種類に応じたAI分析、Chrome拡張機能との連携、処理状況の可視化、分析履歴の保存などを実装しました。
今回の開発を通して改めて感じたのは、生成AIを使うこと自体よりも、どう使える仕組みにするかが大切だということです。
AIにどこまで任せるのか。
どの情報を取得し、どのように保護するのか。
AIが返した結果を、どう検証して利用するのか。
こうした部分まで含めて考えることで、単なるAIのデモから、実際に活用できるアプリケーションへ近づけられると思っています。
私はこれまで、組み込みソフトウェアの開発を中心に、設計・実装・不具合解析などに携わってきました。
WebやAIとは技術分野が異なりますが、役割を分けて設計することや、想定外の動作を考慮することなど、共通する考え方も多くあります。
今後も、こうした個人開発の取り組みや、実装で工夫したことを紹介していきたいと思います。
また、今回の開発のきっかけになった転職活動についても、別の記事で振り返る予定です。
どのように転職活動を進めたのか、何を重視して企業を選んだのかなど、実体験を交えながら書いてみたいと思っています。
興味のある方は、そちらも読んでいただけるとうれしいです。
ソースコード・設計資料
今回紹介したAI Web Scoutのソースコードと設計ドキュメントは、GitHubで公開しています。
生成AI・Webアプリケーション開発のご相談について
生成AIを活用した業務ツールやWebアプリケーションの開発を承っています。
Next.js、TypeScript、Python、FastAPI、OpenAI APIなどを活用し、業務課題に合わせたアプリケーションの設計・開発に対応しています。
「生成AIを使って業務を効率化したい」
「自社に合ったAIツールを作ってみたい」
「まずは小規模なPoCから試したい」
といったご相談にも対応しています。
ご相談から仕様確認まで、通話・面談なしのテキストベースで進められます。
お気軽にご相談ください。
