Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Watson Visual Recognition と Node-RED で 顔認識アプリを簡単に作成してXamarinでモバイル化!
Search
Taiji HAGINO
PRO
June 24, 2017
Technology
1
570
Watson Visual Recognition と Node-RED で 顔認識アプリを簡単に作成してXamarinでモバイル化!
こちらは2017/06/24に行われた北海道Watsonユーザー会での登壇資料です
Taiji HAGINO
PRO
June 24, 2017
Tweet
Share
More Decks by Taiji HAGINO
See All by Taiji HAGINO
JDDUG (Japan Datadog User Group)始動の舞台裏
taijihagino
PRO
0
55
コミュニティマーケティング推進協会 DevRel分野フェローとしての活動指針
taijihagino
PRO
1
78
Tokyo Azure Meetup and why don't we learn English
taijihagino
PRO
0
6
Datadog Japan Meetup 2023 Fall
taijihagino
PRO
0
230
How to use ChatGPT for practicing English
taijihagino
PRO
0
500
Bi-monthly Webinar - Observability Datadog 101 (20230403pos)
taijihagino
PRO
0
65
How to Drive User Community without Community Manager
taijihagino
PRO
1
52
Facets of Observavility
taijihagino
PRO
0
400
Serverless Application Monitoring | DevOps.com Webinar
taijihagino
PRO
0
24
Other Decks in Technology
See All in Technology
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
710
Grafana x PagerDuty Better Together
jacopen
1
260
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
2.6k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
620
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
140
アクセス制御にまつわる改善 / Improving access control
itkq
0
590
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
890
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
710
web-application-security
matsuihidetoshi
1
190
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
460
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.1k
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Documentation Writing (for coders)
carmenintech
60
4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Building Applications with DynamoDB
mza
88
5.6k
Transcript
© 2016 IBM Corporation 1 IBM Bluemix www.bluemix.net Visual Recognition
× Node-RED × Xamarin で顔認識アプリのモバイル化 Taiji HAGINO IBM BlueHub Developer Advocate
© 2016 IBM Corporation 2 IBM Bluemix www.bluemix.net 1. Profile
© 2016 IBM Corporation 3 IBM Bluemix www.bluemix.net Taiji HAGINO
Developer Advocate IBM Japan BlueHub taiponrock • スタートアップ⽀援 • 技術サポート • イベント・コミュニティ • パートナー連携
© 2016 IBM Corporation 4 IBM Bluemix www.bluemix.net IBM BlueHubのご紹介
IBM BlueHubは、 テクノロジー活⽤とオープン・イノベーション による新事業の創造を⽀援しています。 • イノベーションを実現するテクノロジーの提供 • 事業⽴上げに向けたスタートアップの育成 • ⼤⼿企業とスタートアップとの協業促進
6 BlueHub推進の⽬的 IBMテクノロジーの 活⽤事例の拡⼤ 企業間の コラボレーション 機会の創出 新事業創造 のための エコシステム形成
7 IBM BlueHub パートナーラインナップ Investment Partners Media Partners Evangelist Partners
Operation Partners
テクノロジーを活⽤した スタートアップの事業育成 (Incubation Program) ー 8 IBM BlueHubの活動 オープン・イノベーション による新事業の創出
(Open Innovation Program) ⼤⼿企業 ⼤⼿企業 スタート アップ スタート アップ スタート アップ オープン イノベーション テクノロジー提供 ⼤⼿企業 [テーマ] •Automotive •Healthcare •Inbound Travel … スタート アップ スタート アップ スタート アップ テクノロジー提供 ー BlueHub パートナー [テクノロジー] •Analytics •IoT •Blockchain •Mobile •Security •Watson, etc. メンタリング 1 2
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 テクノロジーのご紹介 - IBM Bluemix 様々なアプ リケーショ ンを構築・管理・実⾏ するための、クラウド ベースのオープン・ス
タンダ ード なPaaS環境
© 2016 IBM Corporation 11 IBM Bluemix www.bluemix.net 1. Overview
© 2016 IBM Corporation 12 IBM Bluemix www.bluemix.net 1.Webアプリケーションを作成する 2.そのアプリ上で、ある⼈物の画像を指定する
3.その画像を解析する 4.解析結果をWebアプリケーションの画⾯に表⽰する •年齢 •性別 •有名⼈かどうか 5. 1〜4で作ったWebアプリをモバイルアプリにする 本⽇やること
© 2016 IBM Corporation 13 IBM Bluemix www.bluemix.net Node-RED アプリ実⾏環境
Cloudant データベース Watson Visual Recognition 画像解析
© 2016 IBM Corporation 14 IBM Bluemix www.bluemix.net 2. Watson
Visual Recognition API
© 2016 IBM Corporation 15 IBM Bluemix www.bluemix.net IBM Bluemix上で
Watson Visual Recognition APIを サービスとして作成しましょう!
© 2016 IBM Corporation 16 IBM Bluemix www.bluemix.net サービスの作成 (or
カタログ) ↓ Visualで検索 ↓ Visual Recognitionを選択
© 2016 IBM Corporation 17 IBM Bluemix www.bluemix.net 価格プランを選択し、作成をクリック
© 2016 IBM Corporation 18 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます
© 2016 IBM Corporation 19 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます (参考)
最近、VR Toolが使いやすくなりました
© 2016 IBM Corporation 20 IBM Bluemix www.bluemix.net 例えばこんな感じで使えます
© 2016 IBM Corporation 21 IBM Bluemix www.bluemix.net サービス資格情報を表⽰します 前のページのToolもこれからの⾃作アプリも
api key が必要なので控えておいてください
© 2016 IBM Corporation 22 IBM Bluemix www.bluemix.net 3. Web
Application with Node-RED
© 2016 IBM Corporation 23 IBM Bluemix www.bluemix.net IBM Bluemix上で
Node-REDを使いましょう!
© 2016 IBM Corporation 24 IBM Bluemix www.bluemix.net カタログを選択
© 2016 IBM Corporation 25 IBM Bluemix www.bluemix.net Node-RED Starterを選択
© 2016 IBM Corporation 26 IBM Bluemix www.bluemix.net アプリを作成
© 2016 IBM Corporation 27 IBM Bluemix www.bluemix.net ⾃動でステージング
© 2016 IBM Corporation 28 IBM Bluemix www.bluemix.net エディタへのログイン情報を設定します
© 2016 IBM Corporation 29 IBM Bluemix www.bluemix.net Node-RED flow
editor を開く
© 2016 IBM Corporation 30 IBM Bluemix www.bluemix.net 仕上がりはこんな感じです ⼊⼒httpノード
分岐ノード テンプレートノード 1つ⽬ テンプレートノード 2つ⽬ 変換ノード Visual Recognitionノード デバッグノード httpレスポンスノード
© 2016 IBM Corporation 31 IBM Bluemix www.bluemix.net ⼊⼒httpノード
© 2016 IBM Corporation 32 IBM Bluemix www.bluemix.net 分岐ノード
© 2016 IBM Corporation 33 IBM Bluemix www.bluemix.net テンプレートノード(1つ⽬) https://github.com/taijihagino/faceapp_nodered/blob/master/htmlpage_node.html
© 2016 IBM Corporation 34 IBM Bluemix www.bluemix.net 変換ノード
© 2016 IBM Corporation 35 IBM Bluemix www.bluemix.net Visual Recognitionノード
ここで、先ほど控えておいた api key を⼊⼒してください
© 2016 IBM Corporation 36 IBM Bluemix www.bluemix.net テンプレートノード(2つ⽬) https://github.com/taijihagino/faceapp_nodered/blob/master/reporthtml_node.html
© 2016 IBM Corporation 37 IBM Bluemix www.bluemix.net httpレスポンスノード
© 2016 IBM Corporation 38 IBM Bluemix www.bluemix.net フローのDefinitionは、 JSON形式でこちらから取得できます
https://github.com/taijihagino/faceapp_nodered
© 2016 IBM Corporation 39 IBM Bluemix www.bluemix.net 4. Check
Web Application!!
© 2016 IBM Corporation 40 IBM Bluemix www.bluemix.net Node-REDで作成したWebアプリのURLは、 https://<Node-RED経路>/<入力httpノードで指定した文字列>
例) https://taipon-noderedapp01.mybluemix.net/face
© 2016 IBM Corporation 41 IBM Bluemix www.bluemix.net こんな感じです
© 2016 IBM Corporation 42 IBM Bluemix www.bluemix.net こんな感じです
© 2016 IBM Corporation 43 IBM Bluemix www.bluemix.net 5. Mobile
Application with Xamarin
© 2016 IBM Corporation 44 IBM Bluemix www.bluemix.net Xamarinのインストール ↓
Xamarinを起動
© 2016 IBM Corporation 45 IBM Bluemix www.bluemix.net ファイル ⇢
新しいソリューション
© 2016 IBM Corporation 46 IBM Bluemix www.bluemix.net Multiplatform ⇢
アプリ ⇢ Blank Forms App
© 2016 IBM Corporation 47 IBM Bluemix www.bluemix.net App Name
: 任意のアプリケーション名 Organization Identifier : モバイルアプリの名前空間 ターゲットプラットフォーム : 任意のものへチェック Shared Code :任意(今回はPortable Class Library) Use XAML : 任意(今回は使⽤)
© 2016 IBM Corporation 48 IBM Bluemix www.bluemix.net プロジェクト名 :
任意のプロジェクト名 ソリューション名 : 任意のソリューション名 場所 : 任意のファイルパス(プロジェクトの保管) バージョンコントロール :任意(今回は未使⽤) Xamarin Test Cloud : 任意(今回は未使⽤)
© 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>
© 2016 IBM Corporation 50 IBM Bluemix www.bluemix.net using Xamarin.Forms;
namespace FaceDetectionApp { public partial class FaceDetectionAppPage : Content Page { public FaceDetectionAppPage() { InitializeComponent(); } } }
© 2016 IBM Corporation 51 IBM Bluemix www.bluemix.net 4. Use
Application!!
© 2016 IBM Corporation 52 IBM Bluemix www.bluemix.net
© 2016 IBM Corporation 53 IBM Bluemix www.bluemix.net
© 2016 IBM Corporation 54 IBM Bluemix www.bluemix.net おつかれさまでした!
For more information IBM BlueHub official website www.ibm.com/ibm/jp/bluehub/ IBM BlueHub
official Facebook www.facebook.com/IBMBlueHub