Twilio＆sakura.io 体験ハンズオン（Part2）/sakuraio handson twilio part2

各地で開催されているさくらインターネットが提供するIoTプラットフォーム「sakura.io」のハンズオンでの資料となります。

本資料ではコミュニケーションAPIサービスのTwilio（トゥイリオ）と連携し、「Arduino＋sakura.ioモジュールを用いたマイコンおよびプログラムの構築」から「Twilioを用いたWebサービス連携」までの手順をスライドでご覧いただけます。

part1でTwilio Functionsを使い実装していたIVR部分をビジュアルプログラミングツールの「Studio」を使ってより分かりやすく実装できるようにしたものとなります。

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

Transcript

1. コミュニケーションAPI Twilio & sakura.io体験ハンズオン 株式会社KDDIウェブコミュニケーションズ 共催 Part2 Twilio Studioを使ってみよう 2018/7/2 (C) Copyright 1996-2018 SAKURA Internet Inc. さくらインターネット株式会社 IoTチーム 西田 有騎
2. 2 はじめに
3. ハンズオンを円滑に進めるために  本資料の内容はいくつかの外部サービスやサイトを併用しながら作業を行います。  そのため、本資料のPDFファイルをローカル環境にダウンロードいただき、記載されている URLを活用いただくことを推奨します。 SpeakerDeckからでは直接URLにアクセスすることができません。 3 sakura.io紹介資料 http://bit.ly/sakuraio-introduction ハンズオン資料 http://bit.ly/sakuraio-handson-twilio-part2-01
4. ハンズオンを円滑に進めるために 4 ココ!!
5. 本ハンズオンの目的とお願い  本ハンズオンは sakura.io を使用し、組込み、Web/アプリ開発、それぞれのスキルセットを 大きく超えることなく、Internet of Things(IoT) に携わることができることをご体験いただく ものです。  特に、本編ではコミュニケーションAPIサービスであるTwilio（トゥイリオ）と連携した簡易的な サービス構築を通じて、Web・アプリケーションの技術を用いた「IoTシステム」の構築イメージを 掴んでいただくことを目的としています。  本編で構築される内容は概ねPart1と同一です。Twilio Functionsによるコードを中心とし たプログラミングが苦手な利用者を想定し、コアとなる自動音声応答部分をビジュアルプログラ ミングツールであるTwilio Studioで実装の違いも体験いただきます。  そのため、組み込み系またはWeb/アプリ系のどちらか、または両方わからないという方にも、多 くご参加いただける内容になっています。  今回は1人に1つのキットをご用意しています。もしもご自身の知識分野で、近くの方のフォロー ができそうだなと思われましたら、積極的にサポートしあって進めていただければと思います。 5
6. 本ハンズオンで使用するツール・機材・参考情報まとめ ▪本編▪ ・Twilio サインアップ/ログイン https://twilio.kddi-web.com/ ・さくらインターネット会員登録 https://secure.sakura.ad.jp/signup3/member-register/input.html ・sakura.ioコントロールパネル https://secure.sakura.ad.jp/iot/ ・Arduino https://www.arduino.cc/en/Main/Software ・サンプル用スケッチ（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 ・Twilio Functionsプログラム（callflow） https://github.com/sakuraio/handson-sample/blob/master/twilio/part2/callflow.js ・Twilio Functionsプログラム（turn） https://github.com/sakuraio/handson-sample/blob/master/twilio/part2/turn.js ▪参考▪ 開発者向けページ ・Twilio Docs https://jp.twilio.com/docs/ ・sakura.io 開発者向け https://sakura.io/developer/ ▪参考▪ モジュール＆オプションのご購入 ・商品の購入 https://sakura.io/product/ ・sakura.ioモジュール（LTE） https://sakura.io/product/module_lte.html ・sakura.ioシールド for Arduino https://sakura.io/product/arduino.html ▪参考▪ その他物品のご購入（秋月電子通商） ・温湿度センサ（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/ ・USBケーブル Aオス-Bオス http://akizukidenshi.com/catalog/g/gC-07605/ ・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/ ・ブレッドボード http://akizukidenshi.com/catalog/g/gP-05294/ 6
7. Webサービス連携 （Twilio） ③ 今回のハンズオンの流れ 7 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ
8. Agenda 8 1. sakura.ioの設定（前編） ₋ プロジェクトの作成 ₋ モジュールの登録 ₋ 連携サービスの設定（Incoming Webhook / WebSocket） 2. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 温湿度センサおよびモジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 3. Webへのデータ連携（Twilio） ₋ 電話番号の購入、環境変数の設定（FROM_NUMBER, TO_NUMBER） ₋ Functionsによるsakura.io Outgoing Webhook受信用プログラム（callflow）の作成 ₋ Studioによるキー応答用プログラム（IVR）の作成 ₋ Functionsによるsakura.io Incoming Webhook送信用プログラム（turn）の作成 4. sakura.ioの設定（後編） ₋ 環境変数の追加設定（MODULE_ID, SAKURA_URL）
9. 9 sakura.ioの設定
10. Webサービス連携 （Twilio） ③ 今回のハンズオンの流れ 10 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ
11. sakura.ioコントロールパネルにおける考え方  sakura.ioでは【 プロジェクト 】という単位で管理され、プロジェクト内に複数の【 モジュー ル 】【 連携サービス 】を紐付けます。 データストア、簡易位置情報提供、ファイル配信と いった【 オプションサービス 】はプロジェクトに対して１つもしくは1セット設定できます。 11 プロジェクトC プロジェクトB プロジェクトA モジュール1 uAAAAAAAAAA モジュール2 uBBBBBBBBBB モジュール3 uCCCCCCCCCC データストアプラン Light/Standard/… 簡易位置情報提供 ON/OFF 連携サービス1 WebSocket 連携サービス2 Outgoing Webhook ファイル配信 File1/File2/… 連携サービス3 AWS IoT モジュール プロジェクトに対して 複数登録可能 オプションサービス プロジェクトに対して 1つ/1セット設定可能 連携サービス プロジェクトに対して 複数作成可能
12. さくらインターネット 会員ID作成  会員IDをお持ちでない場合はご契約の サービスがない場合でも、さくらインター ネット会員登録から作成いただけます  会員登録が完了すると、指定したメール アドレスに support@sakura.ad.jp より会員IDが記載されたメールが送信さ れます。 会員IDおよびパスワードは重要な情報となりま すので、漏れないよう大事に保管ください。 12 Title：会員登録完了のお知らせ [XXX00000] ─────────────────────────────────── このメッセージはさくらインターネット会員登録フォームより 自動送信されています。このメールに心当たりのない場合は support@sakura.ad.jpまでご連絡ください。 ─────────────────────────────────── さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) この度は、さくらインターネットに会員登録いただきまして誠に ありがとうございます。 以下の通り会員登録を受付ましたので、ご連絡させていただきます。 ============================================ ◎ 会員登録情報 会員ID ： XXX00000 ご契約者名 ： さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) 電子メール ： XXX@XXX.XX.XX ============================================ ～～～以下省略～～～ https://secure.sakura.ad.jp/signup3/member-register/input.html
13. sakura.io コントロールパネル ログイン  sakura.ioコントロールパネルにログインします。上記URLに直接アクセスするか、サービス サイト（ https://sakura.io/ ）にアクセスし、右上の【 ログイン 】をクリックします。 13 https://secure.sakura.ad.jp/iot/
14. コントロールパネルへのログイン  ログイン済みのセッションがない場合、以下の画面で会員認証を求められます。  会員ID、パスワードを利用してログインします。 14
15. 約款への同意  初めてコントロールパネルにログインすると、各種約款への同意を求められます。  内容をご確認のうえ、［ 同意する ］をクリックするとコントロールパネルにアクセスできます。 15
16. コントロールパネルへのログイン  ログインが成功すると、以下のような画面に誘導されます。  何も作成されていない、もしくはデフォルトプロジェクトが作成されている状態になります。 16
17. プロジェクトの作成  初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。  プロジェクトを作成するには、まず［ プロジェクト追加 ］をクリックします。 17
18. プロジェクトの作成  新規プロジェクトの作成画面に遷移します。  ［ 名称 ］欄に任意の名前を入力し、【 追加 】をクリックします。 ハンズオンでは他の参加者と重複しないよう、名前等の判別可能な情報を入れて作成してください 18
19. Outgoing Webhook 連携 サービス WebSocket ※動作確認用 Incoming Webhook Webサービス連携 （Twilio） ③ /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ 今回のハンズオンの流れ 19 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED プロジェクト モジュール sakura.ioの設定 ハンズオン キット
20. モジュールの登録  プロジェクトが作成されました。次にモジュールの登録を行います。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 モジュール登録 】をクリックします。  登録されているモジュールがない場合は案内文中のリンクからも登録画面に遷移できます。 20
21. sakura.io モジュールの取り出し  sakura.io モジュール【だけ】を箱から取り出します 21 sakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3
22. モジュール登録  モジュールの追加画面に遷移します。自身のプロジェクトが選択されていることを確認のうえ、 モジュール記載の登録用ID、登録用パスワードおよび任意の名称を入力して、【 追加 】 をクリックします。 モジュールの登録実行には数秒かかります。 22 モジュール上面 白ラベル表記
23. モジュール登録  モジュールの追加に成功すると［ モジュールを追加しました ］ダイアログが表示されます。  ［ ホームへ戻る ］ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されているモジュールを追加しようとした場合は 内容とともに［ モジュールの追加に失敗しました ］というダイアログが表示されます。 23 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDで登録されています、過去登録した会員IDでログインし解除ください
24. モジュール登録  モジュールを登録しました。表示されているモジュールIDは一意のものであり、届いたデータ の送信元判別や、デバイスへのデータ送信の際に使用します。 この点線で囲まれたモジュールIDは後ほど使用します。 24 メモ情報あり
25. ハンズオン キット Outgoing Webhook 連携 サービス WebSocket ※動作確認用 Webサービス連携 （Twilio） ③ /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ 今回のハンズオンの流れ 25 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED プロジェクト モジュール sakura.ioの設定 Incoming Webhook
26. 連携サービスの設定（Incoming Webhook）  Incoming（外部サービス → sakura.io）を実現する連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 26
27. 連携サービスの設定（Incoming Webhook）  追加サービスの選択画面に遷移します。  Incoming Webhookを作成しますので、【 Incoming Webhook 】をクリックします。 27
28. 連携サービスの設定（Incoming Webhook）  Incoming Webhookでは任意の名前を指定し、【 作成 】をクリックします。  Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。 28
29. 連携サービスの設定（Incoming Webhook）  プロジェクトの詳細から作成したIncoming Webhookの【 】をクリックし、 生成されたURLを確認します。 この点線で囲まれたURLは後ほど使用します。 29 メモ情報あり
30. Incoming Webhook ハンズオン キット Outgoing Webhook 連携 サービス Webサービス連携 （Twilio） ③ /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ 今回のハンズオンの流れ 30 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED プロジェクト モジュール sakura.ioの設定 WebSocket ※動作確認用
31. 連携サービスの設定（WebSocket）  デバイスからのデータ到達の確認にも使える連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 31
32. 連携サービスの設定（WebSocket）  追加サービスの選択画面に遷移します。  今回はWebSocketを作成しますので、【 WebSocket 】をクリックします。 32
33. 連携サービスの設定（WebSocket）  WebSocketの作成には特に設定事項はありません。  ［ 名前 ］欄に任意の名前を入力し、【 作成 】をクリックします。 33
34. 連携サービスの設定  Incoming WebhookとWebSocketを作成しました。  Outgoing Webhookは後ほどTwilio側のPATHが決まったら作成します。 34
35. 35 マイコンおよびプログラム構築
36. Webサービス連携 （Twilio） ③ 今回のハンズオンの流れ 36 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ
37. 今回のワークショップでご提供するもの 37 ジャンパーコード sakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3 USB2.0 ケーブル（A-B） 12W級 9V-1.3A ACアダプタ ブレッドボード 人感センサ （SB412A） 照度センサ （GL5537-2） 温湿度センサ （HDC1000 or SHT31） 各種抵抗 ※必要に応じてご提供 タクトスイッチ ※必要に応じてご提供 抵抗入りLED ※必要に応じてご提供 本日は使用しません
38. Arduino IDEのセットアップ  Webサイトから開発環境（Arduino IDE）を入手します。2018/6/29時点の最新 バージョンは［ 1.8.5 ］です。  環境がWindowsの場合は【 Windows Installer 】、Macの場合は【 Mac OS X 10.7 Lion or newer 】を選択します。 38 https://www.arduino.cc/en/Main/Software
39. Arduino IDEのセットアップ  該当の金額を選択するか(寄付する場合）、【 JUST DOWNLOAD 】からダウンロード します。 39
40. Arduino IDEのセットアップ  インストールはデフォルト推奨、ドライバーについても全てインストールします。 ※本スライド記載の画像はWindowsの場合です。 40
41. sakura.ioモジュールの取り付け  ArduinoシールドをArduino Unoのピン穴と合致するようにはめ込みます。 ※ハンズオンでは接続済み  Arduino IDEを起動したら、Arduino UnoにACアダプタとUSBケーブルを図のように 接続します。 41 コンセントへ パソコンへ （USB Type-A）
42. Arduino IDEのセットアップ  上部メニューバーからボードと、シリアルポートを設定します。 ボード:［ ツール ］→［ ボード:”XXX” ］から【 Arduino/Genuino Uno 】を選択 シリアルポート:［ ツール ］→［ シリアルポート ］から【 COMx (Arduino/Genuino Uno) 】を選択 Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択  うまく認識しない場合は、USBを挿し直し、Arduino IDEを再起動を試してください。 42 ボードの選択 シリアルポートの選択
43. マイコン（Arduino）の準備  ［ ファイル ］→［ スケッチ例 ］→［ 01.Basics ］→［ Blink ］を選択し、Blink スケッチを表示します。  【 】をクリックしてスケッチを書き込み、該当のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 43
44. ライブラリの取得（SakuraIO）  ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 右上検索窓から【 sakuraio 】を検索すると、［ SakuraIO by SAKURA Internet Inc. ］がヒットします。  最新のVer.を選択のうえ【 インストール 】をクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］が表示されます。 44
45. ライブラリの取得（温湿度センサ-HDC1000利用の場合）  ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 検索窓から【 hdc1000 】を検索すると、［ HDC1000 by Yuichi Tateno ］がヒット します。  【 インストール 】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示 されます。 45 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
46. ライブラリの取得（温湿度センサ-SHT31利用の場合）  ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 検索窓から【 SHT31 】を検索すると、［ Adafruit SHT31 Library ］がヒットします。  【 インストール 】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示 されます。 46 ※本作業はセンサにSHT31を利用している場合のみ実施します。
47. FirmwareUpdate.ino  ［ ファイル ］→［ スケッチ例 ］→［ SakuraIO ］→［ FirmwareUpdate ］を 選択し、【 】クリックでスケッチを書き込みます。［ ツール ］→［ シリアルモニタ ］もし くは【 】クリックでアップデート状況を確認します。  現在のVersion情報と比較し、新しいファームウェアが提供されている場合はアップデートを 実行します。 47 ※PCからの給電が不安定/不足している場合は ［ Update Failure ］ と表示され、アップデートに 失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合
48. sakura.ioモジュールの取り外し  マイコンとセンサー間を配線するため、Arduino Unoから、ACアダプタと、USBケーブルを 取り外します。 48 コンセントへ パソコンへ （USB Type-A）
49. ブレッドボードについて  ブレッドボードは場所によって接続されている場所が異なります。  下図の繋がっている部分を意識しながら配線します。 49 水平方向に繋がっている 主に各センサーに対する 電源系統の接続に利用 垂直方向に繋がっている 主に各センサーの配置や センサーの信号系統の 接続に利用
50. 温湿度センサ（HDC1000/SHT31）について  温湿度センサモジュールはそれぞれ繋ぐべき端子が決まっています。  少し見えにくいですが、センサ本体が実装されている面を裏返すと、各ピンに接続すべき 端子が明記されています。 50 ピンアサインが記載 温湿度センサ 表面 裏面
51. LEDについて  LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が陽極（ア ノード）と呼ばれ、デジタルの端子に接続します。逆に足の短い方は陰極（カソード）と 呼ばれ、GND側の端子に接続します。  今回使用するLEDは抵抗を内蔵しているため、別途抵抗を挟む必要はありません。 51 陽極（アノード） デジタル端子に接続 陰極（カソード） GND端子に接続
52. 温湿度センサ（HDC1000/SHT31）の繋ぎ込み  図に従い温湿度センサの向きに注意して配線します。（実際にはArduinoシールドに対 して配線します）ブレッドボード側は色で明示された位置であれば、自由に接続しても問 題ありません。温湿度センサ側のRDY/ADRピンは今回は使用しないため、何も配線しま せん。 52 ＜凡例＞ D5 SDA SCL D6 GND D7 3.3V RDY/ADR GND SCL SDA 3.3V GND GND GND Digital 6 Digital 5 Digital 7 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
53. sakura.ioモジュールの取り付け  配線が終わったら、ACアダプタとUSBケーブルを再度接続します。  Arduino IDEを起動し、Arduino UnoにACアダプタとUSBケーブルを図のように接続し ます。 53 コンセントへ パソコンへ （USB Type-A）
54. 試験用プログラムの流し込み（温湿度センサ-HDC1000利用の場合）  Githubの該当サンプルスケッチページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】 ですべてを選択して、【 Ctrl +C 】でコピーします。 54 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
55. 試験用プログラムの流し込み（温湿度センサ-HDC1000利用の場合）  ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、URLの内容をコピー＆ペー ストし、【 】をクリックしてスケッチを書き込みます。  ［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックでシリアル値とTemp情報、 送信キュー情報が取得できることと、温度が30度を超えるとモニタ上に ［ * Sent to sakura.io * ］ と表示されることを確認します。 55 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino
56. 試験用プログラムの流し込み（温湿度センサ-SHT31利用の場合）  Githubの該当サンプルスケッチページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】 ですべてを選択して、【 Ctrl +C 】でコピーします。 56 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
57. 試験用プログラムの流し込み（温湿度センサ-SHT31利用の場合）  ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、URLの内容をコピー＆ペー ストし、【 】をクリックしてスケッチを書き込みます。  ［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックでTemp情報とシリアル値、 送信キュー情報が取得できることと、温度が30度を超えるとモニタ上に ［ * Sent to sakura.io * ］ と表示されることを確認します。 57 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino
58. 【参考】デバイスから送信されたデータの確認  sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信された データを受信できているかを確認できます。  プロジェクトの詳細から作成したWebSocketの【 】をクリックします。 58
59. 【参考】デバイスから送信されたデータの確認  サービス連携の編集画面下部に、デバイスから送信したデータがリアルタイム表示されます。  簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 59 モジュール： データを送信した モジュールのID チャンネル： データが格納された チャンネル番号 時刻： データがモジュールのキューに 格納された時刻のタイムスタンプ 値： 送信された値 型： データの型式
60. 【参考】デバイスから送信されたデータの確認  ［ 詳細表示モードに切り替え ］をクリックすると詳細表示モードに遷移します。  モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 60 タイプ： プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels ：モジュールからのデータ ・connection ：接続の開始/終了 ・location ：簡易位置情報 ・keepalive ：WebSocketセッション確認 ペイロード： 受け取ったデータのpayload部 が表示 時刻： 詳細表示モードではプラットフォームで該 当のメッセージを受け取ったタイムスタンプ チャンネルごとの最終到着データ： 各チャンネルに届いた最終の Valueを表示
61. 61 Webサービス連携 (Twilio)
62. Webサービス連携 （Twilio） ③ 今回のハンズオンの流れ 62 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ
63. 【参考】アカウントの作成 63  Twilioのログイン用アカウントがない場合は、サービスサイトより【 サインアップ 】 を クリックすることでアカウント作成の画面に進むことができます。 https://twilio.kddi-web.com/
64. 【参考】アカウントの作成 64  初めに利用規約およびプライバシーポリシーへの同意を求められます。  内容を確認し、問題なければいずれのチェックボックスにもチェックを入れたうえで、 【 同意してサインアップ 】 をクリックします。
65. 【参考】アカウントの作成 65  情報入力画面に遷移します。必要な事 項を入力し【 はじめる 】をクリックします。  その後指定した番号にSMSを受け、認 証の4桁の番号を入力することでTwilio にアクセス、および利用することができる ようになります。
66. 作成したアカウントでのログイン 66  既に登録している場合、コントロールパネルにログインします。  Emailの項目に登録したメールアドレスを入力し、【 次 】をクリックします。 https://jp.twilio.com/login/kddi-web
67. 作成したアカウントでのログイン 67  次の画面ではパスワードが求められます。登録したパスワードを入力し、［ 二要素認証を 有効にする ］にはチェックを入れず、【 ログイン 】をクリックします。
68. 作成したアカウントでのログイン 68  ログインが成功すると以下のような画面が表示されます。  ログイン時はマスターアカウントという権限でログインされていますが、ハンズオンではその中に 作成されたサブアカウントを使って行います。
69. サブアカウントの設定 69  サブアカウントを利用する場合ログインしたマスターアカウントから切り替える必要があります。  ダッシュボード右上の 【 】 をクリックし、 【 Subaccounts 】をクリックします。
70. サブアカウントの設定 70  サブアカウント画面で任意のサブアカウントの右側にある 【 サブアカウントを表示 】 を クリックするとサブアカウントごとに区切られた管理画面に遷移します。
71. サブアカウントの設定 71  サブアカウントへの切り替えが成功すると以下のような画面が表示されます。  表示は大きく変わりませんが、サブアカウントごとの電話番号やアプリケーション設定を分割 して利用する場合に活用します。
72. サブアカウントの設定 72  Twilioから架電するために必要となる電話番号を購入します。  ログイン後のダッシュボード画面から、左側ペインの 【 】 をクリックします。
73. 電話番号の購入 73  表示されたメニューから、【 Phone Number 】から【 番号を購入 】をクリックします。
74. 電話番号の購入 74  ［ 番号を購入 ］ 画面が表示されますので、国のプルダウンより 【 Japan (+81) 】 を 選択し、 【 検索 】 をクリックします。
75. 電話番号の購入 75  日本で使用可能な番号一覧が表示されます。TYPEが ［ ローカル ］ となっている月額 が ［ ¥108 ］ のものの中から任意の番号を選び、右側にある 【 購入 】 をクリックします。
76. 電話番号の購入 76  購入の内容が再度表示されますので、問題なければ 【 この番号を購入する。 】 を クリックします。
77. 電話番号の購入 77  購入に成功した旨の表示がされますので、【 閉じる 】 をクリックします。 この点線で囲まれた電話番号は後ほど使用します。 メモ情報あり
78. 電話番号の購入 78 電話番号の表記方法（E.164形式）について Twilioは、世界100カ国と接続されていて、それぞれの国に直接電話をかけることができます。 そのため、発信・着信の電話番号は、全世界で利用可能な「E.164形式」と呼ばれる表記方法を使います。 E.164形式とは、先頭が+から始まる国番号と電話番号の組み合わせです。 例えば、日本は国番号が+81となっており、その後の電話番号を続けて記述します。 ※電話番号の先頭の0は削除します。 「09012345678」は、E.164形式だと「+819012345678」となります。  購入された番号は ［ 番号の管理 ］ 画面で改めて確認することができます。
79. ③ 今回のハンズオンの流れ 79 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ Webサービス連携 （Twilio）
80. Functionsの設定 80  次に、取得した番号を用いてFunctionsの設定を行います。【 】から、 ［ Runtime ］ → ［ Functions Beta ］ を選択します。
81. Functionsの設定 81  FunctionsのManage画面に遷移します。事前にプログラムに使用する環境変数を設定 するため、【 Configure 】 をクリックします。
82. Functionsの設定 82  Configuration画面では、［ Enable ACCOUNT_SID and AUTH_TOKEN ］に チェックを入れ、［ Environmental Variables ］の【 】をクリックし、 以降で作成するプログラムのため、以下の4つの環境変数を設定します。 FROM_NUMBER：購入した電話番号（E.164形式） ※79p参照 MODULE_ID：モジュールの一意のID ※25p参照 SAKURA_URL：Incoming WebhookのURL ※32p参照 TO_NUMBER：通知先に使用する電話番号（E.164形式）
83.  ［ Dependencies ］欄では以降のプログラムで使用（require）するNPMパッケージ を指定します。今回はデフォルトのtwilioパッケージのVer.変更に加えて、gotパッケージを 指定する必要があるため、 【 】 をクリックし、以下の項目を変更および追加します。  そのまま最下部の 【 Save 】 をクリックすると設定内容が保存されます。 Functionsの設定 83 NAME：got / VERSION：6.7.1 VERSION：3.17.1
84. 環境変数 & パッケージ ③ 今回のハンズオンの流れ 84 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR Functions Inbound Webhook Outbound Webhook Studio Webサービス連携 （Twilio） /turn
85. Functionsの設定（turn） 85  次に、Functionsでoutboundcallプログラムから呼び出され、電話への架電を実行する プログラムを作成します。Functions Beta内の 【 Manage 】 をクリックし、新しいプログ ラムを作成するために 【 】 をクリックします。
86. Functionsの設定（turn） 86  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されている プログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
87. Functionsの設定（turn） 87  Functions作成画面に遷移します。 FUNCTION NAME、PATHを入力し、 CODEにはサンプルの内容をコピー＆ペーストしたうえで 【 Save 】 をクリックします。 https://github.com/sakuraio/handson-sample/blob/master/twilio/part2/turn.js コピー＆ペースト FUNCTION NAME：turn PATH：/turn
88. Functionsの設定（turn）  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 88 https://github.com/sakuraio/handson-sample/blob/master/twilio/part2/turn.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
89. /turn 環境変数 & パッケージ ③ 今回のハンズオンの流れ 89 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow Functions Inbound Webhook Outbound Webhook Studio Webサービス連携 （Twilio） IVR
90.  次に、IVR部分のフローをStudioで作成しますの設定を行います。【 】から、 ［ Studio ］ → ［ Create a flow ］ をクリックします。 Studioの設定 90
91.  New Flowダイアログが表示されます。［ FLOW NAME ］には任意の名前を入力のう え、【 NEXT 】をクリックします。  画面が切り替わり、テンプレートの選択を求められます。こちらではデフォルトの［ Start from scratch ］が選択されていることを確認し、【 NEXT 】をクリックします。 Studioの設定 91
92.  フローが作成されました。以降はこのエディター画面を使いフローを作成していきます。 Studioの設定 92
93.  各用語は以下のようになります。トリガーを起点とし必要な機能をウィジェットライブラリから キャンバス上に取り出し、設定し、繋げることでフローを作成します。  作成したフローは公開（Publish）することで反映されます。 Studioの設定 93 キャンバス トリガー ウィジェットライブラリ / インスペクタパネル ウィジェット
94.  FunctionsからREST API経由でデータを受け取り、電話発信するボックスを作成します。  WIDGET LIBRARYから【 Make Outgoing Call 】をドラッグアンドドロップし、 Triggerの［ REST API ］から伸びる【 】を作られたボックスの左上に繋ぎます。  WIDGET NAMEを指定して【 Save 】をクリックします。 Studioの設定 94 WIDGET NAME： CallToUser ドラッグアンド ドロップで繋ぐ
95.  次に、相手が応答したときに、メッセージを流しキー操作を受け付けるボックスを作成します。  WIDGET LIBRARYから【 Gather Input on Call 】をドラグアンドドロップし、 CallToUserの【 Answer 】とボックスを接続します。  Configの各項目を指定して【 SAVE 】をクリックします。 Studioの設定 95 ドラッグアンド ドロップで繋ぐ WIDGET NAME：IVR TEXT TO SAY：室温が上昇してい ます。エアコンをつける場合は１、消す 場合は０を押してください SAY OR PLAY MESSAGE：Say a Message MESSAGE VOICE：Alice LANGUAGE：Japanese,Japan
96.  次に、押されたキーを判定するボックスを作成します。  WIDGET LIBRARYから【 Split Based on... 】をドラグアンドドロップし、IVRの 【 User Pressed Keys 】とボックスを接続します。  ConfigおよびTransitionsの各項目を指定して【 SAVE 】をクリックします。 Studioの設定 96 WIDGET NAME：CheckKey VARIABLE TO TEST：IVR,Digits 条件1： 条件：Equal To Value：1 条件2： 条件：Equal To Value：0
97.  次に、キー操作で［ 1 ］が押された時にFunctionsのTurnプログラムに［ switch on ］の値を渡すボックスを作成します。  WIDGET LIBRARYから【 Run Function 】をドラグアンドドロップし、CheckKeyの 【 If value equal_to 1 】とボックスを接続します。  Configの各項目を指定して【 SAVE 】をクリックします。 Studioの設定 97 WIDGET NAME：TurnOn Function URL：TURN Function Parameters： KEY：switch VALUE：on
98.  次に、キー操作で［ 0 ］が押された時にFunctionsのTurnプログラムに［ switch off ］の値を渡すボックスを作成します。  WIDGET LIBRARYから【 Run Function 】をドラグアンドドロップし、CheckKeyの 【 If value equal_to 0 】とボックスを接続します。  Configの各項目を指定して【 SAVE 】をクリックします。 Studioの設定 98 WIDGET NAME：TurnOff Function URL：TURN Function Parameters： KEY：switch VALUE：off
99.  次に、TurnOnの実行が成功した時にその旨の音声を流すボックスを作成します。  WIDGET LIBRARYから【 Say/Play 】をドラグアンドドロップし、TurnOnの 【 Success 】とボックスを接続します。  Configの各項目を指定して【 SAVE 】をクリックします。 Studioの設定 99 ドラッグアンド ドロップで繋ぐ WIDGET NAME：SayTurnOn TEXT TO SAY：エアコンをつけました SAY OR PLAY MESSAGE： Say a Message MESSAGE VOICE：Alice LANGUAGE：Japanese,Japan
100.  次に、TurnOffの実行が成功した時にその旨の音声を流すボックスを作成します。  WIDGET LIBRARYから【 Say/Play 】をドラグアンドドロップし、TurnOffの 【 Success 】とボックスを接続します。  Configの各項目を指定して【 SAVE 】をクリックします。 Studioの設定 100 ドラッグアンド ドロップで繋ぐ WIDGET NAME：SayTurnOff TEXT TO SAY：エアコンを消しました SAY OR PLAY MESSAGE： Say a Message MESSAGE VOICE：Alice LANGUAGE：Japanese,Japan
101.  全体を通して右のようなフローになれば完成です。  完成したら作成したフローを公開するため、 上部の【 Publish 】をクリックします。  Publish Flow?ダイアログが表示されるので、 【 Publish 】を再度クリックします。  これでフローが動作するようになりました。 Studioの設定 101
102.  最後に、作成したフローのSIDを確認し、callflowプログラムに設定します。  左側メニューから【 Back 】をクリックし、Flows画面に表示されている、作成したivrフロー のSID（FWから始まる値）をコピーします。 この点線で囲まれたSIDは後ほど使用します。 FunctionsへのStudioフローSID埋め込み 102 メモ情報あり
103. IVR /turn 環境変数 & パッケージ ③ 今回のハンズオンの流れ 103 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED sakura.ioの設定 プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook Functions Inbound Webhook Outbound Webhook Studio Webサービス連携 （Twilio） /callflow
104. Functionsの設定（callflow） 104  環境変数の設定が完了したら次にFunctionsでsakura.ioからのデータを元に処理を実 行するプログラムを作成します。Functions Beta内の 【 Manage 】 をクリックし、新し いプログラムを作成するために 【 】 をクリックします。
105. Functionsの設定（callflow） 105  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されている プログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
106. Functionsの設定（callflow） 106  Functions作成画面に遷移します。 FUNCTION NAME、PATHを入力し、 CODEにはサンプルの内容をコピー＆ペーストします。  26行目の【 FWから始まるStudioフローのSID 】という記載部分を 先程コピーしたSIDに入れ替え、【 SAVE 】をクリックします。 https://github.com/sakuraio/handson-sample/blob/master/twilio/part2/callflow.js CODE： コピー＆ペースト ＋31行目修正 FUNCTION NAME：callflow PATH：/callflow SID：ivrフローのSID ※104p参照
107. Functionsの設定（callflow）  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 107 https://github.com/sakuraio/handson-sample/blob/master/twilio/part2/callflow.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
108. 作成したFunctionsのPATH確認 108 • 作成したプログラムのPATH右側の【 】をクリックすると、該当URLがコピーされます。 コピーしたURLは後ほど使用します。 メモ情報あり
109. 109 sakura.ioの設定 （後編）
110. 今回のハンズオンの流れ 110 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール 各種LED プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ  現時点の設定では連携は正しく動作しません。これはsakura.io設定時に定まっていな かったTwilio側のパラメータがあり、Outgoing Webhookを作成できなかったためです。  そのため、最後にsakura.ioにて、Outgoing Webhookを作成します。 温度が閾値を超えた場合に データを送信 Webhookではデータ到達を確認 できるが、Outgoing Webhookが 未作成のため動作しない /callflowのPATHに対して データを送信するOutgoing Webhookを作成する
111. Incoming Webhook WebSocket ※動作確認用 ハンズオン キット 連携 サービス Webサービス連携 （Twilio） ③ /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ 今回のハンズオンの流れ 111 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール ② 各種LED プロジェクト モジュール sakura.ioの設定 Outgoing Webhook
112. 連携サービスの設定（Outgoing Webhook）  Outgoing（sakura.io → 外部サービス）を実現する連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 112
113. 連携サービスの設定（Outgoing Webhook）  追加サービスの選択画面に遷移します。  Outgoing Webhookを作成しますので、【 Outgoing Webhook 】をクリックします。 113
114. 連携サービスの設定（Outgoing Webhook）  Outgoing Webhookでは任意の名前とPayload URLを指定し、【 作成 】を クリックします。今回指定するPayload URLはTwilioのコントロールパネルで作成した 【 callflow 】 のPATHとなります。  Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。 114
115. 連携サービスの設定（WebSocket）  Outgoing Webhookを含む3種類の連携サービスを作成しました。 これでデバイス、sakura.io、Twilioでの準備は完了です。 115
116. 今回のハンズオンの流れ 116 マイコン （Arduino Uno） 温湿度センサ （SHT31/HDC1000） sakura.io モジュール 各種LED プロジェクト ハンズオン キット Outgoing Webhook 連携 サービス モジュール WebSocket ※動作確認用 Incoming Webhook /callflow IVR /turn Functions Inbound Webhook Outbound Webhook Studio 環境変数 & パッケージ 温度が閾値を超えた場合に データを送信 Outgoing Webhookにより、 リアルタイムで連携 /callflowからivrフローを呼出 受信したJSONデータを 元に自動応答での架電を実行 moduleで指定された モジュールにデータを転送 JSONは電気信号に変換され 定義したLEDの操作を実行 ivrフローから/turnを実行 受電した電話上でのキー操作 に基づきJSONデータを送信  以上で設定は完了です。温度センサを指で押さえ、指定した値に達することでデータを送 信すること、それを元に自動的な架電が発生すること、キー操作に応じてLEDが制御され ること、までを確認しましょう。
117. 117 最後に
118. 最後に ～sakura.io～  ハンズオンに使用したsakura.ioモジュールは必要に応じて登録を解除します。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で対象のモジュールの【 】を クリックします。 118
119. 最後に ～sakura.io～  モジュールの設定画面に遷移します。下部の 【 登録解除 】 ボタンをクリックします。 119
120. 最後に ～sakura.io～  登録解除実行を確認されます。問題ない場合は再度 【 登録解除 】 をクリックします。 モジュールの削除には数秒かかります。  削除が完了すると、プロジェクトから該当モジュールの表示が消えていることを確認できます。 120
121. 最後に ～sakura.io～  次は連携サービスとともにプロジェクトを削除します。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 削除 】をクリックします。 121
122. 最後に ～sakura.io～  削除実行を確認されます。問題ない場合は再度 【 削除 】 をクリックします。  削除が完了すると、コントロールパネル上から該当プロジェクトの表示が消えていることを確 認できます。 122
123. 最後に ～Twilio～  設定したFunctionsのプログラムを開き、最下部の【 Delete this Function 】をクリッ クします。その後、削除の確認をされるため、【 Yes 】をクリックすると該当プログラムが削除 されます。 123
124. 最後に ～Twilio～  購入した電話番号の維持には月額費用がかかります。返却する場合は ［ Phone Numbers ］から［ アクティブな電話番号 ］を開き、最下部の 【 この電話番号をリリースする 】をクリックします。その後、返却の確認がされるため、 【 番号をリリースする 】をクリックすると該当番号が返却されます。 124
125. 最後に 125 以上でハンズオンにおける作業は全て終了となります。 お疲れ様でした！
126. 最後に 126 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間（部員）を募集しています。 （テーマはIoTに限らずクラウドやVPS、スタートアップ系ネタもOK！） ご興味があれば、Come and join us & Feel free to contact me! 連絡先 ： sakura-club@sakura.ad.jp さくらクラブ ： http://www.slideshare.net/MasayaHayashi/lt20151224
127. 127 そこに、さくら