Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/b-1kintone-151211094537/75/B-1-kintone-28-2048.jpg)
![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 の修正のみ行います。](https://image.slidesharecdn.com/b-1kintone-151211094537/75/B-1-kintone-32-2048.jpg)
![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();
}](https://image.slidesharecdn.com/b-1kintone-151211094537/75/B-1-kintone-36-2048.jpg)
Uploaded bySakae Saito
【B-1】kintoneでお手軽コールセンター！
2015/12/4に開催された kintone devCamp 2015 で担当したkintoneとTwilioの連携ハンズオンの資料です。
More Related Content
【B-1】kintoneでお手軽コールセンター！
- 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.
- 6. ベストチーム365 サービスプラン 【わくわくプラン】 ¥89,890 【にこにこプラン】 ¥252,500 初回訪問・試作無料 訪問改修１回 初回訪問・試作無料 訪問改修３回 60日間の利用サポート 初回訪問・試作無料 6 リーズナブルな理由 見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。 仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。 分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。 サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。 ※金額は全て税別です。 ※別途kintoneの利用契約が必要となります。 ※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる ネットミーティングにて対応させていただきます。
- 7. ベストチーム365 導入事例 地方独立行政法人 佐賀県医療センター好生館様 予約台帳 •予約前に空き状況がわかる • カレンダー形式や一覧形式な ど多様な見方ができる • 実績集計の自動化 • 受付担当者の業務負荷を削減 Before After 業務効率化 ペーパーレス 7 地域の連携医療機関からの紹介患者を対象とした 診療予約管理 • 電話で問い合わせないと空き状況が確認できない • 紙の台帳が手元にないと空き状況の問い合わせに 回答できない • 紙の台帳を元に「来院予定者リスト」「月別予約 実績」などのExcel帳票を別途作成しなければな らない（二重・三重の入力） • 受付担当者の業務負担が増加 北海道と佐賀県の間で たった2回のSkypeミーティングで完成！
- 8.
- 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.
- 11. ハンズオン環境の確認 11 ノートPC（Wi-Fi接続可能なもの） Chromeブラウザ テキストエディタ（お馴染みのIDE環境でも構いません） kintone 環境（試用環境 or 開発者ライセンスの取得） 携帯電話（お持ちでない方はご相談ください） PHP5.2.3以上が動作するインターネットから アクセス可能なWebサーバー環境 Webサーバーにファイルをアップロードするための FTPツール等 ※青字部分のご用意が無くてもハンズオンは実施いただけます
- 12.
- 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.
- 17.
- 18.
- 19.
- 20. 1. Twilioアカウント作成 20 APIクレデンシャルを表示 → ACCOUNTSID, AUTH TOKEN をメモ
- 21.
- 22.
- 23.
- 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.
- 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.
- 43.
- 44. どこでもコールセンター ～ インバウンド（CTI機能） 44 着信時にお客様情報を瞬時に表示。通話中の情報編集もできます。 複数電話番号に対応。どの業務宛ての着信なのかがすぐにわかります。 kintoneと一体化しているのでWebブラウザさえあれば利用可能です。
- 45. どこでもコールセンター ～ アウトバウンド 45 複数の発信電話番号に対応。業務毎に電話番号を切り替えられます。 電話番号の入力はマウス選択とキーボード入力の両方に対応。 顧客アプリの電話番号をクリックしてすぐに発信。（Click to Call）
- 46.
- 47. 47 お疲れ様でした × kintone devCamp 2015 ～ITでみんなに“WAKU WAKU”を ～