2015/12/4に開催された kintone devCamp 2015 で担当したkintoneとTwilioの連携ハンズオンの資料です。

1. 代表／サイボウズ公認 kintoneエバンジェリスト 斎藤 栄
B-1 ハンズオン連携サービス編
kintoneでお手軽コールセンター！
《着電時に相手の名前を表示させてみよう》
～ ITでみんなに“WAKU WAKU”を ～
kintone devCamp 2015

2. 自己紹介
2
• 1971年 札幌市生まれ
• 小６からパソコンに触れ、大学卒業まで札幌で過ごす
• 1993年 NTTデータ通信株式会社（首都圏）
• 1996年 株式会社データクラフト（札幌）
• 2012年 ラジカルブリッジ設立（札幌）
• 2014年より kintoneエバンジェリスト として活動中
代表／ IT 活用アドバイザー
“クラウドおじさん” 斎藤 栄
～ ITでみんなに“WAKU WAKU”を ～
サイボウズ公認

3. kintone Café
3
kintone Caféは、まだkintoneに触れたことの無い方から、
より高度なカスタマイズを行いたいと考えているプロフェッ
ショナルの方まで幅広い層を対象に、 楽しく学び・教え合う
ことで、kintoneの魅力や活用法をみんなで共有するための
勉強会コミュニティです。

4. 全国に広がるkintone Caféの輪
2013/12/7 札幌 Vol.1（起源）
2014/5/16 札幌 Vol.2
2014/10/25 札幌 Vol.3
2015/3/14 札幌 Vol.4
2015/6/4 札幌 Vol.5
2015/10/17 札幌 Vol.6
2015/11/30 札幌 Vol.7
2014/5/29 福岡 Vol.1
2014/7/11 福岡 Vol.2
2014/10/24 福岡 Vol.3
2015/4/17 福岡 Vol.4
2015/6/24 福岡 Vol.5
2015/8/29 福岡 Vol.6
2015/10/24 福岡 Vol.7
2015/12/19 福岡 Vol.8
2014/5/30 土佐
2015/5/30 高知 Vol.2
2014/7/5 弘前 #1
2015/1/29 京橋 Vol.1
2015/4/6 京橋 Vol.2
2014/8/1 千葉（第1回）
2014/9/3 千葉（第2回）
2014/12/12 千葉（第3回）
2014/8/21 横浜 Vol.1
2014/8/11 釧路
2014/9/12 松江 #1
2014/9/2 Seoul #1
2014/9/24 松山 #1
2015/9/26 愛媛 Vol.1
2016/1 愛媛 Vol.2
2014/9/25 神戸 Vol.1
2015/5/25 神戸 Vol.2
2014/9/28 Okinawa #1
2015/2/11 沖縄 Vol.2
2015/10/10 沖縄 Vol.3
2014/10/22 京都 #1
Korea
3ヶ国 19都道府県
65回開催！※2016年1月までの予定含む
2014/11/21 北九州 Vol.1
2014/12/3
@chiba みずいろ会館※女性限定
2015/1/30 新潟 Vol.1
2015/7/4 新潟 Vol.2
2014/12/15 八王子 Vol.1
2015/2/19 八王子 Vol.2
4
kintone Café
創始者です！
2015/1/24 仙台 Vol.1
2015/3/7 仙台 Vol.2
2015/4/4 仙台 Vol.3
2014/12/11 荻窪 Vol.1
2015/1/26 荻窪 Vol.2
2014/7/23 東京 Vol.1
2015/2/20 東京 Vol.2
2015/7/24 東京 Vol.3
2015/9/4 東京 Vol.4
2015/2/13 出雲 Vol.1
2015/3/4 大阪 Vol.1
2015/5/19 大阪 Vol.2
2015/7/15 大阪 Vol.3
2015/9/18 大阪 Vol.4
2015/11/20 大阪 Vol.5
2015/6/17 名古屋 Vol.1
2015/11/13 名古屋 Vol.2
2015/6/25大分 Vol.1
2015/12/5大分 Vol.2
2015/9/29 鹿児島 Vol.1
2015/11/26 鹿児島 Vol.2
札幌支部・運営事務局
斎藤 栄
USA
2015/10/6
Grand Canyon Vol.1
2015/11/28 熊本 Vol.1

5. ベストチーム365
5
チームワークを強化するオリジナル業務アプリ構築サービス
ベストチーム365
初回訪問・試作無料！
《¥89,890から始めるアプリ開発》
×

6. ベストチーム365 サービスプラン
【わくわくプラン】
¥89,890
【にこにこプラン】
¥252,500
 初回訪問・試作無料
 訪問改修１回
 初回訪問・試作無料
 訪問改修３回
 60日間の利用サポート
初回訪問・試作無料
6
リーズナブルな理由
 見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。
 仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。
 分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。
 サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。
※金額は全て税別です。
※別途kintoneの利用契約が必要となります。
※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる
ネットミーティングにて対応させていただきます。

7. ベストチーム365 導入事例
地方独立行政法人
佐賀県医療センター好生館様
予約台帳 • 予約前に空き状況がわかる
• カレンダー形式や一覧形式な
ど多様な見方ができる
• 実績集計の自動化
• 受付担当者の業務負荷を削減
Before After
業務効率化
ペーパーレス
7
地域の連携医療機関からの紹介患者を対象とした
診療予約管理
• 電話で問い合わせないと空き状況が確認できない
• 紙の台帳が手元にないと空き状況の問い合わせに
回答できない
• 紙の台帳を元に「来院予定者リスト」「月別予約
実績」などのExcel帳票を別途作成しなければな
らない（二重・三重の入力）
• 受付担当者の業務負担が増加 北海道と佐賀県の間で
たった2回のSkypeミーティングで完成！

8. kintoneプラグイン《カレンダーPlus》
8
10/16
リリース

9. kintoneプラグイン《カレンダーPlus》
9
10/16
リリース
試用ライセンス 有償ライセンス
アプリ起動時や予定登録時に警告表示 1～20名まで 税別 ¥39,800
21～50名まで 税別 ¥59,800
51名～無制限 税別 ¥79,800
警告表示なし
サポートあり
アップデート通知
サポートなし
期間制限・機能制限無し
http://radical-bridge.com/product/calendarPlus.html
kintone カレンダーPlus 検 索

10. どこでもコールセンター
10
11/6
リリース
kintoneでコールセンター
・着信・発信、CTI機能、クリックトゥコール機能
・さっと立ち上げて・さっとやめられる（専用機材不要、短期導入◎）
オールクラウドだから場所を選ばない
・在宅でもコールセンターのオペレーターができる（テレワーク）
・地域間格差のない仕事を実現、転勤しても続けられる
販売元：株式会社イー・カムトゥルー 開発元：ラジカルブリッジ
http://www.e-cometrue.com/callcenter/

11. ハンズオン環境の確認
11
 ノートPC（Wi-Fi接続可能なもの）
 Chromeブラウザ
 テキストエディタ（お馴染みのIDE環境でも構いません）
 kintone 環境（試用環境 or 開発者ライセンスの取得）
 携帯電話（お持ちでない方はご相談ください）
 PHP5.2.3以上が動作するインターネットから
アクセス可能なWebサーバー環境
 Webサーバーにファイルをアップロードするための
FTPツール等
※青字部分のご用意が無くてもハンズオンは実施いただけます

12. 本日のゴール
12
コールセンターでよく使われているCTI機能を
kintoneとTwilioで実現します。
・携帯電話から電話をかける
・kintoneで電話着信
・発信者の氏名をポップアップ表示
・PCと携帯電話で通話

13. システム構成
13
Twilio電話番号: 050-1234-5678
Request URL: http://～/twiml.php
鈴木
090-9999-8888
Webサーバー
・PHPヘルパーライブラリ
・CapabilityToken.php
・twiml.php
⑤twiml.php取得
④発信
②CapabilityToken取得
①アプリ起動
・twilio.jsライブラリ
・twilio_client.js
③初期化➡待受状態
⑥着信転送
⑦電話番号検索
➡発信者情報表示
⑧通話
鈴木様
顧客DB

14. 作成手順
14
1. Twilioアカウント作成
2. PHP作成＆設置
3. kintoneアプリ作成＆JSカスタマイズ
4. Twilio設定
5. テスト

15. 作成手順
15
1. Twilioアカウント作成
2. PHP作成＆設置
3. kintoneアプリ作成＆JSカスタマイズ
4. Twilio設定
5. テスト

16. 1. Twilioアカウント作成
16
Twilioアカウント作成
https://jp.twilio.com/try-twilio/kddi-web

17. 1. Twilioアカウント作成
17
アカウント作成の確認
090xxxxxxxx
↓
+8190xxxxxxxx
※赤字部分を入力

18. 1. Twilioアカウント作成
18
人間かどうかを確認
SMSに届いた確認コードを入力

19. 1. Twilioアカウント作成
19
アカウント作成完了

20. 1. Twilioアカウント作成
20
APIクレデンシャルを表示
→ ACCOUNT SID, AUTH TOKEN をメモ

21. 1. Twilioアカウント作成
21
Twilio電話番号の購入

22. 1. Twilioアカウント作成
22
Twilio電話番号の購入完了

23. 1. Twilioアカウント作成
23
Twilio電話番号の確認
050xxxxxxxxに発信してみると
メッセージが流れてきます

24. 作成手順
24
1. Twilioアカウント作成
2. PHP作成＆設置
3. kintoneアプリ作成＆JSカスタマイズ
4. Twilio設定
5. テスト

25. 2. PHP作成＆設置
25
PHPヘルパーライブラリの設置
https://jp.twilio.com/docs/php/install
・リンククリックで twilio-php-master.zip がダウンロードされます。
・zipファイルを解凍すると出てくる Services ディレクトリを
自身のWebサーバーの任意のディレクトリにアップロードします。
※Webサーバーをお持ちでない方は省略

26. 2. PHP作成＆設置
26
CapabilityToken.php の作成
<?php
include 'Services/Twilio.php';
$accountSid = 'AC*****************************';
$authToken = '*******************************';
$client = 'kintone';
// ########## Capability Token #############
$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientIncoming($client);
$token = $capability->generateToken();
echo $token;
?>

27. 2. PHP作成＆設置
27
CapabilityToken.php の設置
・先ほどアップロードした Services ディレクトリと同じ場所に
CapabilityToken.php をアップロードします。
※Webサーバーをお持ちでない方は省略
・ブラウザから CapabilityToken.php のURLにアクセスします。
例）http://(myhost)/(path)/CapabilityToken.php
※Webサーバーをお持ちでない方は以下のURLにアクセスします。
http://radical-bridge.com/twilio/devCamp/CapabilityToken.php?
sid=AC****************&token=****************
（ハンズオン用に特別に用意した仕組みであり、実開発ではNGです）
・画面にトークン文字列が表示されていればOKです。

28. 2. PHP作成＆設置
28
twiml.php の作成
<?php
$client = 'kintone';
if (isset($_REQUEST['From'])) {
$from = $_REQUEST['From'];
$from = str_replace('+81', '0', $from);
}
header('Content-type: text/xml');
?>
<Response>
<Dial callerId="<?php echo $from ?>">
<?php echo "<Client>" . $client . "</Client>"; ?>
</Dial>
</Response>

29. 2. PHP作成＆設置
29
twiml.php の設置
・先ほどアップロードした Services ディレクトリと同じ場所に
twiml.php をアップロードします。
※Webサーバーをお持ちでない方は省略
・ブラウザから twiml.php のURLにアクセスします。
例）http://(myhost)/(path)/twiml.php?From=1234567
※Webサーバーをお持ちでない方は以下のURLにアクセスします。
http://radical-bridge.com/twilio/devCamp/twiml.php?From=1234567
・以下のXML（TwiML）が表示されていればOKです。
<Response>
<Dial callerId="1234567">
<Client>kintone</Client>
</Dial>
</Response>

30. 作成手順
30
1. Twilioアカウント作成
2. PHP作成＆設置
3. kintoneアプリ作成＆JSカスタマイズ
4. Twilio設定
5. テスト

31. 3. kintoneアプリ作成&JSカスタマイズ
31
顧客アプリの作成
 フォーム
 JavaScript（URL指定で追加）
https://js.cybozu.com/jquery/2.1.4/jquery.min.js ← jQuery
https://static.twilio.com/libs/twiliojs/1.2/twilio.min.js ← twilio.jsライブラリ
パーツ フィールド名 フィールドコード
文字列１行 氏名 氏名
文字列１行 電話番号 電話番号
文字列１行 住所 住所

32. 3. kintoneアプリ作成&JSカスタマイズ
32
twilio_client.js の作成＆解説 ①
(function () {
"use strict";
var appId = kintone.app.getId();
var capabilityTokenUrl = 'http://(myhost)/(path)/CapabilityToken.php';
////// kintone
//// レコード一覧画面表示時の処理
kintone.events.on(['app.record.index.show'], function (event) {
// twilio Client 設置
var elm = kintone.app.getHeaderMenuSpaceElement();
var btn = document.createElement('input');
btn.type = "button";
btn.id = "phone_button";
btn.value = "準備中";
btn.disabled = true;
btn.onclick = phoneAction;
btn.style.width = "150px";
btn.style.fontSize = "14px";
elm.appendChild(btn);
// twilio Client 初期化
twilioSetup();
return event;
});
Webサーバーをお持ちでない方は、
「CapabilityToken.php の設置」で
テストしたURLを入力してください。
時間に余裕があれば、twilio_client.js を
イチから作成していただきます。
時間が厳しい場合は、最初にダウンロード
した twilio_client.js の修正のみ行います。

33. 3. kintoneアプリ作成&JSカスタマイズ
33
twilio_client.js の作成＆解説 ②
////// twilio Client
// twilio Client 初期化
function twilioSetup() {
var url = capabilityTokenUrl;
kintone.proxy(url, 'GET', {}, {}, function(body, status, headers) {
var token = body;
Twilio.Device.setup(token);
}, function(body) {
console.log(body);
alert('Capability Token 取得エラー');
return;
});
}
// readyイベント発生（オンライン）時の処理
Twilio.Device.ready(function (device) {
$("#phone_button").prop("disabled", true);
$("#phone_button").val("待受中");
});

34. 3. kintoneアプリ作成&JSカスタマイズ
34
twilio_client.js の作成＆解説 ③
// incomingイベント発生（着信）時の処理
Twilio.Device.incoming(function (conn) {
$("#phone_button").prop("disabled", false);
$("#phone_button").val("着信中");
displayCallerInfo(conn.parameters);
});
// cancelイベント発生（着信キャンセル）時の処理
Twilio.Device.cancel(function (conn) {
$("#phone_button").prop("disabled", true);
$("#phone_button").val("待受中");
});
// connectイベント発生（接続開始）時の処理
Twilio.Device.connect(function (conn) {
$("#phone_button").prop("disabled", false);
$("#phone_button").val("通話中（切断）");
});

35. 3. kintoneアプリ作成&JSカスタマイズ
35
twilio_client.js の作成＆解説 ④
// disconnectイベント発生（接続終了）時の処理
Twilio.Device.disconnect(function (conn) {
$("#phone_button").prop("disabled", true);
$("#phone_button").val("待受中");
});
// errorイベント発生（エラー発生）時の処理
Twilio.Device.error(function (error) {
console.log(error);
});
// ボタンクリック時の処理
function phoneAction() {
var label = $("#phone_button").val();
switch (label) {
case "着信中":
var conn = Twilio.Device.activeConnection();
conn.accept();
break;
case "通話中（切断）":
hangup();
break;
}
}

36. 3. kintoneアプリ作成&JSカスタマイズ
36
twilio_client.js の作成＆解説 ⑤
// 発信者情報の表示
function displayCallerInfo(param) {
var from = param.From;
var query = '電話番号 = "' + from + '"';
kintone.api('/k/v1/records', 'GET', {app: appId, query: query}, function(resp) {
if (resp.records.length > 0) {
var url = '/k/' + appId + '/show#record=' + resp.records[0]['$id']['value'];
window.open(url, '', 'width=1000, height=600,
menubar=no, toolbar=no, scrollbars=yes');
}
}, function(resp) {
console.log(resp);
alert('電話番号検索エラー');
return false;
});
}
// 切断処理
function hangup() {
Twilio.Device.disconnectAll();
}

37. 作成手順
37
1. Twilioアカウント作成
2. PHP作成＆設置
3. kintoneアプリ作成＆JSカスタマイズ
4. Twilio設定
5. テスト

38. 4. Twilio設定
38
Twilio電話番号をクリック

39. 4. Twilio設定
39
Request URL に twiml.php のURLを設定

40. 作成手順
40
1. Twilioアカウント作成
2. PHP作成＆設置
3. kintoneアプリ作成＆JSカスタマイズ
4. Twilio設定
5. テスト

41. 5. テスト
41
1. 顧客アプリに自分の携帯電話番号のデータを登録
（ハイフン無しで入力 例：09012345678）
2. 顧客アプリの一覧上部のボタンが「待受中」になっている
ことを確認
3. 携帯電話からTwilio電話番号に電話してみる
※アップグレードを促すメッセージの後、任意のダイアルキーを押してください。
4. 自分の顧客データがポップアップ表示されるのを確認
※ポップアップブロックされた場合、許可してください。
5. 「着信中」ボタンクリックで通話ができることを確認

42. 42
更に
ブラッシュアップ
すると

43. どこでもコールセンター
43
11/6
リリース
kintoneでコールセンター
・着信・発信、CTI機能、クリックトゥコール機能
・さっと立ち上げて・さっとやめられる（専用機材不要、短期導入◎）
オールクラウドだから場所を選ばない
・在宅でもコールセンターのオペレーターができる（テレワーク）
・地域間格差のない仕事を実現、転勤しても続けられる
販売元：株式会社イー・カムトゥルー 開発元：ラジカルブリッジ
http://www.e-cometrue.com/callcenter/

44. どこでもコールセンター ～ インバウンド（CTI機能）
44
 着信時にお客様情報を瞬時に表示。通話中の情報編集もできます。
 複数電話番号に対応。どの業務宛ての着信なのかがすぐにわかります。
 kintoneと一体化しているのでWebブラウザさえあれば利用可能です。

45. どこでもコールセンター ～ アウトバウンド
45
 複数の発信電話番号に対応。業務毎に電話番号を切り替えられます。
 電話番号の入力はマウス選択とキーボード入力の両方に対応。
 顧客アプリの電話番号をクリックしてすぐに発信。（Click to Call）

46. 46
デモンストレーション

47. 47
お疲れ様でした
×
kintone devCamp 2015
～ ITでみんなに“WAKU WAKU”を ～