Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IBM Cloud&sakura.io 体験ハンズオン(Part2)/sakuraio han...

IBM Cloud&sakura.io 体験ハンズオン(Part2)/sakuraio handson ibmcloud part2

※2018/08/27更新

各地で開催されているさくらインターネットが提供するIoTプラットフォーム「sakura.io」のハンズオンでの資料となります。

本資料では様々なサービスを提供するIBM Cloudと連携し、「Arduino+sakura.ioモジュールを用いたマイコンおよびプログラムの構築」から「IBM Watsonの画像分類を用いたWebサービス連携」までの手順をスライドでご覧いただけます。

サービス詳細は以下をご確認ください。
IBM Cloud https://www.ibm.com/cloud-computing/jp/ja/
sakura.io https://sakura.io/

More Decks by さくらインターネット(IoTプラットフォーム事業)

Other Decks in Technology

Transcript

  1. IBM Cloud(Bluemix) & sakura.io体験ハンズオン Bluemix User Group (BMXUG) 共催 第2弾

    Watsonの画像認識機能を使ってデバイスを制御しよう 2018/8/27 (C) Copyright 1996-2018 SAKURA Internet Inc. さくらインターネット株式会社 IoTチーム 西田 有騎
  2. 本ハンズオンの目的とお願い  本ハンズオンは sakura.io を導入したデバイスを IBM Cloud と組み合わせ ることで、従来よりもさらに簡単にIoT (Internet

    of Things)を取り込んだ サービスが実現できることをご体験いただくものです。  そのため、Web/アプリ系の方だけでなく、組み込み系の方や両方わからないと いう方にも、ご体験いただくことができます。  もしも近くのお困りの方をご自身の知識分野でフォローできそうであれば、積極 的にサポートしあって進めていただければと思います。 5
  3. 本ハンズオンで使用するツール・機材・参考情報まとめ ▪本編▪ ・さくらインターネット会員登録 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 ・サンプル用スケッチ https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/arduino-ibmcloud-part2.ino

    ・IBM Cloudアカウントの作成 https://console.bluemix.net/registration/ ・Node-RED IBM Cloud Starter Application https://github.com/phssakaigawa/nodered-watsonvr-handson ・カスタムモデルトレーニング用画像 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/ ▪参考 開発者向けページ▪ ・Visual Recognition APIドキュメント https://console.bluemix.net/docs/services/visual-recognition/index.html ・sakura.io 開発者向け https://sakura.io/developer/ ▪参考 モジュール&オプションのご購入▪ ・商品の購入 https://sakura.io/product/ ・sakura.ioモジュール(LTE) https://sakura.io/product/module_lte.html ・sakura.ioシールド for Arduino https://sakura.io/product/arduino.html ▪参考 その他物品のご購入(秋月電子通商)▪ ・Grove Base Shield V2 https://www.seeedstudio.com/Base-Shield-V2-p-1378.html ・Grove Red LED https://www.seeedstudio.com/Grove-Red-LED-p-1142.html ・Grove Green LED https://www.seeedstudio.com/Grove-Green-LED-p-1144.html ・Grove Blue LED https://www.seeedstudio.com/Grove-Blue-LED-p-1139.html ・Arduino Uno Rev3 http://akizukidenshi.com/catalog/g/gM-07385/ ・USBケーブル Aオス-Bオス http://akizukidenshi.com/catalog/g/gC-07605/ ・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/ 6
  4. ③ 今回のハンズオンの流れ 7 ① マイコンおよび プログラムの構築 マイコン (Arduino Uno) sakura.io

    モジュール ② 各種LED ハンズオン キット 顔検出 (標準) 連携 サービス モジュール sakura.ioの設定 プロジェクト Visual Recognition Webサービス連携 (IBM Cloud) 画像 アップロード Node-RED DevOps Toolchain カスタム モデル WebSocket Cloud Object Storage
  5. 今回のワークショップでご提供するもの 8 組み上げ済みキット USB2.0 ケーブル(A-B) 12W級 9V-1.3A ACアダプタ 抵抗入りLED 各色

    x 1個 Grove LED Socket Kit x 3個 Grove Cable x 3本 下記3つの組み合わせ Arduino Uno Rev3 sakura.io シールド for Arduino Grove ベースシールド sakura.ioモジュール (アンテナ取付済み)
  6. アジェンダ 1. sakura.ioの設定 ₋ プロジェクトの作成 ₋ sakura.ioモジュールの登録 ₋ 連携サービスの設定 2.

    マイコンおよびプログラムの構築 ₋ マイコン(Arduino)による開発環境の準備 ₋ 温湿度センサおよびsakura.ioモジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ デバイスから送信されたデータの確認 3. Webサービス連携(IBM Cloud) ₋ DevOps ToolchainによるNode-REDアプリケーションの作成 ₋ Visual Recognitionによる標準分類器(顔検出)のテスト ₋ Visual Recognitionによるカスタム分類器を使った判定とデバイスの制御 9
  7. ③ 今回のハンズオンの流れ 11 マイコンおよび プログラムの構築 マイコン (Arduino Uno) sakura.io モジュール

    ② 各種LED 顔検出 (標準) Visual Recognition Webサービス連携 (IBM Cloud) 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage ① ハンズオン キット 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket
  8. sakura.io コントロールパネルの考え方 12 プロジェクトC プロジェクトB プロジェクト モジュール3 ☑ データストアプラン 有償版/無償版

    ☑ 簡易位置情報提供 利用する/しない ☑ ファイル配信 ファイル1、ファイル2... 連携サービス3 モジュール / 連携サービス プロジェクトに対して複数登録可能 オプションサービス プロジェクトに対して1つ/1セット設定可能 モジュール2 連携サービス2 モジュール1 uAAAAAAAAAA 連携サービス1 WebSocket  sakura.ioは【 プロジェクト 】という単位で管理します。  プロジェクトには【 モジュール 】【 連携サービス 】を複数紐付けることができます。  各種【 オプションサービス 】はプロジェクトに対して1つもしくは1セット設定できます。
  9. モジュール登録  モジュール追加に成功すると[ モジュールを追加しました ]ダイアログが表示されるので、 【 ホームへ戻る 】ボタンをクリックしてホームに戻ります。 ※ID/PASSが正しくない、もしくは登録済モジュールを追加しようとした場合は下記ダイアログが表示されます 23

    登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDで登録されています、過去登録した会員IDでログインし解除ください
  10. この作業でやったこと 30 マイコン (Arduino Uno) sakura.io モジュール 各種LED 顔検出 (標準)

    Visual Recognition 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage ハンズオン キット 連携 サービス モジュール プロジェクト WebSocket sakura.ioプラットフォームで以下を実施 ・プロジェクトを作成 ・sakura.ioモジュールを登録 ・連携サービス(WebSocket)を作成
  11. ① ハンズオン キット 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ③

    今回のハンズオンの流れ 32 顔検出 (標準) Visual Recognition Webサービス連携 (IBM Cloud) 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage マイコンおよび プログラムの構築 sakura.io モジュール ② 各種LED マイコン (Arduino Uno)
  12. Arduino IDEのセットアップ  Webサイトから開発環境(Arduino IDE)を入手します。 2018/6/4時点の最新バージョンは[ 1.8.5 ]です。  環境がWindowsの場合は【

    Windows Installer 】、 Macの場合は【 Mac OS X 10.7 Lion or newer 】を選択します。 33 https://www.arduino.cc/en/Main/Software
  13. Arduino IDEのセットアップ  上部メニューバーからボードと、シリアルポートを設定します。 ボード:[ ツール ]→[ ボード:”XXX” ]から【 Arduino/Genuino

    Uno 】を選択 シリアルポート:[ ツール ]→[ シリアルポート ]から【 COMx (Arduino/Genuino Uno) 】を選択 ※Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択ください ※うまく認識しない場合は、USBを挿し直し、Arduino IDEを再起動を試してください 38 ボードの選択 シリアルポートの選択
  14. マイコン(Arduino)の準備  [ ファイル ]→[ スケッチ例 ]→[ 01.Basics ]→ 【

    Blink 】を選択し、Blinkス ケッチを表示します。  【 】をクリックしてスケッチを書き込み、該当のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 39
  15. ライブラリの取得(SakuraIO)  [ スケッチ ]→[ ライブラリをインクルード ]→ 【 ライブラリを管理... 】をクリックし、

    右上検索窓から【 sakuraio 】を検索すると、[ SakuraIO by SAKURA Internet Inc. ]がヒットします。  最新のVer.を選択のうえ【 インストール 】をクリックすると該当ライブラリが取り込まれ、 [ INSTALLED ]が表示されます。 40
  16. FirmwareUpdate.ino  [ ファイル ]→[ スケッチ例 ]→[ SakuraIO ]→ 【

    FirmwareUpdate 】を 選択し、【 】クリックでスケッチを書き込みます。[ ツール ]→ 【 シリアルモニタ 】 もしくは【 】クリックでアップデート状況を確認します。  現在のバージョンと比較し、プラットフォーム側で新しいファームウェアが提供されている場合 はアップデートを実行します。 ※給電が不足していると [ Update Failure ] と表示され、アップデートに失敗する場合があります。 ※その場合、電源アダプタを接続し、再度スケッチを書き込みます。 41 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合
  17. 試験用プログラムの流し込み  Githubの該当サンプルスケッチページで【 Raw 】をクリックし、キーボードで【 Ctrl + A 】 ですべてを選択して、【

    Ctrl +C 】でコピーします。 46 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/arduino-ibmcloud-part2.ino キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
  18. 試験用プログラムの流し込み  [ ファイル ]→[ 新規ファイル ]で新しいスケッチを表示し、以下URLの内容をスケッ チにコピー&ペーストします。 【 】をクリックし、[

    ツール ]→[ シリアルモニタ ]もしく は【 】クリックでシリアル値、Temp、Humi情報に加え、シリアル値と送信キュー情報が 取得できることを確認します。 ※問題があった場合、オレンジ色のエラーが表示されます。 47 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/arduino-ibmcloud-part2.ino
  19. デバイスから送信されたデータの確認  【 詳細表示モードに切り替え 】をクリックすると詳細表示モードに遷移します。  モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 50 チャンネルごとの最終到着データ: 各チャンネルに届いた最終の

    Valueを表示 クリックでログ出力を 開始/停止 タイプ: プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels :モジュールからのデータ ・connection :接続の開始/終了 ・location :簡易位置情報 ・keepalive :WebSocketセッション確認 ペイロード: 受け取ったデータのpayload部 が表示 時刻: 詳細表示モードではプラットフォーム で該当のメッセージを受け取ったタイ ムスタンプ
  20. この作業でやったこと 51 マイコン (Arduino Uno) 顔検出 (標準) Visual Recognition 画像

    アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage sakura.io モジュール 各種LED ハンズオン キット 連携 サービス モジュール プロジェクト WebSocket Arduinoマイコンで連番を生成し、 sakura.ioモジュールにI2Cを用いて データを送信 sakura.ioプラットフォーム側で WebSocketにリアルタイムで連携 できていることを確認
  21. 今回のハンズオンの流れ 53 マイコンおよび プログラムの構築 マイコン (Arduino Uno) sakura.io モジュール ②

    各種LED ① ハンズオン キット 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ③ 顔検出 (標準) Visual Recognition Webサービス連携 (IBM Cloud) Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage 画像 アップロード
  22. Node-RED&WatsonVR環境の構築 60  [ Node-RED IBM Cloud Starter Application ]画面に遷移します。

    ※遷移前にIBM Cloudの認証が求められる場合があります  画面下部の【 Delivery Pipeline 】をクリックします。
  23. Cloud Object Storage(COS)の設定 67  [ バケットの作成 ]ダイアログでは、以下の値を指定して【 作成 】をクリックします。

    ※作成したバケットの名前は後ほど使用します 名前 :※任意※ 回復力 :Cross Region ロケーション :us-geo ストレージクラス:Standard メモ情報あり
  24. Cloud Object Storage(COS)の設定 69  [ 新規資格情報の追加 ]ダイアログでは、以下の値を指定して【 作成 】を

    クリックします。 名前 :※任意※ 役割 :Writer サービスIDの選択:自動生成 インラインの構成パラメーターの追加: {"HMAC":true}
  25. Cloud Object Storage(COS)の設定 70  作成されたら【 資格情報の表示 】をクリックし、文字列の中から以下4つの値を控えます。 ※記載の文字列は後で使用します {

    "apikey": “*********_********_*************************", "cos_hmac_keys": { "access_key_id": “********************************", "secret_access_key": “************************************************" }, "endpoints": "https://cos-service.bluemix.net/endpoints", “iam_apikey_description”: “Auto generated apikey during resource-key operation for Instance – crn:v1:bluemix:public:cloud-object-storage:global:a/*********************************:********- ***-****-****-************::", "iam_apikey_name": "auto-generated-apikey-********-****-****-****-************", "iam_role_crn": "crn:v1:bluemix:public:iam::::serviceRole:Writer", “iam_serviceid_crn”: “crn:v1:bluemix:public:iam-identity::a/********************************: :serviceid:ServiceId-********-****-****-****-************", “resource_instance_id”: “crn:v1:bluemix:public:cloud-object-storage:global: a/********************************:********-****-****-****-************::" } メモ情報あり
  26. 顔検出 (標準) カスタム モデル この作業でやったこと 71 マイコン (Arduino Uno) sakura.io

    モジュール 各種LED ハンズオン キット 連携 サービス モジュール プロジェクト 画像 アップロード WebSocket Visual Recognition Node-RED DevOps Toolchain Cloud Object Storage IBM Cloudで以下を実施。 ・DevOps Toolchainにより、ハンズオンに必要なアプリとサービスをほぼ自動で構築 ・Cloud Object Storage(COS)のバケットを作成 ・COSにアクセスするための認証情報を生成
  27. Node-REDへのアクセス 75  【 Username 】および【 Password 】を設定し、【 Next 】をクリックします。

    ※PasswordはWeak以上の強度が必要です ※必要に応じて作成したフローの閲覧や権限を変更します
  28. Node-REDへのアクセス 79  しばらく設定適用中である旨のメッセージが流れた後、以下画面に遷移します。  【 Go to your Node-RED

    flow editor 】をクリックします。 ※左上部【 QR Code 】は本ハンズオン用にカスタマイズされたものです。クリックでこの後利用する イメージ投稿用URLが表示されますので、スマートフォンを利用する場合は読み込んでおいてください
  29. Node-RED 初期画面  今回展開した環境では、予め4つのフローが作成した状態で展開しています。 フロー1 : sakura.ioからのデータ確認用フロー(初期有効) 顔検出 : IBM

    Watson VRの標準の顔認識呼び出し用フロー(初期無効) カスタムモデル : 自身でトレーニングさせたカスタムモデル呼び出し用フロー(初期無効) QRコード表示用 : 前述のQRコード生成表示用フロー(初期有効) 83
  30. sakura.ioからのデータ確認  [ URL ]欄には、sakura.ioのコンパネからのWebSocketの[ URL ]欄の情報を ペーストします。  [

    TLS設定 ]は、デフォルトで選択されている【 新規にtls-configを追加... 】のまま、 [ 送信/受信 ]はデフォルトで定義されている【 ペイロードを送信/受信 】を選択し、 【 追加 】をクリックします。 86
  31. Cloud Object Storage 顔検出 (標準) Visual Recognition カスタム モデル この作業でやったこと

    93 画像 アップロード マイコン (Arduino Uno) sakura.io モジュール 各種LED ハンズオン キット 連携 サービス モジュール プロジェクト Node-RED DevOps Toolchain WebSocket Arduinoマイコンで連番を生成し、 sakura.ioモジュールにI2Cを用いて データを送信 sakura.ioプラットフォーム側で WebSocketにリアルタイムで連携 Node-REDのWebSocketノード でsakura.ioプラットフォームに接続 データを取得して表示
  32. ダブルクリック IBM Watson VRの顔認識呼び出し  次の作業に移る前に、先程の手順で設定した[ フロー1 ]を【 無効 】にします。

     以下の作業を実施し、[ フロー1 ]左部に【 】が表示されていることを確認します。 94 クリック 無効になっているのを 確認し【 完了 】をクリック マークが付いて いる事を確認
  33. IBM Watson VRの顔認識呼び出し  次に無効化されている[ 顔検出 ]を【 有効 】にします。 

    以下の作業を実施し、[ 顔検出 ]左部の【 】が消えていることを確認します。 95 クリック 有効になっているのを 確認し【 完了 】をクリック マークが消えて いる事を確認 ダブルクリック
  34. IBM Watson VRの顔認識呼び出し  [ 顔認証 ]フローに設定されている【 cos-put 】ノードをWクリックします。 

    不足している設定を行うため、【 新規にcos-configを追加... 】を選択した状態で、 Cloud Object Storage Configrationの行にある【 】をクリックします。 96
  35. IBM Watson VRの顔認識呼び出し  以下の項目を入力し、【 追加 】をクリックします。 97 Application Key

    ID :70p「apikey」 Access Key :70p「secret_access_key」 Service Instance ID :70p「ServiceID-...」 Location :US Cross Region Access Key ID :70p「access_key_id」 Name :※任意※
  36. カスタム モデル この作業でやったこと 101 マイコン (Arduino Uno) sakura.io モジュール 各種LED

    ハンズオン キット 連携 サービス モジュール プロジェクト WebSocket 顔検出 (標準) Visual Recognition 画像 アップロード Node-RED DevOps Toolchain Cloud Object Storage Node-Redにより以下を実施。 ・画像を受信、Cloud Object Storageに格納 ・画像をWatson VRの顔検出にかける ・判定結果をWebサイトに組み込んで応答 Node-RED上で稼働する 簡易的なWebサイトから、スマート フォン or PC経由で画像を送信
  37. IBM Watson VRのカスタムモデル構築  以下の項目を選択・入力後【 Create 】をクリックします。 Name : 任意の値

    Restrict who can be a collaborator : チェック Define Watson Visual Recognition : Visual Recognition-... 105
  38. IBM Watson VRのカスタムモデル構築  Watson Studioの【 Lite 】を選択のうえ【 Create 】をクリックします。

     Confirm Creation画面で選択内容を確認し、【 Confirm 】をクリックします。 107 ~~~~~~~~~中略~~~~~~~ ~~
  39. IBM Watson VRのカスタムモデル構築  ダウンロードしたZipファイルを画面右側の点線部[ 1. Upload to project ]に

    ドラッグアンドドロップし、Watson上にそれぞれのトレーニングデータをアップロードします。  アップロードが完了すると[ 2. Add from project ]にデータが表示されます。 115 bear.zip pigblack.zip
  40. IBM Watson VRのカスタムモデル構築  [ 2. Add from project ]に表示されているデータを、bearおよびpigblackクラス

    にドラッグアンドドロップすることでデータをアップロードします。 116
  41. IBM Watson VRのカスタムモデル構築  Node-REDの画面に戻り、有効化されている[ 顔検出 ]を【 無効 】にします。 

    同様の作業で[ カスタムモデル ]を【 有効 】にします。 121 クリック 無効になっているのを 確認し【 完了 】をクリック マークが付いて いる事を確認 ダブルクリック
  42. IBM Watson VRのカスタムモデル構築  [ カスタムモデル ]フローに設定されている【 cos-put 】ノードをWクリックします。 

    Cloud Object Storage Configrationは先程作成した設定情報をドロップリストで 選択し、Bucketには先程設定したバケット名と同じものを入力し【 完了 】をクリックします。 122
  43. カスタム モデル この作業でやったこと 127 マイコン (Arduino Uno) sakura.io モジュール 各種LED

    ハンズオン キット 連携 サービス モジュール プロジェクト WebSocket 顔検出 (標準) Visual Recognition 画像 アップロード Node-RED DevOps Toolchain Cloud Object Storage JSONデータに記載された モジュールIDに従い、対象 モジュールにリアルタイムで連携 Node-Redにより以下を実施。 ・画像を受信、Cloud Object Storageに格納 ・画像をVisual Recognition分類器で判定 ・判定結果に応じた制御用JSONデータを生成 ・sakura.ioのWebSocketURLに送信 書き込まれたスケッチに従い、 受信したデータに応じてLEDの 点灯を制御
  44. 参考 カスタム分類器で使う画像について 128 「良好なトレーニングに関するガイドライン」より抜粋  イメージは、少なくとも 224 x 224 ピクセルになるようにします。

     .png イメージの場合は、以下のようにして、ピクセル深度が少なくとも 24 ビット/ピクセルになるように設定します。  トレーニング結果を評価する前に、1 つのクラスにつき、少なくとも 50 個の正イメージを含めます。  結果の向上に役立てるために負クラスを含めます。  トレーニング・イメージの背景が、分類する予定のイメージの背景と同等になるようにします。 分類器の正確度は、その分類器をトレーニングするために提供されるイメージの種類による 影響を受ける能性があります。  分類器の対象物は、イメージの全体サイズの 1/3 以上になるようにします。 https://console.bluemix.net/docs/services/visual-recognition/customizing.html
  45. 最後に ~IBM Cloud~ 135  IBM Cloudのライト・アカウントを用いて作成したアプリケーションは一定期間利用がない 場合は自動で停止および削除されます。こちらでは明示的に停止する方法を記載します。  Cloud

    Foundry アプリのアクション欄で [ その他のアクション ] をクリックすると、アプリの起 動停止や削除に関するメニューが表示されます。  アプリを停止する場合は 【 アプリの停止 】 をクリックします。
  46. 最後に ~IBM Cloud~ 137  停止処理が正常に実施されると状態欄が [ 停止 ] に遷移します。

     以上で今回の範囲において課金されるアプリとサービスは全て停止されました。