Slide 1

Slide 1 text

© 2016 IBM Corporation 1 IBM Bluemix www.bluemix.net Visual Recognition × Node-RED × Xamarin で顔認識アプリのモバイル化 Taiji HAGINO IBM BlueHub Developer Advocate

Slide 2

Slide 2 text

© 2016 IBM Corporation 2 IBM Bluemix www.bluemix.net 1. Profile

Slide 3

Slide 3 text

© 2016 IBM Corporation 3 IBM Bluemix www.bluemix.net Taiji HAGINO Developer Advocate IBM Japan BlueHub taiponrock • スタートアップ⽀援 • 技術サポート • イベント・コミュニティ • パートナー連携

Slide 4

Slide 4 text

© 2016 IBM Corporation 4 IBM Bluemix www.bluemix.net IBM BlueHubのご紹介

Slide 5

Slide 5 text

IBM BlueHubは、 テクノロジー活⽤とオープン・イノベーション による新事業の創造を⽀援しています。 • イノベーションを実現するテクノロジーの提供 • 事業⽴上げに向けたスタートアップの育成 • ⼤⼿企業とスタートアップとの協業促進

Slide 6

Slide 6 text

6 BlueHub推進の⽬的 IBMテクノロジーの 活⽤事例の拡⼤ 企業間の コラボレーション 機会の創出 新事業創造 のための エコシステム形成

Slide 7

Slide 7 text

7 IBM BlueHub パートナーラインナップ Investment Partners Media Partners Evangelist Partners Operation Partners

Slide 8

Slide 8 text

テクノロジーを活⽤した スタートアップの事業育成 (Incubation Program) ー 8 IBM BlueHubの活動 オープン・イノベーション による新事業の創出 (Open Innovation Program) ⼤⼿企業 ⼤⼿企業 スタート アップ スタート アップ スタート アップ オープン イノベーション テクノロジー提供 ⼤⼿企業 [テーマ] •Automotive •Healthcare •Inbound Travel … スタート アップ スタート アップ スタート アップ テクノロジー提供 ー BlueHub パートナー [テクノロジー] •Analytics •IoT •Blockchain •Mobile •Security •Watson, etc. メンタリング 1 2

Slide 9

Slide 9 text

9 テクノロジーのご紹介 – Cognitive Computing n t - x ao W p x sl p x E R E O E d x a E e OS s f Ts r n

Slide 10

Slide 10 text

10 テクノロジーのご紹介 - IBM Bluemix 様々なアプ リケーショ ンを構築・管理・実⾏ するための、クラウド ベースのオープン・ス タンダ ード なPaaS環境

Slide 11

Slide 11 text

© 2016 IBM Corporation 11 IBM Bluemix www.bluemix.net 1. Overview

Slide 12

Slide 12 text

© 2016 IBM Corporation 12 IBM Bluemix www.bluemix.net 1.Webアプリケーションを作成する 2.そのアプリ上で、ある⼈物の画像を指定する 3.その画像を解析する 4.解析結果をWebアプリケーションの画⾯に表⽰する •年齢 •性別 •有名⼈かどうか 5. 1〜4で作ったWebアプリをモバイルアプリにする 本⽇やること

Slide 13

Slide 13 text

© 2016 IBM Corporation 13 IBM Bluemix www.bluemix.net Node-RED アプリ実⾏環境 Cloudant データベース Watson Visual Recognition 画像解析

Slide 14

Slide 14 text

© 2016 IBM Corporation 14 IBM Bluemix www.bluemix.net 2. Watson Visual Recognition API

Slide 15

Slide 15 text

© 2016 IBM Corporation 15 IBM Bluemix www.bluemix.net IBM Bluemix上で Watson Visual Recognition APIを サービスとして作成しましょう!

Slide 16

Slide 16 text

© 2016 IBM Corporation 16 IBM Bluemix www.bluemix.net サービスの作成 (or カタログ) ↓ Visualで検索 ↓ Visual Recognitionを選択

Slide 17

Slide 17 text

© 2016 IBM Corporation 17 IBM Bluemix www.bluemix.net 価格プランを選択し、作成をクリック

Slide 18

Slide 18 text

© 2016 IBM Corporation 18 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます

Slide 19

Slide 19 text

© 2016 IBM Corporation 19 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます (参考) 最近、VR Toolが使いやすくなりました

Slide 20

Slide 20 text

© 2016 IBM Corporation 20 IBM Bluemix www.bluemix.net 例えばこんな感じで使えます

Slide 21

Slide 21 text

© 2016 IBM Corporation 21 IBM Bluemix www.bluemix.net サービス資格情報を表⽰します 前のページのToolもこれからの⾃作アプリも api key が必要なので控えておいてください

Slide 22

Slide 22 text

© 2016 IBM Corporation 22 IBM Bluemix www.bluemix.net 3. Web Application with Node-RED

Slide 23

Slide 23 text

© 2016 IBM Corporation 23 IBM Bluemix www.bluemix.net IBM Bluemix上で Node-REDを使いましょう!

Slide 24

Slide 24 text

© 2016 IBM Corporation 24 IBM Bluemix www.bluemix.net カタログを選択

Slide 25

Slide 25 text

© 2016 IBM Corporation 25 IBM Bluemix www.bluemix.net Node-RED Starterを選択

Slide 26

Slide 26 text

© 2016 IBM Corporation 26 IBM Bluemix www.bluemix.net アプリを作成

Slide 27

Slide 27 text

© 2016 IBM Corporation 27 IBM Bluemix www.bluemix.net ⾃動でステージング

Slide 28

Slide 28 text

© 2016 IBM Corporation 28 IBM Bluemix www.bluemix.net エディタへのログイン情報を設定します

Slide 29

Slide 29 text

© 2016 IBM Corporation 29 IBM Bluemix www.bluemix.net Node-RED flow editor を開く

Slide 30

Slide 30 text

© 2016 IBM Corporation 30 IBM Bluemix www.bluemix.net 仕上がりはこんな感じです ⼊⼒httpノード 分岐ノード テンプレートノード 1つ⽬ テンプレートノード 2つ⽬ 変換ノード Visual Recognitionノード デバッグノード httpレスポンスノード

Slide 31

Slide 31 text

© 2016 IBM Corporation 31 IBM Bluemix www.bluemix.net ⼊⼒httpノード

Slide 32

Slide 32 text

© 2016 IBM Corporation 32 IBM Bluemix www.bluemix.net 分岐ノード

Slide 33

Slide 33 text

© 2016 IBM Corporation 33 IBM Bluemix www.bluemix.net テンプレートノード(1つ⽬) https://github.com/taijihagino/faceapp_nodered/blob/master/htmlpage_node.html

Slide 34

Slide 34 text

© 2016 IBM Corporation 34 IBM Bluemix www.bluemix.net 変換ノード

Slide 35

Slide 35 text

© 2016 IBM Corporation 35 IBM Bluemix www.bluemix.net Visual Recognitionノード ここで、先ほど控えておいた api key を⼊⼒してください

Slide 36

Slide 36 text

© 2016 IBM Corporation 36 IBM Bluemix www.bluemix.net テンプレートノード(2つ⽬) https://github.com/taijihagino/faceapp_nodered/blob/master/reporthtml_node.html

Slide 37

Slide 37 text

© 2016 IBM Corporation 37 IBM Bluemix www.bluemix.net httpレスポンスノード

Slide 38

Slide 38 text

© 2016 IBM Corporation 38 IBM Bluemix www.bluemix.net フローのDefinitionは、 JSON形式でこちらから取得できます https://github.com/taijihagino/faceapp_nodered

Slide 39

Slide 39 text

© 2016 IBM Corporation 39 IBM Bluemix www.bluemix.net 4. Check Web Application!!

Slide 40

Slide 40 text

© 2016 IBM Corporation 40 IBM Bluemix www.bluemix.net Node-REDで作成したWebアプリのURLは、 https:///<入力httpノードで指定した文字列> 例) https://taipon-noderedapp01.mybluemix.net/face

Slide 41

Slide 41 text

© 2016 IBM Corporation 41 IBM Bluemix www.bluemix.net こんな感じです

Slide 42

Slide 42 text

© 2016 IBM Corporation 42 IBM Bluemix www.bluemix.net こんな感じです

Slide 43

Slide 43 text

© 2016 IBM Corporation 43 IBM Bluemix www.bluemix.net 5. Mobile Application with Xamarin

Slide 44

Slide 44 text

© 2016 IBM Corporation 44 IBM Bluemix www.bluemix.net Xamarinのインストール ↓ Xamarinを起動

Slide 45

Slide 45 text

© 2016 IBM Corporation 45 IBM Bluemix www.bluemix.net ファイル ⇢ 新しいソリューション

Slide 46

Slide 46 text

© 2016 IBM Corporation 46 IBM Bluemix www.bluemix.net Multiplatform ⇢ アプリ ⇢ Blank Forms App

Slide 47

Slide 47 text

© 2016 IBM Corporation 47 IBM Bluemix www.bluemix.net App Name : 任意のアプリケーション名 Organization Identifier : モバイルアプリの名前空間 ターゲットプラットフォーム : 任意のものへチェック Shared Code :任意(今回はPortable Class Library) Use XAML : 任意(今回は使⽤)

Slide 48

Slide 48 text

© 2016 IBM Corporation 48 IBM Bluemix www.bluemix.net プロジェクト名 : 任意のプロジェクト名 ソリューション名 : 任意のソリューション名 場所 : 任意のファイルパス(プロジェクトの保管) バージョンコントロール :任意(今回は未使⽤) Xamarin Test Cloud : 任意(今回は未使⽤)

Slide 49

Slide 49 text

© 2016 IBM Corporation 49 IBM Bluemix www.bluemix.net

Slide 50

Slide 50 text

© 2016 IBM Corporation 50 IBM Bluemix www.bluemix.net using Xamarin.Forms; namespace FaceDetectionApp { public partial class FaceDetectionAppPage : Content Page { public FaceDetectionAppPage() { InitializeComponent(); } } }

Slide 51

Slide 51 text

© 2016 IBM Corporation 51 IBM Bluemix www.bluemix.net 4. Use Application!!

Slide 52

Slide 52 text

© 2016 IBM Corporation 52 IBM Bluemix www.bluemix.net

Slide 53

Slide 53 text

© 2016 IBM Corporation 53 IBM Bluemix www.bluemix.net

Slide 54

Slide 54 text

© 2016 IBM Corporation 54 IBM Bluemix www.bluemix.net おつかれさまでした!

Slide 55

Slide 55 text

For more information IBM BlueHub official website www.ibm.com/ibm/jp/bluehub/ IBM BlueHub official Facebook www.facebook.com/IBMBlueHub