![3.AccessTokenの取得
33
<?php
require_once('./Services/Twilio.php');
$account_sid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$auth_token = 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy';
$service_sid = 'ISzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
$appName = 'TwilioChatDemo';
$identity = $_GET['identity'];
$deviceId = $_GET['device'];
$endpointId = $appName . ':' . $identity . ':' . $deviceId;
token.php (1)](https://image.slidesharecdn.com/ip-160514022856/85/IP-33-320.jpg)
![8.メッセージの取得
48
// メッセージの受信と出力
channel.getMessages().then(function(messages) {
var totalMessages = messages.length;
for (i=0; i<messages.length; i++) {
var message = messages[i];
console.log(message.author, message.body);
}
console.log('Total Messages:' + totalMessages);
});
JavaScript](https://image.slidesharecdn.com/ip-160514022856/85/IP-48-320.jpg)
IPメッセージングはこうやって実装するのだ！
- 1. 代表 斎藤 栄 IPメッセージングは こうやって実装するのだ！ ～ ITでみんなに“WAKU WAKU”を ～ TwilioJP-UG 札幌 第3回 Twilioを知ろう、触れよう、小技(Tips)を聞こう。 2016/5/13
- 2. 自己紹介 2 • NTTデータ ➡ データクラフト ➡ ラジカルブリッジ • サイボウズ公認kintoneエバンジェリスト • kintone Café 創始者、運営事務局/札幌支部メンバー • TwilioJP-UG 札幌コアメンバー 代表／ IT 活用アドバイザー “クラウドおじさん” 斎藤 栄 ～ ITでみんなに“WAKU WAKU”を ～
- 6. ベストチーム365 サービスプラン 【わくわくプラン】 ¥89,890 【にこにこプラン】 ¥252,500 初回訪問・試作無料 訪問改修１回 初回訪問・試作無料 訪問改修３回 60日間の利用サポート 初回訪問・試作無料 6 リーズナブルな理由 見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。 仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。 分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。 サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。 ※金額は全て税別です。 ※別途kintoneの利用契約が必要となります。 ※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる ネットミーティングにて対応させていただきます。
- 8. kintoneプラグイン《カレンダーPlus》 8 試用ライセンス 有償ライセンス アプリ起動時や予定登録時に 警告表示 警告表示なし サポートあり アップデート通知 サポートなし 期間制限・機能制限無し http://radical-bridge.com/product/calendarPlus.html 1～20名 ¥39,800 21～50名 ¥59,800 51～100名 ¥79,800 101～200名 ¥99,800 201～500名 ¥119,800 501～1000名 ¥139,800 1001名～無制限 ¥159,800 累計400DL 突破！ 買切価格／全て税別 カレンダーplus
- 13. Twilio Video(BETA) & IP Messaging(BETA) 13 PC・スマホ同士でビデオ会議 ・Webブラウザ（JavaScript SDK） ・iOS SDK ・Android SDK PC・スマホ同士でチャット ・Webブラウザ（JavaScript SDK） ・iOS SDK ・Android SDK
- 14. 百聞は一見にしかず Video & IP Messaging デモ 14
- 15. 今日はIPメッセージングについて掘り下げます 15 PC・スマホ同士でビデオ会議 ・Webブラウザ（JavaScript SDK） ・iOS SDK ・Android SDK PC・スマホ同士でチャット ・Webブラウザ（JavaScript SDK） ・iOS SDK ・Android SDK
- 16. IPメッセージングでできること 16 • チャンネルの作成、破棄、および取得 • プライベートとパブリックのチャンネルタイプ • メンバーの追加、招待、削除、および取得 • チャンネルへの参加および参加解除 • メッセージを送信および受信する • メッセージの編集および削除 • ユニークでアドレス可能なチャンネル名 • 複数のデバイスの内容の同期 • オフラインメッセージのサポート（オフラインメンバーが接続したときにメッ セージを配信） • イベントのコールバックと webhook • タイピングインジケーター • ロールとパーミッション • iOS、Android、および JavaScript 用のクライアント SDK • iOS 用の APN プッシュ通知サポート • Android 用の GCM プッシュ通知サポート • JavaScript 用のメッセージ配信ステータス（他のメンバーのメッセージ「読み込 みステータス」） • JavaScript 用の消費位置管理（全デバイスで同期した自分のメッセージ「読み込 みステータス」） 公式APIリファレンス には色々書いてます…
- 17. 精査して お伝えします 17
- 18. IPメッセージングでできること 18 • チャンネルの作成、破棄、および取得 • プライベートとパブリックのチャンネルタイプ • メンバーの追加、招待、削除、および取得 • チャンネルへの参加および参加解除 • メッセージを送信および受信する • メッセージの編集および削除 • ユニークでアドレス可能なチャンネル名 • 複数のデバイスの内容の同期 • オフラインメッセージのサポート（オフラインメンバーが接続したときにメッ セージを配信） • イベントのコールバックと webhook • タイピングインジケーター • ロールとパーミッション • iOS、Android、および JavaScript 用のクライアント SDK • iOS 用の APN プッシュ通知サポート • Android 用の GCM プッシュ通知サポート • JavaScript 用のメッセージ配信ステータス（他のメンバーのメッセージ「読み 込みステータス」） • JavaScript 用の消費位置管理（全デバイスで同期した自分のメッセージ「読み込 みステータス」） 今日は太字の機能を 解説します
- 19. IPメッセージングの特長 19 自分でリアルタイム処理サーバーを立てなくても良い • Socket.IO等でサーバーサイド処理を書かなくても良い • サーバーのスケールのことなど気にしなくても良い クライアントの実装は自分自身でやる必要がある • メッセージング処理 • 表示周り 特定のクライアントアプリに縛られることなく、 メッセージング機能を自身のアプリに組み込める。
- 20. プラットフォーム 20 SDK • JavaScript SDK • iOS SDK • Android SDK API • REST API
- 21. プラットフォーム 21 SDK • JavaScript SDK • iOS SDK • Android SDK API • REST API 今日はJavaScriptの 実装例を解説します
- 22. ざっくりとしたイメージ 22 ①AccessToken取得 ②Channelの生成 or 参加 ③メッセージのやり取り等 ①AccessToken取得 ②Channelの生成 or 参加 ③メッセージのやり取り等 Webサーバー ・ACCOUNT SID ・AUTH TOKEN ・SERVICE SID ・Endpoint ID を使ってAccessTokenを取得。 ※これらは非公開情報のためサー バー上に定義しておく
- 28. 1.Twilio管理画面（認証情報の収集） 28 Endpoint IDとは？ ・どのチャットアプリに(appName) ・誰が(identity) ・どのデバイスから(device) の３要素で定義されるユニークなID。 ユニークさを保証できればフォーマットは自由。 例） $endpointId = $appName . ’:’ . $identity . ’:’ . $device => ‘myChatApp:Alice:Chrome’
- 30. 2.SDK, ヘルパーライブラリの設置 30 <script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio- common.min.js"></script> <script src="https://media.twiliocdn.com/sdk/rtc/js/ip- messaging/v0.10/twilio-ip-messaging.min.js"></script> JavaScript SDK https://github.com/twilio/twilio-php/archive/master.zip ※ /Serviceディレクトリをサーバーに設置 PHPヘルパーライブラリ
- 32. 3.AccessTokenの取得 32 $.getJSON('/token.php', { identity: username, device: 'browser' }, function(data) { var token = data.token; }); JavaScript
- 33. 3.AccessTokenの取得 33 <?php require_once('./Services/Twilio.php'); $account_sid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; $auth_token = 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy'; $service_sid = 'ISzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'; $appName = 'TwilioChatDemo'; $identity = $_GET['identity']; $deviceId = $_GET['device']; $endpointId = $appName . ':' . $identity . ':' . $deviceId; token.php (1)
- 34. 3.AccessTokenの取得 34 $client = new Services_Twilio($account_sid, $auth_token); $key = $client->account->signing_keys ->create(array('FriendlyName' => $appName)); $signingKeySid = $key->sid; $signingKeySecret = $key->secret; $token = new Services_Twilio_AccessToken( $account_sid, $signingKeySid, $signingKeySecret, 3600, $identity ); token.php (2)
- 35. 3.AccessTokenの取得 35 $ipmGrant = new Services_Twilio_Auth_IpMessagingGrant(); $ipmGrant->setServiceSid($service_sid); $ipmGrant->setEndpointId($endpointId); $token->addGrant($ipmGrant); echo json_encode(array( 'identity' => $identity, 'token' => $token->toJWT() )); token.php (3)
- 37. 4.AccessTokenによるSDKの初期化 37 var accessManager = new Twilio.AccessManager(token); var messagingClient = new Twilio.IPMessaging.Client(accessManager); JavaScript
- 39. 5.Channelの作成（既に存在している場合は不要） 39 messagingClient.createChannel({ uniqueName: 'general', friendlyName: 'General Chat Channel' }).then(function(channel) { console.log('Created general channel:'); console.log(channel); }); JavaScript
- 41. 6.Channelへの参加 41 channel.join().then(function(channel) { console.log('Joined channel ' + channel.friendlyName) }); JavaScript
- 43. 7.イベントハンドラーの定義 ① 43 // メッセージ受信時 channel.on('messageAdded', function(message) { console.log(message.author, message.body); // チャットエリアにメッセージを追記する処理を記述 }); // 招待された時 messagingClient.on('channelInvited', function(channel) { console.log('Invited to ' + channel.friendlyName); channel.join(); }); JavaScript
- 44. 7.イベントハンドラーの定義 ② 44 // メンバー入室時 channel.on('memberJoined', function(member) { console.log(member.identity + 'has joined.'); }); // メンバー退室時 channel.on('memberLeft', function(member) { console.log(member.identity + 'has left the channel.'); }); JavaScript
- 45. 7.イベントハンドラーの定義 ③ 45 // タイピング開始時 channel.on('typingStarted', function(member) { console.log(member.identity + 'is currently typing.'); // タイピング中表示の処理を記述 }); // タイピング終了時 channel.on('typingEnded', function(member) { console.log(member.identity + 'has stopped typing.'); // タイピング中表示を停止する処理を記述 }); JavaScript
- 46. 7.イベントハンドラーの定義 ④ 46 // メンバー情報変更時（メッセージ既読情報更新時など） var members = myChannel.getMembers(); members.forEach(function(member) { member.on('updated', function(updatedMember) { console.log(updatedMember); // 既読表示などの処理を記述 }); }); JavaScript
- 48. 8.メッセージの取得 48 // メッセージの受信と出力 channel.getMessages().then(function(messages) { var totalMessages = messages.length; for (i=0; i<messages.length; i++) { var message = messages[i]; console.log(message.author, message.body); } console.log('Total Messages:' + totalMessages); }); JavaScript
- 50. 9.アクションに関する処理 ① 50 // メッセージの送信 var msg = $('#chat-input').val(); channel.sendMessage(msg); ---- // メンバーを招待する channel.invite('elmo').then(function() { console.log('Your friend has been invited!'); }); ---- // 最終既読メッセージインデックスの更新 // ※クライアントから通知する必要がある（10秒間隔で通知） // 相手側でmemberのupdatedイベントが発火 channel.updateLastConsumedMessageIndex(newestIndex); JavaScript
- 51. 9.アクションに関する処理 ② 51 // タイピング開始の通知 // ※クライアントから通知する必要がある（5秒間隔で通知） // ※相手側でchannelのtypingStartedイベントが発火 $('#chat-input').on('keydown', function(e) { if (e.keyCode === 13) { sendButton.click(); } else { channel.typing(); } }); JavaScript ※タイピング終了時イベントはタイムアウトで自動発生するので 明示的に通知する必要は無い
- 52. 既読通知・タイピング開始通知のインターバルについて 52 • 最終既読メッセージインデックスの更新通知間隔 ＝ 10秒 • タイピング開始の通知間隔 ＝ 5秒 JavaScript SDKからはインターバル値の設定を変更でき ない。 変更したい場合はREST APIを利用するとできるが、間隔 を短くする際はトラフィックの増大に注意すること。
- 55. 以上です！ 55
- 56. 告知！ 56 • 6月10日（金）19:00～20:30 TwilioJP-UG 札幌 第4回 【Twilioハンズオン！初級編】 twilio 札幌 4回 https://twiliojp-ug.doorkeeper.jp/events/43495