【ITニュース解説】How to Send RCS Rich Card Carousels With Node.js

このニュース記事は、リッチコミュニケーションサービス（RCS）を活用し、Node.jsとVonage Messages APIを用いて、ユーザーのメッセージアプリ内でリッチカードカルーセルを送信する方法を解説している。RCSは、従来のSMSやMMSに比べて高度なメッセージング機能を提供し、画像、動画、テキスト、そしてタップ可能なアクションボタンを組み合わせた現代的でインタラクティブな体験をメッセージアプリ内で実現する。その強力な機能の一つがリッチカードカルーセルであり、これは横方向にスワイプできる一連のカードで構成され、各カードに動画、画像、テキスト、およびユーザーがタップできるアクションを含められる。

この記事は、Node.jsとVonage Messages APIを使ってRCSカルーセルを送信する具体的な手順を示しており、動画や画像カードをアクションと組み合わせることで、ユーザーのエンゲージメントを高めることに焦点を当てている。

具体的な使用例として、期間限定のファッションポップアップショップの告知が紹介されている。ブランドが新製品を宣伝し、関心を集めたい場合、RCSカルーセルを使えば、イベント予告動画、Tシャツの画像、帽子のコレクション画像を、それぞれ「日付を保存」「場所を見る」「すべてのシャツを見る」「すべての帽子を見る」といったアクションボタンと共に一つのメッセージにまとめ、視覚的に魅力的でインタラクティブな形でユーザーに届けられる。

RCSカルーセルは、スワイプ可能なリッチカードのセットであり、各カードはタイトル（最大200文字）、説明（最大2000文字）、画像または動画のメディア、そして最大4つの「提案された返信」または「アクション」を持つ。これらのカードは横並びに表示され、ユーザーはスワイプして閲覧する。カルーセル内の全カードは同じタイプのアクション提案を使用する必要があり、メディアファイルはインターネットから公開アクセス可能で、ファイルサイズは100MB未満でなければならない。カルーセルに含めるカードの数は2枚から10枚の範囲である。

RCSカルーセルの開発を始めるには、Node.jsのインストール、ローカルサーバーをインターネットに公開するngrokのインストール、Vonage APIアカウント、登録済みのRCS Business Messaging (RBM) エージェント、そしてテスト用のRCS対応スマートフォンが必要である。RBMエージェントとは、企業がRCSメッセージを送信するために必要な承認されたアカウントを指す。

Vonage APIアカウントは、メッセージ送信などの機能を利用するためのプラットフォームであり、アカウント作成後にAPIキーとAPIシークレットが提供される。RCSメッセージング機能は現在、Vonageのマネージドアカウントでのみ利用可能であり、RBMエージェントの「開発者モード」を有効化する必要がある。これは、本番稼働前に承認された電話番号に対してRCSメッセージをテスト送信できるようにするための設定である。開発者モードの有効化には、Vonageのアカウントマネージャーへの連絡が必要となる。

Node.jsプロジェクトのセットアップは、Node.jsの基本的な知識があることを前提としている。まず、新しいディレクトリを作成し、npm init -yコマンドでNode.jsプロジェクトを初期化する。次に、ウェブサーバーを構築するexpress、環境変数をロードするdotenv、そしてVonage Messages APIを通じてメッセージを送信する@vonage/server-sdkといった必要なNPMパッケージをインストールする。その後、メインのアプリケーションファイル（index.js）と環境設定ファイル（.env）を作成する。

環境設定では、.envファイルにVonageの認証情報と設定を追加する。これには、VonageアプリケーションID、Vonage APIシークレット、Vonageアプリケーションの秘密鍵ファイル（private.key）、そしてRBMのSender ID、そしてExpressサーバーが使用するポート番号が含まれる。VonageアプリケーションIDとprivate.keyファイルは、Vonageアプリケーションの設定時に取得できる。

RCSカルーセルを送信するコードでは、まず必要なパッケージをインポートし、環境変数をロードし、Vonageクライアントを初期化する。次に、Expressサーバー内にカスタムRCSメッセージを送信するためのエンドポイントを定義する。このエンドポイントは、Vonage Messages APIを利用して、メディア（動画または画像）、タイトル、説明、そしてユーザーがタップできるアクションボタンを含むプロダクトカードで構成されるカルーセルを送信する。メディアファイルはHTTPSで公開アクセス可能である必要があり、個々のファイルは100MB未満でなければならない。各カードに含まれるアクションボタンは、postbackData、openUrlAction、createCalendarEventActionなどの形式を使用し、ユーザーに具体的なインタラクションを提供する。postbackDataは、ユーザーがどのボタンをタップしたかをサーバーが追跡するための短い文字列である。

ユーザーがカルーセル内のボタンを操作したかどうかを知るため、VonageのWebhooks機能を利用する。Vonageアプリケーションからの受信RCSリクエストを処理するためのエンドポイントを作成し、ユーザーのアクションを捕捉する。このコードは、リクエストがVonageから来ていることをJWTシグネチャを使用して検証し、ユーザーがアクションボタンをタップしたことを示すbuttonプロパティを探し、そのペイロードをuserActionとして保存し、Node.jsサーバーのログに出力する。

Expressサーバーを構築するコードをindex.jsファイルに追加し、コマンドラインからnode index.jsでサーバーを起動する。

VonageからWebhooksを受信するためには、ローカルサーバーがインターネットからアクセス可能である必要がある。ngrokを使用し、別のターミナルタブでngrok http [ポート番号]を実行してサーバーを公開し、提供されるHTTPS URLをメモしておく。

Node.jsアプリケーションが準備できたら、Vonageアプリケーションも作成し設定する必要がある。Vonageダッシュボードで新しいアプリケーションを作成し、「Messages」機能を有効にする。Vonageアプリケーションの設定で、Inbound URLをngrokで取得したhttps://YOUR_NGROK_URL/inbound_rcsに設定し、公開鍵と秘密鍵を生成してprivate.keyファイルをプロジェクトのルートディレクトリに移動させる。その後、「Link external accounts」タブでRCSエージェントをアプリケーションにリンクさせる。

最後に、提供されているcurlコマンドを使用して、設定したExpressのエンドポイントをトリガーし、RCS対応スマートフォンにリッチカードカルーセルが表示され、ユーザーがアクションを選択できることを確認する。

この解説は、Node.jsとVonage Messages APIを使用してインタラクティブなRCSプロダクトカルーセルを構築する基本的な方法を示している。これは、製品紹介、イベント告知、または動的な選択肢を単一のメッセージで提供するための効果的な手段となる。さらに機能を拡張するには、postbackDataに応答する処理の追加や、APIからの動的なカードロード、位置情報に基づいたフィルターの実装などが考えられる。