Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 はじめに

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

本ハンズオンで使用するツール・機材・参考情報まとめ ■本編■ ・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プログラム(outboundcall) https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js ・Twilio Functionsプログラム(IVR) https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js ・Twilio Functionsプログラム(Turn) https://github.com/sakuraio/handson-sample/blob/master/twilio/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

Slide 7

Slide 7 text

Webサービス連携 (Twilio) ① 今回のハンズオンの流れ 7 ② マイコンおよび プログラムの構築 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール ③ 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook

Slide 8

Slide 8 text

Agenda 8 1. Webへのデータ連携(Twilio 前編) ₋ 電話番号の購入、環境変数の設定 ₋ Functionsによるsakura.io Outgoing Webhook受信用プログラム(outboundcall)の作成 ₋ Functionsによるキー応答用プログラム(ivr)の作成 ₋ Functionsによるsakura.io Incoming Webhook送信用プログラム(turn)の作成 2. sakura.ioの設定 ₋ プロジェクトの作成 ₋ モジュールの登録 ₋ 連携サービスの設定(Outgoing Webhook / Incoming Webhook / WebSocket) 3. マイコンおよびプログラムの構築 ₋ マイコン(Arduino)による開発環境の準備 ₋ 温湿度センサおよびモジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 4. Webへのデータ連携(Twilio 後編) ₋ 環境変数の追加設定(Incoming Webhook)

Slide 9

Slide 9 text

9 Webサービス連携 (Twilio 前編)

Slide 10

Slide 10 text

Webサービス連携 (Twilio) ① 今回のハンズオンの流れ 10 ② マイコンおよび プログラムの構築 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール ③ 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

電話番号の購入 21  表示されたメニューから、【 Phone Number 】から【 番号を購入 】と進みます。

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Functionsの設定 29  Configuration画面では、[ Enable ACCOUNT_SID and AUTH_TOKEN ]に チェックを入れ、[ Environmental Variables ]の【 】をクリックし、 以降で作成するプログラムのため、以下の4つの環境変数を設定します。 FROM_NUMBER:購入した電話番号(E.164形式) MODULE_NUMBER:モジュールの一意のID ※仮の値 SAKURA_URL:Incoming WebhookのURL ※仮の値 TO_NUMBER:通知先に使用する電話番号(E.164形式)

Slide 30

Slide 30 text

Functionsの設定 30  [ Dependencies ]欄では以降のプログラムで使用(require)するNPMパッケージ を指定します。今回はデフォルトのものに加えてgotパッケージを指定する必要があるため、 【 】 をクリックし、以下の項目を追加します。  そのまま 【 Save 】 をクリックすると設定内容が保存されます。 NAME:got VERSION:6.7.1

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Functionsの設定(outboundcall) 33  Functions作成画面に遷移します。 FUNCTION NAME、PATHを入力し、 CODEにはサンプルの内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js コピー&ペースト FUNCTION NAME:outboundcall PATH:/outboundcall

Slide 34

Slide 34 text

Functionsの設定(outboundcall)  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 34 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Functionsの設定(ivr) 37  Functions作成画面に遷移します。 FUNCTION NAME、PATHを入力し、 CODEにはサンプルの内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js コピー&ペースト FUNCTION NAME:ivr PATH:/ivr

Slide 38

Slide 38 text

Functionsの設定(ivr)  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 38 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Functionsの設定(turn) 41  Functions作成画面に遷移します。 FUNCTION NAME、PATHを入力し、 CODEにはサンプルの内容をコピー&ペーストしたうえで 【 Save 】 をクリックします。 https://github.com/sakuraio/handson-sample/blob/master/twilio/turn.js コピー&ペースト FUNCTION NAME:turn PATH:/turn

Slide 42

Slide 42 text

Functionsの設定(turn)  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 42 https://github.com/sakuraio/handson-sample/blob/master/twilio/turn.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

Slide 43

Slide 43 text

作成したFunctionsのPATH確認 43  これで今回の動作を実現するTwilio Function側の3つのプログラムが設定されました。  sakura.ioの連携サービスであるOutgoing Webhookからデータの投げ込み先とする PATHを確認します。【 Manage 】 から 【 outboundcall 】 をクリックします。

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 sakura.ioの設定

Slide 46

Slide 46 text

Webサービス連携 (Twilio) ① 今回のハンズオンの流れ 46 ② マイコンおよび プログラムの構築 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール ③ 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook

Slide 47

Slide 47 text

sakura.ioコントロールパネルにおける考え方  sakura.ioでは【 プロジェクト 】という単位で管理され、プロジェクト内に複数の【 モジュー ル 】【 連携サービス 】を紐付けます。 データストア、簡易位置情報提供、ファイル配信と いった【 オプションサービス 】はプロジェクトに対して1つもしくは1セット設定できます。 47 プロジェクト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セット設定可能 連携サービス プロジェクトに対して 複数作成可能

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

モジュールの登録  プロジェクトが作成されました。次にモジュールの登録を行います。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 モジュール登録 】をクリックします。  登録されているモジュールがない場合は案内文中のリンクからも登録画面に遷移できます。 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

連携サービスの設定(Incoming Webhook)  プロジェクトの詳細から作成したIncoming Webhookの【 】をクリックし、 生成されたURLを確認します。 この点線で囲まれたモジュールIDは後ほど使用します。 66

Slide 67

Slide 67 text

連携サービスの設定(WebSocket)  最後に、デバイスからsakura.ioへのデータ到達を確認する連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 67

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

連携サービスの設定(WebSocket)  WebSocketを作成しました、これでsakura.ioでの準備は完了です。 70

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Webサービス連携 (Twilio) ① 今回のハンズオンの流れ 72 ② マイコンおよび プログラムの構築 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール ③ 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Arduino IDEのセットアップ  Webサイトから開発環境(Arduino IDE)を入手します。2018/6/4時点の最新バー ジョンは[ 1.8.5 ]です。  環境がWindowsの場合は【 Windows Installer 】、Macの場合は【 Mac OS X 10.7 Lion or newer 】を選択します。 74 https://www.arduino.cc/en/Main/Software

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

温湿度センサ(HDC1000/SHT31)の繋ぎ込み  図に従い温湿度センサの向きに注意して配線します。(実際にはArduinoシールドに対 して配線します)ブレッドボード側は色で明示された位置であれば、自由に接続しても問 題ありません。温湿度センサ側のRDY/ADRピンは今回は使用しないため、何も配線しま せん。 88 <凡例> 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を利用している場合のみ実施します。

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

試験用プログラムの流し込み(温湿度センサ-HDC1000利用の場合)  Githubの該当サンプルスケッチページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】 ですべてを選択して、【 Ctrl +C 】でコピーします。 90 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

試験用プログラムの流し込み(温湿度センサ-SHT31利用の場合)  Githubの該当サンプルスケッチページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】 ですべてを選択して、【 Ctrl +C 】でコピーします。 92 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

97 Webサービス連携 (Twilio 後編)

Slide 98

Slide 98 text

① 今回のハンズオンの流れ 98 ② マイコンおよび プログラムの構築 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール ③ 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook Webサービス連携 (Twilio) Environmental Variables

Slide 99

Slide 99 text

今回のハンズオンの流れ 99 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook  現時点の設定では連携は正しく動作しません。これはTwilio設定時には定まっていなかっ たsakura.io側のパラメータがあるためです。そのため、最後にTwilio Functionsの環境 変数に正式な値を設定します。 温度が閾値を超えた場合に データを送信 Outgoing Webhookにより、 リアルタイムで連携 受信したJSONデータを照合 モジュールID不一致にて除外 Environmental Variables モジュールIDとIncoming Webhookの指定

Slide 100

Slide 100 text

Functionsの設定 100  Twilioのコントロールパネルから、Functionsの追加設定を行います。【 】から、 [ Runtime ] → [ Functions Beta ] を選択します。

Slide 101

Slide 101 text

Functionsの設定 101  FunctionsのManage画面に遷移します環境変数を設定するため、【 Configure 】 をクリックします。

Slide 102

Slide 102 text

Functionsの設定 102  [ Environmental Variables ]の中で、仮の値を入れていた2つの環境変数を 設定します。設定後、 【 Save 】 をクリックすると設定内容が保存されます。 MODULE_NUMBER:モジュールの一意のID ※仮の値 SAKURA_URL:Incoming WebhookのURL ※仮の値

Slide 103

Slide 103 text

今回のハンズオンの流れ 103 マイコン (Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール 各種LED ハンズオン キット Outgoing Webhook 連携 サービス モジュール プロジェクト WebSocket ※動作確認用 Incoming Webhook /outboundcall /ivr /turn Functions Inbound Webhook Outbound Webhook  以上で設定は完了です。温度センサを指で押さえ、指定した値に達することでデータを送 信すること、それを元に自動的な架電が発生すること、キー操作に応じてLEDが制御され ること、までを確認しましょう。 moduleで指定された モジュールにデータを転送 JSONは電気信号に変換され 定義したLEDの操作を実行 受電した電話上でのキー操作 に基づきJSONデータを送信 温度が閾値を超えた場合に データを送信 Outgoing Webhookにより、 リアルタイムで連携 受信したJSONデータを 元に自動応答での架電を実行

Slide 104

Slide 104 text

104 最後に

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

114 そこに、さくら