さくらのIoT Platform α版ハンズオン

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

さくらの IoT Platformα版ハンズオン

2016/11/07

2

はじめに

本ワークショップの目的

3

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

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

3. 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、ご不明点を積極的にフォローしあって進めていただければと思います。

今回のハンズオンの流れ

4

さくらのIoTPlatform

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

Webサービス連携（さくらのクラウド）

Webサービス連携（Arukas）

マイコン温湿度センサ

通信モジュール

さくらのIoTPlatformの設定

仮想サーバ

コンテナ

Agenda

5

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

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

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

2. さくらのIoT Platformの設定₋ プロジェクトの作成

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

₋ 連携サービスの設定

3. Webへのデータ連携（さくらのクラウド）₋ Node-REDサーバ用インスタンスの作成

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

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

4. Webへのデータ連携（コンテナホスティングサービス Arukas）₋ Node-REDコンテナの立ち上げ

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

6



7








仮想サーバ

コンテナ

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

8

Arduino Uno

Rev3

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

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

+Arduino用シールドキット

USB2.0

ケーブル(A-B)

棒アンテナ

本日は使用しません

ブレッドボード

Arduino IDEのセットアップ

9

https://www.arduino.cc/en/Main/Software から開発環境（Arduino IDE）を入手します。2016/10/18時点での最新版は【1.6.12】となります。


10

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


11

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

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

12

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

入手したZipファイルは解凍したうえで、フォルダごと以下へ格納します。Windows C:¥Users¥《ユーザ名》¥Documents¥Arduino¥librariesMac 書類¥Arduino¥libraries

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

13

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

入手したZipファイルは解凍したうえで、フォルダごと以下へ格納します。Windows C:¥Users¥《ユーザ名》¥Documents¥Arduino¥librariesMac 書類¥Arduino¥libraries


14

Arduino IDEが起動したら、Arduino本体をPCに接続します。ボードは【Arduino/Genuino Uno】、シリアルポートは出てきたCOMポートを選択します。Macの場合はシリアルポート内の「～～～（Arduino/Genuino Uno）」となるものを選択します。

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

マイコン（Arduino）の準備

15

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

マイコン（Arduino）の準備

16

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

温湿度センサの繋ぎ込み

17

結線を行うため、ArduinoをPCから外します。その後図に従い、ジャンパーコードを接続します。ブレッドボード側は色で明示された位置であれば、自由に接続しても問題ありません。温湿度センサの向きに注意して接続します。

+VSDASCL

GND

3.3V

GND

SDA

SCL

同色の行、列であれば結線場所はどこでもOK！

温湿度センサの動作確認

18

Arduino IDEを再起動すると保存したライブラリが使用できるようになります。[ファイル]→[スケッチの例]→[HDC1000]→[hdc1000]→【→】ボタンをクリックします。[ツール]→[シリアルモニタ]よりTemperature＆Humidity情報が取得されることを確認します。何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。

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

19

まずUSBケーブルを本体から取り外した後、マイコン側のジャンパーコードを抜き去り、図に示すようにシールドとArduinoのピン穴と合致するようにはめ込みます。5V-DC部分が干渉するため強く押し込みすぎず、水平になるよう取り付けください。

温湿度センサの繋ぎ込み

20

結線を行うため、再度ArduinoをPCから外します。その後図に従い、ジャンパーコードを接続します。ピンアサインはマイコンと同一ですが、シールドにはピンソケットの表記がないため、マイコン側の表記を参考にします。

+VSDASCL

GND

3.3V

GND

SDA

SCL

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

21

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

22

さくらのIoT Platformの設定


23








仮想サーバ

コンテナ

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

24

Googleにて「さくらインターネット iot 開発者」を検索し、開発者向けページからコントロールパネル（https://secure.sakura.ad.jp/iot-alpha/）にログインします。下記ボタンよりアクセスします。

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

25

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

プロジェクトの作成

26

さくらのIoT Platformαでは【プロジェクト】という単位で大枠を構成し、プロジェクト内にさくらの通信モジュールや連携先サービスを複数所属させていきます。ハンズオンでは、まず[新規プロジェクト]をクリックし、新規にプロジェクトを作成します。

27

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

プロジェクトの作成

通信モジュールの登録

28

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

通信モジュールの登録

29

モジュールの追加画面に遷移します。用意されている登録用ID、登録用パスワード、および任意の名称を入力して、[追加する]ボタンをクリックします。

連携サービスの設定

30

通信モジュールが登録されました。最後に外部への連携サービスを設定します。[サービス追加]のボタンをクリックします。


31

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


32

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


33

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

動作確認

34

作成した連携サービスを開き、シリアルポートで表示される情報と同様の情報が取得されていることを確認します。

35

Webへのデータ連携（さくらのクラウド）


36








仮想サーバ

コンテナ

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

37

以下URLより、「さくらのクラウドユーザとしてログイン：」にユーザコード、会員ID、パスワードを入力します。「https://secure.sakura.ad.jp/cloud/」

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

38

ユーザでログインができたら[さくらのクラウド（IaaS）]をクリックします。

Node-REDサーバの作成スタートアップスクリプトの用意

39

本ワークショップではNode-REDの構築を簡単にするため、さくらのクラウドの機能である「スタートアップスクリプト」を作成します。右上の【設定】をクリックします。


40

新しく現れたメニューから【スクリプト】をクリックします。その後【プライベート】タブをクリックし、右上の【追加】を選択します。


41

以下の内容をコピー＆ペーストします。

#!/bin/sh# @sacloud-once# @sacloud-desc Git/NVM/Node.js/Node-REDのインストールを実行します。# @sacloud-desc このスクリプトは、CentOS6.xでのみ動作し、完了後自動再起動します。# @sacloud-desc 起動後、「#node-red」を実行すると、該当IPアドレスにWebブラウザにてアクセスできます。# @sacloud-require-archive distro-centos distro-ver-6.*

#Gitの入手yum -y install git#NVMの入手git clone https://github.com/creationix/nvm.git ~/.nvm#NVMの一時的なPATH設定source ~/.nvm/nvm.shexport PATH#NVMの恒久的なPATH設定sed -i '12i if [ -s ~/.nvm/nvm.sh ]; then' /root/.bash_profilesed -i '13i source ~/.nvm/nvm.sh' /root/.bash_profilesed -i '14i fi' /root/.bash_profile#Node.jsの入手nvm install v6.9.1#Node-REDの入手npm install -g node-red#Node-REDの編集済みコンフィグファイル（.node-red以下）を入手git clone https://github.com/Nyuuki0224/node-red-init.gitcp -rfv ./node-red-init/.node-red/ /root/

exit 0


42

案内するサンプルのスタートアップ用のスクリプトを【内容】に入力します。【名前】は任意の値を入力し、【作成】をクリックするとスタートアップスクリプトが作成されます。

Node-REDサーバの作成

43

左側のペインのサーバを選択し、右上の【追加】ボタンをクリックします。はじめはサーバ追加の案内が出る場合があります。


44

デフォルトではサーバの作成は細かい設定が不要な「シンプルモード」で作成できます。スタートアップスクリプトを利用する場合は右上の【シンプルモード】のチェックを外します。

Node-REDサーバの作成【シンプルモード不使用】

45

サーバプランでは仮想サーバに割り当てるCPUとメモリの量を指定します。仮想コアは【1】を、メモリは【1GB】を、それぞれ選択します。


46

2.ディスクでは使用するディスクの種類やサイズ、インストールイメージを選択します。アーカイブ選択のみ【CentOS 6.x 64bit #xxxxxxxxxxxx】を選択し、後はデフォルトとします。


47

3.NICではネットワークに関する設定を指定します。今回はすべてデフォルトの値を使用しますので変更は不要です。


48

4.ディスクの修正ではOSに関する設定値を指定します。管理ユーザのパスワードおよびホスト名は任意の値を入力します。公開鍵は今回のハンズオンでは使用しないためデフォルトの【なし】を使用します。


49

先程作成したスタートアップスクリプトについては[配置するスタートアップスクリプト]で選択することができます。今回は自動でNode-REDの構築を行うため、作成した名称のスクリプトを選択します。


50

5.シンプル監視はさくらのクラウドで提供する死活監視のサービスとなります。本件では使用しないため、デフォルトのチェックなしで進めます。


51

6.サーバの情報はコントロールパネル上で管理するための情報を記述する項目となります。本件では名前に判別がつくような任意の値を入力します。


52

その他のオプションおよび作成数はすべてデフォルトの値を使用します。内容を確認し、問題がなければ【作成】をクリックします。


53

操作確認のダイアログにて、作成しても良いか改めて確認されますので、問題がなければ【作成】をクリックすると指定したサーバやディスクの作成を開始します。ステータスが全て成功になればサーバの作成が完了となります。


54

サーバが作成されました。次はターミナルソフトを使用して構築を行います。Windows（Teraterm等）、Mac（ターミナル）を起動します。

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

55

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

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

56

ログインが完了したら以下コマンドを実行するとWebブラウザから該当サーバのIPアドレスにアクセスできるようになります。実行が成功しない場合、nvmのパスが通っているか確認のうえ、改めて実施します。

[root@test ~]# sed -i -e "22,24s/1880/80/g" /root/.node-red/settings.js[root@test ~]# node-red

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

25 Oct 12:19:17 - [info] Node-RED version: v0.15.125 Oct 12:19:17 - [info] Node.js version: v6.9.125 Oct 12:19:17 - [info] Linux 2.6.32-642.1.1.el6.x86_64 x64 LE25 Oct 12:19:17 - [info] Loading palette nodes25 Oct 12:19:18 - [warn] ------------------------------------------------------25 Oct 12:19:18 - [warn] [rpi-gpio] Info : Ignoring Raspberry Pi specific node25 Oct 12:19:18 - [warn] ------------------------------------------------------25 Oct 12:19:18 - [info] Settings file : /root/.node-red/settings.js25 Oct 12:19:18 - [info] User directory : /root/.node-red25 Oct 12:19:18 - [info] Flows file : /root/.node-red/flows_test.json25 Oct 12:19:18 - [info] Creating new flow file25 Oct 12:19:18 - [info] Starting flows25 Oct 12:19:18 - [info] Started flows25 Oct 12:19:18 - [info] Server now running at http://127.0.0.1:80/

Node-RED 初期画面

57

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

ノードパレット

シートInfo/Debugコンソール

デプロイ

Node-RED WebSocketノードの作成

58

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


59

ドラッグ&ドロップされたWebSocketノードをWクリックし、設定画面に移ります。まずはPathの行にある鉛筆マークをクリックします。


60

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


61

Path部分はコンパネからのペーストを行い、ドロップダウンの項目については「Send/Receive payload」を選択し、【Add】をクリックします。


62

Typeは「Listen on」、Nameは「任意の名称」を入力のうえ、【Done】をクリックするとwebsocketノードへの設定が反映されます。


63

WebSocketノードへの設定が反映されましたが、この時点ではさくらのIoT Platformからデータは入ってきていません。続いてはデータを表示するためのDebugノードを作成します。

Node-RED Debugノードの作成

64

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

Node-RED ノード間の接続

65

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

Node-RED フローのデプロイ

66

各ノードを接続し、準備が完了したら、右上部の【Deploy】をクリックします。デプロイが完了するとDeployボタンがグレーアウトされ、設定した内容を元に処理が開始されます。

動作確認

67

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

68

Webへのデータ連携（コンテナホスティング Arukas）


69








仮想サーバ

コンテナ

コンテナホスティングサービス Arukasとは

さくらのクラウド Arukas

コア技術

提供単位仮想マシン/OS コンテナ

メリット・従来のOSと同様に扱える・既存環境の拡張ができる・その他機能と併用ができる

・展開が高速・オーバーヘッドが少ない・同一環境をPCでも再現可能

Server Server

Host OS Host OS

Hypervisor Docker Engine

Bins/Libs

Bins/Libs

App A

App A

Guest OS

Bins/Libs

App A

Guest OS

Bins/Libs

App B

Guest OS Bins/Libs

App A’ App A’ App B App B’

仮想マシン

コンテナ

70

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

71

「https://arukas.io/」にアクセスするとArukasのサービスページに飛びます。Arukasは通常のメールアドレス/パスワード、およびGithubのアカウントのいずれかでログインすることができます。

コンテナホスティングサービス Arukas ログイン画面

72

登録が終わっている場合、以下のいずれかを使用してログインします。

メールアドレス＆パスワード

Githubアカウント

新しいアプリケーション（コンテナ）の作成

73

ログインすると、初めにダッシュボード画面に遷移します。新しいコンテナ（アプリケーション）を立ち上げる場合は【新しいアプリケーションを作成】をクリックします。


74

今回のハンズオンでは、予め用意されているイメージを使用してNode-REDコンテナを立ち上げます。Image【chibiegg/node-red:0.14】、Port【1880/TCP】を入力して【アプリケーションの作成】をクリックします。AppNameは任意の名称を入力します。


75

作成が完了したら、ダッシュボード画面もしくはコンテナの名称をクリックしたDetail画面から【起動】ボタンをクリックします。起動処理が始まり、数十秒～数分程度でコンテナが利用可能となります。


76

コンテナのデプロイ中はオレンジ色で表記されます。


77

アプリが起動状態になると緑色で表示され、EndpointもしくはPort部分記載のリンクから環境にアクセスできるようになります。

Node-RED ログイン画面

78

URLにアクセスするとNode-REDのログイン画面に遷移します。記載のUsernameとPasswordでログインします。

Username : nodePassword : r3d

Node-RED 初期画面

79

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

ノードパレット

シートInfo/Debugコンソール

デプロイ


80

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


81

ドラッグ&ドロップされたWebSocketノードをWクリックし、設定画面に移ります。まずはPathの行にある鉛筆マークをクリックします。


82

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


83

Path部分はコンパネからのペーストを行い、ドロップダウンの項目については「Send/Receive payload」を選択し、【Add】をクリックします。


84

Typeは「Listen on」、Nameは「任意の名称」を入力のうえ、【Done】をクリックするとwebsocketノードへの設定が反映されます。


85

WebSocketノードへの設定が反映されましたが、この時点ではさくらのIoT Platformからデータは入ってきていません。続いてはデータを表示するためのDebugノードを作成します。

Node-RED Debugノードの作成

86

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

Node-RED ノード間の接続

87

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

Node-RED フローのデプロイ

88

各ノードを接続し、準備が完了したら、右上部の【Deploy】をクリックします。デプロイが完了するとDeployボタンがグレーアウトされ、設定した内容を元に処理が開始されます。

動作確認

89

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

90

最後に

最後に～さくらのIoT Platform～

91

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


92

モジュールの設定画面に遷移します。下部[削除する]ボタンをクリックします。


93

削除してよいか確認されます。問題ない場合は再度[削除する]ボタンをクリックします。


94

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


95

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

最後に～さくらのクラウド～

96

グローバルIPアドレスを持つサーバは攻撃対象になりますので、作成いただいたサーバは削除します。サーバがまだ起動している場合、さくらのクラウドで対象サーバのチェックを入れ、[電源操作]から【シャットダウン】をクリックします。


97

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


98

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


99

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


100

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

最後に～Arukas～

101

Arukasで作成されたコンテナはインターネット上に公開されているため削除しておきましょう。Actionの「■」ボタンをクリックしてサービスを停止します。


102

停止に関するダイアログが表示されますので、【OK】をクリックします。


103

該当サービスの色が変わり、停止されたことを確認したら、ゴミ箱ボタンをクリックします。


104

こちらも同様のダイアログが表示されますので、「OK」をクリックします。


105

以上で作成したサービスは全て削除されました。

最後に

106

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

107

そこに、さくら

Services

さくらのIoT Platform α版ハンズオン