【最新版誘導用】クラウドコミュニケーションAPI Twilio＆sakura.io体験ハンズオン
•
1 like•1,173 views
※本資料は適宜更新されます。最新版はコメント欄をご確認ください。 各地で開催されている、さくらインターネットが提供するIoTプラットフォーム「sakura.io」と株式会社KDDIウェブコミュニケーションズが運営するクラウド電話APIサービス「Twilio」のコラボハンズオンでの資料となります。 本資料ではIoTデバイスのプロトタイピングを想定した「マイコンおよびプログラムの構築」「sakura.ioの設定」「Twilio Functionsを介したセンサーデータと自動電話応答サービスの連携」の手順をスライドでご覧いただけます。 サービス詳細は以下をご確認ください。 sakura.io https://sakura.io/ Twilio https://twilio.kddi-web.com/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Similar to 【最新版誘導用】クラウドコミュニケーションAPI Twilio＆sakura.io体験ハンズオン
Similar to 【最新版誘導用】クラウドコミュニケーションAPI Twilio＆sakura.io体験ハンズオン (20)
More from さくらインターネット株式会社
More from さくらインターネット株式会社 (20)
Recently uploaded
Recently uploaded (9)
【最新版誘導用】クラウドコミュニケーションAPI Twilio＆sakura.io体験ハンズオン
- 1. クラウド電話API Twilio & sakura.io体験ハンズオン 株式会社KDDIウェブコミュニケーションズ 共催 2017/10/31 (C) Copyright 1996-2017 SAKURA Internet Inc さくらインターネット株式会社 IoT Platform Team 西田 有騎
- 2. 2 はじめに
- 3. 本ワークショップの目的 3 1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよび Web/アプリ開発系のエンジニアがご自身のスキルセットを 大きく超えることなく、Internet of Things(IoT)に挑戦できることを 体験いただくものです。 2. そのため各章内で技術的な詳細は極力省略しております。 3. 今回は1人1つワークショップキットをご用意しておりますが、 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、 ご不明点を積極的にフォローしあって進めていただければと思います。
- 5. Agenda 5 1. sakura.ioの設定 ₋ プロジェクトの作成 ₋ さくらの通信モジュールの登録 ₋ 連携サービスの設定 2. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 温湿度センサおよびさくらの通信モジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 3. Webへのデータ連携（Twilio） ₋ 電話番号の購入、環境変数の設定 ₋ Functionsによるsakura.io Outgoing Webhook受信用プログラム（outboundCall）の作成 ₋ Functionsによるキー応答用プログラム（IVR）の作成 ₋ Functionsによるsakura.io Incoming Webhook送信用プログラム（turn）の作成
- 8. sakura.io コントロールパネル ログイン 8 sakura.io コントロールパネル（ https://secure.sakura.ad.jp/iot/ ）にログインします。 Google等でsakura.ioサイト（ https://sakura.io/ ）にアクセスし 、右上の「ログイン」をクリックします。
- 10. 【参考】会員IDの作成 10 会員IDをお持ちでない場合はご契約のサービスがない場合でも、さくらインターネット会員登録 （ https://secure.sakura.ad.jp/signup3/member-register/input.html ）から作成いただくことができます。 会員登録が正常に完了すると、メールアドレスで指定したアドレスに support@sakura.ad.jp より以下のような メールが送信されます。会員IDおよびパスワードは重要な情報となりますので、漏れないよう、大事に保管ください。 Title：会員登録完了のお知らせ [XXX00000] ─────────────────────────────────── このメッセージはさくらインターネット会員登録フォームより 自動送信されています。このメールに心当たりのない場合は support@sakura.ad.jpまでご連絡ください。 ─────────────────────────────────── さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) この度は、さくらインターネットに会員登録いただきまして誠に ありがとうございます。 以下の通り会員登録を受付ましたので、ご連絡させていただきます。 ============================================================= ◎ 会員登録情報 会員ID ： XXX00000 ご契約者名 ： さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) 電子メール ： XXX@XXX.XX.XX ============================================================= ～～～以下省略～～～
- 11. プロジェクトC プロジェクトB sakura.ioコントロールパネルにおける考え方 11 sakura.ioでは【プロジェクト】という単位で大枠を構成し、プロジェクト内に複数の【通信モジュール】、 【連携サービス】を紐付けていきます。 【データストア】や簡易位置情報、ファイル配信といった 【オプションサービス】はプロジェクトに対して一つもしくは1セット設定することができます。 プロジェクトA 通信モジュール1 uAAAAAAAAAA 通信モジュール2 uBBBBBBBBBB 通信モジュール3 uCCCCCCCCCC データストア Light/Standard/… 簡易位置情報 ON/OFF 連携サービス1 WebSocket 連携サービス2 Outgoing Webhook ファイル配信 File1/File2/… 連携サービス3 AWS IoT プロジェクトに対して 複数紐付け可能 プロジェクトに対して 単一（1セット）設定可能 プロジェクトに対して 複数紐付け可能
- 12. 約款への同意 12 初めてコントロールパネルにログインした場合、各種約款への同意を求められます。 内容をご確認いただいたうえで、［✓同意する］をクリックするとコントロールパネルにアクセスできます。
- 17. 通信モジュールの登録 17 モジュールの追加に成功すると［モジュールを追加しました］というダイアログが表示されます。 ［ホームへ戻る］ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されている通信モジュールを追加しようとした場合は 内容とともに［モジュールの追加に失敗しました］というダイアログが表示されます。 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください
- 19. 連携サービスの設定（Incoming Webhook） 19 追加サービスの選択画面に遷移します。Twilioから制御信号を受け取る Incoming Webhook を 作成するため、 ［ Incoming Webhook ］をクリックします。
- 20. 連携サービスの設定（Incoming Webhook） 20 任意の名前を入力し、 【 作成 】 をクリックします。 Secretはセキュリティをより強固にするために使用しますが、今回は設定いたしません。
- 28. 今回のハンズオンでご提供するもの 28 ジャンパーコードさくらの通信モジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3 USB2.0 ケーブル（A-B） 12W級 9V-1.3A DCアダプタ ブレッドボード 人感センサ （SB412A） 照度センサ （GL5537-2） 温湿度センサ （HDC1000 or SHT31） 各種抵抗 ※必要に応じてご提供 タクトスイッチ ※必要に応じてご提供 抵抗入りLED ※必要に応じてご提供 本日は使用しません
- 29. Arduino IDEのセットアップ 29 https://www.arduino.cc/en/Main/Softwareから開発環境（Arduino IDE）を入手します。 2017/10/19時点での最新版は 【 1.8.5 】 となります。 ご利用環境がWindowsの場合は 【 Windows Installer 】 、Macの場合は 【 Mac OS X 10.7 Lion or newer 】 を選択します。
- 30. Arduino IDEのセットアップ 30 該当の金額を選択するか（寄付する場合）、もしくは 【 JUST DOWNLOAD 】 にてダウンロードします。
- 32. Arduino IDEのセットアップ 32 Arduino IDEが起動したら、Arduino本体をPCに接続します。 上部メニューバーから以下2つを設定します。 ボード： ［ ツール ］ → ［ ボード:”XXX” ］ から 【 Arduino/Genuino Uno 】 を選択します。 シリアルポート： ［ ツール ］ → ［ シリアルポート ］ から 【 COMx（Arduino/Genuino Uno） 】 となるものを選択します。 Mac環境の場合はCOMポートではなく、 【 /dev/～～～（Arduino/Genuino Uno） 】 となるものを選択します。 ボードの選択 シリアルポートの選択
- 33. マイコン（Arduino）の準備 33 ［ ファイル ］ → ［ スケッチ例 ］ → ［ 01.Basics ］ → ［ Blink ］ を選択し、Blinkスケッチを表示します。 【 → 】 をクリックしてスケッチをマイコンに書き込み、該当箇所のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
- 35. ライブラリの取得（温湿度センサ-HDC1000利用の場合） 35 ［ スケッチ ］ → ［ ライブラリをインクルード ］ → ［ ライブラリを管理... ］ をクリックし、 右上検索窓から 【 hdc1000 】 を検索すると、 ［ HDC1000 by Yuichi Tateno ］ がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］ が表示されます。
- 36. ライブラリの取得（温湿度センサ-SHT31利用の場合） 36 ［ スケッチ ］ → ［ ライブラリをインクルード ］ → ［ ライブラリを管理... ］ をクリックし、 右上検索窓から【SHT31】を検索すると、 ［ Adafruit SHT31 Library by Adafruit ］ がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］ が表示されます。
- 37. ライブラリの取得（SakuraIO） 37 ［ スケッチ ］ → ［ ライブラリをインクルード ］ → ［ ライブラリを管理... ］ をクリックし、 右上検索窓から 【 sakuraio 】 を検索すると、 ［ SakuraIO by SAKURA Internet Inc. ］ がヒットします。 最新のVer.を選択のうえインストールをクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］ が表示されます。
- 38. FirmwareUpdate.ino 38 ［ ファイル ］ → ［ スケッチ例 ］ → ［ SakuraIO ］ → ［ FirmwareUpdate ］ を選択し、FirmwareUpdateスケッチを表示します。 【 → 】をクリックし、 ［ ツール ］ → ［ シリアルモニタ ］ よりモジュールのファームウェアアップデート状況を確認します。 現在のVersion情報と比較し、新しいファームウェアが提供されている場合にはアップデートを実行します。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合
- 41. 温湿度センサの動作確認（温湿度センサ-HDC1000利用の場合） 41 ［ ファイル ］ → ［ スケッチ例 ］ → ［ HDC1000 ］ → ［ hdc1000 ］ を選択し、hdc1000スケッチを表示します。 【 → 】 をクリックし、 ［ ツール ］ → ［ シリアルモニタ ］ よりTemperature＆Humidity情報が取得できることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
- 42. 温湿度センサの動作確認（温湿度センサ-HDC1000利用の場合） 42 ［ ファイル ］ → ［ 新規ファイル ］ で新しいスケッチを表示し、下記URLの内容をコピー＆ペーストします。 【 → 】 をクリックし、 ［ ツール ］ → ［ シリアルモニタ ］ よりTemperature情報が取得できることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino 】
- 43. 温湿度センサの動作確認（温湿度センサ-SHT31利用の場合） 43 ［ ファイル ］ → ［ 新規ファイル ］ で新しいスケッチを表示し、下記URLの内容をコピー＆ペーストします。 【 → 】 をクリックし、 ［ ツール ］ → ［ シリアルモニタ ］ よりTemperature情報が取得できることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/SHT31-with-LEDincome.ino 】
- 45. 【参考】デバイスから送信されたデータの確認 45 サービス連携の編集画面の下部にデバイスから送信されたデータがリアルタイムで表示されます。 簡易表示モードでは通信モジュールから受け取ったデータを以下のように確認できます。 → 温度 → 湿度 → カウント値 モジュール： データを送信した 通信モジュールのID チャンネル データが格納された チャンネル番号 時刻： データがモジュールのキューに 格納された時刻のタイムスタンプ 値： 送信された値 型： データの型式
- 46. 【参考】デバイスから送信されたデータの確認 46 ［ 詳細表示モードに切り替え ］ をクリックすると詳細表示モードに遷移します。 モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 複数チャンネルある場合、 それぞれの最終データを表 示 クリックでログ出力を 開始/停止 タイプ： プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels ：通信モジュールからのデータ ・connection ：接続の開始/終了 ・location ：簡易位置情報 ・keepalive ：WebSocketセッション確認 ペイロードには受け取った データのpayload部が表示 時刻： 詳細表示モードではプラット フォームで該当のメッセージ を受け取ったタイムスタンプ
- 49. 【参考】アカウントの作成 49 Twilioのログイン用アカウントがない場合は、サービスサイト（ https://twilio.kddi-web.com/ ）より 【 サインアップ 】 をクリックすることでアカウント作成の画面に進むことができます。
- 50. 【参考】アカウントの作成 50 初めに利用規約およびプライバシーポリシーへの同意を求められます。 問題なければいずれのチェックボックスにもチェックを入れたうえで、 【 同意してサインアップ 】 をクリックします。
- 51. 【参考】アカウントの作成 51 必要な情報を入力する画面に遷移します。必要な事項を入力し、 【 始めましょう 】 をクリックします。 その後指定した番号にSMSを受け、認証の4桁の番号を入力することでTwilioにアクセス、および 利用することができるようになります。
- 53. 電話番号の購入 53 まず、初めにTwilioから架電するために必要となる電話番号を購入します。 ログイン後のダッシュボード画面から、左側ペインの 【 All Products & Services 】 アイコンをクリックします。
- 54. 電話番号の購入 54 各種メニューが左部に表示されますので、 【 電話番号 】 → 【 Buy a Number 】 と進みます。
- 55. 電話番号の購入 55 ［ 番号を購入 ］ 画面が表示されますので、国のプルダウンより 【 Japan (+81) 】 を選択し、 【 検索 】 をクリックします。
- 56. 電話番号の購入 56 日本で使用可能な番号の一覧が表示されます。TYPEが 【 ローカル 】 となっている月額が 【 ¥108 】のものの中から 任意の番号を選び、右側にある 【 購入 】 をクリックします。
- 57. 電話番号の購入 57 確認のモーダルが表示されますので、確認いただいたうえで 【 この番号を購入する。 】 をクリックします。
- 58. 電話番号の購入 58 購入に成功した旨の表示がされます。該当の番号はハンズオンで後ほど設定しますので、 控えたうえで 【 閉じる 】 をクリックします。
- 59. 電話番号の購入 59 購入された番号は ［ Buy a Number ］ 画面で改めて確認することができます。 電話番号の表記方法について Twilioは、世界100カ国と接続されていて、それぞれの国に直接電話をかけることができます。 そのため、発信・着信の電話番号は、全世界で利用可能な「E.164形式」と呼ばれる表記方法を使います。 E.164形式とは、先頭が+から始まる国番号と電話番号の組み合わせです。 例えば、日本は国番号が+81となっており、その後の電話番号を続けて記述します。 ※電話番号の先頭の0は削除します。 「09012345678」は、E.164形式だと「+819012345678」となります。
- 60. Functionsの設定 60 次に、取得した番号を用いてFunctionsの設定を行います。左部のメニューボタンから、 【 Runtime 】 → 【 Functions Beta 】 を選択します。
- 62. Functionsの設定 62 Configuration画面に遷移します。 ［ Environmental Variables ］ 欄で以下の4つの項目を設定します。 FROM_NUMBER ： 先程購入した電話番号（E.164形式） MODULE_ID ： sakura.ioのコントロールパネルで確認したモジュールの一意のID SAKURA_URL ： sakura.ioのコントロールパネルで生成したIncoming WebhookのURL TO_NUMBER ： ご自身で通知先として使用したい電話番号（E.164形式）
- 63. Functionsの設定 63 ［ Dependencies ］ 欄は今回は設定の変更は不要です。 そのまま 【 Save 】 をクリックすると設定内容が保存されます。
- 64. Functionsの設定 64 環境変数の設定が完了したら次にFunctionsでsakura.ioからのデータを元に次の処理を実行するプログラムを 設定します。Functions内の 【 Manage 】 をクリックし、新しいプログラムを作成するために 【 ＋ 】 をクリックします。
- 65. Functionsの設定 65 基本的な内容を含むテンプレートの一覧が提示されます。 今回は用意されているプログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
- 66. Functionsの設定 66 Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには 【 /outbound-call 】 を入力し、 CODEには以下の内容をコピー＆ペーストしたうえで 【 Save 】 をクリックします。 【 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js 】
- 67. Functionsの設定 67 次に、FunctionsでoutboundCallプログラムから呼び出され、電話への架電を実行するプログラムを 設定します。Functions内の 【 Manage 】 をクリックし、新しいプログラムを作成するために 【 ＋ 】 をクリックします。
- 68. Functionsの設定 68 基本的な内容を含むテンプレートの一覧が提示されます。 今回は用意されているプログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
- 69. Functionsの設定 69 Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには 【 /ivr 】 を入力し、 ACCESS CONTROLはチェックを入れます。CODEには以下の内容をコピー＆ペーストしたうえで 【 Save 】 をクリックします。 【 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js 】
- 70. Functionsの設定 70 最後に、FunctionsでIVRプログラムから呼び出され、電話からのキー操作を元にデバイスへ制御信号を返す プログラムを設定します。Functions内の 【 Manage 】 をクリックし、新しいプログラムを作成するために 【 ＋ 】 をクリックします。
- 71. Functionsの設定 71 基本的な内容を含むテンプレートの一覧が提示されます。 今回は用意されているプログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
- 72. Functionsの設定 72 Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには 【 /turn 】 を入力し、 ACCESS CONTROLはチェックを入れます。CODEには以下の内容をコピー＆ペーストしたうえで 【 Save 】 をクリックします。 【 https://github.com/sakuraio/handson-sample/blob/master/twilio/turn.js 】
- 73. Functionsの設定 73 これで今回の動作を実現するTwilio Function側の3つのプログラムが設定されました。 最後にsakura.ioからデータの投げ込み先となるPATHをOutgoing Webhookで指定して作成します。 【 Manage 】 から 【 outboundCall 】 をクリックします。
- 76. 連携サービスの設定（Outgoing Webhook） 76 追加サービスの選択画面に遷移します。 次はOutgoing Webhookを作成しますので、 【 Outgoing Webhook 】 をクリックします。
- 77. 連携サービスの設定（Outgoing Webhook） 77 Outgoing Webhookでは任意の名前とPayload URLを指定します。 今回指定するPayload URLはTwilioのコントロールパネルで生成した 【 outboundCall 】 のPATHが示すURLとなります。 Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。
- 78. 動作確認 78 マイコン（Arduino Uno） 温湿度センサ （SHT31/HDC1000） さくらの通信 モジュール outboundCall IVR Turn Functions outbound webhook inbound webhook 以上で設定は完了です。温度センサを指で押さえ、30度を超えたタイミングでモジュールからデータが送信され、 それに基づきリアルタイムでTwilio FunctionsでoutboundCallがキックされ、IVRおよびTurnで定義されたデータが デバイスに戻されてLEDが制御されるまでを確認しましょう。 30度を超えると温度と カウント値データが送信 Outgoing Webhookにより リアルタイムで連携 MODULE_IDで指定された モジュールがデータを受診 キー操作で指定した内容 に基づきJSONデータ送信
- 79. 79 そこに、さくら
- 80. 80 最後に
- 84. 最後に ～sakura.io～ 84 モジュールの登録が解除され、表示から削除されました。 次は連携サービスとともにプロジェクトを削除します。 プロジェクト右上の［削除］マークをクリックします。
- 86. 最後に ～Twilio～ 86 ［ All Products & Services ］ → ［ Runtime ］ → ［ Functions ］ → ［ Manage ］から作成したFunctionsのプログラムを開き、 最下部の 【 Delete this Function 】 をクリックすると該当プログラムが削除されます。 これを作成したプログラムすべてで実行します。
- 87. 最後に ～Twilio～ 87 ［ All Products & Services ］ → ［ 電話番号 ］ → ［ Active Numbers ］ から購入した電話番号を開き、 最下部の 【 Release this Number 】 をクリックすると該当番号が返却されます。 これを購入した番号すべてで実行します。
- 89. 最後に 89 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間（部員）を募集しています。 （テーマはIoTに限らず、クラウドやVPS、スタートアップ系ネタでもOK！） ご興味があれば、Come and join us & Feel free to contact me! 連絡先 ： sakura-club@sakura.ad.jp さくらクラブ ： http://www.slideshare.net/MasayaHayashi/lt20151224