sakura.io handson with IBM Cloud 20171208

IBM Cloud（Bluemix）& sakura.io体験ハンズオンBluemix User Group (BMXUG)共催

2017/12/8

(C) Copyright 1996-2017 SAKURA Internet Inc

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

2

はじめに

本ワークショップの目的

3

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

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

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

今回のハンズオンの流れ

4

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

マイコン（Arduino Uno）

温湿度センサ（SHT31/HDC1000）

sakura.ioモジュール

sakura.ioの設定

①②

各種LED

Webサービス連携（IBM Bluemix）

③

グラフ表示＆Twitter投稿

ボタンでのデバイス制御

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

さくらインターネット会員登録

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

Arduinoサンプル用スケッチ

HDC1000利用 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino

SHT31利用 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino

IBM Cloudコンソール

https://console.bluemix.net/

Node-REDサンプル用スケッチ（Node-RED動作確認）

https://github.com/sakuraio/handson-sample/blob/master/node-red/ibmcloud-graph-and-control-with-tweet.json

5




https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino

https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino

https://console.bluemix.net/


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

［参考］sakura.ioサービスサイト

https://sakura.io/

［参考］sakura.io開発者向けページ

https://sakura.io/developer/

［参考］sakura.ioモジュール＆オプションのご購入

https://sakura.io/product/

［参考］その他物品のご購入（秋月電子通商）

・温湿度センサ（SHT31） http://akizukidenshi.com/catalog/g/gK-12125/

・抵抗内蔵LED http://akizukidenshi.com/catalog/g/gI-06245/

・ジャンパコード http://akizukidenshi.com/catalog/g/gC-05159/

・Arduino Uno Rev3 http://akizukidenshi.com/catalog/g/gM-07385/

・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/

・ブレッドボード http://akizukidenshi.com/catalog/g/gP-05294/

6

https://sakura.io/

https://sakura.io/developer/

https://sakura.io/product/

http://akizukidenshi.com/catalog/g/gK-12125/

http://akizukidenshi.com/catalog/g/gI-06245/

http://akizukidenshi.com/catalog/g/gC-05159/

http://akizukidenshi.com/catalog/g/gM-07385/

http://akizukidenshi.com/catalog/g/gM-07772/

http://akizukidenshi.com/catalog/g/gP-05294/

Agenda

7

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

₋ さくらの通信モジュールの登録

₋ 連携サービスの設定

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

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

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

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

3. Webへのデータ連携（IBM Cloud）₋ IBMのライト・アカウントを作成する

₋ Cloud Foundry アプリ作成

₋ WebSocketを利用したデータ連携フロー作成

8

sakura.ioの設定

会員IDの作成

9

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

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

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

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

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

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

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

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

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

～～～以下省略～～～



10





sakura.ioの設定

①②

各種LED


③



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

11

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


https://sakura.io/

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

12

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

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

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

14

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

プロジェクトA

通信モジュール1uAAAAAAAAAA

通信モジュール2uBBBBBBBBBB

通信モジュール3uCCCCCCCCCC

データストアLight/Standard/…

簡易位置情報ON/OFF

連携サービス1WebSocket

連携サービス2Outgoing Webhook

ファイル配信File1/File2/…

連携サービス3AWS IoT

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

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

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

プロジェクトの作成

16

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

プロジェクトの作成

17

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

通信モジュールの登録

18

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


19

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


20

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

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

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

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

連携サービスの設定

21

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

連携サービスの設定（WebSocket）

22

追加サービスの選択画面に遷移します。今回はWebSocketを作成しますので、［WebSocket］をクリックします。


23

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

連携サービスの設定

24

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


25

WebSocketを設定しました、これでコントロールパネルでの準備は完了です。ここで表示されるWebSocketのURLはハンズオンの後半で使用しますので書き留めておいてください。

26



27





sakura.ioの設定

①②

各種LED


③



今回のワークショップでご提供するもの

28

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

+Arduino用シールド＆Arduino Uno Rev3

USB2.0

ケーブル（A-B）

12W級 9V-1.3A

DCアダプタ

ブレッドボード

人感センサ

（SB412A）

照度センサ

（GL5537-2）

温湿度センサ

（HDC1000 or SHT31）

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

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

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

本日は使用しません

Arduino IDEのセットアップ

29

https://www.arduino.cc/en/Main/Softwareから開発環境（Arduino IDE）を入手します。2017/9/21時点での最新版は【 1.8.5 】となります。ご利用環境がWindowsの場合は【Windows Installer 】、Macの場合は【Mac OS X 10.7 Lion or newer 】を選択します。



30

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


31

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


32

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

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

マイコン（Arduino）の準備

33

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

さくらの通信モジュールの取り付け

34

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

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

35

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

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

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

36

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

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

ライブラリの取得（SakuraIO）

37

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

FirmwareUpdate.ino

38

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

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

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

ブレッドボードについて

39

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

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

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

接続に利用

温湿度センサ（HDC1000/SHT31）について

40

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

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

表面裏面

LEDについて

41

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

陽極（アノード）デジタル端子に接続

陰極（カソード）GND端子に接続

温湿度センサ（HDC1000/SHT31）の繋ぎ込み

42

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

＜凡例＞

D5SDASCL

D6

GNDD7

3.3V

RDY/ADRGND

SCLSDA3.3V

GND

GND

GND

Digital 6

Digital 5

Digital 7


温湿度センサの動作確認（温湿度センサ-HDC1000利用の場合）

43

［ファイル］→ ［スケッチ例］→ ［ HDC1000 ］→ ［ hdc1000 ］を選択し、クリックで該当スケッチを書き込みます。［ツール］→ ［シリアルモニタ］もしくはクリックでTemp＆Humi情報が取得できることを確認します。何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。


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

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

［ファイル］→ ［新規ファイル］で新しいスケッチを表示し、下記URLの内容をスケッチにコピー＆ペーストします。をクリックし、［ツール］→ ［シリアルモニタ］もしくはクリックでTemp＆Humi情報に加え、シリアル値と

送信キュー情報が取得できることを確認します。問題があった場合、オレンジ色のエラーが表示されます。【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino 】

https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino

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

45

［ファイル］→ ［新規ファイル］で新しいスケッチを表示し、下記URLの内容をスケッチにコピー＆ペーストします。をクリックし、［ツール］→ ［シリアルモニタ］もしくはクリックでTemp＆Humi情報に加え、シリアル値と

送信キュー情報が取得できることを確認します。問題があった場合、オレンジ色のエラーが表示されます。【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino 】

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

https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino

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

46

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


47

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

→ 温度

→ 湿度

→ カウント値

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

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

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

値：送信された値

型：データの型式


48

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

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

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

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

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

時刻：

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

49

Webへのデータ連携（IBM Bluemix）


50





sakura.ioの設定

①②

各種LED


③



http://bluemix.netにアクセスして、Eメール・アドレスを入力し、「→」をクリックして登録処理を続けて下さい。

※ここで入力したEメール・アドレスがBluemixのユーザーIDになります

IBMのライトプラン・アカウントを作成する

51

http://bluemix.net/

必要事項を記入して、最下段の「アカウントの作成」をクリックしますクリックすると最終確認用のEメールが届くので、もう一度メールボックスを開いて下さい。


52

パスワードは登録完了後の最初のログインでさっそく使います。忘れないで下さいね！


53

ロボット対策の認証をクリアして下さい。


54

登録はこれで完了です。確認のメールが届くのでメールボックスを開いて下さい。


Eメールの本文中にある「Confirm Account」をクリックして下さい。

55


56

アカウントの登録が完了しました。そのままBluemixでアプリを作成するため「ログイン」をクリックします。

IBMのトライアルアカウントを作成する

57

登録したメールアドレスを入力し、「次へ」をクリックします。その後、登録したパスワードを入力し、「Log in」をクリックします。

[email protected]

「Internet of Things Platform Starter」作成

58

まだ何もアプリが作成されていないため、ダッシュボードには何も表示されていません。今回はNode-REDの作成のため、まず「オファリングの検討」をクリックします。


59

左側のメニューから「ボイラープレート」を選択し、表示された「Internet of Things Platform Starter」をクリックします。

Node-REDが、Internet of Things Platform Starterに含まれています


60

任意のアプリ名を入力し、他の値はデフォルトで「作成」をクリックします。

他のユーザーと重複しないようユニークな名前をつけて下さい


61

作成が始まると、「停止」から「開始中」「未実行」「実行中」に遷移します。実行中ステータスになった状態で「アプリURLにアクセス」を選択するとNode-REDの操作画面に遷移します。

Node-RED設定

64

Node-RED Starterでは、初めにセキュリティの設定を行います。「Next」をクリックします。

Node-RED設定

65

ログインに使用するUsernameおよびPasswordを設定します。必要に応じて作成したフローの閲覧権限と編集権限をチェックボックスで設定し「Next」をクリックします。

Node-RED設定

66

最後に設定した権限やUsername等の変数を変更する場合の案内が表示されます。確認したら「Finish」をクリックします。

Node-RED設定

67

設定した内容の反映が完了すると、Bluemixで用意された初期画面が表示されます。「Go to your Node-RED flow editor」をクリックします。

Node-RED設定

68

Node-REDの認証画面が表示されます。設定したUsernameとPasswordを入力し、「ログイン」をクリックします。

Node-RED設定

69

Node-REDにログインができました。サンプルのNode-REDフローが表示されていますが、これは使用しません。今回はまずブランクのシートを作成し、そこへ新規にNode-REDフローを作成します。シート右上の「＋」をクリックして下さい。

ノードパレット

シートInfo/Debugコンソール

デプロイ

Node-RED初期画面

70

Node-REDは「ノード」と呼ばれる機能の固まりをシート上で組み合わせ、ひとつの「フロー」にすることで、ほとんどプログラミングを知らない人でもプログラムを構築することができるツールとなります。

Node-RED WebSocketノードの作成

71

まずはWebSocketからのデータを受け取るノードを追加します。ノードパレットの入力から「websocket」ノードをシートにドラッグ&ドロップします。


72

ドラッグ&ドロップされたWebSocketノードをWクリックし、設定画面に移ります。種類は【接続】、名前は【任意の名称】を入力のうえ、URLの行にある鉛筆マークをクリックします。


73

URL部分はsakura.ioのコンパネからのペーストを行い、ドロップダウンの項目についてはデフォルトで定義されている【ペイロードを送信/受信】を選択し、【追加】をクリックします。


74

指定するURLの値は、sakura.ioのコンパネの連携サービスで確認できる赤枠部分となります。赤枠部分の情報をコピーして、WebSocketノードのURL部分にペーストします。


75

【完了】をクリックするとwebsocketノードへ設定が反映され、不備がない場合はノードの三角マークが消えます。WebSocketノードへの設定が反映されましたが、この時点ではsakura.ioからデータは入ってきていません。続いてはデータを表示するためのDebugノードを作成します。

Node-RED Debugノードの作成

76

次に、ノードパレットの出力から「debug」ノードをシートにドラッグ&ドロップします。Debugノードは自動で「msg.payload」に名前が変わります。特に設定は不要です。

Node-REDノード間の接続

77

各ノードの動作を繋げるために、WebSocketノード右端とDebugノード左端をドラッグ&ドロップで繋ぎます。

Node-REDフローのデプロイ

78

各ノードを接続し、準備が完了したら、右上部の【デプロイ】をクリックします。デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始されます。併せて、debugノードからの情報を確認するため、コンソールの【デバッグ】タブをクリックします。

動作確認

79

フローに問題がない場合、Websocketノード下部に［connected］と表示され、コンソールのdebug内にプラットフォームから取得したJSONデータを確認できます。debugノード右端の緑マークをクリックするとコンソールへの出力が停止されます。

Node-REDダッシュボード（計器盤）ノードの追加

80

この後のシナリオの準備として、ダッシュボード（計器盤）のノードをNode-REDに追加しておきます。まずこの後の操作や表示に影響を与えないよう、既存のフローをダブルクリックし、状態を【無効】にしたうえで、Node-RED右上の【メニュー（三）】から【パレットの管理】を選択します。


81

【ノードを追加】タブの検索窓から【 node-red-dashboard 】でヒットしたノードを追加します。確認に対しては【追加】を選択します。


82

ノードの追加が完了したら「デバッグ」タブの右に「dashboard」タブができています。確認したら【閉じる】をクリックします。

Node-REDフローサンプルのインポート

83

続いてNode-REDフローサンプルをインポートします。フローは下図のような構造になっており、センサーの温度・湿度を可視化してTwitterにメッセージをつぶやきます。WebSocketノードおよびTwitterノードに必要事項だけ設定することで連携を体験いただけます。

文字列として受け取ったJSONデータの変換

通信モジュールからのデータのみを通過

温度（ch0）データだけを抽出

温度（ch1）データだけを抽出

/ui/にグラフとして可視化

文章を生成（実行後10分待機）

/ui/にグラフとして可視化

Twitterアカウント連携で投稿

Node-REDフローサンプルのインポート（フローのデータのコピー）

84

まずフローのデータをクリップボードにコピーします。以下のURLをブラウザで開き、データをマウスでドラッグして、Ctrl+c（または右クリック→コピー）でクリップボードにコピーして下さい。【 https://github.com/sakuraio/handson-sample/blob/master/node-red/ibmcloud-graph-and-control-with-tweet.json 】


Node-REDフローサンプルのインポート（フローのデータのペースト）

85

Node-REDに戻って【三】→【読み込み】→【クリップボード】と進み、テキストエリアにデータをペースト（Ctrl+V）して【読み込み】をクリックして下さい。

Node-REDフローサンプルのインポート（フローのデプロイ）

86

「グラフ表示＆Twitter投稿（温度）」というシートが追加されたことを確認し、【デプロイ】でインポートを確定して下さい。「デプロイの確認」ウィンドウでは、そのまま【デプロイの確認】をクリックして下さい。

Node-REDセンサーデータの受信（websocketノードの設定）

87

インポートしたフローの先頭にあるwebsocketノードを設定します。内容は先の手順と同じです。「種類」を【接続】に変更し、「URL」の鉛筆マークをクリックして、sakura.ioのコンパネのwebsocketのURLをコピペして下さい。

Node-REDセンサーデータをダッシュボード（計器盤）に表示

88

websocketノードを設定したら【デプロイ】をクリックして設定を反映します。次に【dashboard】タブを開いて、【】をクリックして下さい。次ページのようなダッシュボードの画面が現れて、センサーデータが表示されます。

Node-REDフローサンプルの紹介（GUI表示＆Twitter連携）

89

【 http://<IPアドレス>:<指定したWeb UIポート番号>/ui/ 】にアクセスするか［ dashboard ］の【】をクリックすると、取得した情報に応じてリアルタイムに変化するグラフおよびゲージを確認することできます。［ dashboard ］の【 Theme 】をクリックすると、UI全体のカラーリングを変更できます。この時点ではまだ［ Control ］内のボタンによる制御は有効になっていません。


90

Twitterノードを設定のうえデプロイすると、［メッセージ化］ノードに記載された文章中に、その時取得した温度センサの情報が埋め込まれた状態で該当Twitterアカウントにメッセージが投稿されます。［メッセージ化］ノードの内容を書き換えることで任意の文章に変更することができます。


91

TweetノードをWクリックし、 [ Twitter ID ]行の鉛筆マークをクリックし、案内されるTwitterアカウント認証画面に進みます。


92

認証画面は利用しているブラウザでログインしているかどうかで画面遷移が異なります。それぞれ必要な項目を入力or確認したうえで【連携アプリを認証】をクリックすると[ Authorised]の表記とともに認証された旨表示されますので、案内に従いウィンドウを閉じます。

まだログインしていない場合既にログインしている場合


93

認証が成功しているとTwitter ID欄に認証したアカウントのIDが入力されています。問題なければ【追加】および【完了】をクリックし、設定を完了します。フローをデプロイするとTwitterへの連携が実行されます。


94





sakura.ioの設定

①②

各種LED


③



Node-REDフローサンプルの紹介（制御信号の送信）

95

サンプルを読み込んだだけではボタン押下時にLEDの制御は実行されません。これは生成されるJSONデータに組んだデバイスのモジュールIDが指定されていないためとなります。次にButtonノードを設定し、対象となるデバイスに制御信号が送信されるようにします。

各ノードの実行（テスト用）

該当WebSocket URLにJSONデータを送信

ボタン押下時に指定したJSONデータを生成


96

作成されたLED-RED-onノードをWクリックし、設定画面に移ります。［When Clicked, send: ］の［ payload ］行最右部の【】をクリックするとJSONエディタが起動します。2行目の【 %%moduleID%% 】を対象となるモジュールのものに差し替え、【完了】をクリックします。［ button ノードを編集］画面でも同様に【完了】をクリックします。※編集画面の［ Payload ］でも直接編集可能


97

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


98

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

out



動作確認

99




各種LED

以上で設定は完了です。温度センサを指で押さえ、一定間隔でグラフが変化（設定していればツイートも）すること、ボタン操作により生成されたJSONデータにより、LEDが制御されるまでを確認しましょう。

一定間隔で温度と湿度カウント値データを送信

WebSocketにより、リアルタイムで連携、表示

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

WebSocketにより、適切な形式のJSONは受け入れる

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

100

最後に

最後に～sakura.io～

101

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


102

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


103

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


104

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


105

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

最後に～IBM Cloud～

106

Bluemixに立てたNode-REDについてもアプリケーションを停止します。ダッシュボード画面を確認すると、Cloud Foundryアプリの状態が「実行中」になっており、サービス（Cloudant NoSQL DB）が1つ作成されています。なお、該当のCloud Foundryアプリ内で「モニタリング」をクリックした場合、availability-monitoring-autoというサービスが自動で作成されている場合があります。


107

Cloud Foundryアプリのアクション欄で「その他のアクション」ボタンをクリックすると、アプリの起動停止や削除に関するメニューが表示されます。アプリを停止する場合は「アプリの停止」をクリックします。


108

アプリの停止に関する確認がされますので、「停止」をクリックします。


109

停止処理が正常に実施されると状態欄が「停止」に遷移します。以上で今回の範囲において課金されるアプリとサービスは全て停止されました。


110

不要になったアプリは削除することもできます。「その他のアクションボタン」をクリックし、「アプリの削除」をクリックします。


111

アプリケーションの削除に関する確認がされますので、今回は併せて削除するため「<命名したアプリ名>-cloudantNoSQLDB」のチェックボックスにチェックを入れます。次に、経路情報も併せて削除するため、「経路」タブをクリックします


112

「<命名したアプリ名>.mybluemix.net」のチェックボックスにチェックを入れます。最後に「削除」ボタンをクリックします。


113

削除が正常に完了すると、プラットフォームに何もない状態に戻ります。以上でアプリおよびサービスの削除は完了です。

最後に

114

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

最後に

115

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

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

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

連絡先：[email protected]さくらクラブ： https://saku-love.doorkeeper.jp/

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

116

そこに、さくら

Technology

sakura.io handson with IBM Cloud 20171208