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してください!

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

自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
ノーコードでらくらく
kintoneカスタマイズ
詳しく見る
kintoneアプリの
バージョン管理・バックアップ
詳しく見る
kintoneアプリの開発・運用を
強力サポート

詳しく見る
更新情報をメールでお届けします!

kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!

R3のご提供サービス
自社のシステム開発・移行などを
ご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・
カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ
詳しく見る
更新情報をメールでお届けします!
kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!