分野: リアルタイムチャット、３Dマップ、Pub/Sub

ユースケース: Momento Topics

Postmanテクノロジーエバンジェリストの草薙です。私は個人プロジェクトとしてMini Tokyo 3DというWebアプリケーションを作っています。Mini Tokyo 3Dは東京の公共交通のリアルタイム3Dマップです。今、実際に動いている列車や発着している旅客機をリアルな3Dマップ上に滑らかなアニメーションで表現しています。これは、現実世界とそっくりな双子をデジタルの世界に表現した「デジタルツイン」です。

Mini Tokyo 3Dは機能を簡単に拡張できるように作られており、プラグインの形で3Dマップの上に降水・降雪アニメーションや花火アニメーション、ライブカメラ映像といった情報を表示することができます。これは、リアルタイムで刻々と変化するマップの上に、さらに多様な情報を重ねて表示することで、便利に使えるよう意図して設計したものです。

Momento Topicsを見た時に最初に考えたのは、これはチャット機能を実装する際にスケーラブルなバックエンドとして楽に使えそうだなということでした。さらに、フルマネージドという特性上、立ち上げが早くて試行も手軽そうだという感覚もありました。

そこでMini Tokyo 3Dのマップ上で他のユーザーとのチャットを楽しめるように、位置情報付きのリアルタイムチャットのプラグインを新たに作成してみました。本記事では、その小さなプロジェクトについて、順を追って説明したいと思います。

Mini Tokyo 3Dチャットアプリの構成

Momento TopicsのSubscribe

Momento TopicsのSubscribeは非常にスムーズでした。Momentoの利用は初めてだったため、サインアップから始めましたが、Googleアカウントの認証のみですぐにMomento Consoleに入れました。Topicを利用するにはCacheが必要ということで、まずはCacheの設定を行いましたが、指定するのはCache名、クラウドプロバイダー、リージョンのみというシンプルさ。

続いてTopicのSubscribeもMomento Consoleからクラウドプロバイダー、リージョン、Cache名、Topic名を指定するだけ。最後にSubscribeボタンを押すと、ブラウザ上でTopicのSubscribeが始まり、Publishされたメッセージを表示できる状態になります。ここではCache名「mini-tokyo」、Topic名「chat」としてみました。

Postmanでテストメッセージを投げてみる

Momento TopicsのSubscribeはステートフルな動作ということで、各言語向けに用意されたSDKを使うのが基本のようです。ただ、Publishはステートレスで、エッジデバイスなどのリソースの限定された機器でも使えるように、HTTP APIも用意されています。

ここではPostmanを使って、メッセージのPublishを試してみます。何はともあれ、APIを使うにはAPIキーが必要なため、Momento Consoleでキーを生成します。指定するのはクラウドプロバイダー、リージョン、キーの種類、期限、そしてアクセスを限定するためにTopicsの場合はCache名、Topic名、ロールの種類も指定します。

ところで、Postmanアプリが備えるAPIカタログ「PostmanパブリックAPIネットワーク」には、Momentoが用意したAPIも登録されています。Moment TopicsのHTTP APIコレクションをPostman上でフォークし、自分のワークスペースにコレクションのコピーを作ります。

コレクションの変数設定では、TopicのSubscribeで指定した作成時に指定した次の値を設定します。

• cacheName: mini-tokyo
• topicName: chat

また、Postman上で新しい環境 (Environment) を作り、次の変数を設定します。MOMENTO_AUTHで指定するAPIキーは秘密情報のため、変数タイプをsecretにしてマスク表示にしておきます。

• base_url: https://api.cache.cell-ap-northeast-1-1.prod.a.momentohq.com
• MOMENTO_AUTH: <上で取得したAPIキー>

さて、最後に「Publish」リクエストの画面に移動し、Bodyタブに次の文字列を入力してSendボタンを押してみます。

{

    "text": "hello from postman"

}

先ほどSubscribeしていた、Moment Consoleの画面にメッセージが表示されました！

Mini Tokyo 3D上でメッセージを読み書きする

いよいよMini Tokyo 3Dの上にチャット機能を加えるステップです。Mini Tokyo 3Dプラグインはブラウザで動くJavaScriptコードですので、Momento web SDK for JavaScript in browsersを利用します。APIキーを使いTopicClientを作成した後、次のようなコードでTopicのSubscribeを行います。メッセージが届いた時に呼ばれるonItemコールバックで、メッセージのJSONオブジェクトに含まれる座標にポップアップを表示しています。

const topic = await topicClient.subscribe('mini-tokyo', 'chat', {

            onError: () => {

            },

            onItem: item => {

                const data = JSON.parse(item.valueString());

                const popup = new Popup({

                    className: 'popup-text',

                    closeButton: false,

                    closeOnClick: false

                })

                    .setLngLat(data.center)

                    .setHTML(data.text)

                    .addTo(map);

            }

        });

一方、こちらはマップ上をクリックした時に表示されるポップアップでテキストの入力を受け付け、送信ボタンが押された時に実行されるコードです。送信するメッセージにはテキストと座標が含まれています。

buttonElement.addEventListener('click', () => {
                topicClient.publish('mini-tokyo', 'chat', JSON.stringify({
                    text: inputElement.value,
                    center: event.lngLat
                }));
            });

これで、地図上でMomento Topicsを使ったリアルタイムチャットを実装することができました！

最後に

Momentoのサインアップからチャット機能の実装までは、（UI周りの実装はすでにあったものの）ほんの2〜3時間というわずかな時間でした。さらに、Momento自体のスケーラビリティを考えると、ユーザーが急増しても問題がないだろうという安心感があります。

Mini Tokyo 3Dの視点から考えると、リアルタイムコミュニケーションがMomentoにより実現可能である事が今回の実装で実感できたので、リアルタイムチャット機能以外にも、デバイスやユーザー位置のリアルタイムなトラッキングや、環境センサーのデータ収集を3Dマップ表示と組み合わせると面白そうです。Momento Topicsはこのような様々な用途で役に立ちそうで期待しています。