sakura.io 体験ハンズオン

2017/9/2

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

コミュニティマネージャー

法林 浩之(C) Copyright 1996-2017 SAKURA Internet Inc私についてFacebook 法林 浩之
写真Twitter@hourin

どんな人？
・日本UNIXユーザ会 幹事 (元会長)- 全国のOSCなどで研究会を開催- 多種多様なコミュニティとイベントを共同開催
・フリーランスエンジニア
・さくらインターネット コミュニティマネージャー- 会社主催イベントの運営- 社外イベント対応(協賛/出展/登壇/取材など)- 技術記事の執筆
・くわしくは「法林浩之」で検索
2

本日の資料はSlideShareにあります
スライドシェア

• SlideShareのさくらインターネットアカウント
http://www.slideshare.net/sakura_pr/

ウェブアクセラレータ紹介資料

シンプル監視アプライアンス導入ガイド

5

はじめに
6

本ワークショップの目的

1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよびWeb/アプリ開発系のエンジニアがご自身のスキルセットを大きく超えることなく、Internet of Things(IoT)に挑戦できることを体験いただくものです。
2. そのため各章内で技術的な詳細は極力省略しております。
3. 今回は1人1つワークショップキットをご用意しておりますが、組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、ご不明点を積極的にフォローしあって進めていただければと思います。

7

SNSへの投稿、大歓迎です！

#sakuraio

8

今回のハンズオンの流れ

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

sakura.ioの設定

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

温湿度センサ（SHT31/HDC1000）

さくらの通信モジュールマイコン（Arduino Uno）

仮想サーバ

11

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

マイコン（Arduino）による開発環境の準備
温湿度センサおよびさくらの通信モジュールの繋ぎ込み
試験用プログラムの流し込み

2. sakura.ioの設定
₋₋₋

プロジェクトの作成
さくらの通信モジュールの登録
連携サービスの設定

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

Node-REDサーバ用インスタンスの作成
WebSocketを利用したデータ連携フロー作成

12Arduino IDEのセットアップ
13Arduino IDEのセットアップ
https://www.arduino.cc/en/Main/Software から開発環境（Arduino IDE）を入手します。
2017/8/25時点での最新版は【1.8.4】となります。
Windowsは【Windows Installer】、Macは【 Mac OS X 10.7 Lion or newer】を選択します。

14

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

15

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

16

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

今回のハンズオンの流れ

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

sakura.ioの設定

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

温湿度センサ（SHT31/HDC1000）

さくらの通信モジュール

マイコン（Arduino Uno）

仮想サーバ

18

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

さくらの通信モジュール（アンテナ付）+Arduino用シールド＆Arduino Uno Rev3

12W級 9V-1.3A
DCアダプタUSB2.0ケーブル（A-B）

ブレッドボード

ジャンパーコード

本日は使用しません

温湿度センサ

抵抗入りLED（HDC1000 or SHT31）※必要に応じてご提供

照度センサ（GL5537-2）

人感センサ

タクトスイッチ

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

19

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

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

21

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

23

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

25

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

27

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

GND
RDY/ADR
SCL
SDA
3.3V

＜凡例＞

SCL
SDA
GND
3.3V
28

試験用プログラムの流し込み［ファイル］→ ［スケッチ例］→［SakuraIO］→［HDC1000］ を選択し、HDC1000スケッチを表示します。
【→】をクリックし、［ツール］→［シリアルモニタ］より「Waiting to come online」表記の後、カウント値、Temperature、Humidityに加え、Available（キューイング可能なチャンネル数）とQueued（キューで送信待ちになっているチャンネル数）が表示されることを確認します。

30

sakura.ioの設定
32

今回のハンズオンの流れ

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

sakura.ioの設定

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

温湿度センサ（SHT31/HDC1000）

さくらの通信モジュール

マイコン（Arduino Uno）

仮想サーバ

33

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

34

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

35

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

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

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

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

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

通信モジュール1uAAAAAAAAAA

データストアLight/Standard/…

連携サービス1
WebSocket

通信モジュール2uBBBBBBBBBB
通信モジュール3
uCCCCCCCCCC

簡易位置情報ON/OFF

連携サービス2Outgoing Webhook
連携サービス3AWS IoT

ファイル配信File1/File2/…
38

約款への同意

初めてコントロールパネルにログインした場合、各種約款への同意を求められます。
内容をご確認いただいたうえで、［✓同意する］をクリックするとコントロールパネルにアクセスできます。

39

プロジェクトの作成

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

40

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

41

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

42

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

43

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

登録が失敗した場合

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

別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください44連携サービスの設定
通信モジュールが登録されました。最後に外部への連携サービスを設定します。
［＋サービス追加］のボタンをクリックします。

45

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

46

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

47

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

48

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

49

動作確認（WebSocket）
なお、WebSocketの場合、簡易的に通信モジュールからのデータを確認することができます。
簡易表示モードでは通信モジュールから受け取ったデータを以下のように確認できます。

送信されたデータのタイムスタンプ

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

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

データの型

送信された値→温度→湿度→カウント値

50

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

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

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

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

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

51

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

今回のハンズオンの流れ

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

sakura.ioの設定

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

温湿度センサ（SHT31/HDC1000）

さくらの通信モジュールマイコン（Arduino Uno）

仮想サーバ

53

さくらのクラウド コントロールパネル ログイン
さくらのクラウドコントロールパネル（https://secure.sakura.ad.jp/cloud/）にログインします。
「さくらインターネット会員としてログイン：」に会員ID、パスワードを入力してログインすることができます。
ハンズオンでは既にさくらのクラウドのユーザは作成済みとなります。

54

さくらのクラウド コントロールパネル ログイン
さくらインターネット会員としてログインするとアカウントの選択を求められます。
自身が利用するアカウントを選択します。
アカウントを作成していない場合は上記タブからアカウントを選択し作成する必要があります。

55さくらのクラウド コントロールパネル ログイン
ユーザでログインができたら［さくらのクラウド（IaaS）］をクリックします。

58

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

59

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

60

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

61

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

62

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

63

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

64

Node-REDサーバの作成［スタートアップスクリプト］で【 shell 】を選択のうえ、［配置するスタートアップスクリプト］で【 [public] Node-RED #xxxxxxxxxxx 】を選択します。オプションのWebUIポート番号には【 80 】を入力します。

65

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

66

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

67

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

68

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

69

Node-REDサーバの作成サーバが作成されました。【 http://<IPアドレス>:<指定したWeb UIポート番号>/ 】にWebブラウザよりアクセスします。WebUIポートに80番ポートを指定した場合はポート番号を省略可能です。

70

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

デプロイ

ノード
パレット

シート

Info/Debug
コンソール

71

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

72

Node-RED WebSocketノードの作成
ドラッグ&ドロップされたWebSocketノードをWクリックし、設定画面に移ります。
Typeは「接続」、Nameは「任意の名称」を入力のうえ、URLの行にある鉛筆マークをクリックします。

73

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

74

Node-RED WebSocketノードの作成
URL部分はコンパネからのペーストを行い、ドロップダウンの項目については「ペイロードを送信/受信」を選択し、【追加】をクリックします。

75

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

76

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

77

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

78

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

79

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

80

Node-RED フローサンプルの入手
取得した温度情報を元にメッセージを生成し、Twitterアカウントへ投稿するフローを入手します。
「github nyuuki0224」で検索し、検索結果からGitHubのサイトへ移動します。
https://github.com/Nyuuki0224/node-red-with-sakura.io

81

Node-RED フローサンプルの入手
https://github.com/Nyuuki0224/node-red-with-sakura.io
ファイルリストから「flow_twitter_temp.txt」クリックし、ソースコード表示画面右上の「Raw」をクリックするとフローサンプルがプレーンテキストで表示されますので、全部コピーします。

82

Node-RED フローサンプルの読み込み
Node-RED右上の【Ξ】→【読み込み】→【クリップボード】を選択し、画面内のポップアップに、先ほどコピーしたフローサンプルをペーストして、「読み込み」をクリックして保存します。
読み込まれたフローは「Twitter投稿」というタブに表示されます。

83

Node-RED フローサンプルの紹介

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

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

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

温度のValueを切り上げ実行したら10分待機メッセージ生成86Node-RED フローサンプルの設定

前回と同様にWebSocketノードを設定

連携先のTwitter IDを設定
87

連携先のTwitter IDの設定
フローサンプル右下のTwitterノードをダブルクリックし、設定画面に移ります。
Twitter IDは「新規にtwitter-credentialsを追加」に設定し、その右にある鉛筆マークをクリックします。

88

連携先のTwitter IDの設定「Twitterの認証を行うため、ここをクリックしてください」をクリックすると、Twitterの連携アプリ認証画面に遷移します。

89

連携先のTwitter IDの設定
TwitterのIDとパスワードを入力し、「連携アプリを認証」をクリックします。
「Authorised - you can close this window and return to Node-RED」が表示されたら認証に成功しています。

90

連携先のTwitter IDの設定
Node-REDの画面に戻って「追加」ボタンを押し、「完了」ボタンを押すと連携の設定が完了します。

91Node-RED フローのデプロイ
各ノードを接続し、準備が完了したら、右上部の【デプロイ】をクリックします。
デプロイが完了すると処理が開始され、温度情報付きのメッセージがTwitterに投稿されます。(10分毎)92取得した温度をTwitterに投稿
連携に成功するとこのようなメッセージがツイートされます。

93

そこに、さくら352

質疑応答353

最後に354

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

355

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

356

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

357

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

358

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

359

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

360

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

361

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

362

最後に ～さくらのクラウド～
今回は［接続されたディスク］についても削除しますのでチェックを入れ、【 削除 】をクリックします。
ダイアログが表示されますので【 実行 】をクリックします。

363

最後に ～さくらのクラウド～削除の工程が表示されます。全てのステータスが成功となれば削除は完了です。

364

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

375

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

376