221028__MBJ__Meetup.pdf

10/28にオンラインで開催された「Mapbox/OpenStreetMap meetup」第九回のMapbox Japan発表資料です。

アジェンダ
・リアルタイムマップ技術紹介　https://realtimemap.jp/#/
・コミュニティ支援内容

Transcript

1. Mapbox / OpenStreetMap meetup online #09 1 マップボックス・ジャパン合同会社
2. 2 Tour de Tohoku 2022 Mapbox / OpenStreetMap meetup online #09
3. 3 Mapbox / OpenStreetMap meetup online #09 ツール・ド・東北とは Yahoo! JAPANと河北新報社が東日本大震災の復興支援、 および震災の記憶を未来に残していくことを目的に、 2013年より開催している自転車ファンライドイベント 参加ライダー：1,500人 直近の開催状況 • 2019年：開催 • 2020年：中止（コロナ） • 2021年：中止（コロナ） • 2022年：開催！！
4. 4 Mapbox / OpenStreetMap meetup online #09 Mapboxがリアルタイムマップを提供した目的 リアルタイム 地図 応援 臨場感と楽しさ スポーツ x 地図　をMapboxで実現 MapboxのTechnologyの可能性を拡大・認知
5. 5 Mapbox / OpenStreetMap meetup online #09 コース紹介 65km コース 100km コース コース動画の作り方 ：https://www.mapbox.jp/blog/building-cinematic-route-animations-with-mapboxgl
6. 6 Mapbox / OpenStreetMap meetup online #09 リアルタイムマップとは リアルタイム ライダー表示 ライダー検索 リプレイ https://realtimemap.jp/#/ LIVE動画配信 Twitter連携 応援ボタン
7. 7 Mapbox / OpenStreetMap meetup online #09 リアルタイムマップとは(1/2) リアルタイム ライダー表示 ライダー検索 リプレイ https://realtimemap.jp/#/
8. 8 Mapbox / OpenStreetMap meetup online #09 リアルタイムマップとは(2/2) LIVE動画配信 Twitter連携 応援ボタン https://realtimemap.jp/#/
9. 9 Mapbox / OpenStreetMap meetup online #09 アーキテクチャ概要 Twitter連携 リアルタイム マップ ライダー ライダー位置情報 取得アプリ（外部） 時系列DB リプレイ用に 保存 ライダー走行画像 撮影配信アプリ （内製） LIVE配信 応援ボタンの カウント リアルタイム 配信
10. 10 Mapbox / OpenStreetMap meetup online #09 現地テスト コース長: 7.5 km 東京テスト 宮城女川現地テスト • 機能実地検証 （リアルタイム位置・LIVE映像配信） • システム連携テスト • テストライダーによる走行テスト • 東京テストからの改善確認 • 本番コースでの総合テスト ◦ 現地環境（電波状況など）下 ◦ 本番で使用するサーバ環境
11. 11 Mapbox / OpenStreetMap meetup online #09 現地テストの様子 https://www.mapbox.jp/blog/tdt2022-interview07 https://www.mapbox.jp/blog/tdt2022-interview05 https://www.mapbox.jp/blog/tdt2022-interview04
12. 12 Mapbox / OpenStreetMap meetup online #09 技術解説 • フロントエンド • バックエンド • 映像配信アプリ
13. 13 Mapbox / OpenStreetMap meetup online #09 フロントエンド（マップ+応援ボタン+Twitter) Twitter連携 リアルタイム マップ ライダー ライダー位置情報 取得アプリ（外部） 時系列DB リプレイ用に 保存 ライダー走行画像 撮影配信アプリ （内製） LIVE配信 応援ボタンの カウント リアルタイム 配信
14. Mapbox / OpenStreetMap meetup online #09 問題点: • 誰がどこにいるのかさっぱりかわからない • どの辺に何人いるかわからない はじめに プロトタイプ:1500人を同時に表示
15. ライダーを複数のグループに分けて、各グループの人数を表示するようにしました。 →大会全体の状況把握を容易に！ Mapbox / OpenStreetMap meetup online #09 クラスタリング サンプルコード: クラスターの作成と設定
16. 検索機能を実装。検索されたライダーを追従。 →特定のライダー位置を素早く把握可能に！ 1. Mapbox / OpenStreetMap meetup online #09 ライダー検索+追従 サンプルコード: 場所にゆっくり飛ぶ
17. • ユーザーが大会に参加している感を高めよう！ Mapbox / OpenStreetMap meetup online #09 • ボタンのクリックでカウントアップ！ • 下一桁が0の時に花火を打ち上げる！ • ブースにリアル応援ボタンを設置！ • [バックエンド] カウントアップが得意なDB(redis)を利用し、簡単に信頼性の高い機能を作成可能に　　　 応援ボタン
18. • [フロントエンド] バックエンドから送られるツイートをタイムライン形式で描画 • [バックエンド] ◦ 臨場感を高めるためにツイート後、数秒で画面に表示！ ▪ バックエンドでTwitter Streamを利用してリアルタイムでツイートをTwitterか ら取得することで実現 ◦ 信頼性を高めるためにJobで定期的にツイートを取得 ▪ StreamのTwitter APIへの接続が不安定になった際、ツイートを取得損ねることがあっ た→Jobで定期的にツイートを取得することでカバー 1. Twitter Filtered stream APIを利用 2. Twitter Search Tweets APIを利用 Mapbox / OpenStreetMap meetup online #09 Twitterタイムライン 1 2
19. ライダーの位置表示（リアルタイム・リプレイ） Mapbox / OpenStreetMap meetup online #09 質問: フロントエンドでは、どのように1,500名のライダーの位置情報 を処理しているでしょうか？ • 位置データの補正、描画するタイミングの調整などが必要です • リアルタイムマップに加えて、リプレイ機能も実現する必要があります サンプルコード: リアルタイムデータを追加
20. ライダーの位置表示（リアルタイム・リプレイ） Mapbox / OpenStreetMap meetup online #09 バックエンド 担当: 位置データ管理、時間管理 • 位置データ管理 ◦ 外部システムから位置データを取得 ◦ データの保管 ◦ データ補正・補間・予測 • 時間管理 ◦ フロントエンドに送るデータの日時 ◦ フロントエンドにデータを送る間隔 フロントエンド 担当: 位置データの描画 • データのリクエスト • 取得したデータを描画 サンプルコード: リアルタイムデータを追加 答え: フロントエンドではほぼ何もしていません。 複雑な処理は全てバックエンドに任せて、フロントエンドは描画に専念！
21. フロントエンド Mapbox / OpenStreetMap meetup online #09 ライダーの位置表示（リアルタイム） データ 取得係 Map リアルタイムのデータをリクエストした後、データを取得する度に描画 バックエ ンド 09:00:01 時点のデータ リアルタイムデータを 1秒間隔で下さい ※09:00:00に送信 1秒 1秒 1秒 t 描画 描画 描画 描画 09:00:02 時点のデータ 09:00:03 時点のデータ 09:00:04 時点のデータ 9/18 09:00:01 9/18 09:00:02 9/18 09:00:03 9/18 09:00:04
22. フロントエンド Mapbox / OpenStreetMap meetup online #09 データ 取得係 Map バックエ ンド 09:00:00 時点のデータ 09:00からのデータを 10倍速で1秒間隔で データ下さい 1秒 1秒 1秒 09:00:10 時点のデータ 09:00:20 時点のデータ 09:00:40 時点のデータ t 10/28 19:30:00 10/28 19:30:01 10/28 19:30:02 10/28 19:30:03 ライダーの位置表示(リプレイ) リアルタイムとの違いは、リクエストの仕方のみ！描画のロジックはリアルタイムと共通！ 描画 描画 描画 描画
23. 23 Mapbox / OpenStreetMap meetup online #09 バックエンド Twitter連携 リアルタイム マップ ライダー ライダー位置情報 取得アプリ（外部） 時系列DB リプレイ用に 保存 ライダー走行画像 撮影配信アプリ （内製） LIVE配信 リアルタイム 配信 応援ボタンの カウント
24. Mapbox / OpenStreetMap meetup online #09 バックエンド設計方針 • 同時接続5000, Rider数1500に耐えられるBackend/Frontend設計 ◦ Pollingはしない、ストリーミングで ◦ 位置補正等、BackendでやるべきことはBackendで ◦ Microserviceアーキテクチャで単一障害点を無くす、スケールアウ ト • どんな形状のコースにも利用可能な位置補正、予測アルゴリズム • 使ってみたい技術を試す (gRPC-web, InfluxDB, Fargate) • OSSとしての魅力を高めるためfrontend/backendをTypeScriptで統一 する, AWSオンリーなサービスには依存しない
25. Mapbox / OpenStreetMap meetup online #09 リアルタイム配信アーキテクチャ Frontend tdt-api-server tdt-injester pss-server 外部サーバーに位置情報をpolling 　　　 位置補正、予測、InfluxDBへの書き込み 　　　 tdt-api-server tdt-api-server フロントStreaming (gRPC-web) 　　　 フロントが必要なAPIの提供(リプレイ含む) 　　　 gRPC 　　　
26. Mapbox / OpenStreetMap meetup online #09 冗長性、スケーラビリティ Frontend tdt-api-server tdt-injester pss-server tdt-api-server tdt-api-server 不通になるとデータロスト。15秒間隔polling なので、それまでに復旧すればセーフ 　　　 落ちるとその間はデータロスト。k8sで即再 起動する、かつtdt-api-serverがリコネクト するのでFrontへの影響はほぼ無し　 オートスケール設定してあるので 落ちてもFrontへの影響はほぼ無し 落ちたら再起動。tdt-injesterが バッファリングするので データロスト無し
27. 27 Mapbox / OpenStreetMap meetup online #09 インフラストラクチャ できるだけAWSとkubernetesに管理を任せて楽しよう！ 　　　 インフラの管理 サービスの管理
28. 28 Mapbox / OpenStreetMap meetup online #09 インフラストラクチャ できるだけAWSとKubernetesに管理を任せて楽しよう！ 　　　 :インフラの管理 • Web Server = AWS S3 • Backend Server = AWS EKS on Fargate ◦ eksctlを用いて、Kubernetes(EKS)を素早く構築 • Database = AWS EKS on Fargate & AWS EFS • Live video processing = AWS Elemental MediaLive : サービス(Backend ServerとDatabase)の管理 • 高負荷時の自動スケールアウト（数を増やす） • 異常終了した際の自動再起動 • 定期的なJobの実行 Scale out
29. Mapbox / OpenStreetMap meetup online #09 上手くできたこと • Mockサーバーを一番最初に作ったので、front担当の手が止まることな く開発できた • gRPCのスキーマ駆動開発で並行開発できた • 事前に負荷試験をして性能の問題を修正できた • Microserviceにして良かった ◦ 走行試験中に一部を何度か修正・デプロイしたがRiderへの影響はな かった • 大会当日、大きなトラブルはなかった
30. Mapbox / OpenStreetMap meetup online #09 大変だったこと • Mockで実際のRiderの動きを再現することは難しい
31. 31 Mapbox / OpenStreetMap meetup online #09 映像配信アプリ Twitter連携 リアルタイム マップ ライダー位置情報 取得アプリ（外部） ライダー走行画像 撮影配信アプリ （内製） 時系列DB リプレイ用に 保存 LIVE配信 応援ボタンの カウント ライダー
32. Mapbox / OpenStreetMap meetup online #09 映像配信アプリの仕組みについて 映像配信用 サーバ AWS MediaLive AWS MediaStore ① チャンネルを作って、 　 チャンネルのURLを 　 返してあげる ② 配信チャンネルを 　 簡単に作れる URL先に映像データを転送し続けるだけ rtmps://XXXX.amazon.com/XXXX ③ 映像データを 　 保管してくれる ④ プレイヤーで 　 URLにアクセスする https://XXXX.aws.com/LiveA/XXXX.m3u8
33. Mapbox / OpenStreetMap meetup online #09 映像配信アプリの仕組みについて
34. Mapbox / OpenStreetMap meetup online #09 映像配信アプリの反省点・今後 1. エラーが多々発生した 現地検証の不足、電波が悪い環境でエラーに対応しきれていなかった 2. AWS MediaLiveの使い勝手がよくない 簡単だけどライブ開始まで30~60秒かかる、代わりにサーバサイドで処理をさせる 3. 音声を出すべきだった 音があることでリアル感、臨場感が増す 自転車の音（ゴゴゴゴゴ）、風を切る音（ビューーー）、休憩中の雑談（プライベート） 4. 360度カメラ、高いところから展望カメラを試したい 5. 参加者が配信に参加できる仕組みにしたい
35. 35 Mapbox / OpenStreetMap meetup online #09 最後に もっと詳細を知りたい方、ぜひお問合せください！！ リンク集（後日公開するMeetupの動画にも添えさせていただきます。） • リアルタイムマップ URL https://realtimemap.jp/#/ • リアルタイムマップ 特設サイト https://www.mapbox.jp/community/tourdetohoku2022 • リアルタイムマップのGithub Repository URL Open soucingに向けて社内手続き中！ • コース動画の作り方 https://www.mapbox.jp/blog/building-cinematic-route-animations-with-mapboxgl
36. 36 Mapbox Community support Mapbox / OpenStreetMap meetup online #09
37. 37 Mapbox / OpenStreetMap meetup online #09 12/3　State of the Map Japan 2022 　　　 シルバースポンサー🎉 講演します🙌
38. 38 Mapbox / OpenStreetMap meetup online #09 12/6-7　G空間EXPO@浜松町 ブース出展します🙌
39. 39 Mapbox / OpenStreetMap meetup online #09 オンサイトmeetup開催決定！！！ 日時：12/7（水）19:30-21:30 場所：浜松町周辺 テーマ：メディアと防災（仮） お店：TBD
40. 40 Appendix Mapbox / OpenStreetMap meetup online #09 • リアルタイムマップ　位置補正
41. Mapbox / OpenStreetMap meetup online #09 位置精度について 1. 各Riderが公式アプリでGPS更新間隔を選ぶ a. 「30秒」,「1分」,「2分」,「3分」 2. こちらのBackendがGPSデータ問い合わせできるのは15秒に一回だけ 3. つまり最悪3分15秒に一回しか位置を取れない a. 電波がない等の状況を考慮するとさらに長時間取れないことも スムーズなRider表示に位置の補正、予測が必要 　　　
42. Mapbox / OpenStreetMap meetup online #09 位置補正 (1/2) 1. 各Riderからコースへの距離を計算 2. 距離が1km以下の場合は、コース 上に補正する 3. 距離が1km以上2km以下の場合は 補正しない a. 休憩エリアに滞在している可能性 4. 距離が2km以上の場合は表示しな い GPS座標 補正された座標
43. Mapbox / OpenStreetMap meetup online #09 位置補正 (2/2) 前回座標 現在座標 到達可能Path 単純にコース上に補正すると,折り返し 地点で正しく補正できない 到達可能Path = 前回座標 + 前回速度 * 経過時間 + α 理論上到達可能なPathを算出し、 そのPath上に補正する
44. Mapbox / OpenStreetMap meetup online #09 位置予測 前回座標 予測座標 予測座標 = 前回座標 + 前回速度 * 経過時間 前回に取得した速度を使って、 位置の予測をする