地震情報アプリを作ってみた

Transcript

1. PWA 地震速報アプリを 作ってみた jishin-alert-app リアルタイム多言語地震速報 PWA 【AI】AILT会 - vol.2 山下 祐樹
2. 自己紹介 山下 祐樹 AWS Community Builder (AI Engineering) 2026 Japan All AWS Certifications Engineers
3. SEISMIC REALITY 日本は世界有数の 地震大国 約 20% 0.3% 世界の M6 以上の地震が 日本周辺で発生 日本の国土面積は 世界のわずか 0.3% 出典：気象庁・内閣府防災情報 年間約 2,000 回 有感地震の発生回数
4. 2026 年 7 月 28 日 熊本地震 被災された方々、亡くなられた方々に、心よりお悔やみとお見舞いを申し上げます 。 この出来事が、このアプリを作る原点となりました。
5. MOTIVATION 地震から 人を守りたい 日本に住む誰もが、いつ地震に遭うかわからない。 一秒でも早く、正確な情報を届けたかった。 「技術は、人を守るために使う」̶ それがこのアプリの原点
6. PWA 地震速報 jishin-alert-app テキストベースの地震速報アプリ 6 言語対応 JA · EN · ZH · KO · RU · AR 震度 1 以上で表示 地震発生を即座にキャッチ。小さな揺れも見逃さない。 強調表示 ̶ 震度 5 弱以上 / 緊急地震速報 / 津波警報 危険度に応じて視覚的に切り替え。重大な情報を見逃さ ない。 Progressive Web App（PWA） インストール不要。ブラウザで動く。どのデバイスでも 。 6 言語の見出し・要約を同時生成 日本語・英語・中国語・韓国語・ロシア語・アラビア語
7. アプリ画面
8. システム構成図
9. 構成の詳細 データフロー → AWS Fargate Strands Agent Amazon DynamoDB Web Push Next.js Node.js / 0.25vCPU Bedrock AgentCore EarthquakeEvents VAPID / 全購読者 Vercel / PWA wss://p2pquake.net code 551/554/555/552 addr→pref 正規化 構造化データ→日本語生成 InvokeAgentRuntime 同期呼び出し (イベント毎) EarthquakeEvents 保存 PushSubscriptions 読出 EEW/ 震度 5+ → emergency VAPID / 全購読者に送信 emergency → 別サウンド＋強調表示 Service Worker 購読 ON/OFF API Routes → AWS Vercel OIDC (keyless) 地震情報受信 → AI 多言語処理 → DB 保存 → プッシュ通知 → PWA 表示
10. connector の仕組み 1 データソース P2P 地震情報 WebSocket wss://api.p2pquake.net /v2/ws 常時接続 AWS Fargate 常駐 WebSocket 受信 P2P 地震情報サーバーからリアルタイムに JSON メッセージを受信 2 code 別フィルタリング 551 地震情報 554 EEW 発表 555 EEW 警報 552 津波予報 3 area.json で正規化 受信データの addr（住所）・ pref（都道府県）を正規化・統一 4 震度 1 未満は破棄 震度 1 未満のイベントおよびシステムに無関係なメッセージを除外 5 Strands Agent へ 該当イベントのみ → 6 言語見出し・要約の同時生成へ それ以外は破棄
11. PWA フロントエンド Service Worker トップページ タブが閉じていても通知を表示 ユーザーが通知を制御 push 受信 → showNotification アラート音再生 震度・緊急地震速報に応じた警告音 開いているタブへ postMessage リアルタイムに UI を更新 購読 ON / OFF ボタン 直近イベントのライブフィード • 見出し / 時刻 • 最大震度バッジ • 市町村別震度一覧 • 津波情報 API Routes ̶ /api/subscribe, /api/events AWS API Gateway + Lambda へプロキシ Vercel OIDC Federation シークレットキー不要のキーレス接続
12. 6言語同時生成 JA 日本語 EN English ZH 中文 本日〇時〇分頃、〇〇地方で強い地震が ありました。震源の深さは約〇 km 、マ グニチュード〇と推定されます。 A strong earthquake was detected at [time]. Epicenter depth approx. [X] km, estimated M[X]. 今日 [时间] 左右， [地区] 发生强烈地震 。震源深度约 [X] 公里，估计震级为 [X] 。 震度 5 強を観測 Strong Quake Detected 检测到强烈地震 RU × Русский AR ‫اﻟﻌرﺑﯾﺔ‬ Strands Agent Amazon Bedrock AgentCore Сильное землетрясение 강한 지진 감지 ‫رﺻد زﻟزال ﻗوي‬ Runtime KO 한국어 오늘 [시간]경 [지역]에서 강한 지진이 발 생했습니다. 진원 깊이 약 [X]km, 규모 [X]로 추정됩니다. Сегодня в [время] в районе [место] произошло сильное землетрясение. Глубина очага ок. [X] км, магнитуда [X]. ‫وﻗﻊ زﻟزال ﻗوي ﻓﻲ ﻣﻧطﻘﺔ [اﻟﻣﻧطﻘﺔ ]ﻓﻲ اﻟﺳﺎﻋﺔ‬ ‫]ﻋﻣق اﻟﺑؤرة ﻧﺣو‬. ‫[ [اﻟوﻗت‬X] ‫ واﻟﻘوة اﻟﻣﻘدرة‬،‫ﻛم‬ [X].
13. Web Push 通知の壁 iOS 音声ブロック問題とアンロック処理 PROBLEM SOLUTION iOS が音声をブロック アンロック処理 ▪ ユーザー操作なしに音声再生をブロック 1 ユーザーが最初に画面をタップ ▪ 通知が届いても音が鳴らない 2 無音の音声を再生して iOS 制限を解除 ▪ 地震速報として致命的な問題 実機テストで初めて発覚。シミュレーターでは再 現しない問題だった。 3 以降の通知で音声再生が可能に ユーザーの最初のインタラクションを活用するこ とで、 iOS の制約を回避できる。
14. 日本地図ハイライト機能 表示条件（3 つのいずれか） 緊急地震速報 EEW（Earthquake Early Warning）受 信時 〈 ⽇本地図 〉 震度 5 弱以上 強い揺れが観測された都道府県をハイライト 津波警報 津波警報・大津波警報が発令された沿岸地域 本当に危険なときだけ地図を表示 ̶ 警告の重みを保つ
15. 未確定表示の信頼性設計 緊急地震速報 受信 1 強い警告を表示 10 分間 続報なし 「未確定」 表示に切替 確定情報 受信 2 3 警告を落ち着かせる 通常表示に戻る 実体験から生まれた機能 配信側の異常と思われる緊急地震速報が連続発生した実体験から追加。誤報に振り回されな い、信頼できるアプリにするための設計。
16. 技術的教訓 ① 実機・実データで 初めて分かること シミュレーターや手動テストでは再現できなかった問題が、実データ で初めて表面化した 「いざというとき」に動くシステムは、 実際の環境・実際のデータで検証して初めて作れる
17. 技術的教訓 ② 本番データは 仕様書通りではない 予期しないデータ形式・ WebSocket 切断̶̶エッジケースは本番で初めて現 れる null チェック・型ガード・再接続ロジック̶̶防御的な実装が リアルタイムシステムの信頼性を支える
18. まとめ 「守りたい」という 想いが技術を動かす 地震という社会課題が、リアルタイム多言語 PWA という技術的挑戦を生んだ 技術的な柱 Web Push 通知 iOS 音声ブロック対策・アンロック処理 Strands Agent × 6 言語 Amazon Bedrock AgentCore Runtime で同時 生成 信頼性設計 未確定表示・ 10 分タイムアウト・実機検証 社会課題 × 技術 = あなたにも作れる
19. NEXT STEPS 今後の展望 対応言語・地域の拡大 より多くの人に、母国語でリアルタイムの地震情報を届ける 信頼性・精度のさらなる向上 実運用データを活用した継続的な改善と誤報対策の強化 オープンソース化 コミュニティと共に、より良い防災ツールを育てていく
20. シンガポールで登壇してきます AWS Community Day Singapore 2026 2026/8/22
21. ご清聴ありがとうございました