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

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

View Slide

2
はじめに

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

今回のワークショップでご提供するもの
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モジュール
（アンテナ取付済み）

View Slide

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

View Slide

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

View Slide

10
②
温度センサ
sakura.io
モジュール
Arduino Uno
③
ハンズオン
キット
WebSocket
連携
サービス
モジュール
sakura.ioの設定
プロジェクト
LED
①
前編

View Slide

さくらインターネット会員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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

27
sakura.ioの設定

View Slide

①
28
②
温度センサ
sakura.io
モジュール
Arduino Uno
③
前編
ハンズオン
キット
WebSocket
連携
サービス
モジュール
sakura.ioの設定
プロジェクト
LED

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

①
47
②
温度センサ
sakura.io
モジュール
Arduino Uno
③
前編
ハンズオン
キット
WebSocket
連携
サービス
モジュール
sakura.ioの設定
プロジェクト
LED

View Slide

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

View Slide

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

View Slide

⚫ 金額を選択するか(寄付する場合）、【 JUST DOWNLOAD 】からダウンロードします。
50

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

試験用プログラムの流し込み
⚫ 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
// 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 】でコピーします

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

67
(さくらのクラウド後編)

View Slide

前編
68
②
温度センサ
sakura.io
モジュール
Arduino Uno
③
ハンズオン
キット
WebSocket
連携
サービス
モジュール
sakura.ioの設定
プロジェクト
LED
①

View Slide

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

View Slide

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

View Slide

⚫ ログインが成功すると以下の画面が表示されます。
71

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

⚫ ノードの追加に関する確認が表示されますので、【追加】をクリックします。
⚫ 10秒程度でノードが追加され、パレットに追加された旨のメッセージが表示されます。
84

View Slide

⚫ 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://:<指定した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 】でコピーします

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

前編
92
②
温度センサ
sakura.io
モジュール
Arduino Uno
③
ハンズオン
キット
WebSocket
連携
サービス
モジュール
sakura.ioの設定
プロジェクト
LED
①

View Slide

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

View Slide

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

View Slide

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

View Slide

⚫ 【 %%moduleID%% 】から差し替える値は、先程sakura.ioのコントロールパネルで
プロジェクトに表示されていたuから始まる12桁の文字列です。
96

View Slide

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

View Slide

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

View Slide

⚫ 画面右上の【デプロイ】をクリックします。
99

View Slide

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

View Slide

結局どのくらいかかったか
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

View Slide

102
参考
DataStore API

View Slide

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

View Slide

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

View Slide

⚫ ［名前］は任意の名称を入力し、［作成］をクリックします。
105

View Slide

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

View Slide

【参考】連携サービスの設定（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】：取得するチャンネル指定

View Slide

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

View Slide

【参考】連携サービスの設定（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】：指定日時の以前と以後指定

View Slide

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

View Slide

111
参考サンプルスケッチ

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

121
構文
【enqueue】送信キューにデータを格納する
出力結果
enqueue
>enqueue 0 i 123
>
備考
enqueueコマンドを実行すると登録したデータは送信キューに貯められます。
送信キューは最大で32個まで蓄積され、超過したキューは貯められず破棄されます。

View Slide

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

View Slide

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

View Slide

124
構文
【cleartx】送信キューに貯められたデータをすべて消去する
出力結果
cleartx
>cleartx
>
備考
送信キューに貯められたデータの一部だけを削除することはできません。

View Slide

125
構文
【clearrx】受信キューに貯められたデータをすべて消去する
出力結果
clearrx
>clearrx
>
備考
受信キューに貯められたデータの一部だけを削除することはできません。

View Slide

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

View Slide

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

View Slide

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

View Slide

129
最後に

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

⚫ 削除の工程が表示されます。全てのステータスが成功となれば削除は完了です。
139

View Slide

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

View Slide

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

View Slide

142
そこに、さくら

View Slide

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

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

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

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

Other Decks in Technology

Featured

Transcript