Twilioブログ

Twilio Conversationsとは?チャットアプリのクイックスタートをご紹介

こんにちは、katsu.tです。

本ブログでは、Twilio Programmable Chatの後継であるTwilio Conversationsを使った、チャットアプリのQuickstartについてご紹介いたします。

Twilio Conversationsとは

Twilio Conversationsとは、WhatsAppやSMSなどのメッセージングアプリと連携して、独自のChat機能を作れるAPIです。Chat機能に必要なRoom、会話履歴、参加者などの管理も併せて行えます。

プラットフォームをまたいだシームレスなChat機能を、UI部分の開発のみで実現できるため、開発コストの大幅な削減が可能となります。

Conversationsが標準で対応しているプラットフォーム

現在Twilio Conversationsは、以下のプラットフォーム間をシームレスにつなぐことができます。

  • Chat
  • SMS
  • MMS
  • WhatsApp

Conversationsを使ったQuickstart

TwilioのQuickstartではChatとSMSをシームレスに連携させたシステムを構築していますが、日本でSMSをやりとりするにはアメリカの番号を利用する必要があります。

しかしアメリカの番号を利用してSMSを送信すると、国際SMS利用料金がかかってしまいます。日本でSMSのやりとりを頻繁に行うのは、金銭面を考慮するとあまり現実的ではありません

そこで本ブログでは、ウェブ版Chatアプリのみを使ったQuickstartをご紹介いたします。

事前準備

Quickstart

Twilio Conversationsを使ったQuickstartの大きな流れとしては次のようになります。

  1. 会話(Room)を作成
  2. 参加者を会話(Room)に追加
  3. ウェブアプリを使ってメッセージのやり取り

まず初めに、会話(Room)を作成していきます。

curl -X POST https://conversations.twilio.com/v1/Conversations \
--data-urlencode "FriendlyName=My First Conversation" \
-u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN
パラメータ名 概要
FriendlyName 会話(Room)名

成功すると次のようなレスポンスが取得できます。
この中の'sid'と'chat_service_sid'はこの後利用するためメモしておきます。

{
  "sid": "CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "account_sid": "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "chat_service_sid": "ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "messaging_service_sid": "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "friendly_name": "My First Conversation",
  "unique_name": "unique_name",
  "attributes": {
    "topic": "feedback"
  },
  "date_created": "2015-12-16T22:18:37Z",
  "date_updated": "2015-12-16T22:18:38Z",
  "state": "inactive",
  "timers": {
    "date_inactive": "2015-12-16T22:19:38Z",
    "date_closed": "2015-12-16T22:28:38Z"
  },
  "url": "https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "links": {
    "participants": "https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Participants",
    "messages": "https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Messages",
    "webhooks": "https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Webhooks"
  }
}

作成した会話(Room)に参加者2名を追加します。

curl -X POST https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Participants \
--data-urlencode "Identity=参加者名(設定したい任意の名前)" \
-u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN

例:
curl -X POST https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Participants \
--data-urlencode "Identity=testPineapple" \
-u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN

curl -X POST https://conversations.twilio.com/v1/Conversations/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Participants \
--data-urlencode "Identity=testPineapple2" \
-u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN

これでチャットを開始する準備ができました。次はウェブアプリケーションを構築していきます。

Twilioが提供しているサンプルコードは、Twilio CLIによってアクセストークンを作成して、設定しています。
しかしこの場合だと一人のユーザーしか利用できなくなってしまうため、同じアプリケーションを複数ユーザーで利用できるよう、動的にアクセストークンを作成するコードに修正して利用するのがポイントです。

$ git clone https://github.com/TwilioDevEd/conversations-demo.git conversations-demo
$ cd conversations-demo

'.env.example'をコピーして'.env'を作成します。
作成した'.env'のTwilioの情報を自身の情報に置き換えます。

// TwilioのAccountSID
TWILIO_ACCOUNT_SID=ACXXXXXXXXXXXXXX

// TwilioのAPI_KEY
TWILIO_API_KEY=SKXXXXXXXXXXXXXX 

// TwilioのAPI_SECRET
TWILIO_API_SECRET=XXXXXXXXXXXXXXXXXX

// CHAT_SERVICE_SID
TWILIO_CHAT_SERVICE_SID=ISXXXXXXXXXXXXXXXXXXXXXXXXXXX

次に、動的にアクセストークンを作成するコードへ修正していきます。
'src/ConversationsApp.js'の'getToken'に代入される関数を以下内容に変更します。

getToken = () => {
    var xhr = new XMLHttpRequest();
    // token取得
    xhr.open('POST', 'token/' + this.state.name, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        if (xhr.response) {
          var response = JSON.parse(xhr.response);
          this.setState({ token: response.token }, this.initConversations);
        }
      }
    }.bind(this)
    xhr.send();
  };

修正・保存をしたら、サーバーを起動してアプリを起動させます。

$ npm start

localhost:3000でアプリが起動します。
起動したページにアクセスし、会話に参加している参加者名を使ってログインします。

ログインすると、左側に参加している会話(Room)一覧が表示されます。
会話(Room)をクリックすることで、画面右側に会話(Room)の内容が表示され、
画面下部の入力欄からテキストを入力することができるようになります。

まとめ

今回、Twilio Conversationsを利用することによって、バックエンド側での開発を一切することなくチャットアプリを作れました。

「他プラットフォームとシームレスに連携できる」という強みを持つTwilio Conversations。ただしLINEなどの日本で主流なプラットフォームにはまだ対応していないため、今の段階ではその効果を十分に発揮できないかもしれません。

しかしChat機能のAPIを利用するだけでも非常に有効かと思いますので、ぜひ一度試してみてくださいね。

アプリケーションエンジニア 葛 智紀
アプリケーションエンジニア 葛 智紀

前職でiOS、Androidのネイティブアプリケーション開発、AngularやLaravelを用いたウェブアプリケーション開発に従事。KDDIウェブコミュニケーションズではTwilioの最新情報の発信やTwilioを用いた地域課題解決を担当。 個人では、Google Developer Group Tokyoのオーガナイザーを務める。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例