Cloud Run と Firestore を活用したモビリティ ダッシュボードの構築
Google Cloud Japan Team
※この投稿は米国時間 2022 年 6 月 22 日に、Google Cloud blog に投稿されたものの抄訳です。
膨大な量のデータを理解する鍵は可視化にあります。今日では、BigQuery や Looker により、ペタバイト規模のデータを分析し、洗練された方法で分析情報を抽出することが可能となっています。しかし、毎秒アクティブに変化するデータをモニタリングするにはどうしたら良いでしょうか？この投稿では、Cloud Run と Firestore を活用したリアルタイム ダッシュボードの構築方法について説明します。
モビリティ ダッシュボード
リアルタイムな更新が必要なビジネス ユースケースは数多く存在します。例として、小売店での在庫のモニタリング、セキュリティ カメラ、ライドシェアなどの MaaS（Mobility as a Service）アプリケーションなどが挙げられます。MaaS ビジネスの分野では、車両の位置を把握することがビジネスの意思決定を行ううえで非常に役立ちます。この投稿では、地図上で車両をリアルタイムにモニタリングできるモビリティ ダッシュボードを構築していきます。
アーキテクチャ
クライアントサイドで設定を行うことなく、ウェブブラウザからこのダッシュボードにアクセスできる必要があります。Cloud Run が適している理由は、URL を生成でき、何百万人ものユーザーに対応できるスケーラビリティも当然備えているためです。まず、地理空間データをプロットできるアプリと、地理空間データの更新をブロードキャストできるデータベースを実装する必要があります。今回使用する機能とアーキテクチャは次のとおりです。
Cloud Run - ウェブアプリ（ダッシュボード）のホスティング
（streamlit - データを可視化してウェブアプリを構築するライブラリ）
（pydeck - 地理空間データをプロットするライブラリ）
Firestore - データの同期を維持するフルマネージド データベース
以下の図は、このシステムの簡易的なアーキテクチャを示したものです。本番環境では、データの取り込みと変換パイプラインも実装しなければならない場合があります。
最終形態に進む前に、以下の手順を実行して各コンポーネントを理解しておきましょう。
ステップ 1: Cloud Run と streamlit でデータ可視化ウェブアプリを構築する
streamlit は、フロントエンド（HTML や JS など）の知識がなくても見栄えのよいデータ可視化アプリを作成できる OSS ウェブアプリ フレームワークです。データ分析で pandas の DataFrame を使い慣れている場合、実装にそれほど時間はかからないでしょう。たとえば、次の数行のコードで DataFrame を簡単に可視化できます。
ウェブアプリ 上のグラフ（ソース）
このアプリは Cloud Run 上で簡単に実行できます。streamlit を requirements.txt に追加して、一般的な python のウェブアプリ イメージから Dockerfile を作成するだけです。Docker に慣れていない場合は、buildpacks を使用してこのジョブを実行できます。Dockerfile を作成する代わりに、次の 1 行のみで Procfile を作成できます。
以上をまとめると、最低限必要なファイルは次のとおりです。
デプロイも簡単です。以下のたった 1 つのコマンドで、このアプリを Cloud Run にデプロイできます。
このコマンドは、buildpacks と Cloud Build を使用してイメージを構築および作成するため、ローカル システムにビルド環境を構築する必要はありません。デプロイが完了したら、生成された URL（例: https://xxx-[…].run.app）からウェブアプリにアクセスできます。この URL をウェブブラウザにコピーして貼り付けると、最初のダッシュボード ウェブアプリが表示されます。
ステップ 2: Firestore データベース内の変更を受信するコールバック関数を追加する
ステップ 1 では、データを固定した条件で可視化したり、streamlit 上の UI 関数でインタラクティブに可視化したりできます。ステップ 2 では、このデータが自動で更新されるようにします。
Firestore はスケーラブルな NoSQL データベースであり、リアルタイム リスナーを通じてクライアント アプリ間のデータの同期を維持します。Android と iOS で使用でき、主要なプログラミング言語で SDK も用意されています。Python で streamlit を使用するため、Python クライアントを使用します。
この投稿では、Firestore の詳しい使用方法については省きますが、特定の「コレクション」が変更になった場合に呼び出されるコールバック関数は簡単に実装できます。[参照]
このコードでは、users コレクションが変更された場合に on_snapshot コールバック関数が呼び出されます。ドキュメントの変更も監視できます。
Firestore はフルマネージド データベースであるため、事前にサービスをプロビジョニングしておく必要はありません。「モード」とロケーションを選択するだけで使用できます。リアルタイム同期機能を使用する場合は、「ネイティブ モード」と、最も近いロケーションまたは希望するロケーションを選択します。
streamlit と Firestore の併用
ここでは、streamlit で Firestore を実装します。on_snapshot コールバック関数を追加して、Firestore から送信された最新データでグラフを更新します。なお、streamlit でコールバック関数を使用する際、on_snapshot 関数はサブスレッドで実行しますが、streamlit での UI 操作はメインスレッドで実行する必要があるので注意してください。そのため、スレッド間のデータを同期するのにキューを使用します。コードは次のようになります。
このアプリをデプロイし、参照するコレクションに何か記述すると、ウェブアプリ上でデータが更新されたことを確認できます。
ステップ 3: streamlit で地理空間データをプロットする
Cloud Run でウェブアプリをホストする方法がわかったので、次に Firestore でデータを更新する方法を説明します。まず、streamlit で地理空間データをプロットする方法が必要です。streamlit で緯度と経度を含む地理空間データをプロットする方法はいくつかありますが、ここでは pydeck_plot() を使用します。この関数は、地理空間可視化ライブラリ deck.gl のラッパーです。
例として、プロットするデータを緯度と経度で提供し、レイヤを追加してそのデータを可視化します。
pydeck_plot を使用したプロット（出典）
pydeck がサポートしている地図プラットフォームはいくつかありますが、ここでは CARTO を使用します。CARTO と deck.gl を使用した例の詳細については、こちらのブログ記事をご覧ください。
Step 4: モビリティ データをプロットする
完成まであと残りわずかです。このステップでは車両の位置をプロットします。pydeck でデータをプロットする方法はいくつかありますが、モビリティ データをプロットする場合には TripsLayer が適しているでしょう。
TripsLayer を使用すると、位置情報を時系列で可視化できます。つまり、特定のタイムスタンプを選択すると、直近の期間 n を含む時間内の位置情報をもとに線が描かれます。時間を順に変更することで、データをアニメーションとして表示させることもできます。
最終形態では、IconLayer も追加して最新の位置を特定します。このレイヤは静的な位置をプロットする必要がある場合にも役に立ちます。Google マップの「ピン」のように機能してくれます。
では、このプロットを Firestore とどのように併用するかを説明します。車両ごとにドキュメントを作成し、各車両の最新の緯度、経度、タイムスタンプのみを保存しましょう。なお、位置情報の履歴まで保存する場合は、BigQuery を使用する必要があります。今回はリアルタイムで更新される最新の位置さえわかれば良いので、履歴は保存しません。
Firestore はスケーラブルかつ有用なデータベースですが、NoSQL です。NoSQL には向き不向きがありますので注意してください。
ステップ 5: 実行する
ついに最終ステップまで到達しました。できることなら実際に車に乗り込んでデータを記録したいところです。
今回はデモ用のダミーデータを Firestore に取り込みます。クライアント ライブラリを使用することで、簡単にデータを書き込むことができます。
ダミーデータを書き込み、Cloud Run でホストされているウェブページを開くと、新しいデータが届いて地図が更新されていることがわかります。
ダミーデータを使用してタイムスタンプを操作したため、位置情報の更新が実際の時間よりもかなり速くなっていることにご注意ください。実際のデータと更新サイクルを使用することですぐに修正できます。
ご自身のデータでお試しください
この投稿では、Cloud Run と Firestore を活用して、リアルタイムで更新されるダッシュボードの構築方法について説明しました。この他にも、Google Cloud プロダクトを活用したユースケースが見つかりましたらぜひお知らせください。
- 自動車業界担当カスタマー エンジニア Hayato Yoshikawa
