(技術的には)社内システムもOKなブラウザエージェントを作ってみた！

第47回 JAWS-UG札幌 勉強会 コンテナ特集！での登壇資料です。誰なんと言おうとコンテナの話です()

Transcript

1. 社内システムもOKな ブラウザエージェントを作ってみた！ 2026/02/13 (金) 第47回 JAWS-UG札幌 勉強会 コンテナ特集！ 福地開
2. (技術的には)社内システムもOKな ブラウザエージェントを作ってみた！ 2026/02/13 (金) 第47回 JAWS-UG札幌 勉強会 コンテナ特集！ 福地開
3. Who am I ? 福地 開 (ふくち はるき) @har1101mony 所属：NECソリューションイノベータ/JAWS-UG東京 年次：3年目 業務：Agent Builder 実績：AWS Community Builders (AI Engineering) 2025 Japan AWS Jr.Champions 2025 Japan All AWS Certifications Engineers
4. 今日話すこと ◆Bedrock AgentCoreを用いたブラウザ操作エージェントについて • きっかけ：社内re:Capにてこんな質問が… • 解決策：Chrome拡張機能 • 設計・実装解説 • デモ • まとめ ※資料中で「AI」と記載しているものは「生成AI」とりわけ「LLM」のことを指します ※所属組織とは一切関係ない、私個人の意見・考えとなります
5. きっかけ：社内re:Capにて こんな質問が…
6. 社内Webシステムへの入力を自動化できないの？ ◆恐らく勤怠登録・PJ登録などを自動化したいという願望がある エージェントで 入力自動化 できないんか？
7. 社内Webシステムへの入力を自動化できないの？ ◆AWSにおけるAIエージェント×ブラウザ操作といえば以下3つ • Amazon Bedrock AgentCore Browser: リモートブラウザ環境 • Amazon Nova Act : ブラウザエージェントを作って運用するサービス • Strands Agents: AWSが提供するエージェント作成フレームワーク • 組み合わせると、リモートブラウザ上でセキュアにエージェントを動かせる https://aws.amazon.com/jp/nova/act/ https://github.com/awslabs/amazon-bedrock-agentcore-samples/tree/main/01- tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool
8. 弊社だと現状は厳しそう… ◆しかしAgentCore Browser上で社内システムにアクセスしようと しても色んな制約で上手く行かない • 社内ネットワークとの接続、ログイン方法、証明書など…
9. 弊社だと現状は厳しそう… ◆しかしAgentCore Browser上で社内システムにアクセスしようと しても色んな制約で上手く行かない • 社内ネットワークとの接続、ログイン方法、証明書など… ◆Browser自体は近日のアップデートで徐々に機能拡充が進む • Amazon Bedrock AgentCore Browser now supports custom browser extensions →Chrome拡張機能をセッション起動時に自動インストールできるように • Amazon Bedrock AgentCore Browser now supports browser profiles →ログイン状態を保存して、別セッションでも再利用できるように • とはいえVPC内にBrowserを配置して社内ネットワークと繋いで… とするのは大変…
10. (でもそろそろできるようになりそう…) ◆2日前に出たばっかりのやつなので一旦見なかったこととします
11. 解決策：Chrome拡張機能
12. Chrome拡張 with エージェント ◆今開いているブラウザを操作するエージェントがあればできそう • 以下ブログを参考に、エージェントをChrome拡張のバックエンドで動かす • 会社用PC上でChromeを開いて拡張機能を有効にする形 • 開いているWebページを自然言語で操作するAIエージェントを作ったよ(Zenn) ◆これで以下の課題を解決する • エージェントが動作し、かつ社内ネットワークにも接続できる安全な環境を 用意するのが面倒 • ログインした状態でエージェントに操作を任せたい • エージェントには自律的に、でも暴走しないようにコントロールしたい • ローカルのエージェント+Chromeでもできるが人を選ぶので、 Web上で認証さえ通れば社内の誰でも使えるような汎用性がほしい
13. (余談)ローカルのエージェント×MCPの場合 ◆使うまでのハードルが高すぎる • コーディングエージェント使用の申請出して… • ローカルにコーディングエージェント入れて… • uvやnode入れて… • Playwright/Chrome DevTools MCPサーバー or Agent Browser設定して… • 使い方をSkillsなどで設定して… • 社内プロキシ回避の設定入れて… • エージェントに指示すればOK！ だったら自分 でやるわ 簡単でしょ？ (X民の感覚)
14. 設計・実装解説
15. 設計：使われるAIエージェントを目指すために ◆接点を増やすため、できるだけ普段使うツールに寄せることが大事 • Chromeなら毎日使うし、拡張機能ワンクリックで使えるのが大きい • 他にもSlack/TeamsなどのコミュニケーションツールやIDEなど • 人によってはExcelやスプレッドシート？(Claude in Excelに期待) • 最近だと物理デバイスをエージェント化するケースも？ ◆逆に独自アプリだと1つハードルが上がる • わざわざそのサイトにアクセスしないといけない時点でハードルがありそう • とはいえチャット以外の機能も求めると、アプリ化は必須 • 人とエージェントのインターフェース設計が重要 • AgentCoreは割と色んなところに生やせるので色んな方法を試していきたい
16. アーキテクチャ ◆Chrome拡張機能からエージェントを呼び出す形 • API Gateway+Lambda+AgentCore Runtime(Docker)+Bedrockの王道構成 • ストリーミングレスポンスのため、API GatewayはREST APIで LambdaはNode.jsを用いる • Strands Agentsには画面操作用のツールと、日付やカレンダーを取得する ツールを使えるようにしている
17. エージェントとChrome拡張の実装 ◆エージェントがセキュアに画面を操作する仕組み • エージェントに直接画面を操作させると、万が一暴走した時にリスクあり • エージェントは必要に応じてブラウザ操作ツールを使う →ただし直接ブラウザを操作するのではなく、jsonを返すだけ • Chrome拡張機能側でそのコマンドをプログラムとして実行する
18. デモ ◆朝、勤怠登録を自動化するイメージ • 人が勤怠登録を依頼 • エージェントは現在の日付を取得し 前の労働日が何月何日なのかを把握する • 該当する日付を対象に、カレンダーで スケジュールを取得する • そのスケジュールを元に勤怠登録を行う
20. まとめ ◆AgentCore BrowserやNova Act、個人的には期待大 • 昨年11月頃までは日本語がBrowser上で表示されなかったが、 今では表示されるようになっている • ただ、場合によっては既存で用意されている機能やサービス以外を 使う選択肢もありそう ◆エージェントを使うスキルと作るスキル、両方が求められる • 日常からエージェントに触れることでどんなことができる/できないのかを 正しく認識する必要がある • 手を動かして色んな手法を模索していきましょう • どうすればより使ってもらえるのかも模索していきます！
21. まとめ ◆AgentCore BrowserやNova Act、個人的には期待大 • 昨年11月頃までは日本語がBrowser上で表示されなかったが、 今では表示されるようになっている • ただ、場合によっては既存で用意されている機能やサービス以外を 使う選択肢もありそう ◆エージェントを使うスキルと作るスキル、両方が求められる • 日常からエージェントに触れることでどんなことができる/できないのかを 正しく認識する必要がある • 手を動かして色んな手法を模索していきましょう • どうすればより使ってもらえるのかも模索していきます！ • ちなみに会社のルール的に勝手にブラウザ操作自動化ツールなど使っちゃ ダメらしいので、御蔵入りです！