Friday, 27 August, 2021 UTC
Summary
背景
Twilio Conversationsは仮想空間を作成し複数のチャネルでユーザー間のコミュニケーションを実現できる機能です。Twilio Conversationsは複数のチャットプラットフォームに対応しており、クロス、マルチチャネルでのコミュニケーションをサポートします。たとえば、SMSで始めたチャットをMMS、WhatsAppやウェブチャットで続行することができます。また、APIを使って会話の作成やユーザーの追加をしたり、Webhookによる会話中のさまざまなイベントのモニタリングをすることで、あなたのニーズに合わせたコミュニケーション方法を実装できます。
Twilio Conversationsは仮想空間を作成し複数のチャネルでユーザー間のコミュニケーションを実現できる機能です。Twilio Conversationsは複数のチャットプラットフォームに対応しており、クロス、マルチチャネルでのコミュニケーションをサポートします。たとえば、SMSで始めたチャットをMMS、WhatsAppやウェブチャットで続行することができます。また、APIを使って会話の作成やユーザーの追加をしたり、Webhookによる会話中のさまざまなイベントのモニタリングをすることで、あなたのニーズに合わせたコミュニケーション方法を実装できます。
このチュートリアルでは、Twilio ConversationsとVue.jsでシンプルなウェブチャットアプリケーションを作る方法をご紹介します。
本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからバックエンドの構築までを、後編ではフロントエンド側の構築と動作検証についてご紹介いたします。
後編はこちら:「Twilio ConversationsとVue.jsでチャットアプリケーションを作る(後編)」
目標
このチュートリアルを最後まで進めると、Twilio ConversationsとTwilio Conversations JavaScriptクライアントライブラリの使い方を実践的に学べるとともに、以下のようなVue.jsを使ったシンプルなウェブチャットアプリケーションを作成できます。
想定される技術知識 本稿では以下の知識を想定しています。
- JavaScriptの基本知識
- Node.jsの基本知識
またどれか一つに不安ある場合も、チュートリアルを進めながら学習することが可能です。
必要なツール - Node.js (本稿執筆時点の安定バージョン:v14.17.4)とnpm
- Vue
- Twilioアカウント。アカウント作成方法はHelp Centerの「Twilioアカウントの作成方法」を参照してください。
これから作成するチャットアプリケーションではフロントエンドとバックエンドを準備します。フロントエンド側ではチャットアプリケーションの画面やメッセージ内容をVue.jsを使って表示させます。VueがDOMを自動操作してくれるため、ユーザーが入力した情報をもとにページをダイナミックに更新することができます。バックエンド側はNode.jsとExpressを使ってアクセストークンを生成します。アクセストークンは、エンドユーザーがWebブラウザ上で動作するアプリケーションからTwilio Conversationsを利用するための短期間の認証情報を提供します。
アプリケーションの具体的な構造は以下のとおりです。
フロントエンド:
App: プロジェクトの実行エントリーポイントとなるルートコンポーネント。ここでグローバルスタイルやプロジェクト全体で使用するパッケージをインポートします。Chat: チャット画面全体を構成するコンポーネント。このコンポーネントでConversationsクライアントの初期化、会話の作成やユーザーを会話に追加する処理を行います。Conversation: 会話の中で行われるメッセージを構成するコンポーネント。メッセージの送受信処理を行います。
バックエンド:
server.js: アクセストークンの生成を行うサーバーファイル。
大まかなアプリケーションの構造が理解できたところで、プロジェクトの作成に進みましょう。
基本設定とVueの準備 VueCLIをインストールする
まずはVue CLIをインストールします。Vue CLIはVue専用の開発ツールです。コマンド一つでプロジェクトの雛形を作成したり、ESLintやBabel、TypeScriptなどをサポートしているので個々のパッケージをインストールしたり設定する必要がありません。
ターミナルで以下のコマンドで最新のVue CLIをインストールします。
npm install -g @vue/cli@next Vueプロジェクトを作成する
任意のディレクトリで以下のコマンドでプロジェクトの雛形を作成し、プロジェクト内に移動します。
vue create conversations-project するとターミナルに以下ようなオプションが表示されます。
今回のプロジェクトではVue 3を使用しますので、Vue 3を選択します。するとVueプロジェクトが作成されます。
次に、作成したプロジェクトを起動させましょう。以下のコマンドでプロジェクトに移動し、起動します。
cd conversations-project npm run serve http://localhost:8080/にブラウザでアクセスすると、次のような画面が表示されます。
この画面が確認できたらターミナルでプロセスを一度終了させてください。
バックエンドを構築する Vueプロジェクトの雛形が完成したので、次にバックエンド側の準備をします。まずはバックエンド構築に必要なdependenciesをインストールします。以下のコマンドを実行します。
npm install --save twilio @twilio/conversations express cors dotenv インストールしたdependenciesの詳細は以下のとおりです。
twilio: Twilio APIに対するHTTPリクエストを、Node.jsを使って書けるようにするためのパッケージ。本稿ではアクセストークンの取得に使用します。@twilio/conversations: Twilio ConversationsをJavaScriptで使用できるようにするためのクライアントライブラリ。express: Node.jsで使うウェブアプリケーションサーバーフレームワーク。本項ではユーザーごとのアクセストークンの取得に使用します。cors: ExpressサーバーにCORS設定を追加するためのパッケージ。CORSについて詳しくはブログ記事「ExpressとTypeScript APIにCORSサポートを追加する方法」を参照してください。dotenv:.envファイルに定義された値を環境変数として取り込むためのパッケージ。
インストールが完了したら、アクセストークンの生成を行うために使用するserver.jsファイルと環境変数を保存するための.envファイルを作成します。以下のコマンドを実行してください。
touch .env server.js Twilioの認証情報を環境変数として設定する
次に、環境変数の設定をします。作成した.envファイルをテキストエディターで開き、以下のコードをコピーして貼り付けてください。
次に、環境変数の設定をします。作成した.envファイルをテキストエディターで開き、以下のコードをコピーして貼り付けてください。
TWILIO_ACCOUNT_SID=XXXXX TWILIO_API_KEY=XXXXX TWILIO_API_SECRET=XXXXX TWILIO_SERVICE_SID=XXXXX XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。これらの認証情報を取得し、.envファイルに追加する方法を以下でご紹介します。Account SID
ご利用されている環境によってTwilio Consoleの画面表示が異なる場合があります。
Twilio Consoleにログインし、Account SIDを確認します。Account SIDの値をコピーして、.envファイルの
TWILIO_ACCOUNT_SID変数にペーストしてください。APIキーとAPIシークレット
次に、Twilio ConsoleのAPI Keysにアクセスします。プラス記号をクリックして、新しいAPIキーを作成します。FRIENDLY NAMEのテキストフィールドにキーの名称を入力し、KEY TYPEを
Standardに設定します。Create API Keyをクリックします。画面にSIDとSECRETを含むデータが表示されます。SIDはあなたのAPIキーです。
SIDを.envファイルの
TWILIO_API_KEYの値に、SECRETをTWILIO_API_SECRETの値に設定してください。このコンソール画面を離れると、あなたのSECRETには二度とアクセスできません。画面を閉じる前に値をコピーして保存しておいてください。
Service SID
Twilio ConsoleのConversationsにアクセスします。左側のサイドバーのManageをクリックし、Servicesをクリックします。Create a new serviceをクリックし、ポップアップが表示されたら、「vue-conversations」のような判別しやすいサービス名を入力してください。サービス名を入力すると、以下のような画面が表示されます。この画面で表示されるService SIDをコピーし、.envファイルの
TWILIO_SERVICE_SIDにペーストします。.envを保存して閉じると、環境変数の設定が完了します。
アクセストークンを生成する
次に、アクセストークンを生成する処理をserver.jsに追加していきます。server.jsファイルを開き、以下のコードをペーストしてください。
require("dotenv").config() const express = require("express") const cors = require("cors") const app = express() app.use(cors()) const port = 5000 const AccessToken = require("twilio").jwt.AccessToken const ChatGrant = AccessToken.ChatGrant // Used when generating any kind of tokens const twilioAccountSid = process.env.TWILIO_ACCOUNT_SID const twilioApiKey = process.env.TWILIO_API_KEY const twilioApiSecret = process.env.TWILIO_API_SECRET // Used specifically for creating Chat tokens const serviceSid = process.env.TWILIO_SERVICE_SID // Create a "grant" which enables a client to use Chat as a given user, // on a given device const chatGrant = new ChatGrant({ serviceSid: serviceSid, }) // Create an access token which we will sign and return to the client, // containing the grant we just created function getAccessToken(user) { const token = new AccessToken( twilioAccountSid, twilioApiKey, twilioApiSecret, {identity: user} ) token.addGrant(chatGrant) const jwt = token.toJwt() console.log(`Token for ${user}: ${jwt}`) return jwt } app.get("/auth/user/:user", (req, res) => { const jwt = getAccessToken(req.params.user) res.send({token: jwt}) }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) アクセストークンの生成やこのコードの詳細についてはTwilio Docsの「アクセストークンの作成」を参照してください。
このアクセストークンの取得方法はデモンストレーションのために簡略化されており、本質的に安全ではありません。本番アプリケーションでは、ユーザーの身元をどのように確認するか、どのような権限を持たせるか、アプリケーションのセキュリティをどのように確保するかを慎重に検討してください。
ターミナルで、conversations-projectのルートディレクトリで以下のコマンドを実行してください。
node server.js 問題なくサーバーが実行されると「Example app listening at http://localhost:5000」が表示されます。
これでサーバーの準備ができました。
次のステップ 前編ではプロジェクトのセットアップからバックエンド側の構築に関してご紹介しました。後編ではフロントエンド側の構築方法と、アプリケーションの実装についてご説明いたします。
後編はこちら:「Twilio ConversationsとVue.jsでチャットアプリケーションを作る(後編)」
後編はこちら:「Twilio ConversationsとVue.jsでチャットアプリケーションを作る(後編)」