4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TwilioAdvent Calendar 2016

Day 11

Twilio Chat の紹介と可能性について

Posted at

Twilio はコミュニケーション API であると言われて久しいですが、まだまだ日本では「電話」という印象が強いようです。

つい先日、Twilio は 「IP メッセージング」から「チャット」という名前に正式に変更し、提供するライブラリの設計や構造が大きく変わりました。本記事ではこれから Twilio Chat を始める方向けの入門としてご紹介します。

Twilio Chat のメリット

そもそもなぜ Twilio Chat なのでしょうか。 チャットの根幹であるメッセージ送信、受診であれば、 socket.io などのライブラリや、Firebase などのクラウドサービスを使えば簡単に実現できる時代になってきています。

Twilio Chat を使えば、「チャット機能にフォーカスした開発」を高速で実現できます。例えば、チャットアプリケーションで必ず必要な「チャンネル」の概念。socket.io や Firebase を使うなら、それらも自分で構築する必要がありますが、 Twilio Chat なら標準でチャンネルを作成するための API が用意されています。

一口に Channel と言っても、あらゆるイベントが必要になります。これは実際にチャットを作ってみないと想像もできないくらい膨大な数です。例をあげましょう。提供されているすべてのイベントはドキュメントをご覧ください。

チャンネルにいるメンバーの取得、チャンネルのメッセージの取得、招待を送る、招待を受け取る、メッセージが追加された時のイベント、メンバーが追加されイベントた、メンバーが退室したイベント、メッセージが削除されたイベント、メッセージが更新されたイベント

まだまだ他にもありますが、チャットをsocket.io や Firebase で自前で作る場合は、これらイベントを自分で作らなければなりません。とても面倒ですよね。

Twilio Chat のコード例

Twilio Chat でのイベント定義はとてもシンプルで簡単です。以下に例をしまします。実際に私が作っているサービスのコードを一部修正したものです。


    // メッセージ追加時のイベント
    _activeChannel.on('messageAdded', function(message) {
      _appendToMessage($(".post-list"), message);
    });
    // メッセージ削除時のイベント
    _activeChannel.on('messageRemoved', function(message) {
      $(".post[sid='" + message.sid + "']").remove();
    });
    // メッセージアップデート時のイベント
    _activeChannel.on('messageUpdated', function(message) {
      $(".post[sid='" + message.sid + "']").find(".body").html(message.body + " <small>(edited)</small>");
    });
    // メンバー追加時のイベント
    _activeChannel.on('memberJoined', function(member) {
      _appendMember(member);
    });
    // タイピングスタート時のイベント
    _activeChannel.on('typingStarted', function(member) {
      $(".text-input-area .typing").removeClass("is-hidden");
      $(".text-input-area .who").text(member.userInfo.friendlyName);
    });
    // タイピング終了時のイベント
    _activeChannel.on('typingEnded', function(member) {
      $(".text-input-area .typing").addClass("is-hidden");
      $(".text-input-area .who").text("");
    });

私たちがフォーカスしなければならないのは、このようにイベントを定義して UI の更新をするところだけです。今回は誰でもわかるように jQuery を使いましたが、最近流行りの JavaScript フレームワークとの相性も良いことでしょう。

Twilio Chat を使った時のサーバーサイド

Twilio Chat を使えば、サーバーサイドのソースコードを極限まで減らすことができます。

基本的な匿名なチャットをするだけなら、トークンを発行するコードだけで済みます。 Twilio Client のケイパビリティトークンを発行するようなコードを書いて、それを Twilio Chat の SDK に読み込ませるだけです。

以下は Ruby on Rails でのサンプルです。


  def token
    device_id = params['device']
    identity = gen_identity # random で生成
    endpoint_id = "VideoApp:#{identity}:#{device_id}"
    token = Twilio::Util::AccessToken.new ENV['TWILIO_ACCOUNT_SID'],
      ENV['TWILIO_API_KEY'], ENV['TWILIO_API_SECRET'], 3600, identity
    grant = Twilio::Util::AccessToken::IpMessagingGrant.new
    grant.service_sid = ENV['TWILIO_SERVICE_SID']
    grant.endpoint_id = endpoint_id

    token.add_grant ipm_grant
    render json: {identity: identity, token: token.to_jwt}
  end

もし、ログイン制のチャットを作りたければ、この identity をユーザーIDに紐づくものにする必要があったり、ログインそのものの仕組みが必要になってきます。これらはそもそも Web フレームワークであれば標準で備わっていたりするので、容易に実装できることでしょう。

他のチャンネル内にいるユーザー属性の管理も、全て Twilio Chat に任せることが実装のコツです。そうすればユーザーの情報を変更された時もイベントが発火され、リアルタイムにユーザーの変更を追従できます。その他も TWilio で提供されているイベントや属性を細かくチェックし、 Twilio で敷かれた チャット開発のレールに乗ることが Twilio Chat の開発の成功のポイントです。

チャットは新しい時代のコミュニケーションの基本

これからの時代は、ビデオ通話やチャットといった通信手段がメジャーになっていくでしょう。十代のほとんどはチャットが一番身近な存在で、相手とのコミュニケーションはチャットを望むようになってきています。

Twitter, Facebook, LINE。これら爆発的ヒットを生み出したアプリも、基本はチャットというシンプルな仕組みから独自に味を付け加えたサービスです。おそらく、これからも大ヒットアプリはチャットというコミュニケーションの基本から派生したサービスになってくることでしょう。

そんな時に、複雑なチャットのインフラ構築や、管理の手間を Twilio が解放してくれます。しかも料金は非常に低く、Twilio Chat で料金が問題になるレベルまでサービスを成功させたなら、それはすでに何十、何百万ユーザーを抱えた状態の時でしょう。

Twilio Chat を使って、サービス開発のスピードダッシュをし、他社を圧倒するアプリを作ってみてはいかがでしょうか。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?