「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡第1回勉強会~さくらのIoT Platformを体験しよう！）

さくらの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
UART
SPI
I2C
HTTP
API
さくらの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 Pin
hdc1000.begin();
}
void loop() {
float temp = hdc1000.getTemperature();
if (temp == HDC1000_ERROR_CODE) {
hdc1000.begin(); // retry once
temp = hdc1000.getTemperature();
}
Serial.print("Temperature: ");
Serial.println(temp);
float humi = hdc1000.getHumidity();
if (humi== HDC1000_ERROR_CODE) {
humi = hdc1000.getTemperature();
}
Serial.print("Humidity: ");
Serial.println(humi);
delay(1000);
}
Googleにて「github hdc1000」を検索し、ライブラリを入手します。
https://github.com/hotchpotch/Arduino-HDC1000
温湿度センサの
繋ぎ込み
起動時の処理
ループ処理
温度取得
湿度取得
エラー時の対応
シリアルモニタ表示
エラー時の対応
シリアルモニタ表示
Copyright (c) 2015 Yuichi Tateno
Released under the MIT license
https://github.com/hotchpotch/Arduino-HDC1000/blob/master/LICENSE.txt

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

+V
SDA
SCL
GND
温湿度センサの繋ぎ込み
18
3.3V
GND
SCL
SDA
ジャンパーコードを接続、ブレッドボード側は色で明示された範囲は自由に接続可
温湿度センサの向きに注意して接続
繋ぎ込み

温湿度センサの動作確認
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
さくらのIoT
通信モジュールが登録されました。最後に外部への連携を設定します。
28

さくらのIoT
今回はWebSocketを作成します。[WebSocket]をクリックします。
29

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

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

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

+V
SDA
SCL
GND
さくらのIoT通信モジュールの繋ぎ込み
ジャンパーコードを接続、ブレッドボード側は色で明示された範囲は自由に接続可
温湿度センサの向きに注意して接続
3.3V
GND
SCL
SDA
33

温湿度センサの動作確認＃再確認
[ファイル]→[スケッチの例]→[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);
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¥libraries
Mac 書類¥Arduino¥libraries
し
37

温湿度センサライブラリ流用部分
HDC1000 hdc1000;
void setup() {
Serial.begin(9600);
// hdc1000.setRdyPin(PIN_NO); // use Rdy Pin
hdc1000.begin();
}
void loop() {
}
humi = hdc1000.getHumidity();
}
delay(1000);
}
①
②
③
該当ライブラリから赤字部分を弊社用ライブラリに流用します
し
38
Copyright (c) 2015 Yuichi Tateno
Released under the MIT license
https://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() {
}
humi = hdc1000.getHumidity();
}
cnt++;
Serial.println(cnt);
sakura.writeChannel(0,temp);
sakura.writeChannel(1,humi);
delay(250);
～以下略～
①挿入
②挿入
③挿入
④修正
し
39

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

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

43

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

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

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

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

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

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

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

Webサーバ用インスタンスの作成
操作
アカウントを選択します。
51

下記項目が選べるようになりますので、[さくらのクラウド（IaaS）]を
クリックします。
操作
52

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

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

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

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

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

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

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

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

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

コンソールでの環境のセットアップ
Webサーバの構築
（Node-Red）
ここからはターミナルソフトで操作することを前提に進めます。
Tera Term等でさくらのクラウドのコンパネに表示されているIPアドレスへ
接続します。
62

------------------------------------------------------------
#Gitのインストール
------------------------------------------------------------
[root@test ~]# yum -y install git
Loaded plugins: fastestmirror, priorities, security
Setting up Install Process
Determining fastest mirrors
epel/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!
（Node-Red）
63

------------------------------------------------------------
#Node Version Manager(NVM)のインストール
------------------------------------------------------------
[root@test ~]# git clone https://github.com/creationix/nvm.git ~/.nvm
Initialized empty Git repository in /root/.nvm/.git/
remote: Counting objects: 4732, done.
remote: Total 4732 (delta 0), reused 0 (delta 0), pack-reused 4731
Receiving 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`)
（Node-Red）
64

------------------------------------------------------------
#Node.jsのインストール
------------------------------------------------------------
[root@test ~]# nvm ls-remote
v0.1.14
v0.1.15
v0.1.16
～中略～
v6.2.0
v6.2.1
v6.2.2
[root@test ~]# nvm install v6.2.2
Downloading 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 -v
v6.2.2
（Node-Red）
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.js
Server running at http://127.0.0.1:8124/
※表示されたら[Ctrl]+[C]でプログラムを停止します
（Node-Red）
66

------------------------------------------------------------
#Node-Redの設定変更
------------------------------------------------------------
[root@test ~]# npm install -g node-red
npm WARN deprecated i18next-client@1.10.3: 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-
～中略～
+-- sax@0.6.1
`-- xmlbuilder@4.2.1
`-- lodash@4.13.1
[root@test ~]# node-red
Welcome to Node-RED
===================
～中略～
21 Jun 14:29:05 - [info] Starting flows
21 Jun 14:29:05 - [info] Started flows
21 Jun 14:29:05 - [info] Server now running at http://127.0.0.1:1880/
ここのIPアドレスをサーバのグローバルIP
アドレスに変更してブラウザでアクセス
（Node-Red）
67

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

作成
69

作成
70

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

作成
72

作成
73

作成
74

作成
75

作成
76

作成
77

作成
78

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

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

Username: node
Password: r3d

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

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

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

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

そこに、さくら
92

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

「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡第1回勉強会~さくらのIoT Platformを体験しよう！）

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡第1回勉強会~さくらのIoT Platformを体験しよう！）

Similar to 「さくらのIoT Platform α」ハンズオン（さくらクラブIoT福岡第1回勉強会~さくらのIoT Platformを体験しよう！） (20)

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

More from さくらインターネット株式会社 (20)

Recently uploaded

Recently uploaded (8)