sakura.io 体験ハンズオン（入門編 Part2）/sakuraio handson part2

sakura.io体験ハンズオン入門編 Part2 Groveでさらに簡単にIoTサービスを実現しよう 2019/7/24 (C) Copyright 1996-2018 SAKURA Internet
Inc. さくらインターネット株式会社 IoTチーム西田有騎だれもが、データを活かせる世の中へ。

2 はじめに

ハンズオンを円滑に進めるために ⚫ 本資料の内容では、いくつかの外部サービスやサイトをまたいで作業します。 ⚫ そのため、本資料をローカル環境で参照しつつ、URL集を併用いただくことを推奨します。 3 sakura.io紹介資料 http://bit.ly/sakuraio-intro-01 ハンズオン資料 http://bit.ly/sakuraio-handson-part2-01
リンク集 http://bit.ly/sakuraio01

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

本ハンズオンの目的とお願い ⚫ 本ハンズオンは sakura.io を使用し、組込み、Web/アプリ開発、それぞれのスキルセットを大きく超えることなく、Internet of Things(IoT) に携わることができることをご体験いただくものです。
⚫ そのため、組み込み系またはWeb/アプリ系のどちらか、または両方わからないという方にもご参加いただくことができます。 ⚫ 今回は1人に1つのキットをご用意しています。もしもご自身の知識分野で、近くの方のフォローができそうだなと思われましたら、積極的にサポートしあって進めていただければと思います。 5

Webサービス連携 ① 今回のハンズオンの流れ 6 ② マイコンおよびプログラムの構築温度センサ sakura.io モジュール
Arduino Uno ③ 前編後編：全ての設定が完了後ハンズオンキット WebSocket 連携サービスモジュール sakura.ioの設定ダッシュボード表示ボタンでのデバイス制御プロジェクト LED

今回のワークショップでご提供するもの 7 組み上げ済みキット USB2.0 ケーブル（A-B） 12W級 9V-1.3A ACアダプタ Grove Temperature
Sensor Grove Variable Color LED x 3個 Grove Cable x 4本下記3つの組み合わせ Arduino Uno Rev3 sakura.io シールド for Arduino Grove ベースシールド sakura.ioモジュール（アンテナ取付済み）

アジェンダ 1. Webサービス連携（さくらのクラウド前編） ₋ Node-REDサーバ用仮想サーバの作成 2. sakura.ioの設定
₋ プロジェクトの作成 ₋ sakura.ioモジュールの登録 ₋ 連携サービスの設定 3. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 温湿度センサおよびsakura.ioモジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ デバイスから送信されたデータの確認 4. Webサービス連携（さくらのクラウド後編） ₋ Node-REDでWebSocketを利用したデータ連携フロー作成（グラフ表示） ₋ Node-REDでWebSocketを利用したデータ連携フロー作成（ボタンでのデバイス制御） 8

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

後編：全ての設定が完了後ダッシュボード表示ボタンでのデバイス制御今回のハンズオンの流れ 10 ② マイコンおよびプログラムの構築温度センサ sakura.io
モジュール Arduino Uno ③ ハンズオンキット WebSocket 連携サービスモジュール sakura.ioの設定プロジェクト LED Webサービス連携 ① 前編

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

さくらのクラウドコントロールパネルログイン（さくらインターネット会員） ⚫ さくらのクラウドコントロールパネルにログインします。 ⚫ ［さくらインターネット会員としてログイン：］に会員ID、パスワードを入力し【
ログイン】をクリックします。 12 https://secure.sakura.ad.jp/cloud/

さくらのクラウドコントロールパネルログイン ⚫ ログインするとアカウントの選択を求められるため、割り当てられたアカウントを選択します。ハンズオンでは参加者の皆さんに個別のアカウントを割り当てます。注：実運用の際にアカウントを作成をされていない場合には、
左メニュー［アカウント］タブからアカウントとユーザを作成する必要があります。 13

さくらのクラウドコントロールパネルゾーン選択 14 ⚫ 環境を構築するゾーンを選択します。講師が別途指定するゾーンをご利用ください。

Node-REDサーバの作成 ⚫ 左側のペインのサーバを選択し、右上の【追加】ボタンをクリックします。 ※サーバ追加の案内が出る場合があります。 15

Node-REDサーバの作成 ⚫ デフォルトのサーバ作成画面は細かい設定が不要な「シンプルモード」になっています。 ⚫ もしチェックが外れていたら、右上【シンプルモード】のチェックを入れます。 16

Node-REDサーバの作成 ⚫ 今回は直接Node-REDがインストールされたサーバを配備します。 ⚫ タブ内から【アプリケーション】をクリックします。 17

Node-REDサーバの作成 ⚫ 現在利用可能なアプリケーションが表示されます。 ⚫ アイコン内の【 Node-RED 】をクリックします。 18

Node-REDサーバの作成 ⚫ Node-REDが選択され、【 CentOS 7.x ... 】が表示されていることを確認します。 ⚫ 以降は下にスクロールし、必要な設定を加えていきます。 19

Node-REDサーバの作成 ⚫ サーバープランおよびディスクプランを選択します。 ⚫ 今回はすべてデフォルトの値を使用しますので変更は不要です。 20

Node-REDサーバの作成 ⚫ Node-RED固有の設定値を指定します。 ⚫ 項目は以下をそれぞれ指定します。 ※ログインIDとログインパスワードは後ほど使いますのでメモをしておいてください。 21 Node-REDのWebUIポート番号：【 80
】を入力 Node-REDのログインID：任意のログインIDを入力 Node-REDのログインパスワード：任意のパスワードを入力

Node-REDサーバの作成 ⚫ 接続先のネットワークや管理ユーザのパスワードを指定します。 ⚫ 今回はパスワードやホスト名、公開鍵の変更は不要です。 ※実際の運用時は、要件に合ったパスワードや認証方法を指定してください。 22

Node-REDサーバの作成 ⚫ ホスト名と作製数を指定します。 ⚫ ホスト名は任意の名称を指定し、【作成】をクリックします。 ※金額は作成するゾーンによって異なります。 23

Node-REDサーバの作成 ⚫ 操作確認のダイアログが表示されるため、【作成】をクリックします。 ⚫ 指定した条件でサーバおよびディスクの作成を開始します。ステータスが全て成功になればサーバの作成は完了です。作成完了からNode-REDが起動しアクセスできるようになるまで、10分程度かかります。 24

Node-REDサーバの作成 ⚫ サーバ作成のステータスが成功に遷移した時点でサーバのIPアドレスを確認できます。コントロールパネル左側の【サーバ】をクリックすると作成済みサーバの一覧が表示されます。 ⚫ 最右部【 ▼ 】をクリックし、【
IPアドレスをコピー】をクリックすることで、該当サーバのIPアドレスをコピーすることができます。 Node-REDサーバのIPアドレスは後ほど使いますのでメモしてください。 25 ***.*** メモ情報あり

【参考】スタートアップスクリプト進捗状況の確認 ⚫ コントロールパネル上でサーバの起動状況は確認できますが、スタートアップスクリプトによる処理が完了したかまでは確認できないため、必要に応じてコンソールを用いて確認します。 ⚫ 該当のサーバをダブルクリックし、【コンソール】を選択するとOSの起動処理画面を確認できます。全ての処理が完了すると、起動画面からログインプロンプトに遷移します。 26

27 sakura.ioの設定

sakura.io コントロールパネルの考え方 29 プロジェクトC プロジェクトB プロジェクトモジュール3 ☑ データストアプラン有償版/無償版
☑ 簡易位置情報提供利用する/しない ☑ ファイル配信ファイル１、ファイル２... 連携サービス3 モジュール / 連携サービスプロジェクトに対して複数登録可能オプションサービスプロジェクトに対して1つ/1セット設定可能モジュール2 連携サービス2 モジュール1 uAAAAAAAAAA 連携サービス1 WebSocket ⚫ sakura.ioは【プロジェクト】という単位で管理します。 ⚫ プロジェクトには【モジュール】【連携サービス】を複数紐付けることができます。 ⚫ 各種【オプションサービス】はプロジェクトに対して１つもしくは1セット設定できます。

sakura.io コントロールパネルログイン ⚫ sakura.ioコントロールパネルにログインします。上記URLにアクセスします。 ⚫ 以下の画面で会員認証を求められるので、会員ID、パスワードを利用してログインします。 ※ログイン済みのセッションがある場合、この画面は省略されます。 30 https://secure.sakura.ad.jp/iot/

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

コントロールパネルへのログイン ⚫ ログインが成功すると、以下のような画面に誘導されます。 ⚫ 何も作成されていない状態になります。 32

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

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

モジュールの登録 ⚫ プロジェクトが作成されました。次にプロジェクト詳細画面からモジュールの登録を行います。 ⚫ 表示されているモジュール一覧画面右上の【モジュール登録】をクリックします。 35

組み上げ済みキットの取り出し ⚫ 組み上げ済みキットを箱から取り出します 36 組み上げ済みキット

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

モジュール登録（単品） ⚫ モジュール追加に成功すると［モジュールを追加しました］ダイアログが表示されるので、【モジュール一覧へ戻る】ボタンをクリックしてプロジェクト詳細画面に戻ります。 ※ID/PASSが正しくない、もしくは登録済モジュールを追加しようとした場合は下記ダイアログが表示されます 38
登録が成功した場合登録が失敗した場合 invalid は登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください already registered は別の会員IDで登録されています、まず過去に登録した会員IDでログインのうえ、該当モジュールの登録を解除ください

【参考】モジュール登録（一括） ⚫ QRコードから読み取れる文字列を入力することで複数台を一括登録することも可能です。 ⚫ 【一括】タブをクリックし、QRコードから読み取れる値を入力し、【追加】をクリックします。 ※モジュールの追加には数秒かかります。
※登録名はSERの値になります。 39 モジュール上面白ラベル表記

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

連携サービスの設定 ⚫ 最後に外部への連携サービスを設定します。プロジェクト詳細画面で【連携サービス】をクリックし、その後【連携サービス追加】をクリックします。 41

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

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

連携サービスの設定 ⚫ 連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。 ⚫ 作成した連携サービスの【】をクリックします。 44

連携サービスの設定（WebSocket） ⚫ WebSocketを設定しました、これでコントロールパネルでの準備は完了です。 ※WebSocketのURLは後ほど使用しますのでメモしてください。 45 メモ情報あり

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

【参考】モジュールとシールドの準備 ⚫ sakura.ioシールド for Arduinoに付属のジャンパを図のように取り付けます。 ⚫ sakura.ioモジュールにアンテナを取り付けた後、シールドに垂直にはめ込みます。 ※角度をつけて強く押し込むとコネクタが変形することがあるため注意して取り付けてください。 ※両面粘着テープを一度貼ると剥がすことが困難になります。 48
https://sakura.io/docs/pages/guide/startup-guide/arduino.html#id7 シールドのジャンパ取り付け箇所モジュールとシールドの取り付け

Arduino IDEのセットアップ ⚫ Webサイトから開発環境（Arduino IDE）を入手します。 2019/07/19時点の最新バージョンは［ 1.8.9 ］です。 ⚫ 環境がWindowsの場合は【
Windows Installer, for Windows XP and up 】 Macの場合は【 Mac OS X 10.8 Mountain Lion or newer 】を選択します。 49 https://www.arduino.cc/en/Main/Software

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

Arduino IDEのセットアップ ⚫ インストールはデフォルト推奨、ドライバーについても全てインストールします。 ※本スライド記載の画像はWindowsの場合です。 51 License Agreement Installation Options
Installation Folder ドライバインストール [ I Agree ] をクリック [ Next > ] をクリック [ Install ] をクリックドライバインストールを要求された場合、すべて [ インストール ] をクリック

Grove ベースシールドの取り付け ⚫ Grove ベースシールドを取り出し、ピン位置に注意しながら組み上げ済みキットに取り付けます。 52 組み上げ済みキット Grove ベースシールド
＋

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

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

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

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

FirmwareUpdate.ino ⚫ ［ファイル］→［スケッチ例］→［ SakuraIO ］→ 【
FirmwareUpdate 】を選択し、【】クリックでスケッチを書き込みます。［ツール］→ 【シリアルモニタ】もしくは【】クリックでアップデート状況を確認します。 ⚫ 現在のバージョン情報と比較し、新しいファームウェアが存在する場合はアップデートします。 ※PCからの給電が不安定/不足している場合は［ Update Failure ］と表示され、アップデートに失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。 57 旧いファームウェアが適用されている場合最新のファームウェアが適用されている場合 FW更新処理実施完了次第再起動更新処理不要なのでログのみ表示

sakura.ioモジュールの取り外し ⚫ マイコンとセンサー間を配線するため、キットから、ACアダプタとUSBケーブルを取り外します。 58

⚫ 本来、センサやLEDといったモジュールはそれぞれ繋ぐべきピンが決まっています。 ⚫ モジュール本体には一般的に各ピンに接続先が明記されています。 Groveの場合、コネクタが共通規格になっており、意識しなくとも扱うことができます。 Groveについて 59 温度センサ Variable Color
LED ピンアサインが記載

温度センサとLEDの繋ぎ込み ⚫ 図に従い、Groveケーブルを使用して温度センサおよびLEDを配線します。 ※LED自体の外観に違いはありません 60 D7：LED（赤） D6：LED（緑） D5：LED（青） ※モジュールの貼付シールを参照 A0：温度センサ
SIG SIG SIG Variable Color LED Variable Color LED Variable Color LED

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

試験用プログラムの流し込み ⚫ Githubの該当サンプルスケッチページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】ですべてを選択して、【
Ctrl +C 】でコピーします。 62 https://github.com/sakuraio/handson-sample/blob/reform/firststep/part2/arduino-firststep-part2.ino // ヘッダファイル指定 Including header files #include <SakuraIO.h> // LEDの定義 Definition of LED #define LED_1 7 #define LED_2 6 #define LED_3 5 // 変数の定義 Definition of variables SakuraIO_I2C sakuraio; const int B = 4250; // B value of the thermistor const int R0 = 100000; // R0 = 100k const int pinTempSensor = A0; // Grove - Temperature Sensor connect to A0 uint32_t cnt = 0; // 起動時に1回だけ実行 Run once at startup void setup() { Serial.begin(9600); Serial.print("Waiting to come online"); for (;;) { キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

試験用プログラムの流し込み ⚫ ［ファイル］→ 【新規ファイル】で新しいスケッチを表示し、以下URLの内容をスケッチにコピー＆ペーストします。【
】をクリックし、書き込みが終わったら【】クリックでシリアル値、Temperature情報に加え、送信キュー情報が取得できていることを確認します。 ※書き込み時に内容を保存していない場合、スケッチを保存するか確認されますがどちらでも構いません。 63 ※問題があった場合、オレンジ色のエラーが表示されます。 https://github.com/sakuraio/handson-sample/blob/reform/firststep/part2/arduino-firststep-part2.ino

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

デバイスから送信されたデータの確認 ⚫ サービス連携の編集画面下部に、デバイスから送信したデータがリアルタイムに表示されます ⚫ 最終到着データ (50件) ではモジュールから受け取ったデータを以下のように確認できますタイプ：プラットフォームからの内容に応じて、いくつかの種類に分かれる・channels
：モジュールからのデータ・connection ：接続の開始/終了・location ：簡易位置情報・keepalive ：WebSocketセッション確認ペイロード：受け取ったデータの payload部が表示される時刻：プラットフォームで該当のメッセージを受け取ったタイムスタンプ 65 モジュール：データを送信したモジュールのID

デバイスから送信されたデータの確認 ⚫ 【チャンネル別到着データ】をクリックするとチャンネルごとに最新の到着データが確認できます ⚫ モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 66 チャンネル：
各チャンネルに届いた最終のValueを表示接続ボタン：クリックでログ出力を開始/停止表示切り替えボタン：表示種別の切り替え

67 Webサービス連携 (さくらのクラウド後編)

前編ボタンでのデバイス制御今回のハンズオンの流れ 68 ② マイコンおよびプログラムの構築温度センサ sakura.io モジュール
Arduino Uno ③ ハンズオンキット WebSocket 連携サービスモジュール sakura.ioの設定プロジェクト LED Webサービス連携 ① 後編：全ての設定が完了後ダッシュボード表示

http://＜サーバのIPアドレス＞:＜指定したWeb UIポート番号＞/ Node-RED サーバへのログイン ⚫ Webブラウザで上記URLにアクセスします。 ※［ Node-REDのWebUIポート］に【 80 】を指定した場合はポート番号を省略できます
※サーバ行を右クリック、もしくは行最右部にある【 ▼ 】をクリックで簡単にIPアドレスをコピーできます 69

Node-RED サーバへのログイン ⚫ Node-REDのアクセス画面では、［ Username ］と［ Password ］欄に指定した【 Node-REDのログインID
】と【 Node-REDのログインパスワード】を入力し、【ログイン】をクリックします。 70

Node-RED サーバへのログイン ⚫ ログインが成功すると以下の画面が表示されます。 71

Node-RED 初期画面 ⚫ Node-REDは「ノード」と呼ばれる機能の固まりをシート上で組み合わせ、ひとつの「フロー」にすることで、ほとんどプログラミングを知らない人でもプログラムを構築できるツールです。 72 ノードパレットシート Info/Debug
コンソールデプロイ

Node-RED WebSocketノードの作成 ⚫ まずはWebSocketからのデータを受け取るノードを追加します。 ⚫ ノードパレットの入力から【 websocket 】ノードをシートにドラッグ&ドロップします。 73

Node-RED WebSocketノードの作成 ⚫ ドラッグ&ドロップされたwebsocket inノードをダブルクリックし、設定画面に移ります。 ⚫ 種類は【接続】、名前は任意の名前を入力のうえ、URLは【新規にwebsocket-
clientを追加... 】を選択した状態で、URLの行にある【】をクリックします。 74

Node-RED WebSocketノードの作成 ⚫ ［ URL ］欄には、sakura.ioのWebSocketのURL情報をペーストします。 ⚫ ［ TLS設定］はデフォルトの【
新規にtls-configを追加... 】のまま、［送信/受信］もデフォルトの【ペイロードを送信/受信】を選択し、【追加】をクリックします。 75

Node-RED WebSocketノードの作成 ⚫ 指定する［ URL ］の値は、コンパネの連携サービスで確認できる赤枠部分です。赤枠部分の情報をコピーして、websocket inノードのURL部分にペーストします。 ※URLの末尾とTokenは同一の文字列となるので、Token情報は不要です 76

Node-RED WebSocketノードの作成 ⚫ 【完了】をクリックし、websocket inノードへ設定が反映され、不備を示す右隅の三角マークが消えたことを確認します。 77

Node-RED Debugノードの作成 ⚫ 次に、ノードパレットの出力から【 debug 】ノードをシートにドラッグ&ドロップします。 ※Debugノードは自動で［ msg.payload ］に名前が変わります、設定は不要です 78

Node-RED ノード間の接続 ⚫ websocket inノード右端とDebugノード左端をドラッグ&ドロップで繋ぎます。 79

Node-RED フローのデプロイ ⚫ 各ノードを接続し、準備が完了したら、右上部の【デプロイ】をクリックします。デプロイが成功すると［デプロイが成功しました
］というメッセージが上部に表示されます。 80

動作確認 ⚫ 不備がなければwebsocket inノード下部に［］が表示されます。 ※2018/10/10現在、日本語表示の場合と誤訳されて表示されます。 ⚫ 【デバッグ（
））】タブをクリックするとsakura.ioからのJSONデータを確認できます。 ※debugノード右端の緑マークをクリックするとコンソールへの出力が停止されます。 81

⚫ 次に追加するフローの動作を阻害しないよう［フロー1 ］を以下手順で無効にします。フローの無効化 82 1. [ フロー1 ]タブをダブルクリックする
2. フローを編集画面で[ 状態 ]が【有効】になっていることを確認してクリックする 3. [ 状態 ]が【無効】になったことを確認できたら、【完了】をクリックする 4. [ フロー1 ]タブが点線表記になり【】マークが付いていることを確認する

Node-RED フローサンプルの紹介 ⚫ 次にサンプルのフローを利用するために必要なノードをNode-REDサーバに追加します。 ⚫ 右上部の［メニュー（）］から【パレットの管理】をクリックし、【
ノードを追加】タブの検索窓から【 node-red-dashboard 】を検索します。 ⚫ ノードがヒットしたら【ノードを追加】をクリックします。 83

Node-RED フローサンプルの紹介 ⚫ ノードの追加に関する確認が表示されますので、【追加】をクリックします。 ⚫ 10秒程度でノードが追加され、パレットに追加された旨のメッセージが表示されます。 84

Node-RED フローサンプルの紹介 ⚫ Githubの該当するサンプルフローページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】ですべてを選択して、【
Ctrl +C 】でコピーします。 85 https://github.com/sakuraio/handson-sample/blob/reform/firststep/part2/nodered-firststep-part2.json [ { "id": "a4ba57e6.f91cc8", "type": "tab", "label": "グラフ表示と制御", "disabled": false, "info": "本フローはsakura.ioハンズオンで利用する、Arduino UnoとGrove温度センサ＆LEDを用いたグラフ表示と制御を試すものです。¥n¥n▪グラフ表示¥n¥nsakura.ioのWebSocket （`wss://api.sakura.io/ws/v1/.....`）サービスから送信された JSONデータを用いてダッシュボード上にグラフを描画します。¥nまた、グラフは`http://<IPアドレス>:<指定したWeb UIポート番号>/ui/`で確認することができます。¥n¥nオプションとして、Twittter IDを設定することで温度情報（Channel1）を取り出し、Twitterにメッセージを投稿します。¥n¥n以下2点を設定しデプロイすることで動作します。 ¥n¥n1. sakuraio_in(WebSocket-inノード)¥n¥n sakura.io コンパネで確認できるWebSocketのURL （`wss://api.sakura.io/ws/v1/.....`）を設定します。¥n¥n2. Tweet(Twitterノード) ※オプション¥n¥n Ch1(temp)_parseと trigger 1hrをドラッグアンドドロップで接続します。¥n¥n 認証を行い Twitterのアカウントを連携します。（鍵アカウントでの動作は確認してキーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします

Node-RED フローサンプルの紹介 ⚫ Node-RED右上の［メニュー（）］から［読み込み］→【クリップボード
】をクリックし、上記URLでコピーした内容をペーストのうえ、【読み込み】をクリックします。 ⚫ 記載されたJSONの内容に基づき、シートに新たにフローが作成されます。 86 コピーしたJSONをペースト https://github.com/sakuraio/handson-sample/blob/reform/firststep/part2/nodered-firststep-part2.json

⚫ 用意されたフローはほぼ構成は済んでいます。以下の3つのノードを設定することで動作します。 Node-RED フローサンプルの紹介 87 ダッシュボードでの可視化ボタン操作によるデバイス制御 sakuraio_in （websocket
inノード） moduleID_set （Functionノード） sakuraio_out （websocket outノード）

⚫ ［ダッシュボード画面でのグラフ表示］フローでは、sakura.ioから受け取った JSONデータから温度の値を抽出し、現在値と一定間隔での推移を可視化します。 ⚫ sakuraio_inノード（websocket in）を設定することで動作します。 Node-RED フローサンプルの紹介
88 文字列として受け取った JSONデータの変換 sakura.ioのWebSocket から情報を取得モジュールからのデータのみを通過（type == channels） ../ui/ にグラフとして可視化温度（ch0）データだけを抽出

Node-RED フローサンプルの紹介（GUI表示 - WebSocket設定） ⚫ 作成された【 WebSocket inノード（sakuraio_in）】をダブルクリックし、先程の手順と同様、種類は【
接続】、URLは先程指定したもの、名前は任意の名称を入力します。 ※URLは過去設定したものがある場合、ドロップダウンで指定できます ⚫ 全て設定したら【完了】をクリックします。 89 先ほど設定したものを選択します

Node-RED フローサンプルの紹介（GUI表示 - WebSocket設定） ⚫ 画面右上の【デプロイ】をクリックします。 90

Node-RED フローサンプルの紹介（GUI表示） ⚫ デプロイが成功したら、上記URLにアクセスするか［ダッシュボード（）］タブの【】をクリックするとデータによりリアルタイムに変化する様子を確認できます。 91 http://＜サーバのIPアドレス＞:＜指定したWeb
UIポート番号＞/ui/

前編ダッシュボード表示今回のハンズオンの流れ 92 ② マイコンおよびプログラムの構築温度センサ sakura.io モジュール
Arduino Uno ③ ハンズオンキット WebSocket 連携サービスモジュール sakura.ioの設定プロジェクト LED Webサービス連携 ① 後編：全ての設定が完了後ボタンでのデバイス制御

今回のハンズオンの流れ 93 温度センサ sakura.io モジュール Arduino Uno 前編後編：全ての設定が完了後ハンズオン
キット WebSocket 連携サービスモジュールダッシュボード表示ボタンでのデバイス制御プロジェクト LED 一定間隔で温度と湿度カウント値データを送信 WebSocketにより、リアルタイムで連携モジュールIDとWebSocketURLが指定されていないため動作しない受信したJSONデータをダッシュボードに反映フロー内でモジュールIDと WebSocketURLを指定する ⚫ 現時点の設定ではボタンでのデバイス制御は正しく動作しません。これは制御対象となるモジュールIDと、クラウドの受け口となるWebSocketのURLを指定できていないためです。 ⚫ そのため、最後にNode-REDにて、上記2つのパラメータを指定します。

Node-RED フローサンプルの紹介（デバイス制御 – モジュールIDの指定） ⚫ ［デバイス制御（モジュール...）］フローでは、指定したモジュールIDを元に制御用の JSONデータを8個生成し、それらを変数にセットします。 ⚫
moduleID_setノード（Function）にモジュールIDを追記することで動作します。 ⚫ このフローはデプロイされた時に1回だけ動作します。 94 JSONデータに埋め込むモジュールIDを定義デプロイ時に自動実行制御用JSONデータ生成（変数context.global.xxxにセット）

Node-RED フローサンプルの紹介（デバイス制御 – モジュールIDの指定） ⚫ 【 functionノード（moduleID_set）】をダブルクリックし、設定画面を開きます。 ⚫ コード2行目の【
%%moduleID%% 】をsakura.ioのコントロールパネルで確認できるモジュールID（uから始まる12桁の文字列）に変更し、【完了】をクリックします。 95

Node-RED フローサンプルの紹介（デバイス制御 – モジュールIDの指定） ⚫ 【 %%moduleID%% 】から差し替える値は、先程sakura.ioのコントロールパネルでプロジェクトに表示されていたuから始まる12桁の文字列です。
96

Node-RED フローサンプルの紹介（デバイス制御 – WebSocketURLの指定） ⚫ ［デバイス制御（動作部分）］フローでは、ダッシュボード画面でクリックするボタンの表示を行います。 ⚫
sakuraio_outノード（websocket out）を設定することで動作します。 ⚫ ダッシュボードでボタンが押下されるたび、JSONデータを指定のWebSocketに送信します。 97 指定したWebSocketのURL にJSONデータを送信 ../ui/ でボタンとして表示クリックされると制御用JSONデータを送出

Node-RED フローサンプルの紹介（デバイス制御 – WebSocketURLの指定） ⚫ 作成された【 WebSocket out（sakuraio_out）】ノードをダブルクリックし、設定画面を開きます。先程の手順と同様、種類は【
接続】、名前は【任意の名称】を入力します。 ⚫ URLは過去設定したものがある場合、ドロップダウンで指定できます。 ⚫ 全て設定したら【完了】をクリックします。 98

Node-RED フローサンプルの紹介（デバイス制御 – WebSocketURLの指定） ⚫ 画面右上の【デプロイ】をクリックします。 99

今回のハンズオンの流れ 100 温度センサ sakura.io モジュール Arduino Uno 前編後編：全ての設定が完了後ハンズオン
キット WebSocket 連携サービスモジュールダッシュボード表示ボタンでのデバイス制御プロジェクト LED ⚫ 以上で設定は完了です。温度センサを指で押さえ、一定間隔でグラフが変化（設定していればツイートも）すること、ボタン操作により生成されたJSONデータにより、LEDが制御されるまでを確認しましょう。一定間隔でカウント値と温度データを送信 WebSocketにより、リアルタイムで連携 moduleで指定されたモジュールにデータを送信ボタン操作で指定した内容に基づきJSONデータ送信受信したJSONデータをダッシュボードに反映 JSONは電気信号に変換され定義したLEDの操作を実行

結局どのくらいかかったか 101 分類名称固定費用変動費用備考購入先URL アプリケーションさくらのクラウド
(1Core/1GB+20GB) - ¥27 3時間分 Node-RED稼働 - プラットフォーム &ネットワーク sakura.io基本料 - ¥60 1ヶ月分 10,000回の送受信 - 端末 sakura.ioモジュール ¥8,000 - https://sakura.io/product/module_l te.html sakura.io シールド for Arduino ¥5,000 - https://sakura.io/product/arduino.h tml Arduino Uno Rev3 ¥3,000 - http://akizukidenshi.com/catalog/g/ gM-07385/ USBケーブル Aオス-Bオス ¥130 - スケッチ書込用 http://akizukidenshi.com/catalog/g/ gC-07605/ ACアダプター ¥620 - 給電用 http://akizukidenshi.com/catalog/g/ gM-07772/ Grove ベースシールド ¥490 - 1ドル＝110円時 https://www.seeedstudio.com/Base -Shield-V2-p-1378.html Grove 温度センサ ¥319 - 1ドル＝110円時 https://www.seeedstudio.com/Grov e-Temperature-Sensor-p-774.html Grove Variable Color LED ¥1,287 - 3個、1ドル＝110円時 http://wiki.seeedstudio.com/Grove- Variable_Color_LED/ 合計（税抜） ¥18,846 ¥87

102 参考 DataStore API

【参考】連携サービスの設定（DataStore API） ⚫ sakura.ioは、蓄積データを活用するために［ DataStore API ］を提供しています。 ⚫ リアルタイムではなく、バッチ処理等でのデータの受け取りを想定したシステムでも連携が可能になるよう、APIを利用して期間やモジュール等の条件を指定したJSONデータを
呼び出すことができます。 103 リアルタイム連携（WebSocket他）非リアルタイム連携（DataStore API）外部システム sakura.io モジュールデータストア HTTP MQTT WebSocket HTTP

【参考】連携サービスの設定（DataStore API） ⚫ 連携サービスの選択画面で【 DataStore API 】をクリックします。 104

【参考】連携サービスの設定（DataStore API） ⚫ ［名前］は任意の名称を入力し、［作成］をクリックします。 105

⚫ 作成した連携サービスをクリックすると【 Token 】を確認できます。 ⚫ Tokenをコピーし、コンパネ右上の会員IDをクリックし、展開されたメニューから【 DataStore v1 Document
】をクリックします。【参考】連携サービスの設定（DataStore API） 106

【参考】連携サービスの設定（DataStore API） /channels の取得 ⚫ ［ /channels ］は蓄積されたデータをチャンネル単位で取得します。単体のデータを複数の形式（入力時の形式［ value
］、数値［ value_num ］、文字列［ value_str ］）で格納しているため、単体でも価値のあるデータが活用しやすい形式となっています。 ⚫ ［ /channels ］は該当UR（ https://api.sakura.io/datastore/v1/docs/ ）にて、前述の【 Token 】情報、および以下のパラメータを指定することで任意の情報を取得できます。 107 【module】：モジュールのモジュールID 【size】：一度に取得するデータの数【order】：昇順（ASC）と降順（DESC）指定【cursor】：※後述※ 【after/before】：指定日時の以前と以後指定【channel】：取得するチャンネル指定

【参考】連携サービスの設定（DataStore API） /channels の取得 ⚫ 指定された条件を元に【 Try it out! 】をクリックすると、［
Response Body ］欄に条件に応じたデータを返します。またクリック後に返される［ Request URL ］から同様のデータを取得できます。 108 { "meta": { “count”: <取得した件数>, “cursor”: “<sizeで指定した件数を超えた場合に、次のレスポンスを取得するためのカーソル>”, “match”: <ヒットした件数> }, "results": [ { “channel”: <データが格納されているチャンネル>, “datetime”: “<データがモジュールのキューに格納された時間>”, “id”: “<送信されたデータのID>", “module”: “<データが送信されたモジュールのID>", “type”: “<送信されたデータの型式>", “value”: <typeで指定された型式でのデータ>, “value_num”: <number形式でのデータ>, “value_str”: “<string形式でのデータ>" }, { "channel": … ＃以下[channel］単位のデータがcount数分列挙

【参考】連携サービスの設定（DataStore API） /messages の取得 ⚫ ［ /messages ］は蓄積されたデータをRM単位で取得します。RMに含まれる複数チャンネルのデータの関係性が重要な場合に活用しやすい形式です。（鍵の「解錠者ID」と「入退室フラグ」等） ⚫
また、［ /messages ］にはモジュールの接続および切断の情報も含まれています。 ⚫ ［ /messages ］は該当URL（ https://api.sakura.io/datastore/v1/docs/ ）にて以下のパラメータを指定することで任意の情報を取得できます。 109 【type】：取得するRMのtype指定【module】：モジュールのモジュールID 【size】：一度に取得するデータの数【order】：昇順（ASC）と降順（DESC）指定【cursor】：※後述※ 【after/before】：指定日時の以前と以後指定

【参考】連携サービスの設定（DataStore API） /messages の取得 ⚫ 指定された条件を元に【 Try it out! 】をクリックすると、［
Response Body ］欄に条件に応じたデータを返します。またクリック後に返される［ Request URL ］から同様のデータを取得できます。 110 { "meta": { "count": <取得した件数>, "cursor": “<sizeで指定した件数を超えた場合に、次のレスポンスを取得するためのカーソル>”, "match": <ヒットした件数> }, "results": [ { “datetime”: “<対象のRMをプラットフォーム側で受信した時間>”, "id": “<格納されたRMのID>", "module": “<データが送信されたモジュールのID>", "payload": { "channels": [ { "channel": <データが格納されているチャンネル>, "type": “<送信されたデータの型式>", "value": <typeで指定された型式でのデータ> } ］ }, "type": "channels" }, { “datetime”: … ＃以下[message］単位のデータ

111 参考サンプルスケッチ

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

【参考】Shell.ino 113 シリアルモニタからのコマンド操作を提供します。改行を［CRのみ］とした後、提供されているコマンドを手入力で確認することができます。

【参考】Shell.ino 114 構文【version】現在のファームウェアバージョンを表示する出力結果 version >version v1.0.0-161109-c566dba 備考

【参考】Shell.ino 115 構文【serial】モジュールのシリアル番号を表示する出力結果 serial >serial 16A0100134 備考

【参考】Shell.ino 116 構文【status】モジュールの通信状態を確認する出力結果 status >status Online Last Error
Code: 0 備考

【参考】Shell.ino 117 構文【sqi】モジュールの電波強度を確認する出力結果 sqi >sqi 5 備考電波強度は5を最大として強度に伴い数値が下がり、0は圏外であることを示します。

【参考】Shell.ino 118 構文【unixtime】UTC形式の現在時刻を表示する出力結果 unixtime >unixtime 1480497574 備考

【参考】Shell.ino 119 構文【update】ファームウェアのアップデートを実行する出力結果 update >update Current Version: v1.0.0-161109-c566dba
Unlock Starting update Waiting for update . 備考

【参考】Shell.ino 120 構文【reset】モジュールのソフトウェアリセットを実行する出力結果 reset >reset > 備考シリアルモニタに実行結果は表示されません。
ソフトウェアリセットを実行するとモジュールが再起動を行います。モデムの起動、および通信確立までにおおよそ1分程度を要します。

【参考】Shell.ino 121 構文【enqueue】送信キューにデータを格納する出力結果 enqueue <ch> <type> <value> >enqueue
0 i 123 > 備考シリアルモニタに実行結果は表示されません。 enqueueコマンドを実行すると登録したデータは送信キューに貯められます。送信キューは最大で32個まで蓄積され、超過したキューは貯められず破棄されます。

【参考】Shell.ino 122 構文【send】送信キューに貯められたデータを送信する出力結果 send >send > 備考シリアルモニタに実行結果は表示されません。
sendコマンドを実行すると、貯められたデータは16個分を1つのメッセージとして送信します。キューが17個以上存在する場合、2つ目のメッセージも送信され、キューから削除されます。

【参考】Shell.ino 123 構文【size】送信/受信キューに貯められたデータ数を確認する出力結果 size >size Tx Queue Avail:
32 Queued: 0 Rx Queue Avail: 32 Queued: 0 備考 Tx Queue は送信キュー、Rx Queue は受信キューを表します。 Availは利用可能数、Queuedは貯められているキューの数を表します。

【参考】Shell.ino 124 構文【cleartx】送信キューに貯められたデータをすべて消去する出力結果 cleartx >cleartx > 備考シリアルモニタに実行結果は表示されません。
送信キューに貯められたデータの一部だけを削除することはできません。

【参考】Shell.ino 125 構文【clearrx】受信キューに貯められたデータをすべて消去する出力結果 clearrx >clearrx > 備考シリアルモニタに実行結果は表示されません。
受信キューに貯められたデータの一部だけを削除することはできません。

【参考】Shell.ino 126 構文【dequeue】受信キューに貯められたデータをすべて受信する出力結果 dequeue >dequeue empty 備考受信キューに貯められたデータの一部だけを受信することはできません。
受信可能なデータが存在しない場合はemptyを返します。受信されたデータはキューから自動的に削除されます。

【参考】Shell.ino 127 構文【peek】受信キューに貯められたデータを閲覧する出力結果 peek >peek empty 備考受信キューに貯められたデータの一部だけを受信することはできません。
受信可能なデータが存在しない場合はemptyを返します。閲覧したデータは削除されずキューに残されます。

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

129 最後に

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

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

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

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

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

最後に～さくらのクラウド～ ⚫ グローバルIPアドレスを持つサーバは攻撃対象になるため、該当サーバを停止・削除します。 ⚫ サーバがまだ起動している場合、さくらのクラウドで対象サーバのチェックを入れ、［電源操作］から【
シャットダウン】をクリックします。 135

最後に～さくらのクラウド～ ⚫ シャットダウン対象を確認のうえ【シャットダウン】をクリックします。 ⚫ 再度ダイアログにて確認が表示されますので
【実行】をクリックします。 136

最後に～さくらのクラウド～ ⚫ シャットダウンが正常に実行されると、チェックボックス横のラインが「緑→赤→灰」と遷移します。 ⚫ ラインが灰色に変化したら再度対象となるサーバにチェックを入れ、【削除】をクリックします。
137

最後に～さくらのクラウド～ ⚫ 今回は［接続されたディスク］も削除しますのでチェックを入れ、【削除】をクリックします。 ⚫ ダイアログが表示されますので【
実行】をクリックします。 138

最後に～さくらのクラウド～ ⚫ 削除の工程が表示されます。全てのステータスが成功となれば削除は完了です。 139

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

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

142 そこに、さくら

sakura.io 体験ハンズオン（入門編 Part2）/sakuraio handson p...

sakura.io 体験ハンズオン（入門編 Part2）/sakuraio handson part2

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

Other Decks in Technology

Featured

Transcript