IBM Cloud＆sakura.io 体験ハンズオン（Part2）/sakuraio handson ibmcloud part2

Slide 1

Slide 1 text

Slide 2

Slide 2 text

2 はじめに

Slide 3

Slide 3 text

ハンズオンを円滑に進めるために  本資料の内容はいくつかの外部サービスやサイトを併用しながら作業を行います。  そのため、本資料のPDFファイルをローカル環境にダウンロードし、適宜参照いただくことを推奨します。URLへの移動はダウンロードしたPDFファイルかリンク集を活用ください。 3 sakura.io紹介資料 http://bit.ly/sakuraio-intro-01 ハンズオン資料 http://bit.ly/sakuraio-ibmcloud-part2-01 リンク集 http://bit.ly/sakuraio01

Slide 4

Slide 4 text

ハンズオンを円滑に進めるために（PDFダウンロード） 4 ココ!!

Slide 5

Slide 5 text

本ハンズオンの目的とお願い  本ハンズオンは sakura.io を導入したデバイスを IBM Cloud と組み合わせることで、従来よりもさらに簡単にIoT (Internet of Things)を取り込んだサービスが実現できることをご体験いただくものです。  そのため、Web/アプリ系の方だけでなく、組み込み系の方や両方わからないという方にも、ご体験いただくことができます。  もしも近くのお困りの方をご自身の知識分野でフォローできそうであれば、積極的にサポートしあって進めていただければと思います。 5

Slide 6

Slide 6 text

本ハンズオンで使用するツール・機材・参考情報まとめ ■本編■ ・さくらインターネット会員登録 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

Slide 7

Slide 7 text

③ 今回のハンズオンの流れ 7 ① マイコンおよびプログラムの構築マイコン（Arduino Uno） sakura.io モジュール ② 各種LED ハンズオンキット顔検出（標準）連携サービスモジュール sakura.ioの設定プロジェクト Visual Recognition Webサービス連携（IBM Cloud）画像アップロード Node-RED DevOps Toolchain カスタムモデル WebSocket Cloud Object Storage

Slide 8

Slide 8 text

今回のワークショップでご提供するもの 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モジュール（アンテナ取付済み）

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 sakura.ioの設定

Slide 11

Slide 11 text

③ 今回のハンズオンの流れ 11 マイコンおよびプログラムの構築マイコン（Arduino Uno） sakura.io モジュール ② 各種LED 顔検出（標準） Visual Recognition Webサービス連携（IBM Cloud）画像アップロード Node-RED DevOps Toolchain カスタムモデル Cloud Object Storage ① ハンズオンキット連携サービスモジュール sakura.ioの設定プロジェクト WebSocket

Slide 12

Slide 12 text

sakura.io コントロールパネルの考え方 12 プロジェクトC プロジェクトB プロジェクトモジュール3 ☑ データストアプラン有償版/無償版 ☑ 簡易位置情報提供利用する/しない ☑ ファイル配信ファイル１、ファイル２... 連携サービス3 モジュール / 連携サービスプロジェクトに対して複数登録可能オプションサービスプロジェクトに対して1つ/1セット設定可能モジュール2 連携サービス2 モジュール1 uAAAAAAAAAA 連携サービス1 WebSocket  sakura.ioは【プロジェクト】という単位で管理します。  プロジェクトには【モジュール】【連携サービス】を複数紐付けることができます。  各種【オプションサービス】はプロジェクトに対して１つもしくは1セット設定できます。

Slide 13

Slide 13 text

sakura.io コントロールパネルログイン  sakura.ioコントロールパネルにログインします。上記URLに直接アクセスするか、サービスサイト（ https://sakura.io/ ）にアクセスし、右上の【ログイン】をクリックします。 13 https://secure.sakura.ad.jp/iot/

Slide 14

Slide 14 text

コントロールパネルへのログイン  ログイン済みのセッションがない場合、以下の画面で会員認証を求められます。  会員ID、パスワードを利用してログインします。 15

Slide 15

Slide 15 text

約款への同意  初めてコントロールパネルにログインすると、各種約款への同意を求められます。  内容をご確認のうえ、【同意する】をクリックするとコントロールパネルにアクセスできます。 16

Slide 16

Slide 16 text

コントロールパネルへのログイン  ログインが成功すると、以下のような画面に誘導されます。  何も作成されていない、もしくはデフォルトプロジェクトが作成されている状態になります。 17

Slide 17

Slide 17 text

プロジェクトの作成  初めはプロジェクトが無いため、新規にプロジェクトを作成する必要があります。  プロジェクトを作成するには、まず【プロジェクト追加】をクリックします。 18

Slide 18

Slide 18 text

プロジェクトの作成  新規プロジェクトの作成画面に遷移します。  ［名称］欄に任意の名前を入力し、【追加】をクリックします。 ※ハンズオンでは他の参加者と重複しないよう、名前等の判別可能な情報を入れて作成してください 19

Slide 19

Slide 19 text

モジュールの登録  プロジェクトが作成されました。次にモジュールの登録を行います。  プロジェクトの【詳細】から、プロジェクト詳細画面で【モジュール登録】をクリックします。  登録されているモジュールがない場合は案内文中のリンクからも登録画面に遷移できます。 20

Slide 20

Slide 20 text

組み上げ済みキットの取り出し  組み上げ済みキットを箱から取り出します 21 組み上げ済みキット

Slide 21

Slide 21 text

モジュール登録  モジュールの追加画面に遷移します。自身のプロジェクトが選択されていることを確認のうえ、モジュール記載の登録用ID、登録用パスワードおよび任意の名称を入力して、【追加】をクリックします。 ※モジュールの追加には数秒かかります。 22 モジュール上面白ラベル表記

Slide 22

Slide 22 text

モジュール登録  モジュール追加に成功すると［モジュールを追加しました］ダイアログが表示されるので、【ホームへ戻る】ボタンをクリックしてホームに戻ります。 ※ID/PASSが正しくない、もしくは登録済モジュールを追加しようとした場合は下記ダイアログが表示されます 23 登録が成功した場合登録が失敗した場合登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください別の会員IDで登録されています、過去登録した会員IDでログインし解除ください

Slide 23

Slide 23 text

連携サービスの設定  モジュールを登録しました。表示されているモジュールIDは一意のものであり、届いたデータの送信元判別や、デバイスへのデータ送信の際に使用します。 ※モジュールIDは後ほど使いますのでメモしてください。 24 メモ情報あり

Slide 24

Slide 24 text

連携サービスの設定  最後に外部への連携サービスを設定します。プロジェクトの【詳細】から、プロジェクト詳細画面で【連携サービス】をクリックし、その後【連携サービス追加】をクリックします。 25

Slide 25

Slide 25 text

連携サービスの設定（WebSocket）  追加サービスの選択画面に遷移します。  今回はWebSocketを作成しますので、【 WebSocket 】をクリックします。 26

Slide 26

Slide 26 text

連携サービスの設定（WebSocket）  WebSocketの作成には特に設定事項はありません。  ［名前］欄に任意の名前を入力し、【作成】をクリックします。 27

Slide 27

Slide 27 text

連携サービスの設定  連携サービスが登録されました。この後で使用するWebSocketのURLを確認します。  作成した連携サービスの【】をクリックします。 28

Slide 28

Slide 28 text

連携サービスの設定（WebSocket）  WebSocketを設定しました、これでコントロールパネルでの準備は完了です。 ※WebSocketのURLは後ほど使用しますのでメモしてください。 29 メモ情報あり

Slide 29

Slide 29 text

この作業でやったこと 30 マイコン（Arduino Uno） sakura.io モジュール各種LED 顔検出（標準） Visual Recognition 画像アップロード Node-RED DevOps Toolchain カスタムモデル Cloud Object Storage ハンズオンキット連携サービスモジュールプロジェクト WebSocket sakura.ioプラットフォームで以下を実施・プロジェクトを作成・sakura.ioモジュールを登録・連携サービス（WebSocket）を作成

Slide 30

Slide 30 text

31 マイコンおよびプログラム構築

Slide 31

Slide 31 text

① ハンズオンキット連携サービスモジュール sakura.ioの設定プロジェクト WebSocket ③ 今回のハンズオンの流れ 32 顔検出（標準） Visual Recognition Webサービス連携（IBM Cloud）画像アップロード Node-RED DevOps Toolchain カスタムモデル Cloud Object Storage マイコンおよびプログラムの構築 sakura.io モジュール ② 各種LED マイコン（Arduino Uno）

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Arduino IDEのセットアップ  金額を選択するか(寄付する場合）、【 JUST DOWNLOAD 】からダウンロードします。 34

Slide 34

Slide 34 text

Arduino IDEのセットアップ  インストールはデフォルト推奨、ドライバーについても全てインストールします。 ※本スライド記載の画像はWindowsの場合です。 35

Slide 35

Slide 35 text

Grove ベースシールドの取り付け  Grove ベースシールドを取り出し、ピン位置に注意しながら組み上げ済みキットに取り付けます。 36 組み上げ済みキット Grove ベースシールド＋

Slide 36

Slide 36 text

 Arduino IDEを起動し、起動が完了したらArduino UnoにACアダプタと USBケーブルを図のように接続します。 sakura.ioモジュールの取り付け 37 コンセントへパソコンへ（USB Type-A）

Slide 37

Slide 37 text

Arduino IDEのセットアップ  上部メニューバーからボードと、シリアルポートを設定します。ボード:［ツール］→［ボード:”XXX” ］から【 Arduino/Genuino Uno 】を選択シリアルポート:［ツール］→［シリアルポート］から【 COMx (Arduino/Genuino Uno) 】を選択 ※Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択ください ※うまく認識しない場合は、USBを挿し直し、Arduino IDEを再起動を試してください 38 ボードの選択シリアルポートの選択

Slide 38

Slide 38 text

マイコン（Arduino）の準備  ［ファイル］→［スケッチ例］→［ 01.Basics ］→ 【 Blink 】を選択し、Blinkスケッチを表示します。  【】をクリックしてスケッチを書き込み、該当のLEDが点滅状態になることを確認します。何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。 39

Slide 39

Slide 39 text

ライブラリの取得（SakuraIO）  ［スケッチ］→［ライブラリをインクルード］→ 【ライブラリを管理... 】をクリックし、右上検索窓から【 sakuraio 】を検索すると、［ SakuraIO by SAKURA Internet Inc. ］がヒットします。  最新のVer.を選択のうえ【インストール】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示されます。 40

Slide 40

Slide 40 text

FirmwareUpdate.ino  ［ファイル］→［スケッチ例］→［ SakuraIO ］→ 【 FirmwareUpdate 】を選択し、【】クリックでスケッチを書き込みます。［ツール］→ 【シリアルモニタ】もしくは【】クリックでアップデート状況を確認します。  現在のバージョンと比較し、プラットフォーム側で新しいファームウェアが提供されている場合はアップデートを実行します。 ※給電が不足していると［ Update Failure ］と表示され、アップデートに失敗する場合があります。 ※その場合、電源アダプタを接続し、再度スケッチを書き込みます。 41 新しいファームウェアが存在する場合最新のファームウェアが適用されている場合

Slide 41

Slide 41 text

sakura.ioモジュールの取り外し  マイコンとセンサー間を配線するため、キットから、ACアダプタとUSBケーブルを取り外します。 42

Slide 42

Slide 42 text

 LEDには極性があり、繋ぐべき方向が決まっています。一般的に足が長い方が陽極（アノード）と呼ばれ、デジタルの端子に接続します。逆に足の短い方は陰極（カソード）と呼ばれ、GND側の端子に接続します。  今回使用するLEDは抵抗を内蔵しているため、別途抵抗を挟む必要はありません。 LEDについて 43 陽極（アノード）デジタル端子に接続陰極（カソード） GND端子に接続

Slide 43

Slide 43 text

温度センサとLEDの繋ぎ込み  図に従い、Groveケーブルを使用して温度センサおよびLED Socket Kitを配線します。 44 D7：LED（赤） D6：LED（緑） D5：LED（青） SIG SIG SIG

Slide 44

Slide 44 text

sakura.ioモジュールの取り付け  配線が終わったら、ACアダプタとUSBケーブルを再度接続します。  Arduino IDEを起動し、ACアダプタとUSBケーブルを図のように接続します。 45 コンセントへパソコンへ（USB Type-A）

Slide 45

Slide 45 text

試験用プログラムの流し込み  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 】でコピーします

Slide 46

Slide 46 text

試験用プログラムの流し込み  ［ファイル］→［新規ファイル］で新しいスケッチを表示し、以下URLの内容をスケッチにコピー＆ペーストします。【】をクリックし、［ツール］→［シリアルモニタ］もしくは【】クリックでシリアル値、Temp、Humi情報に加え、シリアル値と送信キュー情報が取得できることを確認します。 ※問題があった場合、オレンジ色のエラーが表示されます。 47 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/arduino-ibmcloud-part2.ino

Slide 47

Slide 47 text

デバイスから送信されたデータの確認  sakura.ioでは連携サービスの一つであるWebSocketで、デバイスから送信されたデータを受信できているかを確認できます。  プロジェクトの詳細から作成したWebSocketの【】をクリックします。 48

Slide 48

Slide 48 text

デバイスから送信されたデータの確認  サービス連携の編集画面下部に、デバイスから送信したデータがリアルタイム表示されます。  簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 49 モジュール：データを送信したモジュールのID チャンネル：データが格納されたチャンネル番号時刻：データがモジュールのキューに格納された時刻のタイムスタンプ値：送信された値型：データの型式

Slide 49

Slide 49 text

デバイスから送信されたデータの確認  【詳細表示モードに切り替え】をクリックすると詳細表示モードに遷移します。  モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 50 チャンネルごとの最終到着データ：各チャンネルに届いた最終の Valueを表示クリックでログ出力を開始/停止タイプ：プラットフォームからの内容に応じて、いくつかの種類に分かれる・channels ：モジュールからのデータ・connection ：接続の開始/終了・location ：簡易位置情報・keepalive ：WebSocketセッション確認ペイロード：受け取ったデータのpayload部が表示時刻：詳細表示モードではプラットフォームで該当のメッセージを受け取ったタイムスタンプ

Slide 50

Slide 50 text

この作業でやったこと 51 マイコン（Arduino Uno）顔検出（標準） Visual Recognition 画像アップロード Node-RED DevOps Toolchain カスタムモデル Cloud Object Storage sakura.io モジュール各種LED ハンズオンキット連携サービスモジュールプロジェクト WebSocket Arduinoマイコンで連番を生成し、 sakura.ioモジュールにI2Cを用いてデータを送信 sakura.ioプラットフォーム側で WebSocketにリアルタイムで連携できていることを確認

Slide 51

Slide 51 text

52 Webサービス連携 (IBM Cloud)

Slide 52

Slide 52 text

今回のハンズオンの流れ 53 マイコンおよびプログラムの構築マイコン（Arduino Uno） sakura.io モジュール ② 各種LED ① ハンズオンキット連携サービスモジュール sakura.ioの設定プロジェクト WebSocket ③ 顔検出（標準） Visual Recognition Webサービス連携（IBM Cloud） Node-RED DevOps Toolchain カスタムモデル Cloud Object Storage 画像アップロード

Slide 53

Slide 53 text

Node-RED＆WatsonVR環境の構築 59  上記URLにアクセスし、中段の【】をクリックします。 https://github.com/phssakaigawa/nodered-watsonvr-handson

Slide 54

Slide 54 text

Node-RED＆WatsonVR環境の構築 60  ［ Node-RED IBM Cloud Starter Application ］画面に遷移します。 ※遷移前にIBM Cloudの認証が求められる場合があります  画面下部の【 Delivery Pipeline 】をクリックします。

Slide 55

Slide 55 text

Node-RED＆WatsonVR環境の構築 61  IBM Cloud API Keyを始めとするパラメータが設定されていないため、右部の【作成】をクリックします。  APIキーの作成確認ダイアログが表示されるので、【作成】をクリックします。

Slide 56

Slide 56 text

Node-RED＆WatsonVR環境の構築 62  作成が完了すると、リージョン、組織、スペースといったパラメータも自動で入力されます。 ※API Keyの作成およびパラメータ自動入力には数秒かかります  未入力の項目がなくなったことを確認し、【作成】をクリックします。

Slide 57

Slide 57 text

Node-RED＆WatsonVR環境の構築 63  Toolchainの実行画面が表示されます。完了まで15分程度かかります。  Delivery Pipelineをクリックすることで実行経過を確認することができます。 Build StageおよびDeploy Stageの2つの表示が［ステージは成功］に変われば準備は完了です。

Slide 58

Slide 58 text

Node-RED＆WatsonVR環境の構築 64  画面左上部の【 IBM Cloud 】をクリックすると［ダッシュボード］画面に遷移します。複数のアプリケーションやサービスが構築されていることを確認します。

Slide 59

Slide 59 text

Cloud Object Storage（COS）の設定 65  ダッシュボード画面で作成された【 Cloud Object Storage-... 】をクリックします。

Slide 60

Slide 60 text

Cloud Object Storage（COS）の設定 66  Cloud Object Storageの管理画面に遷移します。作成されたばかりで保存先となるバケットが作成されていないため、【バケットの作成】をクリックします。 ※COSの文字列末尾はランダムとなり、人によって異なります

Slide 61

Slide 61 text

Cloud Object Storage（COS）の設定 67  ［バケットの作成］ダイアログでは、以下の値を指定して【作成】をクリックします。 ※作成したバケットの名前は後ほど使用します名前：※任意※ 回復力：Cross Region ロケーション：us-geo ストレージクラス：Standard メモ情報あり

Slide 62

Slide 62 text

Cloud Object Storage（COS）の設定 68  バケットが作成されたことを確認したら、画面左部の【サービス資格情報】をクリックします。  ［サービス資格情報］画面に遷移しますので、【新規資格情報】をクリックします。

Slide 63

Slide 63 text

Cloud Object Storage（COS）の設定 69  ［新規資格情報の追加］ダイアログでは、以下の値を指定して【作成】をクリックします。名前：※任意※ 役割：Writer サービスIDの選択：自動生成インラインの構成パラメーターの追加： {"HMAC":true}

Slide 64

Slide 64 text

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/********************************:********-****-****-****-************::" } メモ情報あり

Slide 65

Slide 65 text

顔検出（標準）カスタムモデルこの作業でやったこと 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にアクセスするための認証情報を生成

Slide 66

Slide 66 text

Node-REDへのアクセス 72  ダッシュボードに戻り、作成された【 nodered-watsonvr-... 】をクリックします。

Slide 67

Slide 67 text

Node-REDへのアクセス 73  アプリケーションの管理画面に遷移します。アプリ名横の【アプリURLにアクセス】をクリックします。

Slide 68

Slide 68 text

Node-REDへのアクセス 74  Node-REDの初期設定を行います。右下の【 Next 】をクリックします。 ※この設定は初めに一回だけ実行されます

Slide 69

Slide 69 text

Node-REDへのアクセス 75  【 Username 】および【 Password 】を設定し、【 Next 】をクリックします。 ※PasswordはWeak以上の強度が必要です ※必要に応じて作成したフローの閲覧や権限を変更します

Slide 70

Slide 70 text

Node-REDへのアクセス 76  アプリケーションの使用状況を確認する機能を有効にするか確認されますが、今回は使用しないため、チェックボックスはそのままで【 Next 】をクリックします。

Slide 71

Slide 71 text

Node-REDへのアクセス 77  標準で含まれるノードの紹介が表示されますが、そのまま【 Next 】をクリックします。

Slide 72

Slide 72 text

Node-REDへのアクセス 78  すべての設定が完了したことを確認し、【 Finish 】をクリックします。

Slide 73

Slide 73 text

Node-REDへのアクセス 79  しばらく設定適用中である旨のメッセージが流れた後、以下画面に遷移します。  【 Go to your Node-RED flow editor 】をクリックします。 ※左上部【 QR Code 】は本ハンズオン用にカスタマイズされたものです。クリックでこの後利用するイメージ投稿用URLが表示されますので、スマートフォンを利用する場合は読み込んでおいてください

Slide 74

Slide 74 text

Node-REDへのアクセス 80  Node-REDの認証画面が表示されます。設定したUsernameとPasswordを入力し、「ログイン」をクリックします。

Slide 75

Slide 75 text

Node-REDへのアクセス  ログインが成功すると以下の画面が表示されます。 81

Slide 76

Slide 76 text

Node-RED 初期画面  Node-REDは「ノード」と呼ばれる機能の固まりをシート上で組み合わせ、ひとつの「フロー」にすることで、ほとんどプログラミングを知らない人でもプログラムを構築できるツールです。 82 ノードパレットシート Info/Debug コンソールデプロイ

Slide 77

Slide 77 text

Node-RED 初期画面  今回展開した環境では、予め4つのフローが作成した状態で展開しています。フロー1 ： sakura.ioからのデータ確認用フロー（初期有効）顔検出： IBM Watson VRの標準の顔認識呼び出し用フロー（初期無効）カスタムモデル：自身でトレーニングさせたカスタムモデル呼び出し用フロー（初期無効） QRコード表示用：前述のQRコード生成表示用フロー（初期有効） 83

Slide 78

Slide 78 text

sakura.ioからのデータ確認  まずはWebSocketからのデータを受け取るノードを追加します。  ノードパレットの入力から［ websocket ］ノードをシートにドラッグ&ドロップします。 84

Slide 79

Slide 79 text

sakura.ioからのデータ確認  ドラッグ&ドロップされたwebsocket inノードをダブルクリックし、設定画面に移ります。  種類は【接続】、名前は【 sakuraio-websocket 】（任意の名前）を入力のうえ、 URLは【新規にwebsocket-clientを追加... 】を選択した状態で、URLの行にある【】をクリックします。 85 sakuraio-websocket

Slide 80

Slide 80 text

sakura.ioからのデータ確認  ［ URL ］欄には、sakura.ioのコンパネからのWebSocketの［ URL ］欄の情報をペーストします。  ［ TLS設定］は、デフォルトで選択されている【新規にtls-configを追加... 】のまま、［送信/受信］はデフォルトで定義されている【ペイロードを送信/受信】を選択し、【追加】をクリックします。 86

Slide 81

Slide 81 text

sakura.ioからのデータ確認  指定する［ URL ］の値は、コンパネの連携サービスで確認できる赤枠部分です。  赤枠部分の情報をコピーして、websocket inノードのURL部分にペーストします。  URLの末尾と、Tokenは同一の文字列となりますので、Token情報は不要です。 87 ************************************** **************************************

Slide 82

Slide 82 text

sakura.ioからのデータ確認  【完了】をクリックするとwebsocket inノードへ設定が反映され、不備がない場合は右隅の三角マークが消えます。これでwebsocket inノードへの設定が反映されましたが、この時点ではsakura.ioからデータは入ってきていません。続いてはデータを表示するためのDebug ノードを作成します。 88 *************

Slide 83

Slide 83 text

sakura.ioからのデータ確認  次に、ノードパレットの出力から［ debug ］ノードをシートにドラッグ&ドロップします。  Debugノードは自動で［ msg.payload ］に名前が変わります。特に設定は不要です。 89

Slide 84

Slide 84 text

sakura.ioからのデータ確認  ノードの動作を繋げるために、websocket inノード右端とDebugノード左端をドラッグ&ドロップで繋ぎます。 90

Slide 85

Slide 85 text

sakura.ioからのデータ確認  各ノードを接続し、準備が完了したら、右上部の【デプロイ】をクリックします。  デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始されます。併せて、debugノードからの情報を確認するため、コンソールの【デバッグ】タブをクリックします。 91

Slide 86

Slide 86 text

sakura.ioからのデータ確認  フローに問題がない場合、websocket inノード下部に［ connected ］と表示され、コンソールのdebug内にプラットフォームから取得したJSONデータを確認できます。  debugノード右端の緑マークをクリックするとコンソールへの出力が停止されます。 92

Slide 87

Slide 87 text

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プラットフォームに接続データを取得して表示

Slide 88

Slide 88 text

ダブルクリック IBM Watson VRの顔認識呼び出し  次の作業に移る前に、先程の手順で設定した［フロー1 ］を【無効】にします。  以下の作業を実施し、［フロー1 ］左部に【】が表示されていることを確認します。 94 クリック無効になっているのを確認し【完了】をクリックマークが付いている事を確認

Slide 89

Slide 89 text

IBM Watson VRの顔認識呼び出し  次に無効化されている［顔検出］を【有効】にします。  以下の作業を実施し、［顔検出］左部の【】が消えていることを確認します。 95 クリック有効になっているのを確認し【完了】をクリックマークが消えている事を確認ダブルクリック

Slide 90

Slide 90 text

IBM Watson VRの顔認識呼び出し  ［顔認証］フローに設定されている【 cos-put 】ノードをWクリックします。  不足している設定を行うため、【新規にcos-configを追加... 】を選択した状態で、 Cloud Object Storage Configrationの行にある【】をクリックします。 96

Slide 91

Slide 91 text

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 ：※任意※

Slide 92

Slide 92 text

IBM Watson VRの顔認識呼び出し  ［ Bucket ］に先程作成したバケット名を入力し、【完了】をクリックします。 98

Slide 93

Slide 93 text

IBM Watson VRの顔認識呼び出し  cos-putノードの設定が終わったら画面右上の【デプロイ】をクリックします。  別フローの同名ノードの設定がなされていない旨の警告が表示されますが、構わず【デプロイの確認】をクリックします。 99

Slide 94

Slide 94 text

動作確認 100 http://＜アプリの経路＞/imgpost  QRコードを読み取るか、PCから上記URLにアクセスし任意の顔写真をアップロードします。  IBM Watson側で学習済みの情報に基づき判定された結果を確認します。

Slide 95

Slide 95 text

カスタムモデルこの作業でやったこと 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経由で画像を送信

Slide 96

Slide 96 text

IBM Watson VRのカスタムモデル構築 102  IBM Cloudのダッシュボード画面で作成された【 Visual Recognition-... 】をクリックします。

Slide 97

Slide 97 text

IBM Watson VRのカスタムモデル構築  Visual Recognitionの管理画面に遷移します。【ツールの起動】をクリックします。 103

Slide 98

Slide 98 text

IBM Watson VRのカスタムモデル構築  Watsonの管理画面に遷移します。Custom内の【 Create Model 】をクリックします。 104

Slide 99

Slide 99 text

IBM Watson VRのカスタムモデル構築  以下の項目を選択・入力後【 Create 】をクリックします。 Name ：任意の値 Restrict who can be a collaborator ：チェック Define Watson Visual Recognition ： Visual Recognition-... 105

Slide 100

Slide 100 text

IBM Watson VRのカスタムモデル構築  もし［ Define Watson Visual Recognition ］が表示されず、サービスの追加を求められた場合、以下画面から【 Watson Studio 】を選択します。 106

Slide 101

Slide 101 text

IBM Watson VRのカスタムモデル構築  Watson Studioの【 Lite 】を選択のうえ【 Create 】をクリックします。  Confirm Creation画面で選択内容を確認し、【 Confirm 】をクリックします。 107 ～～～～～～～～～中略～～～～～～～～～

Slide 102

Slide 102 text

IBM Watson VRのカスタムモデル構築  その後【 refresh 】をクリックすると［ Define Watson Visual Recognition］の表示を確認することができます。 108

Slide 103

Slide 103 text

IBM Watson VRのカスタムモデル構築  カスタムモデルの雛形が作成されました。 109

Slide 104

Slide 104 text

IBM Watson VRのカスタムモデル構築  今回判定を行うクラスを作成します。【 Create a class 】をクリックします。 110

Slide 105

Slide 105 text

IBM Watson VRのカスタムモデル構築  今回は2つの分類を行いますので、【 bear 】と【 pigblack 】クラスを作成します。 111

Slide 106

Slide 106 text

IBM Watson VRのカスタムモデル構築  正例となる2つのクラスが作成されました。  Negativeは負例と呼ばれる正例以外の学習データを入れる場合に使います。 112

Slide 107

Slide 107 text

IBM Watson VRのカスタムモデル構築  上記URLから正例として扱うbearクラスのトレーニングデータをダウンロードします。  URLにアクセスし、【 Download 】をクリックすると画像データが入ったzipファイルがダウンロードされます。 113 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/bear/bear.zip

Slide 108

Slide 108 text

IBM Watson VRのカスタムモデル構築  上記URLから正例として扱うpigblackクラスのトレーニングデータをダウンロードします。  URLにアクセスし、【 Download 】をクリックすると画像データが入ったzipファイルがダウンロードされます。 114 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/pigblack/pigblack.zip

Slide 109

Slide 109 text

IBM Watson VRのカスタムモデル構築  ダウンロードしたZipファイルを画面右側の点線部［ 1. Upload to project ］にドラッグアンドドロップし、Watson上にそれぞれのトレーニングデータをアップロードします。  アップロードが完了すると［ 2. Add from project ］にデータが表示されます。 115 bear.zip pigblack.zip

Slide 110

Slide 110 text

IBM Watson VRのカスタムモデル構築  ［ 2. Add from project ］に表示されているデータを、bearおよびpigblackクラスにドラッグアンドドロップすることでデータをアップロードします。 116

Slide 111

Slide 111 text

IBM Watson VRのカスタムモデル構築  画像認識の精度は負例を指定することで向上します。  上記URLから任意のトレーニングデータを入手し、Negativeにアップロードします。 117 https://github.com/sakuraio/handson-sample/blob/reform/ibmcloud/part2/training/

Slide 112

Slide 112 text

IBM Watson VRのカスタムモデル構築  画像のアップロードが終わったら【 Train Model 】をクリックします。 ※学習完了までおおよそ10～15分程度かかります 118

Slide 113

Slide 113 text

IBM Watson VRのカスタムモデル構築  トレーニングが成功した旨のメッセージが表示されたら、メッセージ内のリンクをクリックすることでモデルのID確認やテストを行う画面に遷移します。 119

Slide 114

Slide 114 text

IBM Watson VRのカスタムモデル構築  Model IDの右部にある【】をクリックすることで、作成したカスタムモデルのIDをコピーすることができます。 ※コピーした文字列は後で使用します 120 メモ情報あり

Slide 115

Slide 115 text

IBM Watson VRのカスタムモデル構築  Node-REDの画面に戻り、有効化されている［顔検出］を【無効】にします。  同様の作業で［カスタムモデル］を【有効】にします。 121 クリック無効になっているのを確認し【完了】をクリックマークが付いている事を確認ダブルクリック

Slide 116

Slide 116 text

IBM Watson VRのカスタムモデル構築  ［カスタムモデル］フローに設定されている【 cos-put 】ノードをWクリックします。  Cloud Object Storage Configrationは先程作成した設定情報をドロップリストで選択し、Bucketには先程設定したバケット名と同じものを入力し【完了】をクリックします。 122

Slide 117

Slide 117 text

IBM Watson VRのカスタムモデル構築  次に【 call_WatsonVR（Custom）】ノードをWクリックします。  msg.params.classifier_idsを先程コピーしたカスタムモデルIDに変更し【完了】をクリックします。 123

Slide 118

Slide 118 text

IBM Watson VRのカスタムモデル構築  次に【 sakuraio_out 】ノードをWクリックします。  URL欄は先ほど設定したものを使用できるため、ドロップリストから選択し、【完了】をクリックします。 124

Slide 119

Slide 119 text

IBM Watson VRのカスタムモデル構築  次に【 moduleID_set 】ノードをWクリックします。  context.global.moduleをsakura.ioモジュール登録時に控えたモジュールIDに変更し【完了】をクリックします。 125

Slide 120

Slide 120 text

動作確認 126 http://＜アプリの経路＞/imgpost  これで準備が完了しました。デプロイ後、上記URLから、分類対象の写真をアップロードし、学習させたモデルに基づいた判定結果により、デバイスが制御されることを確認します。

Slide 121

Slide 121 text

カスタムモデルこの作業でやったこと 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の点灯を制御

Slide 122

Slide 122 text

参考カスタム分類器で使う画像について 128 「良好なトレーニングに関するガイドライン」より抜粋  イメージは、少なくとも 224 x 224 ピクセルになるようにします。  .png イメージの場合は、以下のようにして、ピクセル深度が少なくとも 24 ビット/ピクセルになるように設定します。  トレーニング結果を評価する前に、1 つのクラスにつき、少なくとも 50 個の正イメージを含めます。  結果の向上に役立てるために負クラスを含めます。  トレーニング・イメージの背景が、分類する予定のイメージの背景と同等になるようにします。分類器の正確度は、その分類器をトレーニングするために提供されるイメージの種類による影響を受ける能性があります。  分類器の対象物は、イメージの全体サイズの 1/3 以上になるようにします。 https://console.bluemix.net/docs/services/visual-recognition/customizing.html

Slide 123

Slide 123 text

129 最後に

Slide 124

Slide 124 text

最後に～sakura.io～  ハンズオンに使用したsakura.ioモジュールは必要に応じて登録を解除します。  プロジェクトの【詳細】から、プロジェクト詳細画面で対象のモジュールの【】をクリックします。 130

Slide 125

Slide 125 text

最後に～sakura.io～  モジュールの設定画面に遷移します。下部の【登録解除】ボタンをクリックします。 131

Slide 126

Slide 126 text

最後に～sakura.io～  登録解除実行を確認されます。問題ない場合は再度【登録解除】をクリックします。モジュールの削除には数秒かかります。  削除が完了すると、プロジェクトから該当モジュールの表示が消えていることを確認できます。 132

Slide 127

Slide 127 text

最後に～sakura.io～  次は連携サービスとともにプロジェクトを削除します。  プロジェクトの【詳細】から、プロジェクト詳細画面で【削除】をクリックします。 133

Slide 128

Slide 128 text

最後に～sakura.io～  削除実行を確認されます。問題ない場合は再度【削除】をクリックします。  削除が完了すると、コントロールパネル上から該当プロジェクトの表示が消えていることを確認できます。 134

Slide 129

Slide 129 text

最後に～IBM Cloud～ 135  IBM Cloudのライト・アカウントを用いて作成したアプリケーションは一定期間利用がない場合は自動で停止および削除されます。こちらでは明示的に停止する方法を記載します。  Cloud Foundry アプリのアクション欄で [ その他のアクション ] をクリックすると、アプリの起動停止や削除に関するメニューが表示されます。  アプリを停止する場合は【アプリの停止】をクリックします。

Slide 130

Slide 130 text

最後に～IBM Cloud～ 136  アプリの停止に関する確認がされますので、【停止】をクリックします。

Slide 131

Slide 131 text

最後に～IBM Cloud～ 137  停止処理が正常に実施されると状態欄が [ 停止 ] に遷移します。  以上で今回の範囲において課金されるアプリとサービスは全て停止されました。

Slide 132

Slide 132 text

最後に～IBM Cloud～ 138  不要になったアプリは削除することもできます。 [ その他のアクションボタン ] をクリックし、【アプリの削除】をクリックします。

Slide 133

Slide 133 text

最後に～IBM Cloud～ 139  アプリケーションの削除に関する確認がされますので、今回は併せて削除するため【 <命名したアプリ名>-cloudantNoSQLDB 】のチェックボックスにチェックを入れます。  次に、経路情報も併せて削除するため、【経路】タブをクリックします

Slide 134

Slide 134 text

最後に～IBM Cloud～ 140  【 <命名したアプリ名>.mybluemix.net 】にチェックを入れ、【削除】をクリックします。

Slide 135

Slide 135 text

最後に～IBM Cloud～ 141  削除が正常に完了すると、プラットフォームに何もない状態に戻ります。  以上でアプリおよびサービスの削除は完了です。

Slide 136

Slide 136 text

最後に 142 以上でハンズオンにおける作業は全て終了となります。お疲れ様でした！

Slide 137

Slide 137 text

最後に 143 さくらインターネットでは、「さくらクラブ」としてハンズオン等のイベントをともに開催いただける仲間（部員）を募集しています。（テーマはIoTに限らずクラウドやVPS、スタートアップ系ネタもOK！）ご興味があれば、Come and join us & Feel free to contact me! 連絡先： sakura-club@sakura.ad.jp さくらクラブ： http://www.slideshare.net/MasayaHayashi/lt20151224

Slide 138

Slide 138 text

144 そこに、さくら