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/

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. 2 はじめに
3. ハンズオンを円滑に進めるために  本資料の内容はいくつかの外部サービスやサイトを併用しながら作業を行います。  そのため、本資料のPDFファイルをローカル環境にダウンロードし、適宜参照いただくことを 推奨します。URLへの移動はダウンロードしたPDFファイルかリンク集を活用ください。 3 sakura.io紹介資料 http://bit.ly/sakuraio-intro-01 ハンズオン資料 http://bit.ly/sakuraio-ibmcloud-part2-01 リンク集 http://bit.ly/sakuraio01
4. ハンズオンを円滑に進めるために（PDFダウンロード） 4 ココ!!
5. 本ハンズオンの目的とお願い  本ハンズオンは sakura.io を導入したデバイスを IBM Cloud と組み合わせ ることで、従来よりもさらに簡単にIoT (Internet of Things)を取り込んだ サービスが実現できることをご体験いただくものです。  そのため、Web/アプリ系の方だけでなく、組み込み系の方や両方わからないと いう方にも、ご体験いただくことができます。  もしも近くのお困りの方をご自身の知識分野でフォローできそうであれば、積極 的にサポートしあって進めていただければと思います。 5
6. 本ハンズオンで使用するツール・機材・参考情報まとめ ▪本編▪ ・さくらインターネット会員登録 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
7. ③ 今回のハンズオンの流れ 7 ① マイコンおよび プログラムの構築 マイコン （Arduino Uno） sakura.io モジュール ② 各種LED ハンズオン キット 顔検出 （標準） 連携 サービス モジュール sakura.ioの設定 プロジェクト Visual Recognition Webサービス連携 （IBM Cloud） 画像 アップロード Node-RED DevOps Toolchain カスタム モデル WebSocket Cloud Object Storage
8. 今回のワークショップでご提供するもの 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モジュール （アンテナ取付済み）
9. アジェンダ 1. sakura.ioの設定 ₋ プロジェクトの作成 ₋ sakura.ioモジュールの登録 ₋ 連携サービスの設定 2. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 温湿度センサおよびsakura.ioモジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ デバイスから送信されたデータの確認 3. Webサービス連携（IBM Cloud） ₋ DevOps ToolchainによるNode-REDアプリケーションの作成 ₋ Visual Recognitionによる標準分類器（顔検出）のテスト ₋ Visual Recognitionによるカスタム分類器を使った判定とデバイスの制御 9
10. 10 sakura.ioの設定
11. ③ 今回のハンズオンの流れ 11 マイコンおよび プログラムの構築 マイコン （Arduino Uno） sakura.io モジュール ② 各種LED 顔検出 （標準） Visual Recognition Webサービス連携 （IBM Cloud） 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage ① ハンズオン キット 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket
12. sakura.io コントロールパネルの考え方 12 プロジェクトC プロジェクトB プロジェクト モジュール3 ☑ データストアプラン 有償版/無償版 ☑ 簡易位置情報提供 利用する/しない ☑ ファイル配信 ファイル１、ファイル２... 連携サービス3 モジュール / 連携サービス プロジェクトに対して複数登録可能 オプションサービス プロジェクトに対して1つ/1セット設定可能 モジュール2 連携サービス2 モジュール1 uAAAAAAAAAA 連携サービス1 WebSocket  sakura.ioは【 プロジェクト 】という単位で管理します。  プロジェクトには【 モジュール 】【 連携サービス 】を複数紐付けることができます。  各種【 オプションサービス 】はプロジェクトに対して１つもしくは1セット設定できます。
13. sakura.io コントロールパネル ログイン  sakura.ioコントロールパネルにログインします。上記URLに直接アクセスするか、サービス サイト（ https://sakura.io/ ）にアクセスし、右上の【 ログイン 】をクリックします。 13 https://secure.sakura.ad.jp/iot/
14. コントロールパネルへのログイン  ログイン済みのセッションがない場合、以下の画面で会員認証を求められます。  会員ID、パスワードを利用してログインします。 15
15. 約款への同意  初めてコントロールパネルにログインすると、各種約款への同意を求められます。  内容をご確認のうえ、 【 同意する 】をクリックするとコントロールパネルにアクセスできます。 16
16. コントロールパネルへのログイン  ログインが成功すると、以下のような画面に誘導されます。  何も作成されていない、もしくはデフォルトプロジェクトが作成されている状態になります。 17
17. プロジェクトの作成  初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。  プロジェクトを作成するには、まず【 プロジェクト追加 】をクリックします。 18
18. プロジェクトの作成  新規プロジェクトの作成画面に遷移します。  ［ 名称 ］欄に任意の名前を入力し、【 追加 】をクリックします。 ※ハンズオンでは他の参加者と重複しないよう、名前等の判別可能な情報を入れて作成してください 19
19. モジュールの登録  プロジェクトが作成されました。次にモジュールの登録を行います。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 モジュール登録 】をクリックします。  登録されているモジュールがない場合は案内文中のリンクからも登録画面に遷移できます。 20
20. 組み上げ済みキットの取り出し  組み上げ済みキットを箱から取り出します 21 組み上げ済みキット
21. モジュール登録  モジュールの追加画面に遷移します。自身のプロジェクトが選択されていることを確認のうえ、 モジュール記載の登録用ID、登録用パスワードおよび任意の名称を入力して、【 追加 】 をクリックします。 ※モジュールの追加には数秒かかります。 22 モジュール上面 白ラベル表記
22. モジュール登録  モジュール追加に成功すると［ モジュールを追加しました ］ダイアログが表示されるので、 【 ホームへ戻る 】ボタンをクリックしてホームに戻ります。 ※ID/PASSが正しくない、もしくは登録済モジュールを追加しようとした場合は下記ダイアログが表示されます 23 登録が成功した場合 登録が失敗した場合 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDで登録されています、過去登録した会員IDでログインし解除ください
23. 連携サービスの設定  モジュールを登録しました。表示されているモジュールIDは一意のものであり、届いたデータ の送信元判別や、デバイスへのデータ送信の際に使用します。 ※モジュールIDは後ほど使いますのでメモしてください。 24 メモ情報あり
24. 連携サービスの設定  最後に外部への連携サービスを設定します。プロジェクトの【 詳細 】から、プロジェクト詳細 画面で【 連携サービス 】をクリックし、その後【 連携サービス追加 】をクリックします。 25
25. 連携サービスの設定（WebSocket）  追加サービスの選択画面に遷移します。  今回はWebSocketを作成しますので、【 WebSocket 】をクリックします。 26
26. 連携サービスの設定（WebSocket）  WebSocketの作成には特に設定事項はありません。  ［ 名前 ］欄に任意の名前を入力し、【 作成 】をクリックします。 27
27. 連携サービスの設定  連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。  作成した連携サービスの【 】をクリックします。 28
28. 連携サービスの設定（WebSocket）  WebSocketを設定しました、これでコントロールパネルでの準備は完了です。 ※WebSocketのURLは後ほど使用しますのでメモしてください。 29 メモ情報あり
29. この作業でやったこと 30 マイコン （Arduino Uno） sakura.io モジュール 各種LED 顔検出 （標準） Visual Recognition 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage ハンズオン キット 連携 サービス モジュール プロジェクト WebSocket sakura.ioプラットフォームで以下を実施 ・プロジェクトを作成 ・sakura.ioモジュールを登録 ・連携サービス（WebSocket）を作成
30. 31 マイコンおよびプログラム構築
31. ① ハンズオン キット 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ③ 今回のハンズオンの流れ 32 顔検出 （標準） Visual Recognition Webサービス連携 （IBM Cloud） 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage マイコンおよび プログラムの構築 sakura.io モジュール ② 各種LED マイコン （Arduino Uno）
32. 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
33. Arduino IDEのセットアップ  金額を選択するか(寄付する場合）、【 JUST DOWNLOAD 】からダウンロードします。 34
34. Arduino IDEのセットアップ  インストールはデフォルト推奨、ドライバーについても全てインストールします。 ※本スライド記載の画像はWindowsの場合です。 35
35. Grove ベースシールドの取り付け  Grove ベースシールドを取り出し、ピン位置に注意しながら組み上げ済みキットに 取り付けます。 36 組み上げ済みキット Grove ベースシールド ＋
36.  Arduino IDEを起動し、起動が完了したらArduino UnoにACアダプタと USBケーブルを図のように接続します。 sakura.ioモジュールの取り付け 37 コンセントへ パソコンへ （USB Type-A）
37. Arduino IDEのセットアップ  上部メニューバーからボードと、シリアルポートを設定します。 ボード:［ ツール ］→［ ボード:”XXX” ］から【 Arduino/Genuino Uno 】を選択 シリアルポート:［ ツール ］→［ シリアルポート ］から【 COMx (Arduino/Genuino Uno) 】を選択 ※Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択ください ※うまく認識しない場合は、USBを挿し直し、Arduino IDEを再起動を試してください 38 ボードの選択 シリアルポートの選択
38. マイコン（Arduino）の準備  ［ ファイル ］→［ スケッチ例 ］→［ 01.Basics ］→ 【 Blink 】を選択し、Blinkス ケッチを表示します。  【 】をクリックしてスケッチを書き込み、該当のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 39
39. ライブラリの取得（SakuraIO）  ［ スケッチ ］→［ ライブラリをインクルード ］→ 【 ライブラリを管理... 】をクリックし、 右上検索窓から【 sakuraio 】を検索すると、［ SakuraIO by SAKURA Internet Inc. ］がヒットします。  最新のVer.を選択のうえ【 インストール 】をクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］が表示されます。 40
40. FirmwareUpdate.ino  ［ ファイル ］→［ スケッチ例 ］→［ SakuraIO ］→ 【 FirmwareUpdate 】を 選択し、【 】クリックでスケッチを書き込みます。［ ツール ］→ 【 シリアルモニタ 】 もしくは【 】クリックでアップデート状況を確認します。  現在のバージョンと比較し、プラットフォーム側で新しいファームウェアが提供されている場合 はアップデートを実行します。 ※給電が不足していると ［ Update Failure ］ と表示され、アップデートに失敗する場合があります。 ※その場合、電源アダプタを接続し、再度スケッチを書き込みます。 41 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合
41. sakura.ioモジュールの取り外し  マイコンとセンサー間を配線するため、キットから、ACアダプタとUSBケーブルを取り外します。 42
42.  LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が陽極（ア ノード）と呼ばれ、デジタルの端子に接続します。逆に足の短い方は陰極（カソード）と 呼ばれ、GND側の端子に接続します。  今回使用するLEDは抵抗を内蔵しているため、別途抵抗を挟む必要はありません。 LEDについて 43 陽極（アノード） デジタル端子に接続 陰極（カソード） GND端子に接続
43. 温度センサとLEDの繋ぎ込み  図に従い、Groveケーブルを使用して温度センサおよびLED Socket Kitを配線します。 44 D7：LED（赤） D6：LED（緑） D5：LED（青） SIG SIG SIG
44. sakura.ioモジュールの取り付け  配線が終わったら、ACアダプタとUSBケーブルを再度接続します。  Arduino IDEを起動し、ACアダプタとUSBケーブルを図のように接続します。 45 コンセントへ パソコンへ （USB Type-A）
45. 試験用プログラムの流し込み  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 】でコピーします
46. 試験用プログラムの流し込み  ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、以下URLの内容をスケッ チにコピー＆ペーストします。 【 】をクリックし、［ ツール ］→［ シリアルモニタ ］もしく は【 】クリックでシリアル値、Temp、Humi情報に加え、シリアル値と送信キュー情報が 取得できることを確認します。 ※問題があった場合、オレンジ色のエラーが表示されます。 47 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/arduino-ibmcloud-part2.ino
47. デバイスから送信されたデータの確認  sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信された データを受信できているかを確認できます。  プロジェクトの詳細から作成したWebSocketの【 】をクリックします。 48
48. デバイスから送信されたデータの確認  サービス連携の編集画面下部に、デバイスから送信したデータがリアルタイム表示されます。  簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 49 モジュール： データを送信した モジュールのID チャンネル： データが格納された チャンネル番号 時刻： データがモジュールのキューに 格納された時刻のタイムスタンプ 値： 送信された値 型： データの型式
49. デバイスから送信されたデータの確認  【 詳細表示モードに切り替え 】をクリックすると詳細表示モードに遷移します。  モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 50 チャンネルごとの最終到着データ： 各チャンネルに届いた最終の Valueを表示 クリックでログ出力を 開始/停止 タイプ： プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels ：モジュールからのデータ ・connection ：接続の開始/終了 ・location ：簡易位置情報 ・keepalive ：WebSocketセッション確認 ペイロード： 受け取ったデータのpayload部 が表示 時刻： 詳細表示モードではプラットフォーム で該当のメッセージを受け取ったタイ ムスタンプ
50. この作業でやったこと 51 マイコン （Arduino Uno） 顔検出 （標準） Visual Recognition 画像 アップロード Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage sakura.io モジュール 各種LED ハンズオン キット 連携 サービス モジュール プロジェクト WebSocket Arduinoマイコンで連番を生成し、 sakura.ioモジュールにI2Cを用いて データを送信 sakura.ioプラットフォーム側で WebSocketにリアルタイムで連携 できていることを確認
51. 52 Webサービス連携 (IBM Cloud)
52. 今回のハンズオンの流れ 53 マイコンおよび プログラムの構築 マイコン （Arduino Uno） sakura.io モジュール ② 各種LED ① ハンズオン キット 連携 サービス モジュール sakura.ioの設定 プロジェクト WebSocket ③ 顔検出 （標準） Visual Recognition Webサービス連携 （IBM Cloud） Node-RED DevOps Toolchain カスタム モデル Cloud Object Storage 画像 アップロード
53. Node-RED＆WatsonVR環境の構築 59  上記URLにアクセスし、中段の【 】をクリックします。 https://github.com/phssakaigawa/nodered-watsonvr-handson
54. Node-RED＆WatsonVR環境の構築 60  ［ Node-RED IBM Cloud Starter Application ］画面に遷移します。 ※遷移前にIBM Cloudの認証が求められる場合があります  画面下部の【 Delivery Pipeline 】をクリックします。
55. Node-RED＆WatsonVR環境の構築 61  IBM Cloud API Keyを始めとするパラメータが設定されていないため、 右部の【 作成 】をクリックします。  APIキーの作成確認ダイアログが表示されるので、【 作成 】をクリックします。
56. Node-RED＆WatsonVR環境の構築 62  作成が完了すると、リージョン、組織、スペースといったパラメータも自動で入力されます。 ※API Keyの作成およびパラメータ自動入力には数秒かかります  未入力の項目がなくなったことを確認し、【 作成 】をクリックします。
57. Node-RED＆WatsonVR環境の構築 63  Toolchainの実行画面が表示されます。完了まで15分程度かかります。  Delivery Pipelineをクリックすることで実行経過を確認することができます。 Build StageおよびDeploy Stageの2つの表示が［ ステージは成功 ］に変われば 準備は完了です。
58. Node-RED＆WatsonVR環境の構築 64  画面左上部の【 IBM Cloud 】をクリックすると［ ダッシュボード ］画面に遷移します。 複数のアプリケーションやサービスが構築されていることを確認します。
59. Cloud Object Storage（COS）の設定 65  ダッシュボード画面で作成された【 Cloud Object Storage-... 】をクリックします。
60. Cloud Object Storage（COS）の設定 66  Cloud Object Storageの管理画面に遷移します。作成されたばかりで保存先となる バケットが作成されていないため、【 バケットの作成 】をクリックします。 ※COSの文字列末尾はランダムとなり、人によって異なります
61. Cloud Object Storage（COS）の設定 67  ［ バケットの作成 ］ダイアログでは、以下の値を指定して【 作成 】をクリックします。 ※作成したバケットの名前は後ほど使用します 名前 ：※任意※ 回復力 ：Cross Region ロケーション ：us-geo ストレージクラス：Standard メモ情報あり
62. Cloud Object Storage（COS）の設定 68  バケットが作成されたことを確認したら、画面左部の【 サービス資格情報 】をクリックします。  ［ サービス資格情報 ］画面に遷移しますので、【 新規資格情報 】をクリックします。
63. Cloud Object Storage（COS）の設定 69  ［ 新規資格情報の追加 ］ダイアログでは、以下の値を指定して【 作成 】を クリックします。 名前 ：※任意※ 役割 ：Writer サービスIDの選択：自動生成 インラインの構成パラメーターの追加： {"HMAC":true}
64. 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/********************************:********-****-****-****-************::" } メモ情報あり
65. 顔検出 （標準） カスタム モデル この作業でやったこと 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にアクセスするための認証情報を生成
66. Node-REDへのアクセス 72  ダッシュボードに戻り、作成された【 nodered-watsonvr-... 】をクリックします。
67. Node-REDへのアクセス 73  アプリケーションの管理画面に遷移します。アプリ名横の【 アプリURLにアクセス 】 をクリックします。
68. Node-REDへのアクセス 74  Node-REDの初期設定を行います。右下の【 Next 】をクリックします。 ※この設定は初めに一回だけ実行されます
69. Node-REDへのアクセス 75  【 Username 】および【 Password 】を設定し、【 Next 】をクリックします。 ※PasswordはWeak以上の強度が必要です ※必要に応じて作成したフローの閲覧や権限を変更します
70. Node-REDへのアクセス 76  アプリケーションの使用状況を確認する機能を有効にするか確認されますが、 今回は使用しないため、チェックボックスはそのままで【 Next 】をクリックします。
71. Node-REDへのアクセス 77  標準で含まれるノードの紹介が表示されますが、そのまま【 Next 】をクリックします。
72. Node-REDへのアクセス 78  すべての設定が完了したことを確認し、【 Finish 】をクリックします。
73. Node-REDへのアクセス 79  しばらく設定適用中である旨のメッセージが流れた後、以下画面に遷移します。  【 Go to your Node-RED flow editor 】をクリックします。 ※左上部【 QR Code 】は本ハンズオン用にカスタマイズされたものです。クリックでこの後利用する イメージ投稿用URLが表示されますので、スマートフォンを利用する場合は読み込んでおいてください
74. Node-REDへのアクセス 80  Node-REDの認証画面が表示されます。 設定したUsernameとPasswordを入力し、「ログイン」をクリックします。
75. Node-REDへのアクセス  ログインが成功すると以下の画面が表示されます。 81
76. Node-RED 初期画面  Node-REDは「ノード」と呼ばれる機能の固まりをシート上で組み合わせ、ひとつの「フロー」 にすることで、ほとんどプログラミングを知らない人でもプログラムを構築できるツールです。 82 ノード パレット シート Info/Debug コンソール デプロイ
77. Node-RED 初期画面  今回展開した環境では、予め4つのフローが作成した状態で展開しています。 フロー1 ： sakura.ioからのデータ確認用フロー（初期有効） 顔検出 ： IBM Watson VRの標準の顔認識呼び出し用フロー（初期無効） カスタムモデル ： 自身でトレーニングさせたカスタムモデル呼び出し用フロー（初期無効） QRコード表示用 ： 前述のQRコード生成表示用フロー（初期有効） 83
78. sakura.ioからのデータ確認  まずはWebSocketからのデータを受け取るノードを追加します。  ノードパレットの入力から［ websocket ］ノードをシートにドラッグ&ドロップします。 84
79. sakura.ioからのデータ確認  ドラッグ&ドロップされたwebsocket inノードをダブルクリックし、設定画面に移ります。  種類は【 接続 】、名前は【 sakuraio-websocket 】（任意の名前）を入力のうえ、 URLは【 新規にwebsocket-clientを追加... 】を選択した状態で、URLの行にある 【 】をクリックします。 85 sakuraio-websocket
80. sakura.ioからのデータ確認  ［ URL ］欄には、sakura.ioのコンパネからのWebSocketの［ URL ］欄の情報を ペーストします。  ［ TLS設定 ］は、デフォルトで選択されている【 新規にtls-configを追加... 】のまま、 ［ 送信/受信 ］はデフォルトで定義されている【 ペイロードを送信/受信 】を選択し、 【 追加 】をクリックします。 86
81. sakura.ioからのデータ確認  指定する［ URL ］の値は、コンパネの連携サービスで確認できる赤枠部分です。  赤枠部分の情報をコピーして、websocket inノードのURL部分にペーストします。  URLの末尾と、Tokenは同一の文字列となりますので、Token情報は不要です。 87 ************************************** **************************************
82. sakura.ioからのデータ確認  【 完了 】 をクリックするとwebsocket inノードへ設定が反映され、不備がない場合は右隅 の三角マークが消えます。これでwebsocket inノードへの設定が反映されましたが、この時 点ではsakura.ioからデータは入ってきていません。続いてはデータを表示するためのDebug ノードを作成します。 88 *************
83. sakura.ioからのデータ確認  次に、ノードパレットの出力から［ debug ］ノードをシートにドラッグ&ドロップします。  Debugノードは自動で［ msg.payload ］に名前が変わります。特に設定は不要です。 89
84. sakura.ioからのデータ確認  ノードの動作を繋げるために、websocket inノード右端とDebugノード左端をドラッグ&ド ロップで繋ぎます。 90
85. sakura.ioからのデータ確認  各ノードを接続し、準備が完了したら、右上部の 【 デプロイ 】 をクリックします。  デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始さ れます。併せて、debugノードからの情報を確認するため、コンソールの 【 デバッグ 】 タブ をクリックします。 91
86. sakura.ioからのデータ確認  フローに問題がない場合、websocket inノード下部に［ connected ］と表示され、 コンソールのdebug内にプラットフォームから取得したJSONデータを確認できます。  debugノード右端の緑マークをクリックするとコンソールへの出力が停止されます。 92
87. 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プラットフォームに接続 データを取得して表示
88. ダブルクリック IBM Watson VRの顔認識呼び出し  次の作業に移る前に、先程の手順で設定した［ フロー1 ］を【 無効 】にします。  以下の作業を実施し、［ フロー1 ］左部に【 】が表示されていることを確認します。 94 クリック 無効になっているのを 確認し【 完了 】をクリック マークが付いて いる事を確認
89. IBM Watson VRの顔認識呼び出し  次に無効化されている［ 顔検出 ］を【 有効 】にします。  以下の作業を実施し、［ 顔検出 ］左部の【 】が消えていることを確認します。 95 クリック 有効になっているのを 確認し【 完了 】をクリック マークが消えて いる事を確認 ダブルクリック
90. IBM Watson VRの顔認識呼び出し  ［ 顔認証 ］フローに設定されている【 cos-put 】ノードをWクリックします。  不足している設定を行うため、【 新規にcos-configを追加... 】を選択した状態で、 Cloud Object Storage Configrationの行にある【 】をクリックします。 96
91. 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 ：※任意※
92. IBM Watson VRの顔認識呼び出し  ［ Bucket ］に先程作成したバケット名を入力し、【 完了 】をクリックします。 98
93. IBM Watson VRの顔認識呼び出し  cos-putノードの設定が終わったら画面右上の【 デプロイ 】をクリックします。  別フローの同名ノードの設定がなされていない旨の警告が表示されますが、 構わず【 デプロイの確認 】をクリックします。 99
94. 動作確認 100 http://＜アプリの経路＞/imgpost  QRコードを読み取るか、PCから上記URLにアクセスし任意の顔写真をアップロードします。  IBM Watson側で学習済みの情報に基づき判定された結果を確認します。
95. カスタム モデル この作業でやったこと 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経由で画像を送信
96. IBM Watson VRのカスタムモデル構築 102  IBM Cloudのダッシュボード画面で作成された【 Visual Recognition-... 】を クリックします。
97. IBM Watson VRのカスタムモデル構築  Visual Recognitionの管理画面に遷移します。【 ツールの起動 】をクリックします。 103
98. IBM Watson VRのカスタムモデル構築  Watsonの管理画面に遷移します。Custom内の【 Create Model 】をクリックします。 104
99. IBM Watson VRのカスタムモデル構築  以下の項目を選択・入力後【 Create 】をクリックします。 Name ： 任意の値 Restrict who can be a collaborator ： チェック Define Watson Visual Recognition ： Visual Recognition-... 105
100. IBM Watson VRのカスタムモデル構築  もし［ Define Watson Visual Recognition ］が表示されず、サービスの追加を 求められた場合、以下画面から【 Watson Studio 】を選択します。 106
101. IBM Watson VRのカスタムモデル構築  Watson Studioの【 Lite 】を選択のうえ【 Create 】をクリックします。  Confirm Creation画面で選択内容を確認し、【 Confirm 】をクリックします。 107 ～～～～～～～～～中略～～～～～～～ ～～
102. IBM Watson VRのカスタムモデル構築  その後【 refresh 】をクリックすると［ Define Watson Visual Recognition］の 表示を確認することができます。 108
103. IBM Watson VRのカスタムモデル構築  カスタムモデルの雛形が作成されました。 109
104. IBM Watson VRのカスタムモデル構築  今回判定を行うクラスを作成します。【 Create a class 】をクリックします。 110
105. IBM Watson VRのカスタムモデル構築  今回は2つの分類を行いますので、【 bear 】と【 pigblack 】クラスを作成します。 111
106. IBM Watson VRのカスタムモデル構築  正例となる2つのクラスが作成されました。  Negativeは負例と呼ばれる正例以外の学習データを入れる場合に使います。 112
107. IBM Watson VRのカスタムモデル構築  上記URLから正例として扱うbearクラスのトレーニングデータをダウンロードします。  URLにアクセスし、【 Download 】をクリックすると画像データが入ったzipファイルが ダウンロードされます。 113 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/bear/bear.zip
108. IBM Watson VRのカスタムモデル構築  上記URLから正例として扱うpigblackクラスのトレーニングデータをダウンロードします。  URLにアクセスし、【 Download 】をクリックすると画像データが入ったzipファイルが ダウンロードされます。 114 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/pigblack/pigblack.zip
109. IBM Watson VRのカスタムモデル構築  ダウンロードしたZipファイルを画面右側の点線部［ 1. Upload to project ］に ドラッグアンドドロップし、Watson上にそれぞれのトレーニングデータをアップロードします。  アップロードが完了すると［ 2. Add from project ］にデータが表示されます。 115 bear.zip pigblack.zip
110. IBM Watson VRのカスタムモデル構築  ［ 2. Add from project ］に表示されているデータを、bearおよびpigblackクラス にドラッグアンドドロップすることでデータをアップロードします。 116
111. IBM Watson VRのカスタムモデル構築  画像認識の精度は負例を指定することで向上します。  上記URLから任意のトレーニングデータを入手し、Negativeにアップロードします。 117 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/
112. IBM Watson VRのカスタムモデル構築  画像のアップロードが終わったら【 Train Model 】をクリックします。 ※学習完了までおおよそ10～15分程度かかります 118
113. IBM Watson VRのカスタムモデル構築  トレーニングが成功した旨のメッセージが表示されたら、メッセージ内のリンクを クリックすることでモデルのID確認やテストを行う画面に遷移します。 119
114. IBM Watson VRのカスタムモデル構築  Model IDの右部にある【 】をクリックすることで、作成したカスタムモデルのIDを コピーすることができます。 ※コピーした文字列は後で使用します 120 メモ情報あり
115. IBM Watson VRのカスタムモデル構築  Node-REDの画面に戻り、有効化されている［ 顔検出 ］を【 無効 】にします。  同様の作業で［ カスタムモデル ］を【 有効 】にします。 121 クリック 無効になっているのを 確認し【 完了 】をクリック マークが付いて いる事を確認 ダブルクリック
116. IBM Watson VRのカスタムモデル構築  ［ カスタムモデル ］フローに設定されている【 cos-put 】ノードをWクリックします。  Cloud Object Storage Configrationは先程作成した設定情報をドロップリストで 選択し、Bucketには先程設定したバケット名と同じものを入力し【 完了 】をクリックします。 122
117. IBM Watson VRのカスタムモデル構築  次に【 call_WatsonVR（Custom） 】ノードをWクリックします。  msg.params.classifier_idsを先程コピーしたカスタムモデルIDに変更し 【 完了 】をクリックします。 123
118. IBM Watson VRのカスタムモデル構築  次に【 sakuraio_out 】ノードをWクリックします。  URL欄は先ほど設定したものを使用できるため、ドロップリストから選択し、 【 完了 】をクリックします。 124
119. IBM Watson VRのカスタムモデル構築  次に【 moduleID_set 】ノードをWクリックします。  context.global.moduleをsakura.ioモジュール登録時に控えた モジュールIDに変更し【 完了 】をクリックします。 125
120. 動作確認 126 http://＜アプリの経路＞/imgpost  これで準備が完了しました。デプロイ後、上記URLから、分類対象の写真をアップロードし、 学習させたモデルに基づいた判定結果により、デバイスが制御されることを確認します。
121. カスタム モデル この作業でやったこと 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の 点灯を制御
122. 参考 カスタム分類器で使う画像について 128 「良好なトレーニングに関するガイドライン」より抜粋  イメージは、少なくとも 224 x 224 ピクセルになるようにします。  .png イメージの場合は、以下のようにして、ピクセル深度が少なくとも 24 ビット/ピクセルになるように設定します。  トレーニング結果を評価する前に、1 つのクラスにつき、少なくとも 50 個の正イメージを含めます。  結果の向上に役立てるために負クラスを含めます。  トレーニング・イメージの背景が、分類する予定のイメージの背景と同等になるようにします。 分類器の正確度は、その分類器をトレーニングするために提供されるイメージの種類による 影響を受ける能性があります。  分類器の対象物は、イメージの全体サイズの 1/3 以上になるようにします。 https://console.bluemix.net/docs/services/visual-recognition/customizing.html
123. 129 最後に
124. 最後に ～sakura.io～  ハンズオンに使用したsakura.ioモジュールは必要に応じて登録を解除します。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で対象のモジュールの【 】を クリックします。 130
125. 最後に ～sakura.io～  モジュールの設定画面に遷移します。下部の 【 登録解除 】 ボタンをクリックします。 131
126. 最後に ～sakura.io～  登録解除実行を確認されます。問題ない場合は再度 【 登録解除 】 をクリックします。 モジュールの削除には数秒かかります。  削除が完了すると、プロジェクトから該当モジュールの表示が消えていることを確認できます。 132
127. 最後に ～sakura.io～  次は連携サービスとともにプロジェクトを削除します。  プロジェクトの【 詳細 】から、プロジェクト詳細画面で【 削除 】をクリックします。 133
128. 最後に ～sakura.io～  削除実行を確認されます。問題ない場合は再度 【 削除 】 をクリックします。  削除が完了すると、コントロールパネル上から該当プロジェクトの表示が消えていることを確 認できます。 134
129. 最後に ～IBM Cloud～ 135  IBM Cloudのライト・アカウントを用いて作成したアプリケーションは一定期間利用がない 場合は自動で停止および削除されます。こちらでは明示的に停止する方法を記載します。  Cloud Foundry アプリのアクション欄で [ その他のアクション ] をクリックすると、アプリの起 動停止や削除に関するメニューが表示されます。  アプリを停止する場合は 【 アプリの停止 】 をクリックします。
130. 最後に ～IBM Cloud～ 136  アプリの停止に関する確認がされますので、 【 停止 】 をクリックします。
131. 最後に ～IBM Cloud～ 137  停止処理が正常に実施されると状態欄が [ 停止 ] に遷移します。  以上で今回の範囲において課金されるアプリとサービスは全て停止されました。
132. 最後に ～IBM Cloud～ 138  不要になったアプリは削除することもできます。 [ その他のアクションボタン ] をクリックし、 【 アプリの削除 】 をクリックします。
133. 最後に ～IBM Cloud～ 139  アプリケーションの削除に関する確認がされますので、今回は併せて削除するため 【 <命名したアプリ名>-cloudantNoSQLDB 】のチェックボックスにチェックを入れます。  次に、経路情報も併せて削除するため、 【 経路 】 タブをクリックします
134. 最後に ～IBM Cloud～ 140  【 <命名したアプリ名>.mybluemix.net 】 にチェックを入れ、 【 削除 】 をクリックします。
135. 最後に ～IBM Cloud～ 141  削除が正常に完了すると、プラットフォームに何もない状態に戻ります。  以上でアプリおよびサービスの削除は完了です。
136. 最後に 142 以上でハンズオンにおける作業は全て終了となります。 お疲れ様でした！
137. 最後に 143 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間（部員）を募集しています。 （テーマはIoTに限らずクラウドやVPS、スタートアップ系ネタもOK！） ご興味があれば、Come and join us & Feel free to contact me! 連絡先 ： sakura-club@sakura.ad.jp さくらクラブ ： http://www.slideshare.net/MasayaHayashi/lt20151224
138. 144 そこに、さくら