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

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

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

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

Transcript

1. コミュニケーションAPI Twilio & sakura.io体験ハンズオン 株式会社KDDIウェブコミュニケーションズ 共催 2018/6/19 (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-part1-01
4. ハンズオンを円滑に進めるために 4 ココ!!
5. 本ハンズオンの目的とお願い  本ハンズオンは sakura.io を使用し、組込み、Web/アプリ開発、それぞれのスキルセッ トを大きく超えることなく、Internet of Things(IoT) に携わることができることをご体験 いただくものです。  特に、本編ではコミュニケーションAPIサービスであるTwilio（トゥイリオ）と連携した簡易 的なサービス構築を通じて、Web・アプリケーションの技術を用いた「IoTシステム」の構 築イメージを掴んでいただくことを目的としています。  そのため、組み込み系または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プログラム（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
7. 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
8. 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）
9. 9 Webサービス連携 (Twilio 前編)
10. 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
11. 【参考】アカウントの作成 11  Twilioのログイン用アカウントがない場合は、サービスサイトより【 サインアップ 】 を クリックすることでアカウント作成の画面に進むことができます。 https://twilio.kddi-web.com/
12. 【参考】アカウントの作成 12  初めに利用規約およびプライバシーポリシーへの同意を求められます。  内容を確認し、問題なければいずれのチェックボックスにもチェックを入れたうえで、 【 同意してサインアップ 】 をクリックします。
13. 【参考】アカウントの作成 13  情報入力画面に遷移します。必要な事 項を入力し【 はじめる 】をクリックします。  その後指定した番号にSMSを受け、認 証の4桁の番号を入力することでTwilio にアクセス、および利用することができる ようになります。
14. 作成したアカウントでのログイン 14  既に登録している場合、コントロールパネルにログインします。  Emailの項目に登録したメールアドレスを入力し、【 次 】をクリックします。 https://jp.twilio.com/login/kddi-web
15. 作成したアカウントでのログイン 15  次の画面ではパスワードが求められます。登録したパスワードを入力し、［ 二要素認証を 有効にする ］にはチェックを入れず、【 ログイン 】をクリックします。
16. 作成したアカウントでのログイン 16  ログインが成功すると以下のような画面が表示されます。  ログイン時はマスターアカウントという権限でログインされていますが、ハンズオンではその中に 作成されたサブアカウントを使って行います。
17. サブアカウントの設定 17  サブアカウントを利用する場合ログインしたマスターアカウントから切り替える必要があります。  ダッシュボード右上の 【 】 をクリックし、 【 Subaccounts 】をクリックします。
18. サブアカウントの設定 18  サブアカウント画面で任意のサブアカウントの右側にある 【 サブアカウントを表示 】 を クリックするとサブアカウントごとに区切られた管理画面に遷移します。
19. サブアカウントの設定 19  サブアカウントへの切り替えが成功すると以下のような画面が表示されます。  表示は大きく変わりませんが、サブアカウントごとの電話番号やアプリケーション設定を分割 して利用する場合に活用します。
20. サブアカウントの設定 20  Twilioから架電するために必要となる電話番号を購入します。  ログイン後のダッシュボード画面から、左側ペインの 【 】 をクリックします。
21. 電話番号の購入 21  表示されたメニューから、【 Phone Number 】から【 番号を購入 】と進みます。
22. 電話番号の購入 22  ［ 番号を購入 ］ 画面が表示されますので、国のプルダウンより 【 Japan (+81) 】 を 選択し、 【 検索 】 をクリックします。
23. 電話番号の購入 23  日本で使用可能な番号一覧が表示されます。TYPEが ［ ローカル ］ となっている月額 が ［ ¥108 ］ のものの中から任意の番号を選び、右側にある 【 購入 】 をクリックします。
24. 電話番号の購入 24  購入の内容が再度表示されますので、問題なければ 【 この番号を購入する。 】 を クリックします。
25. 電話番号の購入 25  購入に成功した旨の表示がされますので、【 閉じる 】 をクリックします。 この点線で囲まれた電話番号は後ほど使用しますのでメモしてください。
26. 電話番号の購入 26 電話番号の表記方法（E.164形式）について Twilioは、世界100カ国と接続されていて、それぞれの国に直接電話をかけることができます。 そのため、発信・着信の電話番号は、全世界で利用可能な「E.164形式」と呼ばれる表記方法を使います。 E.164形式とは、先頭が+から始まる国番号と電話番号の組み合わせです。 例えば、日本は国番号が+81となっており、その後の電話番号を続けて記述します。 ※電話番号の先頭の0は削除します。 「09012345678」は、E.164形式だと「+819012345678」となります。  購入された番号は ［ 番号の管理 ］ 画面で改めて確認することができます。
27. Functionsの設定 27  次に、取得した番号を用いてFunctionsの設定を行います。【 】から、 ［ Runtime ］ → ［ Functions Beta ］ を選択します。
28. Functionsの設定 28  FunctionsのManage画面に遷移します。事前にプログラムに使用する環境変数を設定 するため、【 Configure 】 をクリックします。
29. 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形式）
30. Functionsの設定 30  ［ Dependencies ］欄では以降のプログラムで使用（require）するNPMパッケージ を指定します。今回はデフォルトのものに加えてgotパッケージを指定する必要があるため、 【 】 をクリックし、以下の項目を追加します。  そのまま 【 Save 】 をクリックすると設定内容が保存されます。 NAME：got VERSION：6.7.1
31. Functionsの設定（outboundcall） 31  環境変数の設定が完了したら次にFunctionsでsakura.ioからのデータを元に処理を実 行するプログラムを作成します。Functions Beta内の 【 Manage 】 をクリックし、新し いプログラムを作成するために 【 】 をクリックします。
32. Functionsの設定（outboundcall） 32  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されている プログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
33. 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
34. Functionsの設定（outboundcall）  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 34 https://github.com/sakuraio/handson-sample/blob/master/twilio/outboundcall.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
35. Functionsの設定（ivr） 35  次に、Functionsでoutboundcallプログラムから呼び出され、電話への架電を実行する プログラムを作成します。Functions Beta内の 【 Manage 】 をクリックし、新しいプログ ラムを作成するために 【 】 をクリックします。
36. Functionsの設定（IVR） 36  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されている プログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
37. 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
38. Functionsの設定（ivr）  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 38 https://github.com/sakuraio/handson-sample/blob/master/twilio/ivr.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
39. Functionsの設定（turn） 39  次に、Functionsでoutboundcallプログラムから呼び出され、電話への架電を実行する プログラムを作成します。Functions Beta内の 【 Manage 】 をクリックし、新しいプログ ラムを作成するために 【 】 をクリックします。
40. Functionsの設定（turn） 40  基本的な内容を含むテンプレートの一覧が提示されます。今回は用意されている プログラムを使用しますので、 【 Blank 】 を選択のうえ、 【 Create 】 をクリックします。
41. 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
42. Functionsの設定（turn）  Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで 【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 42 https://github.com/sakuraio/handson-sample/blob/master/twilio/turn.js キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
43. 作成したFunctionsのPATH確認 43  これで今回の動作を実現するTwilio Function側の3つのプログラムが設定されました。  sakura.ioの連携サービスであるOutgoing Webhookからデータの投げ込み先とする PATHを確認します。【 Manage 】 から 【 outboundcall 】 をクリックします。
44. 作成したFunctionsのPATH確認 44 • 作成したプログラムのPATH右側の【 】をクリックすると、該当URLがコピーされます。 コピーしたURLは後ほど使用します。
45. 45 sakura.ioの設定
46. 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
47. sakura.ioコントロールパネルにおける考え方  sakura.ioでは【 プロジェクト 】という単位で管理され、プロジェクト内に複数の【 モジュー ル 】【 連携サービス 】を紐付けます。 データストア、簡易位置情報提供、ファイル配信と いった【 オプションサービス 】はプロジェクトに対して１つもしくは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セット設定可能 連携サービス プロジェクトに対して 複数作成可能
48. さくらインターネット 会員ID作成  会員IDをお持ちでない場合はご契約の サービスがない場合でも、さくらインター ネット会員登録から作成いただけます  会員登録が完了すると、指定したメール アドレスに support@sakura.ad.jp より会員IDが記載されたメールが送信さ れます。 会員IDおよびパスワードは重要な情報となりま すので、漏れないよう大事に保管ください。 48 Title：会員登録完了のお知らせ [XXX00000] ─────────────────────────────────── このメッセージはさくらインターネット会員登録フォームより 自動送信されています。このメールに心当たりのない場合は support@sakura.ad.jpまでご連絡ください。 ─────────────────────────────────── さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) この度は、さくらインターネットに会員登録いただきまして誠に ありがとうございます。 以下の通り会員登録を受付ましたので、ご連絡させていただきます。 ============================================ ◎ 会員登録情報 会員ID ： XXX00000 ご契約者名 ： さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) 電子メール ： XXX@XXX.XX.XX ============================================ ～～～以下省略～～～ https://secure.sakura.ad.jp/signup3/member-register/input.html
49. sakura.io コントロールパネル ログイン  sakura.ioコントロールパネルにログインします。上記URLに直接アクセスするか、サービス サイト（ https://sakura.io/ ）にアクセスし、右上の【 ログイン 】をクリックします。 49 https://secure.sakura.ad.jp/iot/
50. コントロールパネルへのログイン  ログイン済みのセッションがない場合、以下の画面で会員認証を求められます。  会員ID、パスワードを利用してログインします。 50
51. 約款への同意  初めてコントロールパネルにログインすると、各種約款への同意を求められます。  内容をご確認のうえ、［ 同意する ］をクリックするとコントロールパネルにアクセスできます。 51
52. コントロールパネルへのログイン  ログインが成功すると、以下のような画面に誘導されます。  何も作成されていない、もしくはデフォルトプロジェクトが作成されている状態になります。 52
53. プロジェクトの作成  初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。  プロジェクトを作成するには、まず［ プロジェクト追加 ］をクリックします。 53
54. プロジェクトの作成  新規プロジェクトの作成画面に遷移します。  ［ 名称 ］欄に任意の名前を入力し、【 追加 】をクリックします。 ハンズオンでは他の参加者と重複しないよう、名前等の判別可能な情報を入れて作成してください 54
55. モジュールの登録  プロジェクトが作成されました。次にモジュールの登録を行います。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 モジュール登録 】をクリックします。  登録されているモジュールがない場合は案内文中のリンクからも登録画面に遷移できます。 55
56. sakura.io モジュールの取り出し  sakura.io モジュール【だけ】を箱から取り出します 56 sakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3
57. モジュール登録  モジュールの追加画面に遷移します。自身のプロジェクトが選択されていることを確認のうえ、 モジュール記載の登録用ID、登録用パスワードおよび任意の名称を入力して、【 追加 】 をクリックします。 モジュールの登録実行には数秒かかります。 57 モジュール上面 白ラベル表記
58. モジュール登録  モジュールの追加に成功すると［ モジュールを追加しました ］ダイアログが表示されます。  ［ ホームへ戻る ］ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されているモジュールを追加しようとした場合は 内容とともに［ モジュールの追加に失敗しました ］というダイアログが表示されます。 58 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDで登録されています、過去登録した会員IDでログインし解除ください
59. モジュール登録  モジュールを登録しました。表示されているモジュールIDは一意のものであり、届いたデータ の送信元判別や、デバイスへのデータ送信の際に使用します。 この点線で囲まれたモジュールIDは後ほど使用します。 59
60. 連携サービスの設定（Outgoing Webhook）  Outgoing（sakura.io → 外部サービス）を実現する連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 60
61. 連携サービスの設定（Outgoing Webhook）  追加サービスの選択画面に遷移します。  Outgoing Webhookを作成しますので、【 Outgoing Webhook 】をクリックします。 61
62. 連携サービスの設定（Outgoing Webhook）  Outgoing Webhookでは任意の名前とPayload URLを指定し、【 作成 】を クリックします。今回指定するPayload URLはTwilioのコントロールパネルで作成した 【 outboundcall 】 のPATHとなります。  Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。 62
63. 連携サービスの設定（Incoming Webhook）  Incoming（外部サービス → sakura.io）を実現する連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 63
64. 連携サービスの設定（Incoming Webhook）  追加サービスの選択画面に遷移します。  Incoming Webhookを作成しますので、【 Incoming Webhook 】をクリックします。 64
65. 連携サービスの設定（Incoming Webhook）  Incoming Webhookでは任意の名前を指定し、【 作成 】をクリックします。  Secretはセキュリティを強固にするために使用いたしますが、今回は設定しません。 65
66. 連携サービスの設定（Incoming Webhook）  プロジェクトの詳細から作成したIncoming Webhookの【 】をクリックし、 生成されたURLを確認します。 この点線で囲まれたモジュールIDは後ほど使用します。 66
67. 連携サービスの設定（WebSocket）  最後に、デバイスからsakura.ioへのデータ到達を確認する連携サービスを設定します。 プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 連携サービス 】をクリックし、その後 【 サービス追加 】をクリックします。 67
68. 連携サービスの設定（WebSocket）  追加サービスの選択画面に遷移します。  今回はWebSocketを作成しますので、【 WebSocket 】をクリックします。 68
69. 連携サービスの設定（WebSocket）  WebSocketの作成には特に設定事項はありません。  ［ 名前 ］欄に任意の名前を入力し、【 作成 】をクリックします。 69
70. 連携サービスの設定（WebSocket）  WebSocketを作成しました、これでsakura.ioでの準備は完了です。 70
71. 71 マイコンおよびプログラム構築
72. 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
73. 今回のワークショップでご提供するもの 73 ジャンパーコード sakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3 USB2.0 ケーブル（A-B） 12W級 9V-1.3A ACアダプタ ブレッドボード 人感センサ （SB412A） 照度センサ （GL5537-2） 温湿度センサ （HDC1000 or SHT31） 各種抵抗 ※必要に応じてご提供 タクトスイッチ ※必要に応じてご提供 抵抗入りLED ※必要に応じてご提供 本日は使用しません
74. 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
75. Arduino IDEのセットアップ  該当の金額を選択するか(寄付する場合）、【 JUST DOWNLOAD 】からダウンロード します。 75
76. Arduino IDEのセットアップ  インストールはデフォルト推奨、ドライバーについても全てインストールします。 ※本スライド記載の画像はWindowsの場合です。 76
77. sakura.ioモジュールの取り付け  ArduinoシールドをArduino Unoのピン穴と合致するようにはめ込みます。 ※ハンズオンでは接続済み  Arduino IDEを起動したら、Arduino UnoにACアダプタとUSBケーブルを図のように 接続します。 77 コンセントへ パソコンへ （USB Type-A）
78. Arduino IDEのセットアップ  上部メニューバーからボードと、シリアルポートを設定します。 ボード:［ ツール ］→［ ボード:”XXX” ］から【 Arduino/Genuino Uno 】を選択 シリアルポート:［ ツール ］→［ シリアルポート ］から【 COMx (Arduino/Genuino Uno) 】を選択 Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択  うまく認識しない場合は、USBを挿し直し、Arduino IDEを再起動を試してください。 78 ボードの選択 シリアルポートの選択
79. マイコン（Arduino）の準備  ［ ファイル ］→［ スケッチ例 ］→［ 01.Basics ］→［ Blink ］を選択し、Blink スケッチを表示します。  【 】をクリックしてスケッチを書き込み、該当のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 79
80. ライブラリの取得（SakuraIO）  ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 右上検索窓から【 sakuraio 】を検索すると、［ SakuraIO by SAKURA Internet Inc. ］がヒットします。  最新のVer.を選択のうえ【 インストール 】をクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］が表示されます。 80
81. ライブラリの取得（温湿度センサ-HDC1000利用の場合）  ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 検索窓から【 hdc1000 】を検索すると、［ HDC1000 by Yuichi Tateno ］がヒット します。  【 インストール 】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示 されます。 81 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
82. ライブラリの取得（温湿度センサ-SHT31利用の場合）  ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 検索窓から【 SHT31 】を検索すると、［ Adafruit SHT31 Library ］がヒットします。  【 インストール 】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示 されます。 82 ※本作業はセンサにSHT31を利用している場合のみ実施します。
83. FirmwareUpdate.ino  ［ ファイル ］→［ スケッチ例 ］→［ SakuraIO ］→［ FirmwareUpdate ］を 選択し、【 】クリックでスケッチを書き込みます。［ ツール ］→［ シリアルモニタ ］もし くは【 】クリックでアップデート状況を確認します。  現在のVersion情報と比較し、新しいファームウェアが提供されている場合はアップデートを 実行します。 83 ※PCからの給電が不安定/不足している場合は ［ Update Failure ］ と表示され、アップデートに 失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合
84. sakura.ioモジュールの取り外し  マイコンとセンサー間を配線するため、Arduino Unoから、ACアダプタと、USBケーブルを 取り外します。 84 コンセントへ パソコンへ （USB Type-A）
85. ブレッドボードについて  ブレッドボードは場所によって接続されている場所が異なります。  下図の繋がっている部分を意識しながら配線します。 85 水平方向に繋がっている 主に各センサーに対する 電源系統の接続に利用 垂直方向に繋がっている 主に各センサーの配置や センサーの信号系統の 接続に利用
86. 温湿度センサ（HDC1000/SHT31）について  温湿度センサモジュールはそれぞれ繋ぐべき端子が決まっています。  少し見えにくいですが、センサ本体が実装されている面を裏返すと、各ピンに接続すべき 端子が明記されています。 86 ピンアサインが記載 温湿度センサ 表面 裏面
87. LEDについて  LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が陽極（ア ノード）と呼ばれ、デジタルの端子に接続します。逆に足の短い方は陰極（カソード）と 呼ばれ、GND側の端子に接続します。  今回使用するLEDは抵抗を内蔵しているため、別途抵抗を挟む必要はありません。 87 陽極（アノード） デジタル端子に接続 陰極（カソード） GND端子に接続
88. 温湿度センサ（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を利用している場合のみ実施します。
89. sakura.ioモジュールの取り付け  配線が終わったら、ACアダプタとUSBケーブルを再度接続します。  Arduino IDEを起動し、Arduino UnoにACアダプタとUSBケーブルを図のように接続し ます。 89 コンセントへ パソコンへ （USB Type-A）
90. 試験用プログラムの流し込み（温湿度センサ-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 】でコピーします
91. 試験用プログラムの流し込み（温湿度センサ-HDC1000利用の場合）  ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、URLの内容をコピー＆ペー ストし、【 】をクリックしてスケッチを書き込みます。  ［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックでTemp情報とシリアル値、 送信キュー情報が取得できることと、温度が30度を超えるとモニタ上に ［ * Sent to sakura.io * ］ と表示されることを確認します。 91 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-HDC1000-with-LED.ino
92. 試験用プログラムの流し込み（温湿度センサ-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 】でコピーします
93. 試験用プログラムの流し込み（温湿度センサ-SHT31利用の場合）  ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、URLの内容をコピー＆ペー ストし、【 】をクリックしてスケッチを書き込みます。  ［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックでTemp情報とシリアル値、 送信キュー情報が取得できることと、温度が30度を超えるとモニタ上に ［ * Sent to sakura.io * ］ と表示されることを確認します。 93 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。 https://github.com/sakuraio/handson-sample/blob/master/arduino/twilio-SHT31-with-LED.ino
94. 【参考】デバイスから送信されたデータの確認  sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信された データを受信できているかを確認できます。  プロジェクトの詳細から作成したWebSocketの【 】をクリックします。 94
95. 【参考】デバイスから送信されたデータの確認  サービス連携の編集画面下部に、デバイスから送信したデータがリアルタイム表示されます。  簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 95 モジュール： データを送信した モジュールのID チャンネル： データが格納された チャンネル番号 時刻： データがモジュールのキューに 格納された時刻のタイムスタンプ 値： 送信された値 型： データの型式
96. 【参考】デバイスから送信されたデータの確認  ［ 詳細表示モードに切り替え ］をクリックすると詳細表示モードに遷移します。  モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 96 タイプ： プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels ：モジュールからのデータ ・connection ：接続の開始/終了 ・location ：簡易位置情報 ・keepalive ：WebSocketセッション確認 ペイロード： 受け取ったデータのpayload部 が表示 時刻： 詳細表示モードではプラットフォームで該 当のメッセージを受け取ったタイムスタンプ チャンネルごとの最終到着データ： 各チャンネルに届いた最終の Valueを表示
97. 97 Webサービス連携 (Twilio 後編)
98. ① 今回のハンズオンの流れ 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
99. 今回のハンズオンの流れ 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の指定
100. Functionsの設定 100  Twilioのコントロールパネルから、Functionsの追加設定を行います。【 】から、 ［ Runtime ］ → ［ Functions Beta ］ を選択します。
101. Functionsの設定 101  FunctionsのManage画面に遷移します環境変数を設定するため、【 Configure 】 をクリックします。
102. Functionsの設定 102  ［ Environmental Variables ］の中で、仮の値を入れていた2つの環境変数を 設定します。設定後、 【 Save 】 をクリックすると設定内容が保存されます。 MODULE_NUMBER：モジュールの一意のID ※仮の値 SAKURA_URL：Incoming WebhookのURL ※仮の値
103. 今回のハンズオンの流れ 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データを 元に自動応答での架電を実行
104. 104 最後に
105. 最後に ～sakura.io～  ハンズオンに使用したsakura.ioモジュールは必要に応じて登録を解除します。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で対象のモジュールの【 】を クリックします。 105
106. 最後に ～sakura.io～  モジュールの設定画面に遷移します。下部の 【 登録解除 】 ボタンをクリックします。 106
107. 最後に ～sakura.io～  登録解除実行を確認されます。問題ない場合は再度 【 登録解除 】 をクリックします。 モジュールの削除には数秒かかります。  削除が完了すると、プロジェクトから該当モジュールの表示が消えていることを確認できます。 107
108. 最後に ～sakura.io～  次は連携サービスとともにプロジェクトを削除します。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 削除 】をクリックします。 108
109. 最後に ～sakura.io～  削除実行を確認されます。問題ない場合は再度 【 削除 】 をクリックします。  削除が完了すると、コントロールパネル上から該当プロジェクトの表示が消えていることを確 認できます。 109
110. 最後に ～Twilio～  設定したFunctionsのプログラムを開き、最下部の【 Delete this Function 】をクリッ クします。その後、削除の確認をされるため、【 Yes 】をクリックすると該当プログラムが削除 されます。 110
111. 最後に ～Twilio～  購入した電話番号の維持には月額費用がかかります。返却する場合は ［ Phone Numbers ］から［ アクティブな電話番号 ］を開き、最下部の 【 この電話番号をリリースする 】をクリックします。その後、返却の確認がされるため、 【 番号をリリースする 】をクリックすると該当番号が返却されます。 111
112. 最後に 112 以上でハンズオンにおける作業は全て終了となります。 お疲れ様でした！
113. 最後に 113 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間（部員）を募集しています。 （テーマはIoTに限らずクラウドやVPS、スタートアップ系ネタもOK！） ご興味があれば、Come and join us & Feel free to contact me! 連絡先 ： sakura-club@sakura.ad.jp さくらクラブ ： http://www.slideshare.net/MasayaHayashi/lt20151224
114. 114 そこに、さくら