BLOG

R3 Cloud Journey

「Twilio Studioとkintoneで電話受付システムをつくろう」 に参加して来ました

2017-10-13

T/O(懐かしいな)
だとアレなので、日本最速(?)のTwilio Studioの報告をしてみます。

作るもの

電話がかかってくると、kintoneでポップアップ表示します(!)

大体の仕組み

Twilio側で着信した番号を、Syncを使ってkintoneにリアルタイムに通知します。

kintone側では通知が来たらポップアップを表示します。

あら、シンプル(嘘です。作業手順はそれなりにあります

Twilio側の設定

IDの生成

省略(^^;;

トークン作る

最初にID等を設定

KEY:VALUE
KINTONE_APP_URI:kintoneアプリのドメイン名(例:302ce.cybozu.com)
SYNC_SERVICE_SID:ISから始まるTwilio SyncのService SID
TWILIO_API_KEY:SKから始まるSyncのAPI Key
TWILIO_API_SECRET:API Keyと一緒に生成されたSECRET

Function作成

コード等を設定

出来たURLにアクセス

ここをクリックするとURLがコピーされます。別タブでペーストすると表示できます。

tokenが出来た!

なお、最初が token で始まっていれば正常です。そして、接続URLをメモっておいてください(例:https://loxly-respect-6802.twil.io/sync-token

同期部分を作る

同期用ファンクション作成


Twilio Studioで動きを作成

これは、楽しい!

あ、Twilio Studioは今のところ絶賛開発中みたいで、JPアカウントで試せるのはもうちょっと先のようです。

今、実際に触れるのはハンズオンだけ!

東京は10/24なので、まだ間に合うかな・・・?

kintoneアプリの作成

アプリストアから顧客リストアプリを作成します

フィールドコードの変更をします

**フィールド名:フィールドコード
**会社名:**Company
**担当者名:**Name
**TEL(数字のみ):TEL

JavaScriptとcssの設定

twiliosync-kintone.jsのファイルは こちら からダウンロードしてください。
ここの24行目にtokenの接続URLを貼り付けてから、kintoneにアップロードしてください。

JavaScriptのURLはこちらです

https://media.twiliocdn.com/sdk/js/sync/releases/0.6.0/twilio-sync.js

https://js.cybozu.com/sweetalert2/v6.6.10/sweetalert2.min.js

CSS

https://js.cybozu.com/sweetalert2/v6.6.10/sweetalert2.min.css

出来上がり

これは簡単ですねー!

Twilio側のFunctionのコードなどは、ぜひ、ハンズオンに参加してGETしてください!

R3の
ご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと
使いやすくする
gusukuシリーズ

サイボウズ公認kintoneエバンジェリスト Customineでも色々とやってます