Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IBM Cloud&sakura.io体験ハンズオン 20171208

352 views

Published on

※本資料は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/

Published in: Technology
  • Be the first to like this

IBM Cloud&sakura.io体験ハンズオン 20171208

  1. 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. 2 はじめに
  3. 3. 本ワークショップの目的 3 1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよび Web/アプリ開発系のエンジニアがご自身のスキルセットを 大きく超えることなく、Internet of Things(IoT)に挑戦できることを 体験いただくものです。 2. そのため各章内で技術的な詳細は極力省略しております。 3. 今回は1人1つワークショップキットをご用意しておりますが、 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、 ご不明点を積極的にフォローしあって進めていただければと思います。
  4. 4. 今回のハンズオンの流れ 4 マイコンおよび プログラムの構築 マイコン(Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール sakura.ioの設定 ①② 各種LED Webサービス連携 (IBM Bluemix) ③ グラフ表示&Twitter投稿 ボタンでのデバイス制御
  5. 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. 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. 7. Agenda 7 1. sakura.ioの設定 ₋ プロジェクトの作成 ₋ さくらの通信モジュールの登録 ₋ 連携サービスの設定 2. マイコンおよびプログラムの構築 ₋ マイコン(Arduino)による開発環境の準備 ₋ 温湿度センサおよびさくらの通信モジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 3. Webへのデータ連携(IBM Cloud) ₋ IBMのライト・アカウントを作成する ₋ Cloud Foundry アプリ作成 ₋ WebSocketを利用したデータ連携フロー作成
  8. 8. 8 sakura.ioの設定
  9. 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 ============================================================= ~~~以下省略~~~
  10. 10. 今回のハンズオンの流れ 10 マイコンおよび プログラムの構築 マイコン(Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール sakura.ioの設定 ①② 各種LED Webサービス連携 (IBM Bluemix) ③ グラフ表示&Twitter投稿 ボタンでのデバイス制御
  11. 11. sakura.io コントロールパネル ログイン 11 sakura.io コントロールパネル(https://secure.sakura.ad.jp/iot/)にログインします。 Google等でsakura.ioサイト(https://sakura.io/)にアクセスし 、「ログイン」をクリックします。
  12. 12. コントロールパネルへのログイン 12 既にログイン済みのセッションがない場合、以下画面にて会員認証を求められます。 お手持ちの会員ID、パスワードを利用してログインします。
  13. 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セット)設定可能 プロジェクトに対して 複数紐付け可能
  14. 14. プロジェクトの作成 16 初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。 まずプロジェクトを作成するため、[+新規プロジェクト]をクリックします。
  15. 15. プロジェクトの作成 17 新規プロジェクトの作成画面に遷移します。 [名称]欄に任意の名前を入力し、[追加]をクリックします。
  16. 16. 通信モジュールの登録 18 プロジェクトが作成されました。次に通信モジュールの登録を行います。 [モジュール登録]のボタンをクリックします。
  17. 17. 通信モジュールの登録 19 モジュールの追加画面に遷移します。指定したプロジェクトが選択されていることを確認のうえ、 登録用ID、登録用パスワード、および任意の名称を入力して、[追加]ボタンをクリックします。
  18. 18. 通信モジュールの登録 20 モジュールの追加に成功すると[モジュールを追加しました]というダイアログが表示されます。 [ホームへ戻る]ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されている通信モジュールを追加しようとした場合は 内容とともに[モジュールの追加に失敗しました]というダイアログが表示されます。 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDに登録されています、過去登録した会員IDにログインし、解除ください
  19. 19. 連携サービスの設定 21 モジュールが登録されました。表示されているモジュールIDは一意のものであり、 デバイスへのデータ送信の際に使用しますので、ローカルにコピーしておきます。 最後に外部への連携サービスを設定します。[+サービス追加]のボタンをクリックします。
  20. 20. 連携サービスの設定(WebSocket) 22 追加サービスの選択画面に遷移します。 今回はWebSocketを作成しますので、[WebSocket]をクリックします。
  21. 21. 連携サービスの設定(WebSocket) 23 WebSocketの作成には特に設定事項はありません。 [名前]欄に任意の名前を入力し、[作成]ボタンをクリックします。
  22. 22. 連携サービスの設定 24 連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。 該当のプロジェクトにて作成された名称の連携サービスをクリックします。
  23. 23. 連携サービスの設定(WebSocket) 25 WebSocketを設定しました、これでコントロールパネルでの準備は完了です。 ここで表示されるWebSocketのURLはハンズオンの後半で使用しますので書き留めておいてください。
  24. 24. 26 マイコンおよび プログラムの構築
  25. 25. 今回のハンズオンの流れ 27 マイコンおよび プログラムの構築 マイコン(Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール sakura.ioの設定 ①② 各種LED Webサービス連携 (IBM Bluemix) ③ グラフ表示&Twitter投稿 ボタンでのデバイス制御
  26. 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. 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. 28. Arduino IDEのセットアップ 30 該当の金額を選択するか(寄付する場合)、もしくは 【 JUST DOWNLOAD 】 にてダウンロードします。
  29. 29. Arduino IDEのセットアップ 31 インストールはデフォルト推奨、ドライバーについても全てインストールします。 #本スライド記載の画像はWindowsの場合になります。
  30. 30. Arduino IDEのセットアップ 32 Arduino IDEが起動したら、Arduino本体をPCに接続します。 上部メニューバーから以下2つを設定します。 ボード: [ ツール ] → [ ボード:”XXX” ] から 【 Arduino/Genuino Uno 】 を選択します。 シリアルポート: [ ツール ] → [ シリアルポート ] から 【 COMx(Arduino/Genuino Uno) 】 となるものを選択します。 Mac環境の場合はCOMポートではなく、 【 /dev/~~~(Arduino/Genuino Uno) 】 となるものを選択します。 ボードの選択 シリアルポートの選択
  31. 31. マイコン(Arduino)の準備 33 [ ファイル ] → [ スケッチ例 ] → [ 01.Basics ] → [ Blink ] を選択し、Blinkスケッチを表示します。 【 → 】 をクリックしてスケッチをマイコンに書き込み、該当箇所のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
  32. 32. さくらの通信モジュールの取り付け 34 ArduinoをPCから外し、図に示すようにシールドとArduinoのピン穴と合致するようにはめ込みます。
  33. 33. ライブラリの取得(温湿度センサ-HDC1000利用の場合) 35 [ スケッチ ] → [ ライブラリをインクルード ] → [ ライブラリを管理... ] をクリックし、 右上検索窓から 【 hdc1000 】 を検索すると、 [ HDC1000 by Yuichi Tateno ] がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ] が表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
  34. 34. ライブラリの取得(温湿度センサ-SHT31利用の場合) 36 [ スケッチ ] → [ ライブラリをインクルード ] → [ ライブラリを管理... ] をクリックし、 右上検索窓から【 SHT31 】を検索すると、 [ Adafruit SHT31 Library by Adafruit ] がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ] が表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。
  35. 35. ライブラリの取得(SakuraIO) 37 [ スケッチ ] → [ ライブラリをインクルード ] → [ ライブラリを管理... ] をクリックし、 右上検索窓から 【 sakuraio 】 を検索すると、 [ SakuraIO by SAKURA Internet Inc. ] がヒットします。 最新のVer.を選択のうえインストールをクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ] が表示されます。
  36. 36. FirmwareUpdate.ino 38 [ ファイル ] → [ スケッチ例 ] → [ SakuraIO ] → [ FirmwareUpdate ] を選択し、 クリックで該当スケッチを 書き込みます。 [ ツール ] → [ シリアルモニタ ] もしくは クリックでファームウェアアップデート状況を確認します。 現在のVersion情報と比較し、新しいファームウェアが提供されている場合にはアップデートを実行します。 PCからの給電が不安定/不足している場合は [ Update Failure ] と表示され、アップデートが失敗する場合があります。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合 ※PCからの給電が不安定/不足している場合は [ Update Failure ] と表示され、アップデートが 失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。
  37. 37. ブレッドボードについて 39 ブレッドボードは場所によって接続されている場所が異なります。 下記の繋がっている部分を意識して配線を行ってください。 水平方向に繋がっている 主に各センサーに対する 電源系統の接続に利用 垂直方向に繋がっている 主に各センサーの配置や センサーの信号系統の 接続に利用
  38. 38. 温湿度センサ(HDC1000/SHT31)について 40 温湿度センサモジュールはそれぞれ繋がれるべき端子が決まっています。 少し見えにくいですが、センサ本体が実装されている面を裏返すとと、各ピンに接続されるべき端子が 明記されています。 ピンアサインが記載温湿度センサ 表面 裏面
  39. 39. LEDについて 41 LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が陽極(アノード)と呼ばれ、 デジタルの端子に接続します。逆に足の短い方は陰極(カソード)と呼ばれ、GND側の端子に接続します。 今回使用するLEDは抵抗が内蔵されているため、別途抵抗を挾む必要はありません。 陽極(アノード) デジタル端子に接続 陰極(カソード) GND端子に接続
  40. 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. 41. 温湿度センサの動作確認(温湿度センサ-HDC1000利用の場合) 43 [ ファイル ] → [ スケッチ例 ] → [ HDC1000 ] → [ hdc1000 ] を選択し、 クリックで該当スケッチを書き込みます。 [ ツール ] → [ シリアルモニタ ] もしくは クリックでTemp&Humi情報が取得できることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
  42. 42. 試験用プログラムの流し込み(温湿度センサ-HDC1000利用の場合) 44※本作業はセンサにHDC1000を利用している場合のみ実施します。 [ ファイル ] → [ 新規ファイル ] で新しいスケッチを表示し、下記URLの内容をスケッチにコピー&ペーストします。 をクリックし、 [ ツール ] → [ シリアルモニタ ] もしくは クリックでTemp&Humi情報に加え、シリアル値と 送信キュー情報が取得できることを確認します。問題があった場合、オレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino 】
  43. 43. 試験用プログラムの流し込み(温湿度センサ-SHT31利用の場合) 45 [ ファイル ] → [ 新規ファイル ] で新しいスケッチを表示し、下記URLの内容をスケッチにコピー&ペーストします。 をクリックし、 [ ツール ] → [ シリアルモニタ ] もしくは クリックでTemp&Humi情報に加え、シリアル値と 送信キュー情報が取得できることを確認します。問題があった場合、オレンジ色のエラーが表示されます。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino 】 ※本作業はセンサにSHT31を利用している場合のみ実施します。
  44. 44. デバイスから送信されたデータの確認 46 sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信されたデータを受信できているかを 確認することができます。該当のプロジェクトで作成した連携サービスからいずれかのWebSocketをクリックします。
  45. 45. デバイスから送信されたデータの確認 47 サービス連携の編集画面の下部にデバイスから送信されたデータがリアルタイムで表示されます。 簡易表示モードでは通信モジュールから受け取ったデータを以下のように確認できます。 → 温度 → 湿度 → カウント値 モジュール: データを送信した 通信モジュールのID チャンネル データが格納された チャンネル番号 時刻: データがモジュールのキューに 格納された時刻のタイムスタンプ 値: 送信された値 型: データの型式
  46. 46. デバイスから送信されたデータの確認 48 [ 詳細表示モードに切り替え ] をクリックすると詳細表示モードに遷移します。 モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 複数チャンネルある場合、 それぞれの最終データを表示 クリックでログ出力を 開始/停止 タイプ: プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels :通信モジュールからのデータ ・connection :接続の開始/終了 ・location :簡易位置情報 ・keepalive :WebSocketセッション確認 ペイロードには受け取った データのpayload部が表示 時刻: 詳細表示モードではプラット フォームで該当のメッセージを 受け取ったタイムスタンプ
  47. 47. 49 Webへのデータ連携 (IBM Bluemix)
  48. 48. 今回のハンズオンの流れ 50 マイコンおよび プログラムの構築 マイコン(Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール sakura.ioの設定 ①② 各種LED Webサービス連携 (IBM Bluemix) ③ グラフ表示&Twitter投稿 ボタンでのデバイス制御
  49. 49. http://bluemix.netにアクセスして、Eメール・アドレスを入力し、「→」をクリックして登録処理を続けて下さい。 ※ここで入力したEメール・アドレスがBluemixのユーザーIDになります IBMのライトプラン・アカウントを作成する 51
  50. 50. 必要事項を記入して、最下段の「アカウントの作成」をクリックします クリックすると最終確認用のEメールが届くので、もう一度メールボックスを開いて下さい。 IBMのライトプラン・アカウントを作成する 52 パスワードは登録完了後の最初の ログインでさっそく使います。 忘れないで下さいね!
  51. 51. IBMのライトプラン・アカウントを作成する 53 ロボット対策の認証をクリアして下さい。
  52. 52. IBMのライトプラン・アカウントを作成する 54 登録はこれで完了です。確認のメールが届くのでメールボックスを開いて下さい。
  53. 53. IBMのライトプラン・アカウントを作成する Eメールの本文中にある「Confirm Account」をクリックして下さい。 55
  54. 54. IBMのライトプラン・アカウントを作成する 56 アカウントの登録が完了しました。 そのままBluemixでアプリを作成するため「ログイン」をクリックします。
  55. 55. IBMのトライアルアカウントを作成する 57 登録したメールアドレスを入力し、「次へ」をクリックします。 その後、登録したパスワードを入力し、「Log in」をクリックします。 XXX@sample.com
  56. 56. 「Internet of Things Platform Starter」作成 58 まだ何もアプリが作成されていないため、ダッシュボードには何も表示されていません。 今回はNode-REDの作成のため、まず「オファリングの検討」をクリックします。
  57. 57. 「Internet of Things Platform Starter」作成 59 左側のメニューから「ボイラープレート」を選択し、表示された「Internet of Things Platform Starter」をクリックします。 Node-REDが、Internet of Things Platform Starterに含まれています
  58. 58. 「Internet of Things Platform Starter」作成 60 任意のアプリ名を入力し、他の値はデフォルトで「作成」をクリックします。 他のユーザーと重複しないよう ユニークな名前をつけて下さい
  59. 59. 「Internet of Things Platform Starter」作成 61 作成が始まると、「停止」から「開始中」「未実行」「実行中」に遷移します。実行中ステータスになった状態で 「アプリURLにアクセス」を選択するとNode-REDの操作画面に遷移します。
  60. 60. Node-RED設定 64 Node-RED Starterでは、初めにセキュリティの設定を行います。「Next」をクリックします。
  61. 61. Node-RED設定 65 ログインに使用するUsernameおよびPasswordを設定します。必要に応じて作成したフローの 閲覧権限と編集権限をチェックボックスで設定し「Next」をクリックします。
  62. 62. Node-RED設定 66 最後に設定した権限やUsername等の変数を変更する場合の案内が表示されます。 確認したら「Finish」をクリックします。
  63. 63. Node-RED設定 67 設定した内容の反映が完了すると、Bluemixで用意された初期画面が表示されます。 「Go to your Node-RED flow editor」をクリックします。
  64. 64. Node-RED設定 68 Node-REDの認証画面が表示されます。設定したUsernameとPasswordを入力し、「ログイン」をクリックします。
  65. 65. Node-RED設定 69 Node-REDにログインができました。サンプルのNode-REDフローが表示されていますが、これは使用しません。今回は まずブランクのシートを作成し、そこへ新規にNode-REDフローを作成します。シート右上の「+」をクリックして下さい。
  66. 66. ノード パレット シート Info/Debug コンソール デプロイ Node-RED 初期画面 70 Node-REDは「ノード」と呼ばれる機能の固まりをシート上で組み合わせ、 ひとつの「フロー」にすることで、ほとんどプログラミングを知らない人でも プログラムを構築することができるツールとなります。
  67. 67. Node-RED WebSocketノードの作成 71 まずはWebSocketからのデータを受け取るノードを追加します。 ノードパレットの入力から「websocket」ノードをシートにドラッグ&ドロップします。
  68. 68. Node-RED WebSocketノードの作成 72 ドラッグ&ドロップされたWebSocketノードをWクリックし、設定画面に移ります。 種類は 【 接続 】 、名前は 【 任意の名称 】 を入力のうえ、URLの行にある鉛筆マークをクリックします。
  69. 69. Node-RED WebSocketノードの作成 73 URL部分はsakura.ioのコンパネからのペーストを行い、ドロップダウンの項目についてはデフォルトで定義されている 【 ペイロードを送信/受信 】 を選択し、 【 追加 】 をクリックします。
  70. 70. Node-RED WebSocketノードの作成 74 指定するURLの値は、sakura.ioのコンパネの連携サービスで確認できる赤枠部分となります。 赤枠部分の情報をコピーして、WebSocketノードのURL部分にペーストします。
  71. 71. Node-RED WebSocketノードの作成 75 【 完了 】 をクリックするとwebsocketノードへ設定が反映され、不備がない場合はノードの三角マークが消えます。 WebSocketノードへの設定が反映されましたが、この時点ではsakura.ioからデータは入ってきていません。 続いてはデータを表示するためのDebugノードを作成します。
  72. 72. Node-RED Debugノードの作成 76 次に、ノードパレットの出力から「debug」ノードをシートにドラッグ&ドロップします。 Debugノードは自動で「msg.payload」に名前が変わります。特に設定は不要です。
  73. 73. Node-RED ノード間の接続 77 各ノードの動作を繋げるために、WebSocketノード右端とDebugノード左端をドラッグ&ドロップで繋ぎます。
  74. 74. Node-RED フローのデプロイ 78 各ノードを接続し、準備が完了したら、右上部の 【 デプロイ 】 をクリックします。 デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始されます。 併せて、debugノードからの情報を確認するため、コンソールの 【 デバッグ 】 タブをクリックします。
  75. 75. 動作確認 79 フローに問題がない場合、Websocketノード下部に[connected]と表示され、 コンソールのdebug内にプラットフォームから取得したJSONデータを確認できます。 debugノード右端の緑マークをクリックするとコンソールへの出力が停止されます。
  76. 76. Node-RED ダッシュボード(計器盤)ノードの追加 80 この後のシナリオの準備として、ダッシュボード(計器盤)のノードをNode-REDに追加しておきます。 まずこの後の操作や表示に影響を与えないよう、既存のフローをダブルクリックし、状態を 【 無効 】にしたうえで、 Node-RED右上の 【 メニュー(三) 】 から 【 パレットの管理 】 を選択します。
  77. 77. Node-REDダッシュボード(計器盤)ノードの追加 81 【 ノードを追加 】 タブの検索窓から【 node-red-dashboard 】 でヒットしたノードを追加します。確認に対しては 【 追加 】 を選択します。
  78. 78. Node-REDダッシュボード(計器盤)ノードの追加 82 ノードの追加が完了したら「デバッグ」タブの右に「dashboard」タブができています。確認したら【閉じる】をクリックします。
  79. 79. Node-RED フローサンプルのインポート 83 続いてNode-REDフローサンプルをインポートします。フローは下図のような構造になっており、センサーの温度・ 湿度を可視化してTwitterにメッセージをつぶやきます。WebSocketノードおよびTwitterノードに必要事項だけ設 定することで連携を体験いただけます。 文字列として受け取った JSONデータの変換 通信モジュールからの データのみを通過 温度(ch0)データだけを抽出 温度(ch1)データだけを抽出 /ui/ にグラフとして可視化 文章を生成(実行後10分待機) /ui/ にグラフとして可視化 Twitterアカウント連携で投稿
  80. 80. Node-REDフローサンプルのインポート(フローのデータのコピー) 84 まずフローのデータをクリップボードにコピーします。以下のURLをブラウザで開き、データをマウスでドラッグし て、Ctrl+c(または右クリック→コピー)でクリップボードにコピーして下さい。 【 https://github.com/sakuraio/handson-sample/blob/master/node-red/ibmcloud-graph-and-control-with-tweet.json 】
  81. 81. Node-REDフローサンプルのインポート(フローのデータのペースト) 85 Node-REDに戻って【 三 】→【読み込み】 →【クリップボード】と進み、テキストエリアにデータを ペースト(Ctrl+V)して【読み込み】をクリックして下さい。
  82. 82. Node-REDフローサンプルのインポート(フローのデプロイ) 86 「グラフ表示&Twitter投稿(温度)」というシートが追加されたことを確認し、 【 デプロイ 】 でインポートを 確定して下さい。「デプロイの確認」ウィンドウでは、そのまま 【 デプロイの確認 】 をクリックして下さい。
  83. 83. Node-RED センサーデータの受信(websocketノードの設定) 87 インポートしたフローの先頭にあるwebsocketノードを設定します。内容は先の手順と同じです。 「種類」を 【 接続 】 に変更し、「URL」の鉛筆マークをクリックして、sakura.ioのコンパネのwebsocketの URLをコピペして下さい。
  84. 84. Node-RED センサーデータをダッシュボード(計器盤)に表示 88 websocketノードを設定したら【デプロイ】をクリックして設定を反映します。次に【dashboard】タブを開いて、 【 】をクリックして下さい。次ページのようなダッシュボードの画面が現れて、センサーデータが表示されます。
  85. 85. Node-RED フローサンプルの紹介(GUI表示&Twitter連携) 89 【 http://<IPアドレス>:<指定したWeb UIポート番号>/ui/ 】 にアクセスするか [ dashboard ] の 【 】をクリックすると、 取得した情報に応じてリアルタイムに変化するグラフおよびゲージを確認することできます。 [ dashboard ] の 【 Theme 】 をクリックすると、UI全体のカラーリングを変更できます。 この時点ではまだ [ Control ] 内のボタンによる制御は有効になっていません。
  86. 86. Node-RED フローサンプルの紹介(GUI表示&Twitter連携) 90 Twitterノードを設定のうえデプロイすると、 [ メッセージ化 ] ノードに記載された文章中に、 その時取得した温度センサの情報が埋め込まれた状態で該当Twitterアカウントにメッセージが投稿されます。 [ メッセージ化 ] ノードの内容を書き換えることで任意の文章に変更することができます。
  87. 87. Node-RED フローサンプルの紹介(GUI表示&Twitter連携) 91 TweetノードをWクリックし、 [ Twitter ID ] 行の鉛筆マークをクリックし、案内される Twitterアカウント認証画面に進みます。
  88. 88. Node-RED フローサンプルの紹介(GUI表示&Twitter連携) 92 認証画面は利用しているブラウザでログインしているかどうかで画面遷移が異なります。 それぞれ必要な項目を入力or確認したうえで 【 連携アプリを認証 】 をクリックすると [ Authorised] の表記とともに認証された旨表示されますので、案内に従いウィンドウを閉じます。 まだログインしていない場合 既にログインしている場合
  89. 89. Node-RED フローサンプルの紹介(GUI表示&Twitter連携) 93 認証が成功しているとTwitter ID欄に認証したアカウントのIDが入力されています。 問題なければ 【 追加 】 および 【 完了 】 をクリックし、設定を完了します。 フローをデプロイするとTwitterへの連携が実行されます。
  90. 90. 今回のハンズオンの流れ 94 マイコンおよび プログラムの構築 マイコン(Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール sakura.ioの設定 ①② 各種LED Webサービス連携 (IBM Bluemix) ③ グラフ表示&Twitter投稿 ボタンでのデバイス制御
  91. 91. Node-RED フローサンプルの紹介(制御信号の送信) 95 サンプルを読み込んだだけではボタン押下時にLEDの制御は実行されません。 これは生成されるJSONデータに組んだデバイスのモジュールIDが指定されていないためとなります。 次にButtonノードを設定し、対象となるデバイスに制御信号が送信されるようにします。 各ノードの実行(テスト用) 該当WebSocket URLに JSONデータを送信 ボタン押下時に指定した JSONデータを生成
  92. 92. Node-RED フローサンプルの紹介(制御信号の送信) 96 作成されたLED-RED-onノードをWクリックし、設定画面に移ります。 [ When Clicked, send: ] の [ payload ] 行最右部の 【 】 をクリックするとJSONエディタが起動します。 2行目の 【 %%moduleID%% 】 を対象となるモジュールのものに差し替え、 【 完了 】 をクリックします。 [ button ノードを編集 ] 画面でも同様に 【 完了 】 をクリックします。 ※編集画面の[ Payload ]でも直接編集可能
  93. 93. Node-RED フローサンプルの紹介(制御信号の送信) 97 【 %%moduleID%% 】 から差し替える値は、先程sakura.ioのコントロールパネルでプロジェクトに表示されていた uから始まる12桁の文字列となります。
  94. 94. Node-RED フローサンプルの紹介(制御信号の送信) 98 作成されたWebSocket outノードをWクリックし、設定画面に移ります。 先程の手順と同様、種類は 【 接続 】 、名前は 【 任意の名称 】 を入力します。 URLは過去設定したものがある場合、ドロップダウンで指定することができます。 全て設定したら 【 完了 】 をクリックします。 out
  95. 95. グラフ表示&Twitter投稿 ボタンでのデバイス制御 動作確認 99 マイコン(Arduino Uno) 温湿度センサ (SHT31/HDC1000) sakura.io モジュール 各種LED 以上で設定は完了です。温度センサを指で押さえ、一定間隔でグラフが変化(設定していればツイートも)すること、 ボタン操作により生成されたJSONデータにより、LEDが制御されるまでを確認しましょう。 一定間隔で温度と湿度 カウント値データを送信 WebSocketにより、 リアルタイムで連携、表示 moduleで指定された モジュールがデータを受信 WebSocketにより、適切な 形式のJSONは受け入れる ボタン操作で指定した内容 に基づきJSONデータ送信
  96. 96. 100 最後に
  97. 97. 最後に ~sakura.io~ 101 ハンズオンに使用したさくらの通信モジュールは必要に応じて登録を解除します。 接続ステータス横の歯車マークをクリックします。
  98. 98. 最後に ~sakura.io~ 102 モジュールの設定画面に遷移します。下部の[登録解除]ボタンをクリックします。
  99. 99. 最後に ~sakura.io~ 103 通信モジュールの登録を解除してよいか確認されます。 問題ない場合は再度[登録解除]ボタンをクリックします。
  100. 100. 最後に ~sakura.io~ 104 モジュールの登録が解除され、表示から削除されました。 次は連携サービスとともにプロジェクトを削除します。 プロジェクト右上の[削除]マークをクリックします。
  101. 101. 最後に ~sakura.io~ 105 プロジェクトを削除してよいか確認されます。 問題ない場合は再度[削除]ボタンをクリックします。
  102. 102. 最後に ~IBM Cloud~ 106 Bluemixに立てたNode-REDについてもアプリケーションを停止します。ダッシュボード画面を確認すると、 Cloud Foundry アプリの状態が「実行中」になっており、サービス(Cloudant NoSQL DB)が1つ作成されています。 なお、該当のCloud Foundryアプリ内で「モニタリング」をクリックした場合、availability-monitoring-autoという サービスが自動で作成されている場合があります。
  103. 103. 最後に ~IBM Cloud~ 107 Cloud Foundry アプリのアクション欄で「その他のアクション」ボタンをクリックすると、 アプリの起動停止や削除に関するメニューが表示されます。 アプリを停止する場合は「アプリの停止」をクリックします。
  104. 104. 最後に ~IBM Cloud~ 108 アプリの停止に関する確認がされますので、「停止」をクリックします。
  105. 105. 最後に ~IBM Cloud~ 109 停止処理が正常に実施されると状態欄が「停止」に遷移します。 以上で今回の範囲において課金されるアプリとサービスは全て停止されました。
  106. 106. 最後に ~IBM Cloud~ 110 不要になったアプリは削除することもできます。 「その他のアクションボタン」をクリックし、「アプリの削除」をクリックします。
  107. 107. 最後に ~IBM Cloud~ 111 アプリケーションの削除に関する確認がされますので、今回は併せて削除するため 「<命名したアプリ名>-cloudantNoSQLDB」のチェックボックスにチェックを入れます。 次に、経路情報も併せて削除するため、「経路」タブをクリックします
  108. 108. 最後に ~IBM Cloud~ 112 「<命名したアプリ名>.mybluemix.net」のチェックボックスにチェックを入れます。 最後に「削除」ボタンをクリックします。
  109. 109. 最後に ~IBM Cloud~ 113 削除が正常に完了すると、プラットフォームに何もない状態に戻ります。 以上でアプリおよびサービスの削除は完了です。
  110. 110. 最後に 114 以上でハンズオンにおける作業は全て終了となります。 お疲れ様でした!
  111. 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. 112. 116 そこに、さくら

×