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

コミュニケーションAPI Twilio & sakura.io体験ハンズオン株式会社KDDIウェブコミュニケーションズ共催 Part2 Twilio Studioを使ってみよう 2018/7/2
(C) Copyright 1996-2018 SAKURA Internet Inc. さくらインターネット株式会社 IoTチーム西田有騎

2 はじめに

ハンズオンを円滑に進めるために  本資料の内容はいくつかの外部サービスやサイトを併用しながら作業を行います。  そのため、本資料のPDFファイルをローカル環境にダウンロードいただき、記載されている URLを活用いただくことを推奨します。 SpeakerDeckからでは直接URLにアクセスすることができません。 3 sakura.io紹介資料 http://bit.ly/sakuraio-introduction
ハンズオン資料 http://bit.ly/sakuraio-handson-twilio-part2-01

ハンズオンを円滑に進めるために 4 ココ!!

本ハンズオンの目的とお願い  本ハンズオンは sakura.io を使用し、組込み、Web/アプリ開発、それぞれのスキルセットを大きく超えることなく、Internet of Things(IoT) に携わることができることをご体験いただくものです。
 特に、本編ではコミュニケーションAPIサービスであるTwilio（トゥイリオ）と連携した簡易的なサービス構築を通じて、Web・アプリケーションの技術を用いた「IoTシステム」の構築イメージを掴んでいただくことを目的としています。  本編で構築される内容は概ねPart1と同一です。Twilio Functionsによるコードを中心としたプログラミングが苦手な利用者を想定し、コアとなる自動音声応答部分をビジュアルプログラミングツールであるTwilio Studioで実装の違いも体験いただきます。  そのため、組み込み系またはWeb/アプリ系のどちらか、または両方わからないという方にも、多くご参加いただける内容になっています。  今回は1人に1つのキットをご用意しています。もしもご自身の知識分野で、近くの方のフォローができそうだなと思われましたら、積極的にサポートしあって進めていただければと思います。 5

本ハンズオンで使用するツール・機材・参考情報まとめ ▪本編▪ ・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

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 環境変数 & パッケージ

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 sakura.ioの設定

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セット設定可能連携サービスプロジェクトに対して複数作成可能

さくらインターネット会員ID作成  会員IDをお持ちでない場合はご契約のサービスがない場合でも、さくらインターネット会員登録から作成いただけます  会員登録が完了すると、指定したメールアドレスに [email protected]
より会員IDが記載されたメールが送信されます。会員IDおよびパスワードは重要な情報となりますので、漏れないよう大事に保管ください。 12 Title：会員登録完了のお知らせ [XXX00000] ─────────────────────────────────── このメッセージはさくらインターネット会員登録フォームより自動送信されています。このメールに心当たりのない場合は [email protected]までご連絡ください。 ─────────────────────────────────── さくらインターネット株式会社様 (ご担当者: さくら太郎様) この度は、さくらインターネットに会員登録いただきまして誠にありがとうございます。以下の通り会員登録を受付ましたので、ご連絡させていただきます。 ============================================ ◎ 会員登録情報会員ID ： XXX00000 ご契約者名：さくらインターネット株式会社様 (ご担当者: さくら太郎様) 電子メール： [email protected] ============================================ ～～～以下省略～～～ https://secure.sakura.ad.jp/signup3/member-register/input.html

sakura.io コントロールパネルログイン  sakura.ioコントロールパネルにログインします。上記URLに直接アクセスするか、サービスサイト（ https://sakura.io/ ）にアクセスし、右上の【ログイン】をクリックします。
13 https://secure.sakura.ad.jp/iot/

コントロールパネルへのログイン  ログイン済みのセッションがない場合、以下の画面で会員認証を求められます。  会員ID、パスワードを利用してログインします。 14

約款への同意  初めてコントロールパネルにログインすると、各種約款への同意を求められます。  内容をご確認のうえ、［同意する］をクリックするとコントロールパネルにアクセスできます。 15

コントロールパネルへのログイン  ログインが成功すると、以下のような画面に誘導されます。  何も作成されていない、もしくはデフォルトプロジェクトが作成されている状態になります。 16

プロジェクトの作成  初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。  プロジェクトを作成するには、まず［プロジェクト追加］をクリックします。 17

プロジェクトの作成  新規プロジェクトの作成画面に遷移します。  ［名称］欄に任意の名前を入力し、【追加】をクリックします。ハンズオンでは他の参加者と重複しないよう、名前等の判別可能な情報を入れて作成してください
18

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

sakura.io モジュールの取り出し  sakura.io モジュール【だけ】を箱から取り出します 21 sakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3

モジュール登録  モジュールの追加画面に遷移します。自身のプロジェクトが選択されていることを確認のうえ、モジュール記載の登録用ID、登録用パスワードおよび任意の名称を入力して、【追加】をクリックします。モジュールの登録実行には数秒かかります。 22 モジュール上面
白ラベル表記

モジュール登録  モジュールの追加に成功すると［モジュールを追加しました］ダイアログが表示されます。  ［ホームへ戻る］ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されているモジュールを追加しようとした場合は
内容とともに［モジュールの追加に失敗しました］というダイアログが表示されます。 23 登録が成功した場合登録が失敗した場合登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください別の会員IDで登録されています、過去登録した会員IDでログインし解除ください

モジュール登録  モジュールを登録しました。表示されているモジュールIDは一意のものであり、届いたデータの送信元判別や、デバイスへのデータ送信の際に使用します。この点線で囲まれたモジュールIDは後ほど使用します。 24 メモ情報あり

ハンズオンキット 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

連携サービスの設定（Incoming Webhook）  Incoming（外部サービス → sakura.io）を実現する連携サービスを設定します。プロジェクトの【詳細】から、プロジェクト詳細画面で【連携サービス
】をクリックし、その後【サービス追加】をクリックします。 26

連携サービスの設定（Incoming Webhook）  追加サービスの選択画面に遷移します。  Incoming Webhookを作成しますので、【 Incoming Webhook 】をクリックします。
27

連携サービスの設定（Incoming Webhook）  Incoming Webhookでは任意の名前を指定し、【作成】をクリックします。  Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。 28

連携サービスの設定（Incoming Webhook）  プロジェクトの詳細から作成したIncoming Webhookの【】をクリックし、生成されたURLを確認します。この点線で囲まれたURLは後ほど使用します。 29 メモ情報あり

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 ※動作確認用

連携サービスの設定（WebSocket）  デバイスからのデータ到達の確認にも使える連携サービスを設定します。プロジェクトの【詳細】から、プロジェクト詳細画面で【連携サービス】をクリックし、その後【サービス追加
】をクリックします。 31

連携サービスの設定（WebSocket）  追加サービスの選択画面に遷移します。  今回はWebSocketを作成しますので、【 WebSocket 】をクリックします。 32

連携サービスの設定（WebSocket）  WebSocketの作成には特に設定事項はありません。  ［名前］欄に任意の名前を入力し、【作成】をクリックします。 33

連携サービスの設定  Incoming WebhookとWebSocketを作成しました。  Outgoing Webhookは後ほどTwilio側のPATHが決まったら作成します。 34

35 マイコンおよびプログラム構築

今回のワークショップでご提供するもの 37 ジャンパーコード sakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3 USB2.0 ケーブル（A-B） 12W級
9V-1.3A ACアダプタブレッドボード人感センサ（SB412A）照度センサ（GL5537-2）温湿度センサ（HDC1000 or SHT31）各種抵抗 ※必要に応じてご提供タクトスイッチ ※必要に応じてご提供抵抗入りLED ※必要に応じてご提供本日は使用しません

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

Arduino IDEのセットアップ  該当の金額を選択するか(寄付する場合）、【 JUST DOWNLOAD 】からダウンロードします。 39

Arduino IDEのセットアップ  インストールはデフォルト推奨、ドライバーについても全てインストールします。 ※本スライド記載の画像はWindowsの場合です。 40

sakura.ioモジュールの取り付け  ArduinoシールドをArduino Unoのピン穴と合致するようにはめ込みます。 ※ハンズオンでは接続済み  Arduino IDEを起動したら、Arduino UnoにACアダプタとUSBケーブルを図のように接続します。
41 コンセントへパソコンへ（USB Type-A）

Arduino IDEのセットアップ  上部メニューバーからボードと、シリアルポートを設定します。ボード:［ツール］→［ボード:”XXX” ］から【 Arduino/Genuino
Uno 】を選択シリアルポート:［ツール］→［シリアルポート］から【 COMx (Arduino/Genuino Uno) 】を選択 Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択  うまく認識しない場合は、USBを挿し直し、Arduino IDEを再起動を試してください。 42 ボードの選択シリアルポートの選択

マイコン（Arduino）の準備  ［ファイル］→［スケッチ例］→［ 01.Basics ］→［ Blink
］を選択し、Blink スケッチを表示します。  【】をクリックしてスケッチを書き込み、該当のLEDが点滅状態になることを確認します。何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 43

ライブラリの取得（SakuraIO）  ［スケッチ］→［ライブラリをインクルード］→［ライブラリを管理... ］をクリックし、右上検索窓から【
sakuraio 】を検索すると、［ SakuraIO by SAKURA Internet Inc. ］がヒットします。  最新のVer.を選択のうえ【インストール】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示されます。 44

ライブラリの取得（温湿度センサ-HDC1000利用の場合）  ［スケッチ］→［ライブラリをインクルード］→［ライブラリを管理... ］をクリックし、検索窓から【
hdc1000 】を検索すると、［ HDC1000 by Yuichi Tateno ］がヒットします。  【インストール】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示されます。 45 ※本作業はセンサにHDC1000を利用している場合のみ実施します。

ライブラリの取得（温湿度センサ-SHT31利用の場合）  ［スケッチ］→［ライブラリをインクルード］→［ライブラリを管理... ］をクリックし、検索窓から【
SHT31 】を検索すると、［ Adafruit SHT31 Library ］がヒットします。  【インストール】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示されます。 46 ※本作業はセンサにSHT31を利用している場合のみ実施します。

FirmwareUpdate.ino  ［ファイル］→［スケッチ例］→［ SakuraIO ］→［ FirmwareUpdate
］を選択し、【】クリックでスケッチを書き込みます。［ツール］→［シリアルモニタ］もしくは【】クリックでアップデート状況を確認します。  現在のVersion情報と比較し、新しいファームウェアが提供されている場合はアップデートを実行します。 47 ※PCからの給電が不安定/不足している場合は［ Update Failure ］と表示され、アップデートに失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。新しいファームウェアが存在する場合最新のファームウェアが適用されている場合

sakura.ioモジュールの取り外し  マイコンとセンサー間を配線するため、Arduino Unoから、ACアダプタと、USBケーブルを取り外します。 48 コンセントへパソコンへ（USB Type-A）

ブレッドボードについて  ブレッドボードは場所によって接続されている場所が異なります。  下図の繋がっている部分を意識しながら配線します。 49 水平方向に繋がっている主に各センサーに対する電源系統の接続に利用垂直方向に繋がっている
主に各センサーの配置やセンサーの信号系統の接続に利用

温湿度センサ（HDC1000/SHT31）について  温湿度センサモジュールはそれぞれ繋ぐべき端子が決まっています。  少し見えにくいですが、センサ本体が実装されている面を裏返すと、各ピンに接続すべき端子が明記されています。 50 ピンアサインが記載温湿度センサ表面
裏面

LEDについて  LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が陽極（アノード）と呼ばれ、デジタルの端子に接続します。逆に足の短い方は陰極（カソード）と呼ばれ、GND側の端子に接続します。  今回使用するLEDは抵抗を内蔵しているため、別途抵抗を挟む必要はありません。 51 陽極（アノード）デジタル端子に接続
陰極（カソード） GND端子に接続

温湿度センサ（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を利用している場合のみ実施します。

sakura.ioモジュールの取り付け  配線が終わったら、ACアダプタとUSBケーブルを再度接続します。  Arduino IDEを起動し、Arduino UnoにACアダプタとUSBケーブルを図のように接続します。 53 コンセントへ
パソコンへ（USB Type-A）

試験用プログラムの流し込み（温湿度センサ-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 】でコピーします

試験用プログラムの流し込み（温湿度センサ-HDC1000利用の場合）  ［ファイル］→［新規ファイル］で新しいスケッチを表示し、URLの内容をコピー＆ペーストし、【】をクリックしてスケッチを書き込みます。 
［ツール］→［シリアルモニタ］もしくは【】クリックでシリアル値とTemp情報、送信キュー情報が取得できることと、温度が30度を超えるとモニタ上に［ * Sent to sakura.io * ］と表示されることを確認します。 55 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino

試験用プログラムの流し込み（温湿度センサ-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 】でコピーします

試験用プログラムの流し込み（温湿度センサ-SHT31利用の場合）  ［ファイル］→［新規ファイル］で新しいスケッチを表示し、URLの内容をコピー＆ペーストし、【】をクリックしてスケッチを書き込みます。 
［ツール］→［シリアルモニタ］もしくは【】クリックでTemp情報とシリアル値、送信キュー情報が取得できることと、温度が30度を超えるとモニタ上に［ * Sent to sakura.io * ］と表示されることを確認します。 57 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino

【参考】デバイスから送信されたデータの確認  sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信されたデータを受信できているかを確認できます。  プロジェクトの詳細から作成したWebSocketの【】をクリックします。 58

【参考】デバイスから送信されたデータの確認  サービス連携の編集画面下部に、デバイスから送信したデータがリアルタイム表示されます。  簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 59 モジュール：データを送信したモジュールのID チャンネル：
データが格納されたチャンネル番号時刻：データがモジュールのキューに格納された時刻のタイムスタンプ値：送信された値型：データの型式

【参考】デバイスから送信されたデータの確認  ［詳細表示モードに切り替え］をクリックすると詳細表示モードに遷移します。  モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 60 タイプ：プラットフォームからの内容に応じて、
いくつかの種類に分かれる・channels ：モジュールからのデータ・connection ：接続の開始/終了・location ：簡易位置情報・keepalive ：WebSocketセッション確認ペイロード：受け取ったデータのpayload部が表示時刻：詳細表示モードではプラットフォームで該当のメッセージを受け取ったタイムスタンプチャンネルごとの最終到着データ：各チャンネルに届いた最終の Valueを表示

61 Webサービス連携 (Twilio)

【参考】アカウントの作成 63  Twilioのログイン用アカウントがない場合は、サービスサイトより【サインアップ】をクリックすることでアカウント作成の画面に進むことができます。 https://twilio.kddi-web.com/

【参考】アカウントの作成 64  初めに利用規約およびプライバシーポリシーへの同意を求められます。  内容を確認し、問題なければいずれのチェックボックスにもチェックを入れたうえで、【同意してサインアップ】をクリックします。

【参考】アカウントの作成 65  情報入力画面に遷移します。必要な事項を入力し【はじめる】をクリックします。  その後指定した番号にSMSを受け、認証の4桁の番号を入力することでTwilio
にアクセス、および利用することができるようになります。

作成したアカウントでのログイン 66  既に登録している場合、コントロールパネルにログインします。  Emailの項目に登録したメールアドレスを入力し、【次】をクリックします。 https://jp.twilio.com/login/kddi-web

作成したアカウントでのログイン 67  次の画面ではパスワードが求められます。登録したパスワードを入力し、［二要素認証を有効にする］にはチェックを入れず、【ログイン】をクリックします。

作成したアカウントでのログイン 68  ログインが成功すると以下のような画面が表示されます。  ログイン時はマスターアカウントという権限でログインされていますが、ハンズオンではその中に作成されたサブアカウントを使って行います。

サブアカウントの設定 69  サブアカウントを利用する場合ログインしたマスターアカウントから切り替える必要があります。  ダッシュボード右上の【】をクリックし、【
Subaccounts 】をクリックします。

サブアカウントの設定 70  サブアカウント画面で任意のサブアカウントの右側にある【サブアカウントを表示】をクリックするとサブアカウントごとに区切られた管理画面に遷移します。

サブアカウントの設定 71  サブアカウントへの切り替えが成功すると以下のような画面が表示されます。  表示は大きく変わりませんが、サブアカウントごとの電話番号やアプリケーション設定を分割して利用する場合に活用します。

サブアカウントの設定 72  Twilioから架電するために必要となる電話番号を購入します。  ログイン後のダッシュボード画面から、左側ペインの【】をクリックします。

電話番号の購入 73  表示されたメニューから、【 Phone Number 】から【番号を購入】をクリックします。

電話番号の購入 74  ［番号を購入］画面が表示されますので、国のプルダウンより【 Japan (+81)
】を選択し、【検索】をクリックします。

電話番号の購入 75  日本で使用可能な番号一覧が表示されます。TYPEが［ローカル］となっている月額が［
¥108 ］のものの中から任意の番号を選び、右側にある【購入】をクリックします。

電話番号の購入 76  購入の内容が再度表示されますので、問題なければ【この番号を購入する。】をクリックします。

電話番号の購入 77  購入に成功した旨の表示がされますので、【閉じる】をクリックします。この点線で囲まれた電話番号は後ほど使用します。メモ情報あり

電話番号の購入 78 電話番号の表記方法（E.164形式）について Twilioは、世界100カ国と接続されていて、それぞれの国に直接電話をかけることができます。そのため、発信・着信の電話番号は、全世界で利用可能な「E.164形式」と呼ばれる表記方法を使います。 E.164形式とは、先頭が+から始まる国番号と電話番号の組み合わせです。例えば、日本は国番号が+81となっており、その後の電話番号を続けて記述します。 ※電話番号の先頭の0は削除します。「09012345678」は、E.164形式だと「+819012345678」となります。 
購入された番号は［番号の管理］画面で改めて確認することができます。

③ 今回のハンズオンの流れ 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）

Functionsの設定 80  次に、取得した番号を用いてFunctionsの設定を行います。【】から、［ Runtime ］ → ［
Functions Beta ］を選択します。

Functionsの設定 81  FunctionsのManage画面に遷移します。事前にプログラムに使用する環境変数を設定するため、【 Configure 】をクリックします。

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形式）

 ［ Dependencies ］欄では以降のプログラムで使用（require）するNPMパッケージを指定します。今回はデフォルトのtwilioパッケージのVer.変更に加えて、gotパッケージを指定する必要があるため、【】をクリックし、以下の項目を変更および追加します。 
そのまま最下部の【 Save 】をクリックすると設定内容が保存されます。 Functionsの設定 83 NAME：got / VERSION：6.7.1 VERSION：3.17.1

環境変数 & パッケージ ③ 今回のハンズオンの流れ 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

Functionsの設定（turn） 85  次に、Functionsでoutboundcallプログラムから呼び出され、電話への架電を実行するプログラムを作成します。Functions Beta内の【 Manage 】をクリックし、新しいプログ
ラムを作成するために【】をクリックします。

Functionsの設定（turn） 86  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されているプログラムを使用しますので、【 Blank 】を選択のうえ、【
Create 】をクリックします。

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

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 】でコピーします

/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

 次に、IVR部分のフローをStudioで作成しますの設定を行います。【】から、［ Studio ］ → ［ Create a
flow ］をクリックします。 Studioの設定 90

 New Flowダイアログが表示されます。［ FLOW NAME ］には任意の名前を入力のうえ、【 NEXT 】をクリックします。 
画面が切り替わり、テンプレートの選択を求められます。こちらではデフォルトの［ Start from scratch ］が選択されていることを確認し、【 NEXT 】をクリックします。 Studioの設定 91

 フローが作成されました。以降はこのエディター画面を使いフローを作成していきます。 Studioの設定 92

 各用語は以下のようになります。トリガーを起点とし必要な機能をウィジェットライブラリからキャンバス上に取り出し、設定し、繋げることでフローを作成します。  作成したフローは公開（Publish）することで反映されます。 Studioの設定 93 キャンバストリガーウィジェットライブラリ
/ インスペクタパネルウィジェット

 FunctionsからREST API経由でデータを受け取り、電話発信するボックスを作成します。  WIDGET LIBRARYから【 Make Outgoing Call 】をドラッグアンドドロップし、
Triggerの［ REST API ］から伸びる【】を作られたボックスの左上に繋ぎます。  WIDGET NAMEを指定して【 Save 】をクリックします。 Studioの設定 94 WIDGET NAME： CallToUser ドラッグアンドドロップで繋ぐ

 次に、相手が応答したときに、メッセージを流しキー操作を受け付けるボックスを作成します。  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

 次に、押されたキーを判定するボックスを作成します。  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

 次に、キー操作で［ 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

 次に、キー操作で［ 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

 次に、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

 次に、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

 全体を通して右のようなフローになれば完成です。  完成したら作成したフローを公開するため、上部の【 Publish 】をクリックします。  Publish Flow?ダイアログが表示されるので、
【 Publish 】を再度クリックします。  これでフローが動作するようになりました。 Studioの設定 101

 最後に、作成したフローのSIDを確認し、callflowプログラムに設定します。  左側メニューから【 Back 】をクリックし、Flows画面に表示されている、作成したivrフローのSID（FWから始まる値）をコピーします。この点線で囲まれたSIDは後ほど使用します。 FunctionsへのStudioフローSID埋め込み 102
メモ情報あり

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

Functionsの設定（callflow） 104  環境変数の設定が完了したら次にFunctionsでsakura.ioからのデータを元に処理を実行するプログラムを作成します。Functions Beta内の【 Manage 】をクリックし、新し
いプログラムを作成するために【】をクリックします。

Functionsの設定（callflow） 105  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されているプログラムを使用しますので、【 Blank 】を選択のうえ、【
Create 】をクリックします。

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参照

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 】でコピーします

作成したFunctionsのPATH確認 108 • 作成したプログラムのPATH右側の【】をクリックすると、該当URLがコピーされます。コピーしたURLは後ほど使用します。メモ情報あり

109 sakura.ioの設定（後編）

今回のハンズオンの流れ 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を作成する

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

連携サービスの設定（Outgoing Webhook）  Outgoing（sakura.io → 外部サービス）を実現する連携サービスを設定します。プロジェクトの【詳細】から、プロジェクト詳細画面で【連携サービス
】をクリックし、その後【サービス追加】をクリックします。 112

連携サービスの設定（Outgoing Webhook）  追加サービスの選択画面に遷移します。  Outgoing Webhookを作成しますので、【 Outgoing Webhook 】をクリックします。
113

連携サービスの設定（Outgoing Webhook）  Outgoing Webhookでは任意の名前とPayload URLを指定し、【作成】をクリックします。今回指定するPayload URLはTwilioのコントロールパネルで作成した
【 callflow 】のPATHとなります。  Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。 114

連携サービスの設定（WebSocket）  Outgoing Webhookを含む3種類の連携サービスを作成しました。これでデバイス、sakura.io、Twilioでの準備は完了です。 115

今回のハンズオンの流れ 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 最後に

最後に～sakura.io～  ハンズオンに使用したsakura.ioモジュールは必要に応じて登録を解除します。  プロジェクトの【詳細】から、プロジェクト詳細画面で対象のモジュールの【】をクリックします。
118

最後に～sakura.io～  モジュールの設定画面に遷移します。下部の【登録解除】ボタンをクリックします。 119

最後に～sakura.io～  登録解除実行を確認されます。問題ない場合は再度【登録解除】をクリックします。モジュールの削除には数秒かかります。 
削除が完了すると、プロジェクトから該当モジュールの表示が消えていることを確認できます。 120

最後に～sakura.io～  次は連携サービスとともにプロジェクトを削除します。  プロジェクトの【詳細】から、プロジェクト詳細画面で【削除】をクリックします。
121

最後に～sakura.io～  削除実行を確認されます。問題ない場合は再度【削除】をクリックします。  削除が完了すると、コントロールパネル上から該当プロジェクトの表示が消えていることを確
認できます。 122

最後に～Twilio～  設定したFunctionsのプログラムを開き、最下部の【 Delete this Function 】をクリックします。その後、削除の確認をされるため、【 Yes
】をクリックすると該当プログラムが削除されます。 123

最後に～Twilio～  購入した電話番号の維持には月額費用がかかります。返却する場合は［ Phone Numbers ］から［アクティブな電話番号］を開き、最下部の
【この電話番号をリリースする】をクリックします。その後、返却の確認がされるため、【番号をリリースする】をクリックすると該当番号が返却されます。 124

最後に 125 以上でハンズオンにおける作業は全て終了となります。お疲れ様でした！

最後に 126 さくらインターネットでは、「さくらクラブ」としてハンズオン等のイベントをともに開催いただける仲間（部員）を募集しています。（テーマはIoTに限らずクラウドやVPS、スタートアップ系ネタもOK！）ご興味があれば、Come and join us &
Feel free to contact me! 連絡先： [email protected] さくらクラブ： http://www.slideshare.net/MasayaHayashi/lt20151224

127 そこに、さくら

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

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

More Decks by さくらインターネット（IoTプラットフォーム事業）

Other Decks in Technology

Featured

Transcript