20260228_JAWS_Beginner_Kansai

Transcript

1. 1 © 2026 Japan Digital Design, Inc. Takuya Yonezawa 2026.02.28 苦しんで覚えるSSE × AgentCore 〜なぜアプリケーションがぬるぬる動くのか？〜 JAWS-UG初心者支部#77 関西 LT 大会
2. 2 © 2026 Japan Digital Design, Inc. 米澤 拓也 Software Engineer Technology & Development Div. and Corporate Culture室 プロフィール 前職ではCCoE、現職ではSoftware Engineer。 フロント/バックエンドの実装からインフラ構築など何でもやってます 証券系→銀行系 と 金融×IT なキャリアを歩んでいます 生息地：大阪 & 奈良 Community Builder (Serverless) 2023~ 資格は1冠です、優しくしてください。 takuya_y0ne
3. 3 © 2026 Japan Digital Design, Inc. 0 はじめに
4. 4 © 2026 Japan Digital Design, Inc. 3週間前にAgentCoreとStrandsに入門しました もう時代の流れに逆らいきれない
5. 5 © 2026 Japan Digital Design, Inc. AI Agentを いい感じに動かすための フルスタック基盤 AI Agentを超楽に実装するための AWS謹製フレームワーク 一言でAgentCoreとStrandsについて
6. 6 © 2026 Japan Digital Design, Inc. つまるところ 「Strandsで作ったAI Agent を AgentCore上で動かす」 のである ちなみに私は今月まで 「StrandsとAgentCoreって何が違うねん？」という状態でした 笑
7. 7 © 2026 Japan Digital Design, Inc. 1 とりあえずこれを見てくれ
8. 9 © 2026 Japan Digital Design, Inc. 公開用スクショ
9. 10 © 2026 Japan Digital Design, Inc. 今見せたのは米澤がAgentCore×Strandsで “人力”作成した検証用アプリ （私自身がKiroになればいいのである。0円, 0クレジット） ぬるぬる動いてましたよね？
10. 11 © 2026 Japan Digital Design, Inc. 2 ぬるぬるの正体
11. 12 © 2026 Japan Digital Design, Inc. Server Sent Eventは 技術としては昔からあるもの Server Sent Event (SSE) 2004年に初めて仕様化 ※1 ※2 サーバからクライアントに逐次的に データを送信するための仕組み HTTPベースで実現される サーバ→クライアントの単方向通信 ▪ なんで今さら？ LLMの回答生成には時間がかかる。 回答生成が完了してから一発で レスポンスを返すような従来方式だと、 UX的に微妙なので再注目されている。 ※1 https://html.spec.whatwg.org/multipage/server-sent-events.html Client Server https://developer.mozilla.org/ja/docs/ Web/API/Server-sent_events/Using_server-sent_events ※2 HTTPで接続 データ データ データ HTTP接続終了 ・・・
12. 13 © 2026 Japan Digital Design, Inc. WebSocketは？ クライアント側のポーリングは？ 玄人の方向け WebSocketやクライアント側の ポーリングだと、 - 双方向のハンドシェイク - クライアント側の処理負荷増大 などをケアして上げる必要があり、 アプリケーションが複雑になる WebSocketに対応していない プラットフォームもある その点 Server Sent Eventは単方向の HTTPベースなのでトータルすっきりする （らしい） Client Server データ取得 データ取得 データ取得 ・・・ Client Server WebSocketコネクション確立 データ送受信 WebSocket Client Polling
13. 14 © 2026 Japan Digital Design, Inc. Server Sent Eventの中身 https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events
14. 15 © 2026 Japan Digital Design, Inc. Server Sent Eventの中身 https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events AgentCoreで特に意識しないといけないのは この”data”という項目
15. 16 © 2026 Japan Digital Design, Inc. 実際に Strands on AgentCore が 返してくるSSEデータの中身を眺めてみる
16. 17 © 2026 Japan Digital Design, Inc. AWSドキュメント内のサンプルコード から一部修正したもの
17. 18 © 2026 Japan Digital Design, Inc. わあ。。。
18. 19 © 2026 Japan Digital Design, Inc. すこし整理してみる
19. 20 © 2026 Japan Digital Design, Inc. この細切れのデータを組み立てると 「こんにちは！今日はお手伝いできることはありますか」 になる（＝Strandsの応答） キー名が”event”のデータのみ抽出 Agent実行で消費されたトークン数 キー名が”event”のデータのみ抽出
20. 21 © 2026 Japan Digital Design, Inc. キー名が”event”のテキストを組み合わせれば アプリケーション上でいい感じに表示できそう
21. 22 © 2026 Japan Digital Design, Inc. 3 が、この細切れのデータを組み立てるのが大変。。
22. 23 © 2026 Japan Digital Design, Inc. そもそも event: messageStartとか event: contentBlockDeltaとか って何？
23. 24 © 2026 Japan Digital Design, Inc. https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/ conversation-inference-call.html#conversation-inference-call-response 実態はBedrockのConverseStream
24. 25 © 2026 Japan Digital Design, Inc. messageStart contentBlockStart contentBlockDelta contentBlockStop messageStop metadata ▪ メッセージ開始イベント アプリケーション上は無視してOK ▪ ツール利用時に出力される どのツールを利用するか？等が出力される ▪ 回答生成時/ツール利用時に出力される モデルの回答やツールへのインプットなどが出力される ▪ 回答生成時/ツール利用時に出力される モデルの回答停止やツール利用時の停止イベント ▪ メッセージの停止イベント 各ブロック毎にモデルの回答生成が完了したら出力される ▪ モデル回答が完了する際に出力される トークン利用量やレイテンシーが出力される
25. 26 © 2026 Japan Digital Design, Inc. 参考：Tool利用も含めた際のペイロード
26. 27 © 2026 Japan Digital Design, Inc. フロント側で、前述のように流れてくるデータを イベントタイプに合わせてハンドリングする必要がある
27. 28 © 2026 Japan Digital Design, Inc. targetText という変数の中に「を使用」が格納される
28. 29 © 2026 Japan Digital Design, Inc. サンプルのReact側コード。辛い。。
29. 30 © 2026 Japan Digital Design, Inc. 検証している時の私の叫び
30. 31 © 2026 Japan Digital Design, Inc. 4 まとめ
31. 32 © 2026 Japan Digital Design, Inc. AgentCoreのストリーミングレスポンスの特性上、 どんなイベントデータがフロント側に届くかが分からない 本来バックエンド側で担わないといけないデータ整形処理を フロント側に押し付ける形になる （本来フロント側にロジックを多く持たせるべきではない）
32. 33 © 2026 Japan Digital Design, Inc. ぬるぬるした画面表示、本当に必要ですか？ ローディング画面→一括表示 で代替できるなら そちらのほうが遥かにシンプルにできる
33. 34 © 2026 Japan Digital Design, Inc. x おまけ ~ 今回組んだシステム構成 & Demo ~
34. 35 © 2026 Japan Digital Design, Inc. お試しで作ってたらエライことになった。。
35. 36 © 2026 Japan Digital Design, Inc. Strandsの中の構成。米澤の興味領域とも言える Master Agent WEB検索Agent （MCP） What’s New 検索Agent AWS環境 調査Agent 不動産情報 取得Agent フロント実装Tips 取得Agent Knowledge Bases Knowledge Bases StrandsTools RSS tavily
36. 37 © 2026 Japan Digital Design, Inc. - なんでHonoとかFastAPI使ってるの？ - なんでAPI-GW分けてるの？ - Lambdaの中で何しているの？ - KnowledgeBaseの精度向上Tips？ - Bedrockモデルの選定は？ などもネタとしては有るのですが、 明らかに今回は場違いなレベルになるのでまたの機会に
37. Thank you. 38 © 2026 Japan Digital Design, Inc.