Transcript
Page 1: sakura.io handson with twilio 20180123

クラウド電話API Twilio& sakura.io体験ハンズオン株式会社KDDIウェブコミュニケーションズ共催

2018/1/23

(C) Copyright 1996-2017 SAKURA Internet Inc

さくらインターネット株式会社 IoT Platform Team 西田有騎

Page 2: sakura.io handson with twilio 20180123

3

はじめに

Page 3: sakura.io handson with twilio 20180123

本ワークショップの目的

4

1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよびWeb/アプリ開発系のエンジニアがご自身のスキルセットを大きく超えることなく、Internet of Things(IoT)に挑戦できることを体験いただくものです。

2. そのため各章内で技術的な詳細は極力省略しております。

3. 今回は1人1つワークショップキットをご用意しておりますが、組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、ご不明点を積極的にフォローしあって進めていただければと思います。

Page 4: sakura.io handson with twilio 20180123

本内容で使用するツール、機材、参考情報まとめ

sakura.ioコントロールパネル

https://secure.sakura.ad.jp/iot/

Arduino

https://www.arduino.cc/en/Main/Software

Arduinoサンプル用スケッチ(basic-HDC1000-with-LED.ino)

・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

5

Page 5: sakura.io handson with twilio 20180123

本内容で使用するツール、機材、参考情報まとめ

[参考]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/

6

Page 6: sakura.io handson with twilio 20180123

今回のハンズオンの流れ

10

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

Webサービス連携(Twilio)

マイコン(Arduino Uno)

温湿度センサ(SHT31/HDC1000)

さくらの通信モジュール

sakura.ioの設定

① ③②

outboundCall

IVR

Turn

Functions

outboundwebhook

inboundwebhook

Page 7: sakura.io handson with twilio 20180123

Agenda

11

1. sakura.ioの設定₋ プロジェクトの作成

₋ モジュールの登録

₋ 連携サービスの設定

2. マイコンおよびプログラムの構築₋ マイコン(Arduino)による開発環境の準備

₋ 温湿度センサおよびモジュールの繋ぎ込み

₋ 試験用プログラムの流し込み

₋ 【参考】デバイスから送信されたデータの確認

3. Webへのデータ連携(Twilio)₋ 電話番号の購入、環境変数の設定

₋ Functionsによるsakura.io Outgoing Webhook受信用プログラム(outboundCall)の作成

₋ Functionsによるキー応答用プログラム(IVR)の作成

₋ Functionsによるsakura.io Incoming Webhook送信用プログラム(turn)の作成

Page 8: sakura.io handson with twilio 20180123

12

sakura.ioの設定

Page 9: sakura.io handson with twilio 20180123

今回のハンズオンの流れ

13

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

Webサービス連携(Twilio)

マイコン(Arduino Uno)

温湿度センサ(SHT31/HDC1000)

さくらの通信モジュール

sakura.ioの設定

① ③②

outboundCall

IVR

Turn

Functions

outboundwebhook

inboundwebhook

Page 10: sakura.io handson with twilio 20180123

sakura.io コントロールパネルログイン

14

sakura.io コントロールパネル( https://secure.sakura.ad.jp/iot/ )にログインします。Google等でsakura.ioサイト( https://sakura.io/ )にアクセスし、右上の「ログイン」をクリックします。

Page 11: sakura.io handson with twilio 20180123

コントロールパネルへのログイン

15

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

Page 12: sakura.io handson with twilio 20180123

【参考】会員IDの作成

16

会員IDをお持ちでない場合はご契約のサービスがない場合でも、さくらインターネット会員登録( https://secure.sakura.ad.jp/signup3/member-register/input.html )から作成いただくことができます。会員登録が正常に完了すると、メールアドレスで指定したアドレスに [email protected]より以下のようなメールが送信されます。会員IDおよびパスワードは重要な情報となりますので、漏れないよう、大事に保管ください。

Title:会員登録完了のお知らせ [XXX00000]

───────────────────────────────────このメッセージはさくらインターネット会員登録フォームより自動送信されています。このメールに心当たりのない場合は[email protected]までご連絡ください。

───────────────────────────────────

さくらインターネット株式会社様 (ご担当者: さくら太郎様)

この度は、さくらインターネットに会員登録いただきまして誠にありがとうございます。以下の通り会員登録を受付ましたので、ご連絡させていただきます。

=============================================================◎会員登録情報

会員ID : XXX00000ご契約者名 : さくらインターネット株式会社様 (ご担当者: さくら太郎様)電子メール : [email protected]

=============================================================

~~~以下省略~~~

Page 13: sakura.io handson with twilio 20180123

プロジェクトCプロジェクトB

sakura.ioコントロールパネルにおける考え方

18

sakura.ioでは【プロジェクト】という単位で大枠を構成し、プロジェクト内に複数の【モジュール】、【連携サービス】を紐付けていきます。 【データストア】や簡易位置情報、ファイル配信といった【オプションサービス】はプロジェクトに対して一つもしくは1セット設定することができます。

プロジェクトA

モジュール1uAAAAAAAAAA

モジュール2uBBBBBBBBBB

モジュール3uCCCCCCCCCC

データストアLight/Standard/…

簡易位置情報ON/OFF

連携サービス1WebSocket

連携サービス2Outgoing Webhook

ファイル配信File1/File2/…

連携サービス3AWS IoT

プロジェクトに対して複数紐付け可能

プロジェクトに対して単一(1セット)設定可能

プロジェクトに対して複数紐付け可能

Page 14: sakura.io handson with twilio 20180123

約款への同意

19

初めてコントロールパネルにログインした場合、各種約款への同意を求められます。内容をご確認いただいたうえで、 【✓同意する 】をクリックするとコントロールパネルにアクセスできます。

Page 15: sakura.io handson with twilio 20180123

プロジェクトの作成

20

初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。まずプロジェクトを作成するため、 【+新規プロジェクト 】 をクリックします。

Page 16: sakura.io handson with twilio 20180123

プロジェクトの作成

21

新規プロジェクトの作成画面に遷移します。[名称 ]欄に任意の名前を入力し、 【追加 】をクリックします。

Page 17: sakura.io handson with twilio 20180123

モジュールの登録

22

プロジェクトが作成されました。次にモジュールの登録を行います。【 モジュール登録】のボタンをクリックします。

Page 18: sakura.io handson with twilio 20180123

モジュールの登録

23

モジュールの追加画面に遷移します。指定したプロジェクトが選択されていることを確認のうえ、[登録用ID ]、 [登録用パスワード] 、および[名称 ]を入力して、 【追加 】ボタンをクリックします。

Page 19: sakura.io handson with twilio 20180123

モジュールの登録

24

モジュールの追加に成功すると [モジュールを追加しました ] というダイアログが表示されます。【 ホームへ戻る】ボタンをクリックしてホームに戻ります。ID/PASSが正しくない、もしくは既に登録されているモジュールを追加しようとした場合は内容とともに[モジュールの追加に失敗しました] というダイアログが表示されます。

登録が成功した場合 登録が失敗した場合

登録用ID /登録用パスワードのいずれかに誤りがあります、再度ご確認ください

別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください

Page 20: sakura.io handson with twilio 20180123

連携サービスの設定

25

モジュールが登録されました。表示されているモジュールIDは一意のものであり、デバイスへのデータ送信の際に使用しますので、控えておきます。最後に外部への連携サービスを設定します。 【+サービス追加】のボタンをクリックします。

Page 21: sakura.io handson with twilio 20180123

連携サービスの設定(Incoming Webhook)

26

追加サービスの選択画面に遷移します。Twilioから制御信号を受け取る Incoming Webhookを作成するため、 【 Incoming Webhook 】 をクリックします。

Page 22: sakura.io handson with twilio 20180123

連携サービスの設定(Incoming Webhook)

27

[名前 ]欄に任意の名前を入力し、 【作成 】をクリックします。[ Secret ] 欄はセキュリティをより強固にする場合に使用しますが、今回は設定いたしません。

Page 23: sakura.io handson with twilio 20180123

連携サービスの設定(Incoming Webhook)

28

コントロールパネルトップ画面から作成したサービスにアクセスすると生成されたURLを確認します。このURLは後で使用いたしますので、控えておきます。

Page 24: sakura.io handson with twilio 20180123

連携サービスの設定(WebSocket)

29

デバイスからデータが送付されているか確認するため、WebSocketも作成します。【WebSocket 】 をクリックします。

Page 25: sakura.io handson with twilio 20180123

連携サービスの設定(WebSocket)

30

WebSocketの作成には特に設定事項はありません。[名前 ]欄に任意の名前を入力し、 【作成 】ボタンをクリックします。

Page 26: sakura.io handson with twilio 20180123

連携サービスの設定

31

連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。該当のプロジェクトにて作成された名称の連携サービスをクリックします。

Page 27: sakura.io handson with twilio 20180123

連携サービスの設定(WebSocket)

32

WebSocketを設定しました、これでコントロールパネルでの準備は完了です。

Page 28: sakura.io handson with twilio 20180123

33

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

Page 29: sakura.io handson with twilio 20180123

今回のハンズオンの流れ

34

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

Webサービス連携(Twilio)

マイコン(Arduino Uno)

温湿度センサ(SHT31/HDC1000)

さくらの通信モジュール

sakura.ioの設定

① ③②

outboundCall

IVR

Turn

Functions

outboundwebhook

inboundwebhook

Page 30: sakura.io handson with twilio 20180123

今回のハンズオンでご提供するもの

35

ジャンパーコードsakura.ioモジュール(アンテナ付)

+Arduino用シールド&Arduino Uno Rev3

USB2.0

ケーブル(A-B)

12W級 9V-1.3A

DCアダプタ

ブレッドボード

人感センサ

(SB412A)

照度センサ

(GL5537-2)

温湿度センサ

(HDC1000 or SHT31)

各種抵抗※必要に応じてご提供

タクトスイッチ※必要に応じてご提供

抵抗入りLED※必要に応じてご提供

本日は使用しません

Page 31: sakura.io handson with twilio 20180123

Arduino IDEのセットアップ

36

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 】 を選択します。

Page 32: sakura.io handson with twilio 20180123

Arduino IDEのセットアップ

37

該当の金額を選択するか(寄付する場合)、もしくは 【 JUST DOWNLOAD 】 にてダウンロードします。

Page 33: sakura.io handson with twilio 20180123

Arduino IDEのセットアップ

38

インストールはデフォルト推奨、ドライバーについても全てインストールします。#本スライド記載の画像はWindowsの場合になります。

Page 34: sakura.io handson with twilio 20180123

Arduino IDEのセットアップ

39

Arduino IDEが起動したら、Arduino本体をPCに接続します。上部メニューバーから以下2つを設定します。ボード: [ツール ]→ [ボード:”XXX” ]から 【 Arduino/Genuino Uno 】 を選択します。シリアルポート: [ ツール ]→ [ シリアルポート ]から 【 COMx(Arduino/Genuino Uno) 】 となるものを選択します。Mac環境の場合はCOMポートではなく、 【 /dev/~~~(Arduino/Genuino Uno) 】 となるものを選択します。

ボードの選択 シリアルポートの選択

Page 35: sakura.io handson with twilio 20180123

マイコン(Arduino)の準備

40

[ ファイル ]→ [ スケッチ例]→ [ 01.Basics ]→ [ Blink ] を選択し、Blinkスケッチを表示します。をクリックしてスケッチをマイコンに書き込み、該当箇所のLEDが点滅状態になることを確認します。

何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。

Page 36: sakura.io handson with twilio 20180123

モジュールの取り付け

41

ArduinoをPCから外し、図に示すようにシールドとArduinoのピン穴と合致するようにはめ込みます。

Page 37: sakura.io handson with twilio 20180123

ライブラリの取得(温湿度センサ-HDC1000利用の場合)

42

[ スケッチ ]→ [ ライブラリをインクルード ]→ [ ライブラリを管理... ] をクリックし、右上検索窓から【 hdc1000 】 を検索すると、 [ HDC1000 by Yuichi Tateno ] がヒットします。インストールをクリックすると該当ライブラリが取り込まれ、[ INSTALLED ]が表示されます。

※本作業はセンサにHDC1000を利用している場合のみ実施します。

Page 38: sakura.io handson with twilio 20180123

ライブラリの取得(温湿度センサ-SHT31利用の場合)

43

[ スケッチ ]→ [ ライブラリをインクルード ]→ [ ライブラリを管理... ] をクリックし、右上検索窓から【 SHT31 】を検索すると、 [ Adafruit SHT31 Library by Adafruit ]がヒットします。インストールをクリックすると該当ライブラリが取り込まれ、[ INSTALLED ]が表示されます。

※本作業はセンサにSHT31を利用している場合のみ実施します。

Page 39: sakura.io handson with twilio 20180123

ライブラリの取得(SakuraIO)

44

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

Page 40: sakura.io handson with twilio 20180123

FirmwareUpdate.ino

45

[ ファイル ]→ [ スケッチ例]→ [ SakuraIO ]→ [ FirmwareUpdate ] を選択し、 クリックで該当スケッチを書き込みます。 [ツール ]→ [ シリアルモニタ ]もしくは クリックでファームウェアアップデート状況を確認します。現在のVersion情報と比較し、新しいファームウェアが提供されている場合にはアップデートを実行します。PCからの給電が不安定/不足している場合は[ Update Failure ] と表示され、アップデートが失敗する場合があります。

新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合

※PCからの給電が不安定/不足している場合は[ Update Failure ] と表示され、アップデートが失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。

Page 41: sakura.io handson with twilio 20180123

ブレッドボードについて

46

ブレッドボードは場所によって接続されている場所が異なります。下記の繋がっている部分を意識して配線を行ってください。

水平方向に繋がっている主に各センサーに対する電源系統の接続に利用

垂直方向に繋がっている主に各センサーの配置やセンサーの信号系統の

接続に利用

Page 42: sakura.io handson with twilio 20180123

温湿度センサ(HDC1000/SHT31)について

47

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

ピンアサインが記載温湿度センサ

表面 裏面

Page 43: sakura.io handson with twilio 20180123

LEDについて

48

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

陽極(アノード)デジタル端子に接続

陰極(カソード)GND端子に接続

Page 44: sakura.io handson with twilio 20180123

<凡例>

温湿度センサ(HDC1000/SHT31)&LEDの繋ぎ込み

49

図に従い、温湿度センサとLEDの向きに注意しながら配線します。(実際にはArduinoシールドに対して配線します)ブレッドボード側は色で明示された位置であれば、自由に接続しても問題ありません。温湿度センサ側のRDY/ADRピンは今回は使用しないため、何も配線しません。

D7SDASCL

GND

SCLSDA3.3V

Digital 7GND

アノード(陽極)デジタル端子に接続

カソード(陰極)GND端子に接続

GND3.3V

Page 45: sakura.io handson with twilio 20180123

試験用プログラムの流し込み(温湿度センサ-HDC1000利用の場合)

50※本作業はセンサにHDC1000を利用している場合のみ実施します。

[ ファイル ]→ [新規ファイル]で新しいスケッチを表示し、下記URLの内容をスケッチにコピー&ペーストします。をクリックし、 [ ツール ]→ [ シリアルモニタ ]もしくは クリックでTemp情報とシリアル値、送信キュー情報

が取得できることと、温度が30度を超えるとモニタ上に[ * Sent to sakura.io * ] と表示されることを確認します。書き込みに問題があった場合、オレンジ色のエラーが表示されます。【 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino 】

Page 46: sakura.io handson with twilio 20180123

試験用プログラムの流し込み(温湿度センサ-SHT31利用の場合)

51※本作業はセンサにSHT31を利用している場合のみ実施します。

[ ファイル ]→ [新規ファイル]で新しいスケッチを表示し、下記URLの内容をスケッチにコピー&ペーストします。をクリックし、 [ ツール ]→ [ シリアルモニタ ]もしくは クリックでTemp情報とシリアル値、送信キュー情報

が取得できることと、温度が30度を超えるとモニタ上に[ * Sent to sakura.io * ] と表示されることを確認します。書き込みに問題があった場合、オレンジ色のエラーが表示されます。【 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino 】

Page 47: sakura.io handson with twilio 20180123

【参考】デバイスから送信されたデータの確認

52

sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信されたデータを受信できているかを確認することができます。該当のプロジェクトで作成した連携サービスからいずれかのWebSocketをクリックします。

Page 48: sakura.io handson with twilio 20180123

【参考】デバイスから送信されたデータの確認

53

サービス連携の編集画面の下部にデバイスから送信されたデータがリアルタイムで表示されます。簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。

→ カウント値

→ 温度

モジュール:データを送信したモジュールのID

チャンネルデータが格納されたチャンネル番号

時刻:データがモジュールのキューに格納された時刻のタイムスタンプ

値:送信された値

型:データの型式

Page 49: sakura.io handson with twilio 20180123

【参考】デバイスから送信されたデータの確認

54

[詳細表示モードに切り替え]をクリックすると詳細表示モードに遷移します。モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。

複数チャンネルある場合、それぞれの最終データを表示

クリックでログ出力を開始/停止

タイプ:プラットフォームからの内容に応じて、いくつかの種類に分かれる・channels :モジュールからのデータ・connection :接続の開始/終了・location :簡易位置情報・keepalive :WebSocketセッション確認

ペイロードには受け取ったデータのpayload部が表示

時刻:

詳細表示モードではプラットフォームで該当のメッセージを受け取ったタイムスタンプ

Page 50: sakura.io handson with twilio 20180123

55

Webへのデータ連携(Twilio)

Page 51: sakura.io handson with twilio 20180123

今回のハンズオンの流れ

56

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

Webサービス連携(Twilio)

マイコン(Arduino Uno)

温湿度センサ(SHT31/HDC1000)

さくらの通信モジュール

sakura.ioの設定

① ③②

outboundCall

IVR

Turn

Functions

outboundwebhook

inboundwebhook

Page 52: sakura.io handson with twilio 20180123

【参考】アカウントの作成

57

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

Page 53: sakura.io handson with twilio 20180123

【参考】アカウントの作成

58

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

Page 54: sakura.io handson with twilio 20180123

【参考】アカウントの作成

59

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

Page 55: sakura.io handson with twilio 20180123

作成したアカウントでのログイン

60

コントロールパネルにアクセスする場合、ログイン画面( https://jp.twilio.com/login/kddi-web )より登録したメールアドレスとパスワードを使用してログインします。

Page 56: sakura.io handson with twilio 20180123

電話番号の購入

62

まず、初めにTwilioから架電するために必要となる電話番号を購入します。ログイン後のダッシュボード画面から、左側ペインの【 All Products & Services 】 アイコンをクリックします。

Page 57: sakura.io handson with twilio 20180123

電話番号の購入

63

各種メニューが左部に表示されますので、[電話番号]→ [ Buy a Number ] と進みます。

Page 58: sakura.io handson with twilio 20180123

電話番号の購入

64

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

Page 59: sakura.io handson with twilio 20180123

電話番号の購入

65

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

Page 60: sakura.io handson with twilio 20180123

電話番号の購入

66

確認のモーダルが表示されますので、確認いただいたうえで【 この番号を購入する。】 をクリックします。

Page 61: sakura.io handson with twilio 20180123

電話番号の購入

67

購入に成功した旨の表示がされます。該当の番号はハンズオンで後ほど設定しますので、控えたうえで【閉じる 】をクリックします。

Page 62: sakura.io handson with twilio 20180123

電話番号の購入

68

購入された番号は[ Buy a Number ]画面で改めて確認することができます。

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

Page 63: sakura.io handson with twilio 20180123

Functionsの設定

69

次に、取得した番号を用いてFunctionsの設定を行います。左部のメニューボタンから、[ Runtime ]→ [ Functions Beta ] を選択します。

Page 64: sakura.io handson with twilio 20180123

Functionsの設定

70

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

Page 65: sakura.io handson with twilio 20180123

Functionsの設定

71

Configuration画面に遷移します。 【 Enable ACCOUNT_SID and AUTH_TOKEN 】にチェックを入れ、[ Environmental Variables ] 欄で以下の4つの項目を設定します。

FROM_NUMBER : 先程購入した電話番号(E.164形式)MODULE_ID : sakura.ioのコントロールパネルで確認したモジュールの一意のIDSAKURA_URL : sakura.ioのコントロールパネルで生成したIncoming WebhookのURLTO_NUMBER : ご自身で通知先として使用したい電話番号(E.164形式)

Page 66: sakura.io handson with twilio 20180123

Functionsの設定

72

[ Dependencies ] 欄は今回は設定の変更は不要です。そのまま【 Save 】 をクリックすると設定内容が保存されます。

Page 67: sakura.io handson with twilio 20180123

Functionsの設定

73

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

Page 68: sakura.io handson with twilio 20180123

Functionsの設定

74

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

Page 69: sakura.io handson with twilio 20180123

Functionsの設定

75

Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには【 /outbound-call 】 を入力し、CODEには以下の内容をコピー&ペーストしたうえで【 Save 】 をクリックします。【 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js 】

Page 70: sakura.io handson with twilio 20180123

Functionsの設定

76

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

Page 71: sakura.io handson with twilio 20180123

Functionsの設定

77

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

Page 72: sakura.io handson with twilio 20180123

Functionsの設定

78

Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには【 /ivr 】 を入力し、ACCESS CONTROLはチェックを入れます。CODEには以下の内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。【 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js 】

Page 73: sakura.io handson with twilio 20180123

Functionsの設定

79

最後に、FunctionsでIVRプログラムから呼び出され、電話からのキー操作を元にデバイスへ制御信号を返すプログラムを設定します。Functions内の【Manage 】 をクリックし、新しいプログラムを作成するために【+ 】をクリックします。

Page 74: sakura.io handson with twilio 20180123

Functionsの設定

80

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

Page 75: sakura.io handson with twilio 20180123

Functionsの設定

81

Functionsの作成画面に遷移します。 FUNCTION NAMEには任意の名前、PATHには【 /ivr 】 を入力し、ACCESS CONTROLはチェックを入れます。CODEには以下の内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。【 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js 】

Page 76: sakura.io handson with twilio 20180123

Functionsの設定

82

これで今回の動作を実現するTwilio Function側の3つのプログラムが設定されました。最後にsakura.ioからデータの投げ込み先となるPATHをOutgoing Webhookで指定して作成します。【Manage 】から 【 outboundCall 】 をクリックします。

Page 77: sakura.io handson with twilio 20180123

連携サービスの設定(Outgoing Webhook)

83

Twilio Functionsで作成したプログラムのPATH項目の右側のコピーマークをクリックすると、該当PATHのURLがコピーされます。

Page 78: sakura.io handson with twilio 20180123

連携サービスの設定(Outgoing Webhook)

84

先程控えた内容を元に、Outgoing Webhookサービスの作成を行います。最後に外部への連携サービスを設定します。[+サービス追加]のボタンをクリックします。

Page 79: sakura.io handson with twilio 20180123

連携サービスの設定(Outgoing Webhook)

85

追加サービスの選択画面に遷移します。次はOutgoing Webhookを作成しますので、 【 Outgoing Webhook 】 をクリックします。

Page 80: sakura.io handson with twilio 20180123

連携サービスの設定(Outgoing Webhook)

86

Outgoing Webhookでは任意の名前とPayload URLを指定します。今回指定するPayload URLはTwilioのコントロールパネルで生成した【 outboundCall 】 のPATHが示すURLとなります。Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。

Page 81: sakura.io handson with twilio 20180123

動作確認

87

マイコン(Arduino Uno)

温湿度センサ(SHT31/HDC1000)

さくらの通信モジュール

outboundCall

IVR

Turn

Functions

outboundwebhook

inboundwebhook

以上で設定は完了です。温度センサを指で押さえ、30度を超えたタイミングでモジュールからデータが送信され、それに基づきリアルタイムでTwilio FunctionsでoutboundCallがキックされ、IVRおよびTurnで定義されたデータがデバイスに戻されてLEDが制御されるまでを確認しましょう。

30度を超えると温度とカウント値データが送信

Outgoing Webhookによりリアルタイムで連携

MODULE_IDで指定されたモジュールがデータを受診

キー操作で指定した内容に基づきJSONデータ送信

Page 82: sakura.io handson with twilio 20180123

89

最後に

Page 83: sakura.io handson with twilio 20180123

最後に ~sakura.io~

90

ハンズオンに使用したモジュールは必要に応じて登録を解除します。接続ステータス横の歯車マークをクリックします。

Page 84: sakura.io handson with twilio 20180123

最後に ~sakura.io~

91

モジュールの設定画面に遷移します。下部の[登録解除]ボタンをクリックします。

Page 85: sakura.io handson with twilio 20180123

最後に ~sakura.io~

92

モジュールの登録を解除してよいか確認されます。問題ない場合は再度[登録解除]ボタンをクリックします。

Page 86: sakura.io handson with twilio 20180123

最後に ~sakura.io~

93

モジュールの登録が解除され、表示から削除されました。次は連携サービスとともにプロジェクトを削除します。プロジェクト右上の[削除]マークをクリックします。

Page 87: sakura.io handson with twilio 20180123

最後に ~sakura.io~

94

プロジェクトを削除してよいか確認されます。問題ない場合は再度[削除]ボタンをクリックします。

Page 88: sakura.io handson with twilio 20180123

最後に ~Twilio~

95

[ All Products & Services ]→ [ Runtime ]→ [ Functions ]→ [Manage ]から作成したFunctionsのプログラムを開き、最下部の【 Delete this Function 】 をクリックすると該当プログラムが削除されます。これを作成したプログラムすべてで実行します。

Page 89: sakura.io handson with twilio 20180123

最後に ~Twilio~

96

[ All Products & Services ]→ [電話番号]→ [ Active Numbers ]から購入した電話番号を開き、最下部の【 Release this Number 】 をクリックすると該当番号が返却されます。これを購入した番号すべてで実行します。

Page 90: sakura.io handson with twilio 20180123

97

参考サンプルスケッチ

Page 91: sakura.io handson with twilio 20180123

【参考】AlphaCompat.ino

98

さくらのIoT Platform αにて提供していたスケッチ(SakuraAlpha_I2C.ino)を置き換えたプログラムです。一定間隔でカウント値を0,1,2のチャンネルに書き込み、送信します。

Page 92: sakura.io handson with twilio 20180123

【参考】Shell.ino

99

シリアルモニタからのコマンド操作を提供します。改行を[CRのみ]とした後、提供されているコマンドを手入力で確認することができます。

Page 93: sakura.io handson with twilio 20180123

【参考】Shell.ino

100

構文

【version】現在のファームウェアバージョンを表示する

出力結果

version

>versionv1.0.0-161109-c566dba

備考

Page 94: sakura.io handson with twilio 20180123

【参考】Shell.ino

101

構文

【serial】モジュールのシリアル番号を表示する

出力結果

serial

>serial16A0100134

備考

Page 95: sakura.io handson with twilio 20180123

【参考】Shell.ino

102

構文

【status】モジュールの通信状態を確認する

出力結果

status

>statusOnlineLast Error Code: 0

備考

Page 96: sakura.io handson with twilio 20180123

【参考】Shell.ino

103

構文

【sqi】モジュールの電波強度を確認する

出力結果

sqi

>sqi5

備考

電波強度は5を最大として強度に伴い数値が下がり、0は圏外であることを示します。

Page 97: sakura.io handson with twilio 20180123

【参考】Shell.ino

104

構文

【unixtime】UTC形式の現在時刻を表示する

出力結果

unixtime

>unixtime1480497574

備考

Page 98: sakura.io handson with twilio 20180123

【参考】Shell.ino

105

構文

【update】ファームウェアのアップデートを実行する

出力結果

update

>updateCurrent Version: v1.0.0-161109-c566dbaUnlockStarting updateWaiting for update.

備考

Page 99: sakura.io handson with twilio 20180123

【参考】Shell.ino

106

構文

【reset】モジュールのソフトウェアリセットを実行する

出力結果

reset

>reset>

備考

シリアルモニタに実行結果は表示されません。ソフトウェアリセットを実行するとモジュールが再起動を行います。モデムの起動、および通信確立までにおおよそ1分程度を要します。

Page 100: sakura.io handson with twilio 20180123

【参考】Shell.ino

107

構文

【enqueue】送信キューにデータを格納する

出力結果

enqueue <ch> <type> <value>

>enqueue 0 i 123>

備考

シリアルモニタに実行結果は表示されません。enqueueコマンドを実行すると登録したデータは送信キューに貯められます。送信キューは最大で32個まで蓄積され、超過したキューは貯められず破棄されます。

Page 101: sakura.io handson with twilio 20180123

【参考】Shell.ino

108

構文

【send】送信キューに貯められたデータを送信する

出力結果

send

>send>

備考

シリアルモニタに実行結果は表示されません。sendコマンドを実行すると、貯められたデータは16個分を1つのRMとして送信します。送信キューが17個以上存在する場合、2つ目のRMも送信され、キューから自動的に削除されます。

Page 102: sakura.io handson with twilio 20180123

【参考】Shell.ino

109

構文

【size】送信/受信キューに貯められたデータ数を確認する

出力結果

size

>sizeTx Queue

Avail: 32Queued: 0

Rx QueueAvail: 32

Queued: 0

備考

Tx Queue は送信キュー、Rx Queueは受信キューを表します。Availは利用可能数、Queuedは貯められているキューの数を表します。

Page 103: sakura.io handson with twilio 20180123

【参考】Shell.ino

110

構文

【cleartx】送信キューに貯められたデータをすべて消去する

出力結果

cleartx

>cleartx>

備考

シリアルモニタに実行結果は表示されません。送信キューに貯められたデータの一部だけを削除することはできません。

Page 104: sakura.io handson with twilio 20180123

【参考】Shell.ino

111

構文

【clearrx】受信キューに貯められたデータをすべて消去する

出力結果

clearrx

>clearrx>

備考

シリアルモニタに実行結果は表示されません。受信キューに貯められたデータの一部だけを削除することはできません。

Page 105: sakura.io handson with twilio 20180123

【参考】Shell.ino

112

構文

【dequeue】受信キューに貯められたデータをすべて受信する

出力結果

dequeue

>dequeueempty

備考

受信キューに貯められたデータの一部だけを受信することはできません。受信可能なデータが存在しない場合はemptyを返します。受信されたデータはキューから自動的に削除されます。

Page 106: sakura.io handson with twilio 20180123

【参考】Shell.ino

113

構文

【peek】受信キューに貯められたデータを閲覧する

出力結果

peek

>peekempty

備考

受信キューに貯められたデータの一部だけを受信することはできません。受信可能なデータが存在しない場合はemptyを返します。閲覧したデータは削除されずキューに残されます。

Page 107: sakura.io handson with twilio 20180123

【参考】Standard.ino

114

保持している情報をすべて書き出すプログラムです。シリアルモニタに以下の情報を出力しながらカウント値を0チャンネルに書き込み、キューが一定量貯まると送信します。

Page 108: sakura.io handson with twilio 20180123

115

参考DataStore API

Page 109: sakura.io handson with twilio 20180123

【参考】連携サービスの設定(DataStore API)

116

sakura.ioでは、蓄積データの活用として 【 DataStore API 】 を提供します。追加サービスの選択画面で[ DataStore API ] をクリックします。

Page 110: sakura.io handson with twilio 20180123

【参考】連携サービスの設定(DataStore API)

117

追加サービスの選択画面で[ DataStore API ] をクリックします。[名前]は任意の名称を入力し、 [作成 ]をクリックします。

Page 111: sakura.io handson with twilio 20180123

【参考】連携サービスの設定(DataStore API)

118

作成した連携サービスをクリックすると 【 Token 】 を確認することができます。Tokenを控えておき、コンパネ右上の[ DataStore v1 Document ] をクリックします。

Page 112: sakura.io handson with twilio 20180123

【参考】連携サービスの設定(DataStore API) /channelsの取得

119

[ /channels ]は蓄積されたデータをチャンネル単位で取得します。単体のデータを複数の形式(入力時の形式[ value ] 、数値 [ value_num ] 、文字列[ value_str ] )で格納しているため、単体でも価値のあるデータが活用しやすい形式となっています。[ /channels ]は該当URL( https://api.sakura.io/datastore/v1/docs/ )にて前述の【 Token 】 情報、および以下のパラメータを指定することで任意の情報を取得できます。

【module】:モジュールのモジュールID

【size】:一度に取得するデータの数

【order】:昇順(ASC)と降順(DESC)指定

【cursor】:※後述※

【after/before】:指定日時の以前と以後指定

【channel】:取得するチャンネル指定

Page 113: sakura.io handson with twilio 20180123

【参考】連携サービスの設定(DataStore API) /channelsの取得

120

{"meta": {

“count”: <取得した件数>,“cursor”: “<sizeで指定した件数を超えた場合に、次のレスポンスを取得するためのカーソル>”,“match”: <ヒットした件数>

},"results": [

{“channel”: <データが格納されているチャンネル>,“datetime”: “<データがモジュールのキューに格納された時間>”,“id”: “<送信されたデータのID>",“module”: “<データが送信されたモジュールのID>",“type”: “<送信されたデータの型式>",“value”: <typeで指定された型式でのデータ>,“value_num”: <number形式でのデータ>,“value_str”: “<string形式でのデータ>"

},{"channel": …#以下[channel]単位のデータがcount数分列挙

指定された条件を元に【 Try it out! 】 をクリックすると、 [ Response Body ] 欄に条件に応じたデータが返されます。またクリック後に返される[ Request URL ] から同様のデータを取得できます。

Page 114: sakura.io handson with twilio 20180123

【type】:取得するRMのtype指定

【参考】連携サービスの設定(DataStore API) /messagesの取得

121

[ /messages ] は蓄積されたデータをRM単位で取得します。RMに含まれる複数チャンネルのデータの関係性が重要な場合に活用しやすい形式です。(鍵の「解錠者ID」と「入退室フラグ」等)また、 [ /messages ] にはモジュールの接続および切断の情報も含まれています。[ /messages ] は該当URL( https://api.sakura.io/datastore/v1/docs/ )にて以下のパラメータを指定することで任意の情報を取得できます。

【module】:モジュールのモジュールID

【size】:一度に取得するデータの数

【order】:昇順(ASC)と降順(DESC)指定

【cursor】:※後述※

【after/before】:指定日時の以前と以後指定

Page 115: sakura.io handson with twilio 20180123

【参考】連携サービスの設定(DataStore API) /messagesの取得

122

{"meta": {

"count": <取得した件数>,"cursor": “<sizeで指定した件数を超えた場合に、次のレスポンスを取得するためのカーソル>”,"match": <ヒットした件数>

},"results": [

{“datetime”: “<対象のRMをプラットフォーム側で受信した時間>”,"id": “<格納されたRMのID>","module": “<データが送信されたモジュールのID>","payload": {

"channels": [{

"channel": <データが格納されているチャンネル>,"type": “<送信されたデータの型式>","value": <typeで指定された型式でのデータ>

}]

},"type": "channels"

},{“datetime”: …#以下[message]単位のデータ

指定された条件を元に【 Try it out! 】 をクリックすると、 [ Response Body ] 欄に条件に応じたデータが返されます。またクリック後に返される[ Request URL ] から同様のデータを取得できます。

Page 116: sakura.io handson with twilio 20180123

最後に

123

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

Page 117: sakura.io handson with twilio 20180123

最後に

124

さくらインターネットでは、「さくらクラブ」としてハンズオン等のイベントをともに開催いただける仲間(部員)を募集しています。

(テーマはIoTに限らず、クラウドやVPS、スタートアップ系ネタでもOK!)

ご興味があれば、Come and join us & Feel free to contact me!

連絡先 : [email protected]さくらクラブ : http://www.slideshare.net/MasayaHayashi/lt20151224

さくらクラブにっぽんばし:https://www.facebook.com/saku.love.nipponbashi

Page 118: sakura.io handson with twilio 20180123

125

そこに、さくら