IPメッセージングはこうやって実装するのだ！

代表斎藤栄

IPメッセージングはこうやって実装するのだ！

～ ITでみんなに“WAKU WAKU”を～

TwilioJP-UG 札幌第3回 Twilioを知ろう、触れよう、小技(Tips)を聞こう。

2016/5/13

自己紹介

2

• NTTデータ ➡ データクラフト ➡ ラジカルブリッジ

• サイボウズ公認kintoneエバンジェリスト

• kintone Café 創始者、運営事務局/札幌支部メンバー

• TwilioJP-UG 札幌コアメンバー

代表／ IT 活用アドバイザー

“クラウドおじさん” 斎藤栄

～ ITでみんなに“WAKU WAKU”を～

属性

3

80’s昭和歌謡を楽しむ会主催

おやじバンド活動

おやじ活動

宇宙関係・毎月第一火曜日（＝歌謡日）・累計44回開催 ※2016/5/13現在

次回は 6月7日（火）

やってること

4

つくってます

アプリ

サイボウズ社が提供するクラウド業務アプリ開発プラットフォーム『kintone』を使い、お客様の業務上の課題解決やチームワーク強化といったレイヤーにフォーカスした価値の提供を行っています。

ソフトウェアの提供価値の提供

札幌で

ベストチーム365

5

チームワークを強化するオリジナル業務アプリ構築サービス

ベストチーム365

初回訪問・試作無料！《¥89,890から始めるアプリ開発》

×

ベストチーム365 サービスプラン

【わくわくプラン】 ¥89,890

【にこにこプラン】 ¥252,500

初回訪問・試作無料訪問改修１回

初回訪問・試作無料訪問改修３回 60日間の利用サポート

初回訪問・試作無料

6

リーズナブルな理由

見積なし見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。

仕様書なし一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。

分業なし営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。

サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。

※金額は全て税別です。 ※別途kintoneの利用契約が必要となります。 ※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによるネットミーティングにて対応させていただきます。

kintoneプラグイン《カレンダーPlus》

7

累計400DL突破！

カレンダーplus

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

どこでもコールセンター

9

kintoneでコールセンター・着信・発信、CTI機能、クリックトゥコール機能・さっと立ち上げて・さっとやめられる（専用機材不要、短期導入◎）オールクラウドだから場所を選ばない・在宅でもコールセンターのオペレーターができる（テレワーク）・地域間格差のない仕事を実現、転勤しても続けられる

http://www.e-cometrue.com/callcenter/

販売元：株式会社イー・カムトゥルー開発元：ラジカルブリッジ

どこでもコールセンターデモ

050-31xx-xxxx

10

Twilioと言えば電話&SMS

11

たった数行のコードで電話／SMSとつながるクラウドAPIサービス

http://twilio.kddi-web.com/

Twilioと言えば電話&SMS

12

たった数行のコードで電話／SMSとつながるクラウドAPIサービス

http://twilio.kddi-web.com/

今日はTwilioの電話以外のサービスを

お話します！

Twilio Video(BETA) & IP Messaging(BETA)

13

PC・スマホ同士でビデオ会議・Webブラウザ（JavaScript SDK）・iOS SDK ・Android SDK

PC・スマホ同士でチャット・Webブラウザ（JavaScript SDK）・iOS SDK ・Android SDK

百聞は一見にしかず

Video & IP Messaging デモ

14

今日はIPメッセージングについて掘り下げます

15

PC・スマホ同士でビデオ会議・Webブラウザ（JavaScript SDK）・iOS SDK ・Android SDK

PC・スマホ同士でチャット・Webブラウザ（JavaScript SDK）・iOS SDK ・Android SDK

IPメッセージングでできること

16

• チャンネルの作成、破棄、および取得 • プライベートとパブリックのチャンネルタイプ • メンバーの追加、招待、削除、および取得 • チャンネルへの参加および参加解除 • メッセージを送信および受信する • メッセージの編集および削除 • ユニークでアドレス可能なチャンネル名 • 複数のデバイスの内容の同期 • オフラインメッセージのサポート（オフラインメンバーが接続したときにメッ

セージを配信） • イベントのコールバックと webhook • タイピングインジケーター • ロールとパーミッション • iOS、Android、および JavaScript 用のクライアント SDK • iOS 用の APN プッシュ通知サポート • Android 用の GCM プッシュ通知サポート • JavaScript 用のメッセージ配信ステータス（他のメンバーのメッセージ「読み込

みステータス」） • JavaScript 用の消費位置管理（全デバイスで同期した自分のメッセージ「読み込

みステータス」）

公式APIリファレンスには色々書いてます…

精査してお伝えします

17

IPメッセージングでできること

18

• チャンネルの作成、破棄、および取得 • プライベートとパブリックのチャンネルタイプ • メンバーの追加、招待、削除、および取得 • チャンネルへの参加および参加解除 • メッセージを送信および受信する • メッセージの編集および削除 • ユニークでアドレス可能なチャンネル名 • 複数のデバイスの内容の同期 • オフラインメッセージのサポート（オフラインメンバーが接続したときにメッ

セージを配信） • イベントのコールバックと webhook • タイピングインジケーター • ロールとパーミッション • iOS、Android、および JavaScript 用のクライアント SDK • iOS 用の APN プッシュ通知サポート • Android 用の GCM プッシュ通知サポート • JavaScript 用のメッセージ配信ステータス（他のメンバーのメッセージ「読み込みステータス」）

• JavaScript 用の消費位置管理（全デバイスで同期した自分のメッセージ「読み込みステータス」）

今日は太字の機能を解説します

IPメッセージングの特長

19

自分でリアルタイム処理サーバーを立てなくても良い • Socket.IO等でサーバーサイド処理を書かなくても良い • サーバーのスケールのことなど気にしなくても良い

クライアントの実装は自分自身でやる必要がある • メッセージング処理 • 表示周り特定のクライアントアプリに縛られることなく、メッセージング機能を自身のアプリに組み込める。

プラットフォーム

20

SDK • JavaScript SDK • iOS SDK •Android SDK API •REST API

プラットフォーム

21

SDK • JavaScript SDK • iOS SDK •Android SDK API •REST API

今日はJavaScriptの実装例を解説します

ざっくりとしたイメージ

22

①AccessToken取得

②Channelの生成 or 参加 ③メッセージのやり取り等

①AccessToken取得

②Channelの生成 or 参加 ③メッセージのやり取り等

Webサーバー

・ACCOUNT SID ・AUTH TOKEN ・SERVICE SID ・Endpoint ID を使ってAccessTokenを取得。 ※これらは非公開情報のためサーバー上に定義しておく

チャット機能の実装の大まかな流れ

23

1.Twilio管理画面（認証情報の収集）

2.SDKの設置 3.AccessTokenの取得 4.AccessTokenによるSDKの初期化 5.Channelの作成 6.Channelへの参加 7.イベントハンドラーの定義 8.メッセージの取得 9.アクションに関する処理

2.ヘルパーライブラリの設置 3.AccessTokenの取得


24





25


26


27


28

Endpoint IDとは？・どのチャットアプリに(appName) ・誰が(identity) ・どのデバイスから(device) の３要素で定義されるユニークなID。ユニークさを保証できればフォーマットは自由。例） $endpointId = $appName . ’:’ . $identity . ’:’ . $device => ‘myChatApp:Alice:Chrome’


29




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ヘルパーライブラリ

https://github.com/twilio/twilio-php/archive/master.zip





31




3.AccessTokenの取得

32

$.getJSON('/token.php', { identity: username, device: 'browser' }, function(data) { var token = data.token; });

JavaScript


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

$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

$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)


36




4.AccessTokenによるSDKの初期化

37

var accessManager = new Twilio.AccessManager(token); var messagingClient = new Twilio.IPMessaging.Client(accessManager);

JavaScript


38




5.Channelの作成（既に存在している場合は不要）

39

messagingClient.createChannel({ uniqueName: 'general', friendlyName: 'General Chat Channel' }).then(function(channel) { console.log('Created general channel:'); console.log(channel); });

JavaScript


40




6.Channelへの参加

41

channel.join().then(function(channel) { console.log('Joined channel ' + channel.friendlyName) });

JavaScript


42




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

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

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

7.イベントハンドラーの定義 ④

46

// メンバー情報変更時（メッセージ既読情報更新時など） var members = myChannel.getMembers(); members.forEach(function(member) { member.on('updated', function(updatedMember) { console.log(updatedMember); // 既読表示などの処理を記述 }); });

JavaScript


47




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


49




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

9.アクションに関する処理 ②

51

// タイピング開始の通知 // ※クライアントから通知する必要がある（5秒間隔で通知） // ※相手側でchannelのtypingStartedイベントが発火 $('#chat-input').on('keydown', function(e) { if (e.keyCode === 13) { sendButton.click(); } else { channel.typing(); } });

JavaScript

※タイピング終了時イベントはタイムアウトで自動発生するので明示的に通知する必要は無い

既読通知・タイピング開始通知のインターバルについて

52

• 最終既読メッセージインデックスの更新通知間隔＝ 10秒 • タイピング開始の通知間隔＝ 5秒 JavaScript SDKからはインターバル値の設定を変更でき

ない。変更したい場合はREST APIを利用するとできるが、間隔

を短くする際はトラフィックの増大に注意すること。

参考にすべき情報源

53

• APIリファレンス https://jp.twilio.com/docs/api/ip-messaging

54

これで君も IPメッセージングを使って実装できる！

以上です！

55

告知！

56

• 6月10日（金）19:00～20:30

TwilioJP-UG 札幌第4回

【Twilioハンズオン！初級編】

twilio 札幌 4回

https://twiliojp-ug.doorkeeper.jp/events/43495

電話アンケート

57

TwilioJP-UG 札幌第3回の感想をお聞かせください。

050-31xx-xxxx 「本セッションの感想を1から4までの数字でお答えください」

1.役に立った 2.まあ役に立った 3.あまり役にたたなかった 4.役に立たなかった

《終了後追加》アンケート結果をkintoneですぐに集計表示

58

Technology

IPメッセージングはこうやって実装するのだ！