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

Watson Visual Recognition と Node-RED で 顔認識アプリを簡単に作成してXamarinでモバイル化!

Watson Visual Recognition と Node-RED で 顔認識アプリを簡単に作成してXamarinでモバイル化!

こちらは2017/06/24に行われた北海道Watsonユーザー会での登壇資料です

57c9c4b846c73c911cbf795d211904f3?s=128

Taiji HAGINO

June 24, 2017
Tweet

Transcript

  1. © 2016 IBM Corporation 1 IBM Bluemix www.bluemix.net Visual Recognition

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

  3. © 2016 IBM Corporation 3 IBM Bluemix www.bluemix.net Taiji HAGINO

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

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

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

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

    Operation Partners
  8. テクノロジーを活⽤した スタートアップの事業育成 (Incubation Program) ー 8 IBM BlueHubの活動 オープン・イノベーション による新事業の創出

    (Open Innovation Program) ⼤⼿企業 ⼤⼿企業 スタート アップ スタート アップ スタート アップ オープン イノベーション テクノロジー提供 ⼤⼿企業 [テーマ] •Automotive •Healthcare •Inbound Travel … スタート アップ スタート アップ スタート アップ テクノロジー提供 ー BlueHub パートナー [テクノロジー] •Analytics •IoT •Blockchain •Mobile •Security •Watson, etc. メンタリング 1 2
  9. 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
  10. 10 テクノロジーのご紹介 - IBM Bluemix 様々なアプ リケーショ ンを構築・管理・実⾏ するための、クラウド ベースのオープン・ス

    タンダ ード なPaaS環境
  11. © 2016 IBM Corporation 11 IBM Bluemix www.bluemix.net 1. Overview

  12. © 2016 IBM Corporation 12 IBM Bluemix www.bluemix.net 1.Webアプリケーションを作成する 2.そのアプリ上で、ある⼈物の画像を指定する

    3.その画像を解析する 4.解析結果をWebアプリケーションの画⾯に表⽰する •年齢 •性別 •有名⼈かどうか 5. 1〜4で作ったWebアプリをモバイルアプリにする 本⽇やること
  13. © 2016 IBM Corporation 13 IBM Bluemix www.bluemix.net Node-RED アプリ実⾏環境

    Cloudant データベース Watson Visual Recognition 画像解析
  14. © 2016 IBM Corporation 14 IBM Bluemix www.bluemix.net 2. Watson

    Visual Recognition API
  15. © 2016 IBM Corporation 15 IBM Bluemix www.bluemix.net IBM Bluemix上で

    Watson Visual Recognition APIを サービスとして作成しましょう!
  16. © 2016 IBM Corporation 16 IBM Bluemix www.bluemix.net サービスの作成 (or

    カタログ) ↓ Visualで検索 ↓ Visual Recognitionを選択
  17. © 2016 IBM Corporation 17 IBM Bluemix www.bluemix.net 価格プランを選択し、作成をクリック

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

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

    最近、VR Toolが使いやすくなりました
  20. © 2016 IBM Corporation 20 IBM Bluemix www.bluemix.net 例えばこんな感じで使えます

  21. © 2016 IBM Corporation 21 IBM Bluemix www.bluemix.net サービス資格情報を表⽰します 前のページのToolもこれからの⾃作アプリも

    api key が必要なので控えておいてください
  22. © 2016 IBM Corporation 22 IBM Bluemix www.bluemix.net 3. Web

    Application with Node-RED
  23. © 2016 IBM Corporation 23 IBM Bluemix www.bluemix.net IBM Bluemix上で

    Node-REDを使いましょう!
  24. © 2016 IBM Corporation 24 IBM Bluemix www.bluemix.net カタログを選択

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

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

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

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

  29. © 2016 IBM Corporation 29 IBM Bluemix www.bluemix.net Node-RED flow

    editor を開く
  30. © 2016 IBM Corporation 30 IBM Bluemix www.bluemix.net 仕上がりはこんな感じです ⼊⼒httpノード

    分岐ノード テンプレートノード 1つ⽬ テンプレートノード 2つ⽬ 変換ノード Visual Recognitionノード デバッグノード httpレスポンスノード
  31. © 2016 IBM Corporation 31 IBM Bluemix www.bluemix.net ⼊⼒httpノード

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

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

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

  35. © 2016 IBM Corporation 35 IBM Bluemix www.bluemix.net Visual Recognitionノード

    ここで、先ほど控えておいた api key を⼊⼒してください
  36. © 2016 IBM Corporation 36 IBM Bluemix www.bluemix.net テンプレートノード(2つ⽬) https://github.com/taijihagino/faceapp_nodered/blob/master/reporthtml_node.html

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

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

    https://github.com/taijihagino/faceapp_nodered
  39. © 2016 IBM Corporation 39 IBM Bluemix www.bluemix.net 4. Check

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

    例) https://taipon-noderedapp01.mybluemix.net/face
  41. © 2016 IBM Corporation 41 IBM Bluemix www.bluemix.net こんな感じです

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

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

    Application with Xamarin
  44. © 2016 IBM Corporation 44 IBM Bluemix www.bluemix.net Xamarinのインストール ↓

    Xamarinを起動
  45. © 2016 IBM Corporation 45 IBM Bluemix www.bluemix.net ファイル ⇢

    新しいソリューション
  46. © 2016 IBM Corporation 46 IBM Bluemix www.bluemix.net Multiplatform ⇢

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

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

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

    encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.c om/winfx/2009/xaml" xmlns:local="clr- namespace:FaceDetectionApp" x:Class="FaceDetectionApp.FaceDetectionAppPage"> <Label Text="Face Detection App" VerticalOptions="Center" HorizontalOptions="Center" /> <StackLayout> <WebView x:Name="webView" Source="https://taipon- noderedapp01.mybluemix.net/face" VerticalOptions="FillAndExpand" /> </StackLayout> </ContentPage>
  50. © 2016 IBM Corporation 50 IBM Bluemix www.bluemix.net using Xamarin.Forms;

    namespace FaceDetectionApp { public partial class FaceDetectionAppPage : Content Page { public FaceDetectionAppPage() { InitializeComponent(); } } }
  51. © 2016 IBM Corporation 51 IBM Bluemix www.bluemix.net 4. Use

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

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

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

  55. For more information IBM BlueHub official website www.ibm.com/ibm/jp/bluehub/ IBM BlueHub

    official Facebook www.facebook.com/IBMBlueHub