IBM Cloud＆sakura.io体験ハンズオン 20171208
•
0 gostou•881 visualizações
※本資料は2017/12/08更新のものとなります。最新版へのリンクは以下スライドのコメントをご確認ください。 https://www.slideshare.net/sakura_pr/sakuraio-handson-with-ibm-cloud さくらインターネットが提供するIoTプラットフォーム「sakura.io」とIBMが提供するクラウドプラットフォーム「IBM Cloud（旧称Bluemix）」のコラボハンズオンでの資料となります。 本資料ではIoTデバイスのプロトタイピングを想定した「マイコンおよびプログラムの構築」「sakura.ioの設定」「Node-REDを介したセンサーデータとクラウドサービスの連携」の手順をスライドでご覧いただけます。 サービス詳細は以下をご確認ください。 sakura.io https://sakura.io/ IBM Cloud（Bluemix） https://www.ibm.com/cloud-computing/jp/ja/bluemix/
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (12)
Semelhante a IBM Cloud＆sakura.io体験ハンズオン 20171208
Semelhante a IBM Cloud＆sakura.io体験ハンズオン 20171208 (20)
Mais de さくらインターネット株式会社
Mais de さくらインターネット株式会社 (20)
Último
Último (10)
IBM Cloud＆sakura.io体験ハンズオン 20171208
- 1. IBM Cloud（Bluemix） & sakura.io体験ハンズオン Bluemix User Group (BMXUG) 共催 2017/12/8 (C) Copyright 1996-2017 SAKURA Internet Inc さくらインターネット株式会社 IoT Platform Team 西田 有騎
- 2. 2 はじめに
- 3. 本ワークショップの目的 3 1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよび Web/アプリ開発系のエンジニアがご自身のスキルセットを 大きく超えることなく、Internet of Things(IoT)に挑戦できることを 体験いただくものです。 2. そのため各章内で技術的な詳細は極力省略しております。 3. 今回は1人1つワークショップキットをご用意しておりますが、 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、 ご不明点を積極的にフォローしあって進めていただければと思います。
- 5. 本内容で使用するツール、機材、参考情報まとめ さくらインターネット会員登録 https://secure.sakura.ad.jp/signup3/member-register/input.html sakura.ioコントロールパネル https://secure.sakura.ad.jp/iot/ Arduino https://www.arduino.cc/en/Main/Software Arduinoサンプル用スケッチ HDC1000利用 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino SHT31利用 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino IBM Cloud コンソール https://console.bluemix.net/ Node-REDサンプル用スケッチ（Node-RED動作確認） https://github.com/sakuraio/handson-sample/blob/master/node-red/ibmcloud-graph-and-control-with-tweet.json 5
- 6. 本内容で使用するツール、機材、参考情報まとめ ［参考］sakura.ioサービスサイト https://sakura.io/ ［参考］sakura.io開発者向けページ https://sakura.io/developer/ ［参考］sakura.ioモジュール＆オプションのご購入 https://sakura.io/product/ ［参考］その他物品のご購入（秋月電子通商） ・温湿度センサ（SHT31） http://akizukidenshi.com/catalog/g/gK-12125/ ・抵抗内蔵LED http://akizukidenshi.com/catalog/g/gI-06245/ ・ジャンパコード http://akizukidenshi.com/catalog/g/gC-05159/ ・Arduino Uno Rev3 http://akizukidenshi.com/catalog/g/gM-07385/ ・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/ ・ブレッドボード http://akizukidenshi.com/catalog/g/gP-05294/ 6
- 7. Agenda 7 1. sakura.ioの設定 ₋ プロジェクトの作成 ₋ さくらの通信モジュールの登録 ₋ 連携サービスの設定 2. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 温湿度センサおよびさくらの通信モジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 3. Webへのデータ連携（IBM Cloud） ₋ IBMのライト・アカウントを作成する ₋ Cloud Foundry アプリ作成 ₋ WebSocketを利用したデータ連携フロー作成
- 9. 会員IDの作成 9 会員IDをお持ちでない場合はご契約のサービスがない場合でも、さくらインターネット会員登録 （https://secure.sakura.ad.jp/signup3/member-register/input.html）から作成いただくことができます。 会員登録が正常に完了すると、メールアドレスで指定したアドレスにsupport@sakura.ad.jpより以下のような メールが送信されます。会員IDおよびパスワードは重要な情報となりますので、漏れないよう、大事に保管ください。 Title：会員登録完了のお知らせ [XXX00000] ─────────────────────────────────── このメッセージはさくらインターネット会員登録フォームより 自動送信されています。このメールに心当たりのない場合は support@sakura.ad.jpまでご連絡ください。 ─────────────────────────────────── さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) この度は、さくらインターネットに会員登録いただきまして誠に ありがとうございます。 以下の通り会員登録を受付ましたので、ご連絡させていただきます。 ============================================================= ◎ 会員登録情報 会員ID ： XXX00000 ご契約者名 ： さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) 電子メール ： XXX@XXX.XX.XX ============================================================= ～～～以下省略～～～
- 11. sakura.io コントロールパネル ログイン 11 sakura.io コントロールパネル（https://secure.sakura.ad.jp/iot/）にログインします。 Google等でsakura.ioサイト（https://sakura.io/）にアクセスし 、「ログイン」をクリックします。
- 13. プロジェクトC プロジェクトB sakura.ioコントロールパネルにおける考え方 14 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セット）設定可能 プロジェクトに対して 複数紐付け可能
- 18. 通信モジュールの登録 20 モジュールの追加に成功すると［モジュールを追加しました］というダイアログが表示されます。 ［ホームへ戻る］ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されている通信モジュールを追加しようとした場合は 内容とともに［モジュールの追加に失敗しました］というダイアログが表示されます。 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください
- 26. 今回のワークショップでご提供するもの 28 ジャンパーコードsakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3 USB2.0 ケーブル（A-B） 12W級 9V-1.3A DCアダプタ ブレッドボード 人感センサ （SB412A） 照度センサ （GL5537-2） 温湿度センサ （HDC1000 or SHT31） 各種抵抗 ※必要に応じてご提供 タクトスイッチ ※必要に応じてご提供 抵抗入りLED ※必要に応じてご提供 本日は使用しません
- 27. Arduino IDEのセットアップ 29 https://www.arduino.cc/en/Main/Softwareから開発環境（Arduino IDE）を入手します。 2017/9/21時点での最新版は 【 1.8.5 】 となります。 ご利用環境がWindowsの場合は 【 Windows Installer 】 、Macの場合は 【 Mac OS X 10.7 Lion or newer 】 を選択します。
- 28. Arduino IDEのセットアップ 30 該当の金額を選択するか（寄付する場合）、もしくは 【 JUST DOWNLOAD 】 にてダウンロードします。
- 30. Arduino IDEのセットアップ 32 Arduino IDEが起動したら、Arduino本体をPCに接続します。 上部メニューバーから以下2つを設定します。 ボード： ［ ツール ］ → ［ ボード:”XXX” ］ から 【 Arduino/Genuino Uno 】 を選択します。 シリアルポート： ［ ツール ］ → ［ シリアルポート ］ から 【 COMx（Arduino/Genuino Uno） 】 となるものを選択します。 Mac環境の場合はCOMポートではなく、 【 /dev/～～～（Arduino/Genuino Uno） 】 となるものを選択します。 ボードの選択 シリアルポートの選択
- 31. マイコン（Arduino）の準備 33 ［ ファイル ］ → ［ スケッチ例 ］ → ［ 01.Basics ］ → ［ Blink ］ を選択し、Blinkスケッチを表示します。 【 → 】 をクリックしてスケッチをマイコンに書き込み、該当箇所のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
- 33. ライブラリの取得（温湿度センサ-HDC1000利用の場合） 35 ［ スケッチ ］ → ［ ライブラリをインクルード ］ → ［ ライブラリを管理... ］ をクリックし、 右上検索窓から 【 hdc1000 】 を検索すると、 ［ HDC1000 by Yuichi Tateno ］ がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］ が表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
- 34. ライブラリの取得（温湿度センサ-SHT31利用の場合） 36 ［ スケッチ ］ → ［ ライブラリをインクルード ］ → ［ ライブラリを管理... ］ をクリックし、 右上検索窓から【 SHT31 】を検索すると、 ［ Adafruit SHT31 Library by Adafruit ］ がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］ が表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。
- 35. ライブラリの取得（SakuraIO） 37 ［ スケッチ ］ → ［ ライブラリをインクルード ］ → ［ ライブラリを管理... ］ をクリックし、 右上検索窓から 【 sakuraio 】 を検索すると、 ［ SakuraIO by SAKURA Internet Inc. ］ がヒットします。 最新のVer.を選択のうえインストールをクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］ が表示されます。
- 36. FirmwareUpdate.ino 38 ［ ファイル ］ → ［ スケッチ例 ］ → ［ SakuraIO ］ → ［ FirmwareUpdate ］ を選択し、 クリックで該当スケッチを 書き込みます。 ［ ツール ］ → ［ シリアルモニタ ］ もしくは クリックでファームウェアアップデート状況を確認します。 現在のVersion情報と比較し、新しいファームウェアが提供されている場合にはアップデートを実行します。 PCからの給電が不安定/不足している場合は ［ Update Failure ］ と表示され、アップデートが失敗する場合があります。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合 ※PCからの給電が不安定/不足している場合は ［ Update Failure ］ と表示され、アップデートが 失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。
- 40. 温湿度センサ（HDC1000/SHT31）の繋ぎ込み 42 図に従い、温湿度センサの向きに注意しながら配線します。（実際にはArduinoシールドに対して配線します） ブレッドボード側は色で明示された位置であれば、自由に接続しても問題ありません。 温湿度センサ側のRDY/ADRピンは今回は使用しないため、何も配線しません。 ＜凡例＞ D5 SDA SCL D6 GND D7 3.3V RDY/ADR GND SCL SDA 3.3V GND GND GND Digital 6 Digital 5 Digital 7 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
- 41. 温湿度センサの動作確認（温湿度センサ-HDC1000利用の場合） 43 ［ ファイル ］ → ［ スケッチ例 ］ → ［ HDC1000 ］ → ［ hdc1000 ］ を選択し、 クリックで該当スケッチを書き込みます。 ［ ツール ］ → ［ シリアルモニタ ］ もしくは クリックでTemp＆Humi情報が取得できることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
- 42. 試験用プログラムの流し込み（温湿度センサ-HDC1000利用の場合） 44※本作業はセンサにHDC1000を利用している場合のみ実施します。 ［ ファイル ］ → ［ 新規ファイル ］ で新しいスケッチを表示し、下記URLの内容をスケッチにコピー＆ペーストします。 をクリックし、 ［ ツール ］ → ［ シリアルモニタ ］ もしくは クリックでTemp＆Humi情報に加え、シリアル値と 送信キュー情報が取得できることを確認します。問題があった場合、オレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino 】
- 43. 試験用プログラムの流し込み（温湿度センサ-SHT31利用の場合） 45 ［ ファイル ］ → ［ 新規ファイル ］ で新しいスケッチを表示し、下記URLの内容をスケッチにコピー＆ペーストします。 をクリックし、 ［ ツール ］ → ［ シリアルモニタ ］ もしくは クリックでTemp＆Humi情報に加え、シリアル値と 送信キュー情報が取得できることを確認します。問題があった場合、オレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino 】 ※本作業はセンサにSHT31を利用している場合のみ実施します。
- 45. デバイスから送信されたデータの確認 47 サービス連携の編集画面の下部にデバイスから送信されたデータがリアルタイムで表示されます。 簡易表示モードでは通信モジュールから受け取ったデータを以下のように確認できます。 → 温度 → 湿度 → カウント値 モジュール： データを送信した 通信モジュールのID チャンネル データが格納された チャンネル番号 時刻： データがモジュールのキューに 格納された時刻のタイムスタンプ 値： 送信された値 型： データの型式
- 46. デバイスから送信されたデータの確認 48 ［ 詳細表示モードに切り替え ］ をクリックすると詳細表示モードに遷移します。 モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 複数チャンネルある場合、 それぞれの最終データを表示 クリックでログ出力を 開始/停止 タイプ： プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels ：通信モジュールからのデータ ・connection ：接続の開始/終了 ・location ：簡易位置情報 ・keepalive ：WebSocketセッション確認 ペイロードには受け取った データのpayload部が表示 時刻： 詳細表示モードではプラット フォームで該当のメッセージを 受け取ったタイムスタンプ
- 56. 「Internet of Things Platform Starter」作成 58 まだ何もアプリが作成されていないため、ダッシュボードには何も表示されていません。 今回はNode-REDの作成のため、まず「オファリングの検討」をクリックします。
- 57. 「Internet of Things Platform Starter」作成 59 左側のメニューから「ボイラープレート」を選択し、表示された「Internet of Things Platform Starter」をクリックします。 Node-REDが、Internet of Things Platform Starterに含まれています
- 58. 「Internet of Things Platform Starter」作成 60 任意のアプリ名を入力し、他の値はデフォルトで「作成」をクリックします。 他のユーザーと重複しないよう ユニークな名前をつけて下さい
- 59. 「Internet of Things Platform Starter」作成 61 作成が始まると、「停止」から「開始中」「未実行」「実行中」に遷移します。実行中ステータスになった状態で 「アプリURLにアクセス」を選択するとNode-REDの操作画面に遷移します。
- 63. Node-RED設定 67 設定した内容の反映が完了すると、Bluemixで用意された初期画面が表示されます。 「Go to your Node-RED flow editor」をクリックします。
- 68. Node-RED WebSocketノードの作成 72 ドラッグ&ドロップされたWebSocketノードをWクリックし、設定画面に移ります。 種類は 【 接続 】 、名前は 【 任意の名称 】 を入力のうえ、URLの行にある鉛筆マークをクリックします。
- 69. Node-RED WebSocketノードの作成 73 URL部分はsakura.ioのコンパネからのペーストを行い、ドロップダウンの項目についてはデフォルトで定義されている 【 ペイロードを送信/受信 】 を選択し、 【 追加 】 をクリックします。
- 71. Node-RED WebSocketノードの作成 75 【 完了 】 をクリックするとwebsocketノードへ設定が反映され、不備がない場合はノードの三角マークが消えます。 WebSocketノードへの設定が反映されましたが、この時点ではsakura.ioからデータは入ってきていません。 続いてはデータを表示するためのDebugノードを作成します。
- 74. Node-RED フローのデプロイ 78 各ノードを接続し、準備が完了したら、右上部の 【 デプロイ 】 をクリックします。 デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始されます。 併せて、debugノードからの情報を確認するため、コンソールの 【 デバッグ 】 タブをクリックします。
- 76. Node-RED ダッシュボード（計器盤）ノードの追加 80 この後のシナリオの準備として、ダッシュボード（計器盤）のノードをNode-REDに追加しておきます。 まずこの後の操作や表示に影響を与えないよう、既存のフローをダブルクリックし、状態を 【 無効 】にしたうえで、 Node-RED右上の 【 メニュー（三） 】 から 【 パレットの管理 】 を選択します。
- 77. Node-REDダッシュボード（計器盤）ノードの追加 81 【 ノードを追加 】 タブの検索窓から【 node-red-dashboard 】 でヒットしたノードを追加します。確認に対しては 【 追加 】 を選択します。
- 79. Node-RED フローサンプルのインポート 83 続いてNode-REDフローサンプルをインポートします。フローは下図のような構造になっており、センサーの温度・ 湿度を可視化してTwitterにメッセージをつぶやきます。WebSocketノードおよびTwitterノードに必要事項だけ設 定することで連携を体験いただけます。 文字列として受け取った JSONデータの変換 通信モジュールからの データのみを通過 温度（ch0）データだけを抽出 温度（ch1）データだけを抽出 /ui/ にグラフとして可視化 文章を生成（実行後10分待機） /ui/ にグラフとして可視化 Twitterアカウント連携で投稿
- 81. Node-REDフローサンプルのインポート（フローのデータのペースト） 85 Node-REDに戻って【 三 】→【読み込み】 →【クリップボード】と進み、テキストエリアにデータを ペースト（Ctrl+V）して【読み込み】をクリックして下さい。
- 82. Node-REDフローサンプルのインポート（フローのデプロイ） 86 「グラフ表示＆Twitter投稿（温度）」というシートが追加されたことを確認し、 【 デプロイ 】 でインポートを 確定して下さい。「デプロイの確認」ウィンドウでは、そのまま 【 デプロイの確認 】 をクリックして下さい。
- 83. Node-RED センサーデータの受信（websocketノードの設定） 87 インポートしたフローの先頭にあるwebsocketノードを設定します。内容は先の手順と同じです。 「種類」を 【 接続 】 に変更し、「URL」の鉛筆マークをクリックして、sakura.ioのコンパネのwebsocketの URLをコピペして下さい。
- 85. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携） 89 【 http://<IPアドレス>:<指定したWeb UIポート番号>/ui/ 】 にアクセスするか ［ dashboard ］ の 【 】をクリックすると、 取得した情報に応じてリアルタイムに変化するグラフおよびゲージを確認することできます。 ［ dashboard ］ の 【 Theme 】 をクリックすると、UI全体のカラーリングを変更できます。 この時点ではまだ ［ Control ］ 内のボタンによる制御は有効になっていません。
- 86. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携） 90 Twitterノードを設定のうえデプロイすると、 ［ メッセージ化 ］ ノードに記載された文章中に、 その時取得した温度センサの情報が埋め込まれた状態で該当Twitterアカウントにメッセージが投稿されます。 ［ メッセージ化 ］ ノードの内容を書き換えることで任意の文章に変更することができます。
- 87. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携） 91 TweetノードをWクリックし、 [ Twitter ID ] 行の鉛筆マークをクリックし、案内される Twitterアカウント認証画面に進みます。
- 88. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携） 92 認証画面は利用しているブラウザでログインしているかどうかで画面遷移が異なります。 それぞれ必要な項目を入力or確認したうえで 【 連携アプリを認証 】 をクリックすると [ Authorised] の表記とともに認証された旨表示されますので、案内に従いウィンドウを閉じます。 まだログインしていない場合 既にログインしている場合
- 89. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携） 93 認証が成功しているとTwitter ID欄に認証したアカウントのIDが入力されています。 問題なければ 【 追加 】 および 【 完了 】 をクリックし、設定を完了します。 フローをデプロイするとTwitterへの連携が実行されます。
- 92. Node-RED フローサンプルの紹介（制御信号の送信） 96 作成されたLED-RED-onノードをWクリックし、設定画面に移ります。 ［ When Clicked, send: ］ の ［ payload ］ 行最右部の 【 】 をクリックするとJSONエディタが起動します。 2行目の 【 %%moduleID%% 】 を対象となるモジュールのものに差し替え、 【 完了 】 をクリックします。 ［ button ノードを編集 ］ 画面でも同様に 【 完了 】 をクリックします。 ※編集画面の［ Payload ］でも直接編集可能
- 93. Node-RED フローサンプルの紹介（制御信号の送信） 97 【 %%moduleID%% 】 から差し替える値は、先程sakura.ioのコントロールパネルでプロジェクトに表示されていた uから始まる12桁の文字列となります。
- 94. Node-RED フローサンプルの紹介（制御信号の送信） 98 作成されたWebSocket outノードをWクリックし、設定画面に移ります。 先程の手順と同様、種類は 【 接続 】 、名前は 【 任意の名称 】 を入力します。 URLは過去設定したものがある場合、ドロップダウンで指定することができます。 全て設定したら 【 完了 】 をクリックします。 out
- 96. 100 最後に
- 100. 最後に ～sakura.io～ 104 モジュールの登録が解除され、表示から削除されました。 次は連携サービスとともにプロジェクトを削除します。 プロジェクト右上の［削除］マークをクリックします。
- 102. 最後に ～IBM Cloud～ 106 Bluemixに立てたNode-REDについてもアプリケーションを停止します。ダッシュボード画面を確認すると、 Cloud Foundry アプリの状態が「実行中」になっており、サービス（Cloudant NoSQL DB）が1つ作成されています。 なお、該当のCloud Foundryアプリ内で「モニタリング」をクリックした場合、availability-monitoring-autoという サービスが自動で作成されている場合があります。
- 103. 最後に ～IBM Cloud～ 107 Cloud Foundry アプリのアクション欄で「その他のアクション」ボタンをクリックすると、 アプリの起動停止や削除に関するメニューが表示されます。 アプリを停止する場合は「アプリの停止」をクリックします。
- 111. 最後に 115 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間（部員）を募集しています。 （テーマはIoTに限らず、クラウドやVPS、スタートアップ系ネタでもOK！） ご興味があれば、Come and join us & Feel free to contact me! 連絡先 ：sakura-club@sakura.ad.jp さくらクラブ ： https://saku-love.doorkeeper.jp/ さくらクラブにっぽんばし： https://www.facebook.com/saku.love.nipponbashi/
- 112. 116 そこに、さくら