Twilio ConversationsとVue.jsでチャットアプリケーションを作る（前編）

読む所要時間: 1 分

August 26, 2021
執筆者
Stephenie Minami Nakajima
Twilion
レビュー担当者
Hiroto Masaki
Twilion
Mitsuharu Nakamura
Twilion

Twilio ConversationsとVue.jsでチャットアプリケーションを作る（前編）

背景


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の基本知識

またどれか一つに不安ある場合も、チュートリアルを進めながら学習することが可能です。

必要なツール

アプリケーションの構造

これから作成するチャットアプリケーションではフロントエンドとバックエンドを準備します。フロントエンド側ではチャットアプリケーションの画面やメッセージ内容を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 CLIのVue.jsのバージョン指定ステップ

今回のプロジェクトではVue 3を使用しますので、Vue 3を選択します。するとVueプロジェクトが作成されます。


次に、作成したプロジェクトを起動させましょう。以下のコマンドでプロジェクトに移動し、起動します。

cd conversations-project
npm run serve

http://localhost:8080/にブラウザでアクセスすると、次のような画面が表示されます。

Vue CLIのスタート画面

この画面が確認できたらターミナルでプロセスを一度終了させてください。

バックエンドを構築する

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ファイルをテキストエディターで開き、以下のコードをコピーして貼り付けてください。

TWILIO_ACCOUNT_SID=XXXXX
TWILIO_API_KEY_SID=XXXXX
TWILIO_API_KEY_SECRET=XXXXX
TWILIO_CONVERSATIONS_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_SIDの値に、SECRETをTWILIO_API_KEY_SECRETの値に設定してください。

このコンソール画面を離れると、あなたのSECRETには二度とアクセスできません。画面を閉じる前に値をコピーして保存しておいてください。

Service SID

Twilio ConsoleのConversationsにアクセスします。左側のサイドバーのManageをクリックし、Servicesをクリックします。Create a new serviceをクリックし、ポップアップが表示されたら、「vue-conversations」のような判別しやすいサービス名を入力してください。サービス名を入力すると、以下のような画面が表示されます。この画面で表示されるService SIDをコピーし、.envファイルのTWILIO_CONVERSATIONS_SERVICE_SIDにペーストします。

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_SID
const twilioApiSecret = process.env.TWILIO_API_KEY_SECRET

// Used specifically for creating Chat tokens
const serviceSid = process.env.TWILIO_CONVERSATIONS_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でチャットアプリケーションを作る（後編）」

 

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。