狠狠撸

狠狠撸Share a Scribd company logo
sakura.io (さくらアイオー)を
体験してみよう!
照度センサー(CdSセル)編
2017/8/2
(C) Copyright 1996-2017 SAKURA Internet Inc
さくらインターネット株式会社 IoT Platform Team
2
はじめに
SNSへの投稿、大歓迎です!
3
#sakuraio #MakerFaireTokyo2017
体験コーナーの目的
4
1. このコーナーはsakura.ioを使い、モノがインターネットに接続される
Internet of Things(IoT)の具体例を「モノを作る」から「サービスを作る」まで
ご体験いただくものです。
2. コーナー最後に、オプションでTwitterと連携する場面があります。
興味がある方はお持ちのアカウントをぜひ繋げてみてください。
(アカウント情報はコーナー終了時に削除します)
3. コーナーで使ったセンサーとブレッドボードはお持ち帰りできます。
今回体験した内容を自宅でも復習したい場合は、本ブースの
物販コーナーの機材もあわせてご購入ください。
4. 今回の資料はお配りしている紙に記載しているQRコードのURLから
アクセスできます、振り返り等にご利用ください。
今回のハンズオンの流れ
5
マイコンおよび
プログラムの構築
Webサービス連携
(さくらのクラウド)
マイコン(Arduino Uno)
照度センサ
(GL5537-2)
さくらの通信
モジュール
sakura.ioの設定
仮想サーバ
Agenda
6
1. マイコンおよびプログラムの構築
? マイコン(Arduino)による開発環境の準備
? 照度センサおよびさくらの通信モジュールの繋ぎ込み
? 試験用プログラムの流し込み
2. sakura.ioの設定
? プロジェクトの作成
? さくらの通信モジュールの登録
? 連携サービスの設定
3. Webへのデータ連携(さくらのクラウド)
? Node-REDサーバ用インスタンスの作成
? WebSocketを利用したデータ連携フロー作成
9
マイコンおよび
プログラムの構築
今回のハンズオンの流れ
11
マイコンおよび
プログラムの構築
Webサービス連携
(さくらのクラウド)
マイコン(Arduino Uno)
照度センサ
(GL5537-2)
さくらの通信
モジュール
sakura.ioの設定
仮想サーバ
今回の体験でご提供するもの
13
ジャンパーコードさくらの通信モジュール(アンテナ付)
+Arduino用シールド&Arduino Uno Rev3
USB2.0
ケーブル(A-B)
12W級 9V-1.3A
DCアダプタ
ブレッドボード
人感センサ
(SB412A)
照度センサ
(GL5537-2)
温湿度センサ
(HDC1000 or SHT31)
各種抵抗 タクトスイッチ抵抗入りLED
本日は使用しません
Arduino IDEのセットアップ
14
https://www.arduino.cc/en/Main/Software から開発環境(Arduino IDE)を入手します。
2017/6/8時点での最新版は【1.8.3】となります。
Windowsは【Windows Installer】、Macは【 Mac OS X 10.7 Lion or newer】を選択します。
Arduino IDEのセットアップ
15
該当の金額を選択するか(寄付する場合)、もしくは【JUST DOWNLOAD】にてダウンロードします。
Arduino IDEのセットアップ
16
インストールはデフォルト推奨、ドライバーについても全てインストールします。
#本スライド記載の画像はWindowsの場合になります。
Arduino IDEのセットアップ
17
Arduino IDEが起動したら、Arduino本体をPCに接続します。 上部メニューバーから以下2つを設定します。
ボード:[ツール]→[ボード:”XXX”]から【 Arduino/Genuino Uno 】を選択します。
シリアルポート:[ツール]→[シリアルポート]から【~~~(Arduino/Genuino Uno)】となるものを選択します。
ボードの選択 シリアルポートの選択
マイコン(Arduino)の準備
18
[ファイル]→[スケッチ例]→[01.Basics]→[Blink]を選択し、Blinkスケッチを表示します。
【→】をクリックしてスケッチをマイコンに書き込み、該当箇所のLEDが点滅状態になることを確認します。
何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
さくらの通信モジュールの取り付け
19
ArduinoをPCから外し、図に示すようにシールドとArduinoのピン穴と合致するようにはめ込みます。
ライブラリの取得(温湿度センサ-SHT31)
20
[スケッチ]→[ライブラリをインクルード]→ [ライブラリを管理...]をクリックし、
右上検索窓から【SHT31】を検索すると、[Adafruit SHT31 Library by Adafruit]がヒットします。
インストールをクリックすると該当ライブラリが取り込まれ、[INSTALLED]が表示されます。
ライブラリの取得(SakuraIO)
21
[スケッチ]→[ライブラリをインクルード]→ [ライブラリを管理...]をクリックし、
右上検索窓から【sakuraio】を検索すると、[SakuraIO by SAKURA Internet Inc.]がヒットします。
最新のVer.を選択のうえインストールをクリックすると該当ライブラリが取り込まれ、[INSTALLED]が表示されます。
FirmwareUpdate.ino
22
[ファイル]→ [スケッチ例]→[SakuraIO]→[FirmwareUpdate] を選択し、FirmwareUpdateスケッチを表示します。
【→】をクリックし、[ツール]→[シリアルモニタ]より通信モジュールのファームウェアアップデート状況を確認します。
現在のVersion情報と比較し、新しいファームウェアが提供されている場合にはアップデートを実行します。
新しいファームウェアが存在する場合 最新のファームウェアが适用されている场合
ブレッドボードについて
23
ブレッドボードは場所によって接続されている場所が異なります。
下記の繋がっている部分を意識して配線を行ってください。
照度センサの繋ぎ込み
24
図に従い、温湿度センサとLEDの向きに注意しながら配線します。(実際にはArduinoシールドに対して配線します)
ブレッドボード側は色で明示された位置であれば、自由に接続しても問題ありません。
照度センサおよび抵抗に向きはありません。
3.3V
GND
Analog A0
<凡例>
GND
Analog A0
3.3V
照度センサの動作確認
25
[ファイル]→ [新規ファイル] を選択し、参考のスケッチをコピー&ペーストします。
【→】をクリックし、[ツール]→[シリアルモニタ]より照度情報が取得でき、照度センサを覆うと「Sent to sakura.io」の
表示がされること確認します。何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
参考:https://github.com/Nyuuki0224/mft2017/blob/master/Arduino/CDS.ino
27
sakura.ioの設定
今回のハンズオンの流れ
28
マイコンおよび
プログラムの構築
Webサービス連携
(さくらのクラウド)
マイコン(Arduino Uno)
照度センサ
(GL5537-2)
さくらの通信
モジュール
sakura.ioの設定
仮想サーバ
sakura.io コントロールパネル ログイン
30
sakura.io コントロールパネル(https://secure.sakura.ad.jp/iot/)にログインします。
Googleにて「さくらインターネット iot 開発者」を検索し、開発者向けページの下記ボタンからもアクセスします。
コントロールパネルへのログイン
31
既にログイン済みのセッションがない場合、以下画面にて会員認証を求められます。
会員ID、パスワードを利用してログインします。
プロジェクトC
プロジェクトB
sakura.ioコントロールパネルにおける考え方
32
sakura.ioでは【プロジェクト】という単位で大枠を構成し、プロジェクト内に複数の【通信モジュール】、
【連携サービス】を紐付けていきます。 【データストア】や簡易位置情報、ファイル配信といった
【オプションサービス】はプロジェクトに対して一つもしくは1セット設定することができます。
プロジェクトA
通信モジュール1
uAAAAAAAAAA
通信モジュール2
uBBBBBBBBBB
通信モジュール3
uCCCCCCCCCC
データストア
Light/Standard/…
簡易位置情報
ON/OFF
連携サービス1
WebSocket
連携サービス2
Outgoing Webhook
ファイル配信
File1/File2/…
連携サービス3
AWS IoT
プロジェクトに対して
複数紐付け可能
プロジェクトに対して
単一(1セット)設定可能
プロジェクトに対して
複数紐付け可能
約款への同意
33
初めてコントロールパネルにログインした場合、各種約款への同意を求められます。
内容をご確認いただいたうえで、[?同意する]をクリックするとコントロールパネルにアクセスできます。
プロジェクトの作成
34
初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。
まずプロジェクトを作成するため、[+新規プロジェクト]をクリックします。
プロジェクトの作成
35
新規プロジェクトの作成画面に遷移します。
[名称]欄に任意の名前を入力し、[追加]をクリックします。
通信モジュールの登録
36
プロジェクトが作成されました。次に通信モジュールの登録を行います。
[モジュール登録]のボタンをクリックします。
通信モジュールの登録
37
モジュールの追加画面に遷移します。指定したプロジェクトが選択されていることを確認のうえ、
登録用ID、登録用パスワード、および任意の名称を入力して、[追加]ボタンをクリックします。
通信モジュールの登録
38
モジュールの追加に成功すると[モジュールを追加しました]というダイアログが表示されます。
[ホームへ戻る]ボタンをクリックしてホームに戻ります。
ID/PASSが正しくない、もしくは既に登録されている通信モジュールを追加しようとした場合は
内容とともに[モジュールの追加に失敗しました]というダイアログが表示されます。
登録が成功した場合 登録が失敗した場合
登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください
別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください
連携サービスの設定
39
通信モジュールが登録されました。最後に外部への連携サービスを設定します。
[+サービス追加]のボタンをクリックします。
連携サービスの設定(WebSocket)
40
追加サービスの選択画面に遷移します。
今回はWebSocketを作成しますので、[WebSocket]をクリックします。
連携サービスの設定(WebSocket)
41
WebSocketの作成には特に設定事項はありません。
[名前]欄に任意の名前を入力し、[作成]ボタンをクリックします。
連携サービスの設定
42
連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。
該当のプロジェクトにて作成された名称の連携サービスをクリックします。
連携サービスの設定(WebSocket)
43
WebSocketを設定しました、これでコントロールパネルでの準備は完了です。
ここで表示されるWebSocketのURLはハンズオンの後半で使用しますので書き留めておいてください。
動作確認(WebSocket)
44
なお、WebSocketの場合、簡易的に通信モジュールからのデータを確認することができます。
簡易表示モードでは通信モジュールから受け取ったデータを以下のように確認できます。
→温度
→湿度
→カウント値
データを送信した
通信モジュールのID
データが格納された
チャンネル番号
送信されたデータの
タイムスタンプ
送信された値データの型
動作確認(WebSocket)
45
[詳細表示モードに切り替え] をクリックすると詳細表示モードに遷移します。
時刻やモジュールは同一ですが、データの内容によりタイプやペイロードが異なります。
複数チャンネルある場合、
それぞれの最終データを表示
クリックでログ出力を
開始/停止
タイプはいくつかの種類に分かれる
?channels :通信モジュールからのデータ
?connection :接続の開始/終了
?location :簡易位置情報
?keepalive :WebSocketセッション確認
ペイロードには受け取った
データのpayload部が表示
46
Webへのデータ連携
(さくらのクラウド)
今回のハンズオンの流れ
48
マイコンおよび
プログラムの構築
Webサービス連携
(さくらのクラウド)
マイコン(Arduino Uno)
照度センサ
(GL5537-2)
さくらの通信
モジュール
sakura.ioの設定
仮想サーバ
さくらのクラウド コントロールパネル ログイン
50
さくらのクラウドコントロールパネル(https://secure.sakura.ad.jp/cloud/)にログインします。
「さくらインターネット会員としてログイン:」に会員ID、パスワードを入力してログインすることができます。
ハンズオンでは既にさくらのクラウドのユーザは作成済みとなります。
さくらのクラウド コントロールパネル ログイン
51
さくらインターネット会員としてログインするとアカウントの選択を求められます。
自身が利用するアカウントを選択します。
アカウントを作成していない場合は上記タブからアカウントを選択し作成する必要があります。
さくらのクラウド コントロールパネル ログイン
52
ユーザでログインができたら[さくらのクラウド(IaaS)]をクリックします。
Node-REDサーバの作成
53
左側のペインのサーバを選択し、右上の【 追加 】ボタンをクリックします。
はじめはサーバ追加の案内が出る場合があります。
Node-REDサーバの作成
54
デフォルトではサーバの作成は細かい設定が不要な「シンプルモード」で作成できます。
スタートアップスクリプトを利用する場合は右上の【 シンプルモード 】のチェックを外します。
Node-REDサーバの作成
55
サーバプランでは仮想サーバに割り当てるCPUとメモリの量を指定します。
仮想コアは【 1 】を、メモリは【 1GB 】を、それぞれ選択します。
Node-REDサーバの作成
56
2.ディスクでは使用するディスクの種類やサイズ、インストールイメージを選択します。
アーカイブ選択のみ【 CentOS 7.x 64bit #xxxxxxxxxxxx 】を選択し、後はデフォルトとします。
Node-REDサーバの作成
57
3.NICではネットワークに関する設定を指定します。
今回はすべてデフォルトの値を使用しますので変更は不要です。
Node-REDサーバの作成
58
4.ディスクの修正ではOSに関する設定値を指定します。
管理ユーザのパスワードおよびホスト名は任意の値を入力します。
公開鍵は今回のハンズオンでは使用しないためデフォルトの【 なし 】を使用します。
Node-REDサーバの作成
59
[スタートアップスクリプト]で【 shell 】を選択のうえ、[配置するスタートアップスクリプト]で
【 [public] Node-RED #xxxxxxxxxxx 】を選択します。オプションのWebUIポート番号には【 80 】を入力します。
Node-REDサーバの作成
60
5.シンプル監視はさくらのクラウドで提供する死活監視のサービスとなります。
本件では使用しないため、デフォルトのチェックなしで進めます。
Node-REDサーバの作成
61
6.サーバの情報はコントロールパネル上で管理するための情報を記述する項目となります。
本件では名前に判別がつくような任意の値を入力します。
Node-REDサーバの作成
62
7.その他のオプションおよび作成数はすべてデフォルトの値を使用します。
内容を確認し、問題がなければ【 作成 】をクリックします。
Node-REDサーバの作成
63
操作確認のダイアログにて、作成しても良いか改めて確認されますので、
問題がなければ【 作成 】をクリックすると指定したサーバやディスクの作成を開始します。
ステータスが全て成功になればサーバの作成が完了となります。
Node-REDサーバの作成
64
サーバが作成されました。【 http://<IPアドレス>:<指定したWeb UIポート番号>/ 】に
Webブラウザよりアクセスします。WebUIポートに80番ポートを指定した場合はポート番号を省略可能です。
Node-RED 初期画面
65
Node-REDは「ノード」と呼ばれる機能の固まりをシート上で組み合わせ、
ひとつの「フロー」にすることで、ほとんどプログラミングを知らない人でも
プログラムを構築することができるツールとなります。
ノード
パレット
シート
Info/Debug
コンソール
デプロイ
Node-RED Debugノードの作成
66
次に、ノードパレットの出力から「debug」ノードをシートにドラッグ&ドロップします。
Debugノードは自動で「msg.payload」に名前が変わります。特に設定は不要です。
Node-RED ノード間の接続
67
各ノードの動作を繋げるために、WebSocketノード右端とDebugノード左端をドラッグ&ドロップで繋ぎます。
Node-RED フローのデプロイ
68
各ノードを接続し、準備が完了したら、右上部の【デプロイ】をクリックします。
デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始されます。
動作確認
69
フローに問題がない場合、Websocketノード下部に[connected]と表示され、
コンソールのdebug内にプラットフォームから取得したJSONデータを確認できます。
Debugノード右端の緑マークをクリックするとdebugへの表示が停止されます。
Node-RED フローサンプルの紹介
70
Twitterアカウントを紐付けて線を繋ぐ
(オプション)
“wss://~~~”をコピペして線を繋ぐ
参考:https://github.com/Nyuuki0224/mft2017/blob/master/Node-RED/flow-sample.json
Node-RED右上の【メニュー( 三 )】から【 読み込み 】→【 クリップボード 】を選択し、画面内のポップアップに
下記テキストファイルをコピー&ペーストすることで、Twitter投稿のサンプルを呼び出すことができます。
72
最後に
最後に ~sakura.io~
73
ハンズオンに使用したさくらの通信モジュールは必要に応じて登録を解除します。
接続ステータス横の歯車マークをクリックします。
最後に ~sakura.io~
74
モジュールの設定画面に遷移します。下部の[登録解除]ボタンをクリックします。
最後に ~sakura.io~
75
通信モジュールの登録を解除してよいか確認されます。
問題ない場合は再度[登録解除]ボタンをクリックします。
最後に ~sakura.io~
76
モジュールの登録が解除され、表示から削除されました。
次は連携サービスとともにプロジェクトを削除します。
プロジェクト右上の[削除]マークをクリックします。
最後に ~sakura.io~
77
プロジェクトを削除してよいか確認されます。
問題ない場合は再度[削除]ボタンをクリックします。
最後に ~さくらのクラウド~
78
グローバルIPアドレスを持つサーバは攻撃対象になりますので、作成いただいたサーバは削除します。
サーバがまだ起動している場合、さくらのクラウドで対象サーバのチェックを入れ、
[電源操作]から【 シャットダウン 】をクリックします。
最後に ~さくらのクラウド~
79
シャットダウン対象を確認のうえ【 シャットダウン 】をクリックします。
再度ダイアログにて確認が表示されますので【 実行 】をクリックします。
最後に ~さくらのクラウド~
80
シャットダウンが正常に実行されると、チェックボックス横のラインが「緑→赤→灰」と遷移します。
ラインが灰色に変化したら、再度対象となるサーバにチェックを入れ、【 削除 】をクリックします。
最後に ~さくらのクラウド~
81
今回は[接続されたディスク]についても削除しますのでチェックを入れ、【 削除 】をクリックします。
ダイアログが表示されますので【 実行 】をクリックします。
最後に ~さくらのクラウド~
82
削除の工程が表示されます。全てのステータスが成功となれば削除は完了です。
最後に
83
以上で作業は全て終了となります。
お疲れ様でした!

More Related Content

Sakura.io mft2017 illuminance