Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

クラウドコミュニケーションAPI Twilio&sakura.io体験ハンズオン 20180312

193 views

Published on

※本資料は2018/03/13更新のものとなります。最新版へのリンクは以下スライドのコメントをご確認ください。
https://www.slideshare.net/sakura_pr/sakuraio-handson-with-twilio/

各地で開催されている、さくらインターネットが提供するIoTプラットフォーム「sakura.io」と株式会社KDDIウェブコミュニケーションズが運営するクラウド電話APIサービス「Twilio」のコラボハンズオンでの資料となります。
本資料ではIoTデバイスのプロトタイピングを想定した「マイコンおよびプログラムの構築」「sakura.ioの設定」「Twilio Functionsを介したセンサーデータと自動電話応答サービスの連携」の手順をスライドでご覧いただけます。

サービス詳細は以下をご確認ください。
sakura.io https://sakura.io/
Twilio https://twilio.kddi-web.com/

Published in: Technology
  • Be the first to comment

クラウドコミュニケーションAPI Twilio&sakura.io体験ハンズオン 20180312

  1. 1. クラウド電話API Twilio & sakura.io体験ハンズオン 株式会社KDDIウェブコミュニケーションズ 共催 2018/3/13 (C) Copyright 1996-2017 SAKURA Internet Inc さくらインターネット株式会社 IoT Platform Team 西田 有騎
  2. 2. 2 はじめに
  3. 3. 本ワークショップの目的 3 1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよび Web/アプリ開発系のエンジニアがご自身のスキルセットを 大きく超えることなく、Internet of Things(IoT)に挑戦できることを 体験いただくものです。 2. そのため各章内で技術的な詳細は極力省略しております。 3. 今回は1人1つワークショップキットをご用意しておりますが、 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、 ご不明点を積極的にフォローしあって進めていただければと思います。
  4. 4. 本内容で使用するツール、機材、参考情報まとめ sakura.ioコントロールパネル https://secure.sakura.ad.jp/iot/ Arduino https://www.arduino.cc/en/Main/Software Arduinoサンプル用スケッチ ・HDC1000使用の場合 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino ・SHT31使用の場合 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino さくらのクラウドコントロールパネル https://secure.sakura.ad.jp/cloud/ Twilio Functionsプログラム ・sakura.io Outgoing Webhookから受信 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js ・自動音声応答およびキー入力分岐 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js ・sakura.io Incoming Webhookへ送信 https://github.com/sakuraio/handson-sample/blob/master/twilio/turn.js 4
  5. 5. 本内容で使用するツール、機材、参考情報まとめ [参考]sakura.ioサービスサイト https://sakura.io/ [参考]各サービス登録ページ ・さくらインターネット 会員ID発行 https://secure.sakura.ad.jp/signup3/member-register/input.html ・Twilio サインアップ https://twilio.kddi-web.com/ [参考]sakura.io開発者向けページ https://sakura.io/developer/ [参考]sakura.ioモジュール&オプションのご購入 https://sakura.io/product/ [参考]その他物品のご購入(秋月電子通商) ・温湿度センサ(SHT31) http://akizukidenshi.com/catalog/g/gK-12125/ ・抵抗内蔵LED http://akizukidenshi.com/catalog/g/gI-06245/ ・ジャンパコード http://akizukidenshi.com/catalog/g/gC-05159/ ・Arduino Uno Rev3 http://akizukidenshi.com/catalog/g/gM-07385/ ・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/ ・ブレッドボード http://akizukidenshi.com/catalog/g/gP-05294/ 5
  6. 6. 今回のハンズオンの流れ 6 マイコンおよび プログラムの構築 Webサービス連携 (Twilio) マイコン(Arduino Uno) sakura.ioの設定 ③② /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook ①,④ 温湿度センサ (SHT31/HDC1000) さくらの通信 モジュール 各種LED Outgoing Webhook Incoming Webhook WebSocket ※動作確認用 データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
  7. 7. Agenda 7 1. sakura.ioの設定 前編 ₋ プロジェクトの作成 ₋ モジュールの登録 ₋ 連携サービスの設定(Incoming Webhook / WebSocket) 2. マイコンおよびプログラムの構築 ₋ マイコン(Arduino)による開発環境の準備 ₋ 温湿度センサおよびモジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 3. Webへのデータ連携(Twilio) ₋ 電話番号の購入、環境変数の設定 ₋ Functionsによるsakura.io Outgoing Webhook受信用プログラム(outboundcall)の作成 ₋ Functionsによるキー応答用プログラム(ivr)の作成 ₋ Functionsによるsakura.io Incoming Webhook送信用プログラム(turn)の作成 4. sakura.ioの設定 後編 ₋ 連携サービスの設定(Outgoing Webhook)
  8. 8. 8 sakura.ioの設定 前編
  9. 9. 今回のハンズオンの流れ 9 マイコンおよび プログラムの構築 Webサービス連携 (Twilio) マイコン(Arduino Uno) sakura.ioの設定 ③② /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook ①,④ 温湿度センサ (SHT31/HDC1000) さくらの通信 モジュール 各種LED Outgoing Webhook Incoming Webhook WebSocket ※動作確認用 データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
  10. 10. sakura.io コントロールパネル ログイン 10 sakura.io コントロールパネル( https://secure.sakura.ad.jp/iot/ )にログインします。 Google等でsakura.ioサイト( https://sakura.io/ )にアクセスし 、右上の「ログイン」をクリックします。
  11. 11. コントロールパネルへのログイン 11 既にログイン済みのセッションがない場合、以下画面にて会員認証を求められます。 会員ID、パスワードを利用してログインします。
  12. 12. 【参考】会員IDの作成 12 会員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 ============================================================= ~~~以下省略~~~
  13. 13. プロジェクトC プロジェクトB sakura.ioコントロールパネルにおける考え方 13 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セット)設定可能 プロジェクトに対して 複数紐付け可能
  14. 14. 約款への同意 14 初めてコントロールパネルにログインした場合、各種約款への同意を求められます。 内容をご確認いただいたうえで、 【 ✓同意する 】 をクリックするとコントロールパネルにアクセスできます。
  15. 15. プロジェクトの作成 15 初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。 まずプロジェクトを作成するため、 【 +新規プロジェクト 】 をクリックします。
  16. 16. プロジェクトの作成 16 新規プロジェクトの作成画面に遷移します。 [ 名称 ] 欄に任意の名前を入力し、 【 追加 】をクリックします。
  17. 17. モジュールの登録 17 プロジェクトが作成されました。次にモジュールの登録を行います。 【 モジュール登録 】 のボタンをクリックします。
  18. 18. モジュールの登録 18 モジュールの追加画面に遷移します。指定したプロジェクトが選択されていることを確認のうえ、 [ 登録用ID ]、 [ 登録用パスワード ] 、および [ 名称 ] を入力して、 【 追加 】 ボタンをクリックします。
  19. 19. モジュールの登録 19 モジュールの追加に成功すると [ モジュールを追加しました ] というダイアログが表示されます。 【 ホームへ戻る 】 ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されているモジュールを追加しようとした場合は 内容とともに [ モジュールの追加に失敗しました ] というダイアログが表示されます。 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください
  20. 20. 連携サービスの設定 20 モジュールが登録されました。表示されているモジュールIDは一意のものであり、 デバイスへのデータ送信の際に使用しますので、控えておきます。 最後に外部への連携サービスを設定します。 【 +サービス追加 】 のボタンをクリックします。
  21. 21. 連携サービスの設定(Incoming Webhook) 21 追加サービスの選択画面に遷移します。Twilioから制御信号を受け取る Incoming Webhook を 作成するため、 【 Incoming Webhook 】 をクリックします。
  22. 22. 連携サービスの設定(Incoming Webhook) 22 [ 名前 ] 欄に任意の名前を入力し、 【 作成 】 をクリックします。 [ Secret ] 欄はセキュリティをより強固にする場合に使用しますが、今回は設定いたしません。
  23. 23. 連携サービスの設定(Incoming Webhook) 23 コントロールパネルトップ画面から作成したサービスにアクセスすると生成されたURLを確認します。 このURLは後で使用いたしますので、控えておきます。
  24. 24. 連携サービスの設定(WebSocket) 24 デバイスからデータが送付されているか確認するため、WebSocketも作成します。 【 WebSocket 】 をクリックします。
  25. 25. 連携サービスの設定(WebSocket) 25 WebSocketの作成には特に設定事項はありません。 [ 名前 ] 欄に任意の名前を入力し、 【 作成 】 ボタンをクリックします。
  26. 26. 連携サービスの設定 26 連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。 該当のプロジェクトにて作成された名称の連携サービスをクリックします。
  27. 27. 連携サービスの設定(WebSocket) 27 WebSocketを設定しました、これでコントロールパネルでの準備は完了です。
  28. 28. 28 マイコンおよび プログラムの構築
  29. 29. 今回のハンズオンの流れ 29 マイコンおよび プログラムの構築 Webサービス連携 (Twilio) マイコン(Arduino Uno) sakura.ioの設定 ③② /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook ①,④ 温湿度センサ (SHT31/HDC1000) さくらの通信 モジュール 各種LED Outgoing Webhook Incoming Webhook WebSocket ※動作確認用 データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
  30. 30. 今回のハンズオンでご提供するもの 30 ジャンパーコードsakura.ioモジュール(アンテナ付) +Arduino用シールド&Arduino Uno Rev3 USB2.0 ケーブル(A-B) 12W級 9V-1.3A DCアダプタ ブレッドボード 人感センサ (SB412A) 照度センサ (GL5537-2) 温湿度センサ (HDC1000 or SHT31) 各種抵抗 ※必要に応じてご提供 タクトスイッチ ※必要に応じてご提供 抵抗入りLED ※必要に応じてご提供 本日は使用しません
  31. 31. Arduino IDEのセットアップ 31 https://www.arduino.cc/en/Main/Software から開発環境(Arduino IDE)を入手します。 2018/01/23時点での最新版は 【 1.8.5 】 となります。 ご利用環境がWindowsの場合は 【 Windows Installer 】 、Macの場合は 【 Mac OS X 10.7 Lion or newer 】 を選択します。
  32. 32. Arduino IDEのセットアップ 32 該当の金額を選択するか(寄付する場合)、もしくは 【 JUST DOWNLOAD 】 にてダウンロードします。
  33. 33. Arduino IDEのセットアップ 33 インストールはデフォルト推奨、ドライバーについても全てインストールします。 #本スライド記載の画像はWindowsの場合になります。
  34. 34. Arduino IDEのセットアップ 34 Arduino IDEが起動したら、Arduino本体をPCに接続します。 上部メニューバーから以下2つを設定します。 ボード: [ ツール ] → [ ボード:”XXX” ] から 【 Arduino/Genuino Uno 】 を選択します。 シリアルポート: [ ツール ] → [ シリアルポート ] から 【 COMx(Arduino/Genuino Uno) 】 となるものを選択します。 Mac環境の場合はCOMポートではなく、 【 /dev/~~~(Arduino/Genuino Uno) 】 となるものを選択します。 ボードの選択 シリアルポートの選択
  35. 35. マイコン(Arduino)の準備 35 [ ファイル ] → [ スケッチ例 ] → [ 01.Basics ] → [ Blink ] を選択し、Blinkスケッチを表示します。 をクリックしてスケッチをマイコンに書き込み、該当箇所のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
  36. 36. モジュールの取り付け 36 ArduinoをPCから外し、図に示すようにシールドとArduinoのピン穴と合致するようにはめ込みます。
  37. 37. ライブラリの取得(温湿度センサ-HDC1000利用の場合) 37 [ スケッチ ] → [ ライブラリをインクルード ] → [ ライブラリを管理... ] をクリックし、 右上検索窓から 【 hdc1000 】 を検索すると、 [ HDC1000 by Yuichi Tateno ] がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ] が表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
  38. 38. ライブラリの取得(温湿度センサ-SHT31利用の場合) 38 [ スケッチ ] → [ ライブラリをインクルード ] → [ ライブラリを管理... ] をクリックし、 右上検索窓から【 SHT31 】を検索すると、 [ Adafruit SHT31 Library by Adafruit ] がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ] が表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。
  39. 39. ライブラリの取得(SakuraIO) 39 [ スケッチ ] → [ ライブラリをインクルード ] → [ ライブラリを管理... ] をクリックし、 右上検索窓から 【 sakuraio 】 を検索すると、 [ SakuraIO by SAKURA Internet Inc. ] がヒットします。 最新のVer.を選択のうえインストールをクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ] が表示されます。
  40. 40. FirmwareUpdate.ino 40 [ ファイル ] → [ スケッチ例 ] → [ SakuraIO ] → [ FirmwareUpdate ] を選択し、 クリックで該当スケッチを 書き込みます。 [ ツール ] → [ シリアルモニタ ] もしくは クリックでファームウェアアップデート状況を確認します。 現在のVersion情報と比較し、新しいファームウェアが提供されている場合にはアップデートを実行します。 PCからの給電が不安定/不足している場合は [ Update Failure ] と表示され、アップデートが失敗する場合があります。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合 ※PCからの給電が不安定/不足している場合は [ Update Failure ] と表示され、アップデートが 失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。
  41. 41. ブレッドボードについて 41 ブレッドボードは場所によって接続されている場所が異なります。 下記の繋がっている部分を意識して配線を行ってください。 水平方向に繋がっている 主に各センサーに対する 電源系統の接続に利用 垂直方向に繋がっている 主に各センサーの配置や センサーの信号系統の 接続に利用
  42. 42. 温湿度センサ(HDC1000/SHT31)について 42 温湿度センサモジュールはそれぞれ繋がれるべき端子が決まっています。 少し見えにくいですが、センサ本体が実装されている面を裏返すとと、各ピンに接続されるべき端子が 明記されています。 ピンアサインが記載温湿度センサ 表面 裏面
  43. 43. LEDについて 43 LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が [ 陽極(アノード) ] と呼ばれ、 デジタルの端子に接続します。逆に足の短い方は [ 陰極(カソード) ] と呼ばれ、GND側の端子に接続します。 今回使用するLEDは抵抗が内蔵されているため、別途抵抗を挾む必要はありません。 陽極(アノード) デジタル端子に接続 陰極(カソード) GND端子に接続
  44. 44. 温湿度センサ(HDC1000/SHT31)&LEDの繋ぎ込み 44 図に従い、温湿度センサとLEDの向きに注意しながら配線します。(実際にはArduinoシールドに対して配線します) ブレッドボード側は色で明示された位置であれば、自由に接続しても問題ありません。 温湿度センサ側のRDY/ADRピンは今回は使用しないため、何も配線しません。 <凡例> D5 SDA SCL D6 GND D7 3.3V RDY/ADR GND SCL SDA 3.3V GND GND GND Digital 6 Digital 5 Digital 7
  45. 45. 試験用プログラムの流し込み(温湿度センサ-HDC1000利用の場合) 45※本作業はセンサにHDC1000を利用している場合のみ実施します。 [ ファイル ] → [ 新規ファイル ] で新しいスケッチを表示し、下記URLの内容をスケッチにコピー&ペーストします。 をクリックし、 [ ツール ] → [ シリアルモニタ ] もしくは クリックでTemp情報とシリアル値、送信キュー情報 が取得できることと、温度が30度を超えるとモニタ上に [ * Sent to sakura.io * ] と表示されることを確認します。 書き込みに問題があった場合、オレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino 】
  46. 46. 試験用プログラムの流し込み(温湿度センサ-SHT31利用の場合) 46※本作業はセンサにSHT31を利用している場合のみ実施します。 [ ファイル ] → [ 新規ファイル ] で新しいスケッチを表示し、下記URLの内容をスケッチにコピー&ペーストします。 をクリックし、 [ ツール ] → [ シリアルモニタ ] もしくは クリックでTemp情報とシリアル値、送信キュー情報 が取得できることと、温度が30度を超えるとモニタ上に [ * Sent to sakura.io * ] と表示されることを確認します。 書き込みに問題があった場合、オレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino 】
  47. 47. 【参考】デバイスから送信されたデータの確認 47 sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信されたデータを受信できているかを 確認することができます。該当のプロジェクトで作成した連携サービスからいずれかのWebSocketをクリックします。
  48. 48. 【参考】デバイスから送信されたデータの確認 48 サービス連携の編集画面の下部にデバイスから送信されたデータがリアルタイムで表示されます。 簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 → カウント値 → 温度 モジュール: データを送信した モジュールのID チャンネル データが格納された チャンネル番号 時刻: データがモジュールのキューに 格納された時刻のタイムスタンプ 値: 送信された値 型: データの型式
  49. 49. 【参考】デバイスから送信されたデータの確認 49 [ 詳細表示モードに切り替え ] をクリックすると詳細表示モードに遷移します。 モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 複数チャンネルある場合、 それぞれの最終データを表示 クリックでログ出力を 開始/停止 タイプ: プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels :モジュールからのデータ ・connection :接続の開始/終了 ・location :簡易位置情報 ・keepalive :WebSocketセッション確認 ペイロードには受け取った データのpayload部が表示 時刻: 詳細表示モードではプラット フォームで該当のメッセージ を受け取ったタイムスタンプ
  50. 50. 50 Webへのデータ連携 (Twilio)
  51. 51. 今回のハンズオンの流れ 51 マイコンおよび プログラムの構築 Webサービス連携 (Twilio) マイコン(Arduino Uno) sakura.ioの設定 ③② /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook ①,④ 温湿度センサ (SHT31/HDC1000) さくらの通信 モジュール 各種LED Outgoing Webhook Incoming Webhook WebSocket ※動作確認用 データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
  52. 52. 【参考】アカウントの作成 52 Twilioのログイン用アカウントがない場合は、サービスサイト( https://twilio.kddi-web.com/ )より 【 サインアップ 】 をクリックすることでアカウント作成の画面に進むことができます。
  53. 53. 【参考】アカウントの作成 53 初めに利用規約およびプライバシーポリシーへの同意を求められます。 問題なければいずれのチェックボックスにもチェックを入れたうえで、 【 同意してサインアップ 】 をクリックします。
  54. 54. 【参考】アカウントの作成 54 必要な情報を入力する画面に遷移します。必要な事項を入力し、 【 始めましょう 】 をクリックします。 その後指定した番号にSMSを受け、認証の4桁の番号を入力することでTwilioにアクセス、および 利用することができるようになります。
  55. 55. 作成したアカウントでのログイン 55 コントロールパネルにアクセスする場合、ログイン画面( https://jp.twilio.com/login/kddi-web )より 登録したメールアドレスとパスワードを使用してログインします。
  56. 56. サブアカウントの設定 56 サブアカウントを利用する場合ログインしたマスターアカウントから切り替える必要があります。 ダッシュボード右上の 【 】 をクリックし、 【 Subaccounts 】をクリックします。
  57. 57. サブアカウントの設定 57 サブアカウント画面で任意のサブアカウントの右側にある 【 サブアカウントを表示 】 をクリックすると サブアカウントごとに区切られた管理画面に遷移します。
  58. 58. 電話番号の購入 58 Twilioから架電するために必要となる電話番号を購入します。 ログイン後のダッシュボード画面から、左側ペインの 【 All Products & Services 】 アイコンをクリックします。
  59. 59. 電話番号の購入 59 各種メニューが左部に表示されますので、 [ 電話番号 ] → [ Buy a Number ] と進みます。
  60. 60. 電話番号の購入 60 [ 番号を購入 ] 画面が表示されますので、国のプルダウンより 【 Japan (+81) 】 を選択し、 【 検索 】 をクリックします。
  61. 61. 電話番号の購入 61 日本で使用可能な番号の一覧が表示されます。TYPEが [ ローカル ] となっている月額が [ ¥108 ] のものの中から 任意の番号を選び、右側にある 【 購入 】 をクリックします。
  62. 62. 電話番号の購入 62 確認のモーダルが表示されますので、確認いただいたうえで 【 この番号を購入する。 】 をクリックします。
  63. 63. 電話番号の購入 63 購入に成功した旨の表示がされます。該当の番号はハンズオンで後ほど設定しますので、 控えたうえで 【 閉じる 】 をクリックします。
  64. 64. 電話番号の購入 64 購入された番号は [ Manage Numbers ] 画面で改めて確認することができます。 電話番号の表記方法について Twilioは、世界100カ国と接続されていて、それぞれの国に直接電話をかけることができます。 そのため、発信・着信の電話番号は、全世界で利用可能な「E.164形式」と呼ばれる表記方法を使います。 E.164形式とは、先頭が+から始まる国番号と電話番号の組み合わせです。 例えば、日本は国番号が+81となっており、その後の電話番号を続けて記述します。 ※電話番号の先頭の0は削除します。 「09012345678」は、E.164形式だと「+819012345678」となります。
  65. 65. Functionsの設定 65 次に、取得した番号を用いてFunctionsの設定を行います。左部のメニューボタンから、 [ Runtime ] → [ Functions Beta ] を選択します。
  66. 66. Functionsの設定 66 FunctionsのManage画面に遷移します。事前にプログラムに使用する環境変数を設定するため、 【 Configure 】 をクリックします。
  67. 67. Functionsの設定 67 Configuration画面に遷移します。 【 Enable ACCOUNT_SID and AUTH_TOKEN 】にチェックを入れ、 【 】を押下し、 以降で作成するプログラムの環境変数である [ Environmental Variables ] 欄で以下の4つの項目を設定します。 FROM_NUMBER : 先程購入した電話番号(E.164形式) MODULE_ID : sakura.ioのコントロールパネルで確認したモジュールの一意のID SAKURA_URL : sakura.ioのコントロールパネルで生成したIncoming WebhookのURL TO_NUMBER : ご自身で通知先として使用したい電話番号(E.164形式)
  68. 68. Functionsの設定 68 [ Dependencies ] 欄では以降のプログラムで使用(require)するNPMのパッケージを指定します。 今回はデフォルトのものに加えてgotパッケージを指定する必要がありますので 【 】 を押下し、以下を設定します。 そのまま 【 Save 】 をクリックすると設定内容が保存されます。 NAME : got VERSION : 6.7.1
  69. 69. Functionsの設定 69 [ Dependencies ] 欄は今回は設定の変更は不要です。 そのまま 【 Save 】 をクリックすると設定内容が保存されます。
  70. 70. Functionsの設定 70 環境変数の設定が完了したら次にFunctionsでsakura.ioからのデータを元に次の処理を実行するプログラムを 設定します。Functions内の 【 Manage 】 をクリックし、新しいプログラムを作成するために 【 + 】 をクリックします。
  71. 71. Functionsの設定 71 基本的な内容を含むテンプレートの一覧が提示されます。 今回は用意されているプログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
  72. 72. Functionsの設定 72 Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには 【 /outboundcall 】 を入力し、 CODEには以下の内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。 【 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js 】
  73. 73. Functionsの設定 73 次に、Functionsでoutboundcallプログラムから呼び出され、電話への架電を実行するプログラムを 設定します。Functions内の 【 Manage 】 をクリックし、新しいプログラムを作成するために 【 + 】 をクリックします。
  74. 74. Functionsの設定 74 基本的な内容を含むテンプレートの一覧が提示されます。 今回は用意されているプログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
  75. 75. Functionsの設定 75 Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには 【 /ivr 】 を入力し、 ACCESS CONTROLはチェックを入れます。CODEには以下の内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。 【 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js 】
  76. 76. Functionsの設定 76 最後に、FunctionsでIVRプログラムから呼び出され、電話からのキー操作を元にデバイスへ制御信号を返す プログラムを設定します。Functions内の 【 Manage 】 をクリックし、新しいプログラムを作成するために 【 + 】 をクリックします。
  77. 77. Functionsの設定 77 基本的な内容を含むテンプレートの一覧が提示されます。 今回は用意されているプログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
  78. 78. Functionsの設定 78 Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには 【 /turn 】 を入力し、 CODEには以下の内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。 【 https://github.com/sakuraio/handson-sample/blob/master/twilio/turn.js 】
  79. 79. 79 sakura.ioの設定 後編
  80. 80. 今回のハンズオンの流れ 80 マイコンおよび プログラムの構築 Webサービス連携 (Twilio) マイコン(Arduino Uno) sakura.ioの設定 ③② /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook ①,④ 温湿度センサ (SHT31/HDC1000) さくらの通信 モジュール 各種LED Outgoing Webhook Incoming Webhook WebSocket ※動作確認用 データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
  81. 81. 作成したFunctionsのPATH確認 81 これで今回の動作を実現するTwilio Function側の3つのプログラムが設定されました。 最後にsakura.ioからデータの投げ込み先となるPATHをOutgoing Webhookで指定して作成します。 【 Manage 】 から 【 outboundCall 】 をクリックします。
  82. 82. 作成したFunctionsのPATH確認 82 Twilio Functionsで作成したプログラムのPATH項目の右側のコピーマークをクリックすると、 該当PATHのURLがコピーされます。
  83. 83. 連携サービスの設定(Outgoing Webhook) 83 先程控えた内容を元に、Outgoing Webhookサービスの作成を行います。 最後に外部への連携サービスを設定します。[+サービス追加]のボタンをクリックします。
  84. 84. 連携サービスの設定(Outgoing Webhook) 84 追加サービスの選択画面に遷移します。 次はOutgoing Webhookを作成しますので、 【 Outgoing Webhook 】 をクリックします。
  85. 85. 連携サービスの設定(Outgoing Webhook) 85 Outgoing Webhookでは任意の名前とPayload URLを指定します。 今回指定するPayload URLはTwilioのコントロールパネルで生成した 【 outboundCall 】 のPATHが示すURLとなります。 Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。
  86. 86. 温湿度センサ (SHT31/HDC1000) さくらの通信 モジュール 各種LED 動作確認 86 マイコン(Arduino Uno) outboundCall IVR Turn Functions outbound webhook inbound webhook 以上で設定は完了です。温度センサを指で押さえ、30度を超えたタイミングでモジュールからデータが送信され、 それに基づきリアルタイムでTwilio FunctionsでoutboundCallがキックされ、IVRおよびTurnで定義されたデータが デバイスに戻されてLEDが制御されるまでを確認しましょう。 30度を超えると温度と カウント値データが送信 Outgoing Webhookにより リアルタイムで連携 MODULE_IDで指定された モジュールがデータを受信 キー操作で指定した内容 に基づきJSONデータ送信
  87. 87. 87 最後に
  88. 88. 最後に ~sakura.io~ 88 ハンズオンに使用したモジュールは必要に応じて登録を解除します。 接続ステータス横の歯車マークをクリックします。
  89. 89. 最後に ~sakura.io~ 89 モジュールの設定画面に遷移します。下部の[登録解除]ボタンをクリックします。
  90. 90. 最後に ~sakura.io~ 90 モジュールの登録を解除してよいか確認されます。 問題ない場合は再度[登録解除]ボタンをクリックします。
  91. 91. 最後に ~sakura.io~ 91 モジュールの登録が解除され、表示から削除されました。 次は連携サービスとともにプロジェクトを削除します。 プロジェクト右上の[削除]マークをクリックします。
  92. 92. 最後に ~sakura.io~ 92 プロジェクトを削除してよいか確認されます。 問題ない場合は再度[削除]ボタンをクリックします。
  93. 93. 最後に ~Twilio~ 93 [ All Products & Services ] → [ Runtime ] → [ Functions ] → [ Manage ]から作成したFunctionsのプログラムを開き、 最下部の 【 Delete this Function 】 をクリックすると該当プログラムが削除されます。 これを作成したプログラムすべてで実行します。
  94. 94. 最後に ~Twilio~ 94 [ All Products & Services ] → [ 電話番号 ] → [ Active Numbers ] から購入した電話番号を開き、 最下部の 【 Release this Number 】 をクリックすると該当番号が返却されます。 これを購入した番号すべてで実行します。
  95. 95. 最後に 95 以上でハンズオンにおける作業は全て終了となります。 お疲れ様でした!
  96. 96. 最後に 96 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間(部員)を募集しています。 (テーマはIoTに限らず、クラウドやVPS、スタートアップ系ネタでもOK!) ご興味があれば、Come and join us & Feel free to contact me! 連絡先 : sakura-club@sakura.ad.jp さくらクラブ : http://www.slideshare.net/MasayaHayashi/lt20151224 さくらクラブにっぽんばし:https://www.facebook.com/saku.love.nipponbashi
  97. 97. 97 そこに、さくら

×