「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡...

さくらのIoT Platformα

ハンズオン

(C) Copyright 1996-2016 SAKURA Internet Inc.

2016年7月23日

さくらインターネット株式会社

技術本部ビジネス推進グループ西田有騎


本ワークショップの目的

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

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

3. チーム内に組込み系エンジニア、もしくはWeb/アプリ開発系エンジニアの方がいらっしゃいましたら、ご不明点を積極的にフォローしあって進めていただければと思います。

2


会場のみスライド

ワークショップ用アカウント

3


Agenda

1. はじめに

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

₋ マイコン（Arduino）の準備

₋ 温湿度センサの繋ぎ込み

₋ さくらのIoT Platformα コントロールパネルの操作

₋ さくらのIoT通信モジュールの繋ぎ込み

₋ 通信モジュールへのセンサデータ受け渡し

3. Webへのデータ連携

₋ さくらのクラウドコントロールパネルの操作

₋ Webサーバの構築（Node-Red）

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

₋ 参考：コンテナホスティングサービス Arukas

4. 質疑応答、自由時間

5. 最後に

4

はじめに

(C) Copyright 1996-2016 SAKURA Internet Inc. 6

なぜIoTは面倒なのか

①デバイス

②プログラミング

③回線

④プロトコル

⑩セキュリティ

⑤データ保全

⑥負荷設計

⑦運用保守

⑧他クラウド連携

⑨データ活用

クラウドモノ

端末スマホ

モノからヒトへの安全なデータ経路を考える必要がある（プロトタイプであっても、商用利用であればなおさら）


さくらインターネットが実現したいこと

API GWマイコン Client

UARTSPII2C

HTTPAPI

さくらのIoT通信

モジュール

閉域網

モノづくりの領域

Web/アプリ開発の領域

さくらのIoT Platformα

の領域

Chip 2 Net

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

9


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

Arduino Uno

Rev3

9

ブレッドボード

ジャンパーコード人感センサ照度センサ温湿度センサ各種抵抗※必要に応じてご提供

さくらのIoT通信モジュール

+Arduino用シールドキット

給電用USB2.0

ケーブル(A-B)

マイコンの準備

棒アンテナ


Arduino Softwareのダウンロード

10

https://www.arduino.cc/en/Main/Software



Arduino Softwareのダウンロード

11

【JUST DOWNLOAD】にてダウンロード



Arduino Softwareのセットアップ

12

インストールは全てデフォルト推奨、ドライバーについても全てインストール



Arduino Softwareのセットアップ

13

Arduino Softwareが起動したら、Arduino本体をPCに接続します。その後ボードは【Arduino/Genuino Uno】、シリアルポートは出てきたCOMポートを選択します。



マイコン（Arduino）の準備

14

[ファイル]→[新規ファイル]→【→】ボタンクリックで内容がクリアされますので、該当箇所のLEDが点灯状態になることを確認します



マイコン（Arduino）の準備

15

[ファイル]→[スケッチの例]→[01.Basics]→[Blink]→【→】ボタンクリックで該当箇所のLEDが点滅状態になることを確認します



温湿度センサ HDC1000 ライブラリ

16

#include "HDC1000.h"

HDC1000 hdc1000;

void setup() {Serial.begin(9600);// hdc1000.setRdyPin(PIN_NO); // use Rdy Pinhdc1000.begin();

}

void loop() {float temp = hdc1000.getTemperature();

if (temp == HDC1000_ERROR_CODE) {hdc1000.begin(); // retry oncetemp = hdc1000.getTemperature();

}Serial.print("Temperature: ");Serial.println(temp);

float humi = hdc1000.getHumidity();

if (humi== HDC1000_ERROR_CODE) {hdc1000.begin(); // retry oncehumi = hdc1000.getTemperature();

}

Serial.print("Humidity: ");Serial.println(humi);delay(1000);

}

Googleにて「github hdc1000」を検索し、ライブラリを入手します。https://github.com/hotchpotch/Arduino-HDC1000

温湿度センサの繋ぎ込み

起動時の処理

ループ処理

温度取得

湿度取得

エラー時の対応

シリアルモニタ表示

エラー時の対応

シリアルモニタ表示

Copyright (c) 2015 Yuichi TatenoReleased under the MIT licensehttps://github.com/hotchpotch/Arduino-HDC1000/blob/master/LICENSE.txt


ライブラリの入手

17

入手したフォルダごと以下へ格納します。インストール先を変更した場合は別フォルダとなっている場合があります。配置をしたらArduino Softwareを再起動します。Windows C:¥Users¥《ユーザ名》¥Documents¥Arduino¥librariesMac 書類¥Arduino¥libraries



+VSDASCL

GND


18

3.3

V

GN

D

SC

L

SD

A

ジャンパーコードを接続、ブレッドボード側は色で明示された範囲は自由に接続可温湿度センサの向きに注意して接続



温湿度センサの動作確認

19

[ファイル]→[スケッチの例]→[HDC1000]→[hdc1000]→【→】ボタンをクリック[ツール]→[シリアルモニタ]よりTemperature＆Humidity情報が取得されることを確認します。



コントロールパネルへのログインさくらのIoT

Platformα コントロールパネルの操作

Googleにて「さくらインターネット iot 開発者」を検索し、コンパネにログインhttps://iot.sakura.ad.jp/developer/

21


コントロールパネルへのログインさくらのIoT


用意されている会員ID、パスワードを利用してログインします。

22




23


新規プロジェクト作成さくらのIoT


[新規プロジェクト]をクリックし、新規にプロジェクトを作成します。

24


新規プロジェクト作成さくらのIoT


[名称]欄に任意の名前を入力し、[作成する]をクリックします。

25


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


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

26


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


用意されている登録用ID、登録用PASS、および任意の名称を入力して、[追加する]ボタンをクリックします。

27


連携サービスの設定

cccccccccccccc

さくらのIoTPlatformα コントロールパネルの操作

通信モジュールが登録されました。最後に外部への連携を設定します。

28


連携サービスの設定さくらのIoT


今回はWebSocketを作成します。[WebSocket]をクリックします。

29




[名前]欄に任意の名前を入力し、[作成する]をクリックします。

30




WebSocketを設定しました、これでコントロールパネルでの準備は完了です

31


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

Arduinoのピン穴と合致するようにはめ込みます、5V-DC部分が干渉するため強く押し込みすぎず、水平になるよう取り付けください

さくらのIoT通信モジュールの繋ぎ込み

32


+VSDASCL

GND


ジャンパーコードを接続、ブレッドボード側は色で明示された範囲は自由に接続可温湿度センサの向きに注意して接続

3.3

V

GN

D

SC

L

SD

A


33


温湿度センサの動作確認＃再確認さくらのIoT通信モジュールの繋ぎ込み

[ファイル]→[スケッチの例]→[HDC1000]→[hdc1000]→【→】ボタンをクリック[ツール]→[シリアルモニタ]よりTemperature＆Humidity情報が取得されることを確認します。

34


さくらのIoT通信モジュールライブラリ

#include <SakuraAlpha.h>

#define BUF_LEN 16

uint32_t cnt = 0;

SakuraAlphaI2C sakura;

void setup() {Serial.begin(9600); // start serial for output

Serial.println("Waiting to come online...");for(;;){if( sakura.getNetworkStatus() == 1 ) break;delay(1000);

}}

uint8_t updated[BUF_LEN];

void loop() {cnt++;Serial.println(cnt);sakura.writeChannel(0,cnt);sakura.writeChannel(1,cnt);sakura.writeChannel(2,cnt);delay(250);

int num_updated = sakura.getUpdatedChannels(updated, BUF_LEN);Serial.print(num_updated);Serial.print(" updated channels: ");for (int i = 0; i < min(num_updated,BUF_LEN); i++) {Serial.print(' ');Serial.print((int)updated[i]);

}Serial.println("");

char type=0;byte value[8]={0};

sakura.readChannel(0, &type, value);

for (int i = 0; i < 8; i++) {Serial.print(' ');Serial.print(value[i],HEX);

}

Serial.print(" type:");Serial.print(type);Serial.println("");delay(250);

Serial.print("Tx[0] status: ");Serial.print( sakura.getTxChannelStatus(0) );Serial.println("");

Googleにて「github sakura arduino」を検索し、ライブラリを入手します。https://github.com/sakura-internet/SakuraAlphaArduino

通信モジュールへのセンサデータ受け渡し

通信状態取得

起動時の処理

ループ処理

35


さくらのIoT通信モジュールライブラリ

sakura.transmit(TRANSMIT_ONCE);delay(250);

num_updated = sakura.getUntransmittedChannels(updated, BUF_LEN);Serial.print(num_updated);Serial.print(" untransmitted channels: ");for (int i = 0; i < min(num_updated,BUF_LEN); i++) {Serial.print(' ');Serial.print((int)updated[i]);

}Serial.println("");delay(1000);

Serial.println("");}

通信モジュールへのセンサデータ受け渡

し

データ送信

Googleにて「github sakura arduino」を検索し、ライブラリを入手します。https://github.com/sakura-internet/SakuraAlphaArduino

36


ライブラリの入手

入手したフォルダごと以下へ格納します。インストール先を変更した場合は別フォルダとなっている場合があります。配置をしたらArduino Softwareを再起動します。Windows C:¥Users¥《ユーザ名》¥Documents¥Arduino¥librariesMac 書類¥Arduino¥libraries


し

37


温湿度センサライブラリ流用部分


HDC1000 hdc1000;

void setup() {Serial.begin(9600);// hdc1000.setRdyPin(PIN_NO); // use Rdy Pinhdc1000.begin();

}

void loop() {float temp = hdc1000.getTemperature();




if (humi== HDC1000_ERROR_CODE) {hdc1000.begin(); // retry oncehumi = hdc1000.getHumidity();

}

Serial.print("Humidity: ");Serial.println(humi);delay(1000);

}

①

②

③

該当ライブラリから赤字部分を弊社用ライブラリに流用します


し

38

Copyright (c) 2015 Yuichi TatenoReleased under the MIT licensehttps://github.com/hotchpotch/Arduino-HDC1000/blob/master/LICENSE.txt


通信モジュール + 温湿度センサライブラリ

#include <SakuraAlpha.h>

#define BUF_LEN 16

uint32_t cnt = 0;

SakuraAlphaI2C sakura;


HDC1000 hdc1000;

void setup() {

hdc1000.begin();

Serial.begin(9600); // start serial for output

Serial.println("Waiting to come online...");for(;;){if( sakura.getNetworkStatus() == 1 ) break;delay(1000);

}}

uint8_t updated[BUF_LEN];

void loop() {

float temp = hdc1000.getTemperature();




if (humi== HDC1000_ERROR_CODE) {hdc1000.begin(); // retry oncehumi = hdc1000.getHumidity();

}

Serial.print("Humidity: ");Serial.println(humi);

cnt++;Serial.println(cnt);sakura.writeChannel(0,temp);sakura.writeChannel(1,humi);sakura.writeChannel(2,cnt);delay(250);

～以下略～

①挿入

②挿入

③挿入

④修正


し

39


プログラムの修正

[ファイル]→[スケッチの例]→[SakuraAlpha]→[SakuraAlpha_I2C]を開いて修正を実施後、【→】ボタンクリック後、 [シリアルモニタ]よりTemperatureおよびHumidity情報に加え、カウント情報とデータ送信が表示されることを確認します。


し

40


さくらのIoT通信モジュールの繋ぎ込み通信モジュールへのセンサデータ受け渡

し

作成した連携サービスを開き、シリアルポートで表示される情報と同様の情報が取得されていることを確認します。上手くいかない場合は [SakuraAlpha_I2C_with_hdc1000]で確認します。

41

Webへのデータ連携




43


さくらのクラウドコントロールパネル

https://secure.sakura.ad.jp/cloud/ より、「さくらインターネット会員としてログイン：」に前述の会員ID、パスワードを入力します。

さくらのクラウドコントロールパネルの

操作

44


アカウントの作成

作成直後は操作の権限を決める「アカウント」および「ユーザ」が存在しないので、アカウントの作成から開始します。


操作

45



記載事項に同意のうえ、チェックボックスにチェックを入れます。


操作

46



2個のチェックを入れると必要情報の記入を求められますので、名前、アカウントコード、パスワードに加え、「このアカウント用の同名ユーザを作成」をチェックし作成します。


操作

47



確認のダイアログが表示されますので内容に問題が無ければ【作成】をクリックします。


操作

48



アカウントが作成されました。本ワークショップでは割愛いたしますが、アカウント内ごとにユーザはアクセス権限を定めることが可能です。


操作

49


ユーザの作成

「このアカウント用の同名ユーザを作成」にチェックを入れたため、[ユーザ]タブをクリックいただくと同名のユーザが作成されていることが確認できます。


操作

50


Webサーバ用インスタンスの作成さくらのクラウドコントロールパネルの

操作

アカウントを選択します。

51


Webサーバ用インスタンスの作成下記項目が選べるようになりますので、[さくらのクラウド（IaaS）]をクリックします。


操作

52


Webサーバ用インスタンスの作成ログインが成功するとホーム画面が表示されますので、[さくらのクラウド（IaaS）]をクリックします。


操作

53


Webサーバ用インスタンスの作成

はじめはサーバの追加の案内が出ておりますので、【追加】をクリックします。


操作

54


Webサーバ用インスタンスの作成ホスト名はお好きな値を選択し、サーバプランおよびディスクプランはデフォルトのままを選択いただきます。


操作

55



OSは[Unix / Linux]から【6.x 64bit】を選択いただきます。


操作

56


Webサーバ用インスタンスの作成接続先はインターネット、パスワードはお好きなものを入力いただきます。パスワードは強度チェックを行っており、[普通]以上のものをご利用いただけます。また、本件では公開鍵は利用しませんので、【なし】のままで結構です。


操作

57



内容に問題が無ければ、【作成】をクリックします。


操作

58



確認のダイアログが表示されますので、【作成】をクリックします。


操作

59



サーバが作成される様子を確認いただけます。


操作

60



サーバが作成されました。


操作

61


コンソールでの環境のセットアップWebサーバの構築（Node-Red）

ここからはターミナルソフトで操作することを前提に進めます。Tera Term等でさくらのクラウドのコンパネに表示されているIPアドレスへ接続します。

62


コンソールでの環境のセットアップ

------------------------------------------------------------#Gitのインストール------------------------------------------------------------[root@test ~]# yum -y install gitLoaded plugins: fastestmirror, priorities, securitySetting up Install ProcessDetermining fastest mirrorsepel/metalink | 5.2 kB 00:00* elrepo: ftp.ne.jp* epel: www.ftp.ne.jp

～中略～

Updated:git.x86_64 0:1.7.1-4.el6_7.1

Dependency Updated:perl-Git.noarch 0:1.7.1-4.el6_7.1

Complete!

Webサーバの構築（Node-Red）

63



------------------------------------------------------------#Node Version Manager(NVM)のインストール------------------------------------------------------------[root@test ~]# git clone https://github.com/creationix/nvm.git ~/.nvmInitialized empty Git repository in /root/.nvm/.git/remote: Counting objects: 4732, done.remote: Total 4732 (delta 0), reused 0 (delta 0), pack-reused 4731Receiving objects: 100% (4732/4732), 1.27 MiB | 544 KiB/s, done.Resolving deltas: 100% (2814/2814), done.

[root@test ~]# source ~/.nvm/nvm.sh

[root@test ~]# nvm help

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:- full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)

～中略～

Note:to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)


64



------------------------------------------------------------#Node.jsのインストール------------------------------------------------------------[root@test ~]# nvm ls-remote

v0.1.14v0.1.15v0.1.16

～中略～

v6.2.0v6.2.1v6.2.2

[root@test ~]# nvm install v6.2.2Downloading https://nodejs.org/dist/v6.2.2/node-v6.2.2-linux-x64.tar.xz...######################################################################## 100.0%Now using node v6.2.2 (npm v3.9.5)Creating default alias: default -> v6.2.2

[root@test ~]# node -vv6.2.2


65



------------------------------------------------------------#Node.jsの設定変更と動作確認------------------------------------------------------------[root@test ~]# vi ~/.bash_profile

※末尾に以下を挿入if [[ -s ~/.nvm/nvm.sh ]];then source ~/.nvm/nvm.sh

fi

[root@test ~]# vi example.js

var http = require('http');

http.createServer(function (request, response) {response.writeHead(200, {'Content-Type': 'text/plain'});response.end('Hello World¥n');

}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

[root@test ~]# node example.jsServer running at http://127.0.0.1:8124/※表示されたら[Ctrl]+[C]でプログラムを停止します


66



------------------------------------------------------------#Node-Redの設定変更------------------------------------------------------------[root@test ~]# npm install -g node-rednpm WARN deprecated [email protected]: you can use npm install i18next from version 2.0.0/root/.nvm/versions/node/v6.2.2/bin/node-red -> /root/.nvm/versions/node/v6.2.2/lib/node_modules/node-

～中略～

+-- [email protected]`-- [email protected]

`-- [email protected]

[root@test ~]# node-red

Welcome to Node-RED===================

～中略～

21 Jun 14:29:05 - [info] Starting flows21 Jun 14:29:05 - [info] Started flows21 Jun 14:29:05 - [info] Server now running at http://127.0.0.1:1880/

ここのIPアドレスをサーバのグローバルIPアドレスに変更してブラウザでアクセス


67


Node-REDでの操作WebSocketを利用したデータ連携フロー

作成

68



作成

69



作成

70


Node-REDでの操作

赤枠部分の情報をコピーしてPath部分にペーストします。

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

作成

71



作成

72



作成

73



作成

74



作成

75



作成

76



作成

77



作成

78


参考：コンテナホスティングサービス Arukas

79


本イメージはハンズオン用のサンプルとなりますので、商用利用への転用はご遠慮ください。


Username: nodePassword: r3d

最後に


最後にグローバルIPアドレスを持つサーバは攻撃対象になりますので、作成いただいたサーバは削除します。さくらのクラウドで対象サーバのチェックを入れ、削除をクリックします。

88


最後に

ディスクについてもチェックを入れ、再度削除をクリックします。

89


最後に

操作確認ダイアログが表示されますので実行をクリックします。

90


最後に

削除の工程が表示されます。全てのステータスが成功となれば削除は完了です。ありがとうございました。

91


そこに、さくら

92


Coming soon…

ユーザ同士の交流を深めるためのコミュニティサイトの開設を進めています。

93

「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡...

Services

Transcript of 「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡...