[Tutorial] Twilio Programmable Chatを使ってチャット機能を実装する

はじめに

こんにちは、中村です。
Twilio Programmable Chatは、バックエンド構築やスケーラビリティを考えずにWebやネイティブアプリにチャット機能を実装できます。今回は用意されているチュートリアルを利用しながらどのようなことができるかみていきます。

Programmable Chat

• ドキュメントはこちら

クイックスタートは、Web, Android, iOSが用意されています。今回はWeb（Javascript）を利用します。

ダウンロード・セットアップ

Node.js用のスターターアプリケーションをダウンロードします。

README.mdの手順にしたがって、.env.sampleをコピー

$ cp .env.example .env

Twilio Consoleから各種必要なキーを取得し.envに反映します。

環境変数名

• TWILIO_ACCOUNT_SID
  • プロジェクトダッシュボードにて取得できます。
• TWILIO_API_KEY
• TWILIO_API_SECRET
  • API Keysにて作成しSID（TWILIO_API_KEY）とSECRETを取得できます。
  • SECRETは新規作成時のみ確認できます。
• TWILIO_CHAT_SERVICE_SID
  • Programmable Chat Dashboardにてチャットサービスを作成しSERVICE SIDを取得できます。

入力が終わったらプロジェクトルートディレクトリでnpmコマンドを実行します。

$ npm install //パッケージのインストール
$ npm run start //アプリケーションの実行

アプリケーションが起動したらhttp://localhost:3000/にアクセスしましょう。このような画面が表示されるはずです。

DemosのChatをクリックすると、チャット画面に遷移しランダムのユーザー名が割り当てられチャンネルに参加します。

別のブラウザやシークレットウィンドウで参加すると別ユーザーとしてチャンネルに参加でき、メッセージを送信できます。 当然ですが同じチャネル内にメッセージを送信しているためリアルタイムに他のユーザーもメッセージを確認できます。（画像をクリックすると動きます）

簡単なチャット機能ができました。実際のアプリケーションへの統合は個々人の会員情報との連携やアクセス制限等があると思いますが、Twilioの豊富なAPIを利用して容易に実装することができます。

まとめ

チュートリアルをなぞる形でしたが、Twilioを使って簡単にチャット機能のベースとなる部分が構築できることがお分りいただけたかと思います。

自前でチャット機能のバックエンドを構築する場合は、管理するインフラの構築からサービスが大きくなっても安定的に稼働する可用性の担保、保守など検討すべきことがたくさんあると思います。その点Twilioは各種機能をAPI提供しておりその心配は無くなります。また豊富なライブラリによって既存のアプリケーションとの統合を助けています。また従量課金のため小規模だとしてもコストを最小限に抑えつつ提供できます。