Live And Let Die

Microsoft エバンジェリストのブログ&備忘録 渡辺弘之の個人ブログ

Microsoft Cognitive Services を試してみる(5)

前回に続いて、Visual Studio でアプリを作成していきます。

4.Visual Studio でアプリ作成その3

4-1. "Emotion" API の処理を記述します。

・まずは、冒頭でネットワーク接続をチェックします。

・"Emotion"(emotionServiceClient.RecognizeAsync)を呼びます。引数は、ファイルから、もしくは、カメラ撮影で取得した写真(イメージ)です。

・Emotion API の詳細は、こちらも参照ください。

・今回は、写真に写る人間を1名と仮定し、判定結果(スコア)を受け取ります。

f:id:hiwatan:20161028163813p:plain

 

4-2. "Face" API の処理を記述します。

・"Face" API の判定結果(属性値)を格納するリストを定義します。

・"Face"(faceServiceClient.DatectAsync)を呼びます。引数は、ファイルから、もしくは、カメラ撮影で取得した写真(イメージ)です。

・Face API の詳細は、こちらも参照ください。

・"Emotion" 同様、今回は、写真に写る人間を1名と仮定し、判定結果(属性値)を受け取ります。

f:id:hiwatan:20161028163828p:plain

 

4-3. "Emotion"、"Face" の判定結果を、2-4で定義したFaceEmotionDetectionクラスに格納します。 

f:id:hiwatan:20161028163841p:plain

 

4-4. 3-3と3-4で記述した「ファイルから選ぶボタンがクリックされた時の処理(UploadPicture_Clicked())」と「カメラで撮影ボタンがクリックされた時の処理(TakePicture_Clicked())」それぞれから、この"Face"と"Emotion"を呼び出す処理(DetectFaceAndEmotionsAsync())を呼び出します。判定結果を BindingContext に渡せば終了です。

f:id:hiwatan:20161028163856p:plain

 

4-5. 今回のアプリは、Xamarin.Form を用いて開発していますので、マルチプラットフォームのクライアント対応アプリとなっています。最初に紹介した UWPアプリ以外にも、Androidエミュレーター)、Windows Phone(エミュレーター)でも同様に起動します。(iPhoneは試していません)

f:id:hiwatan:20161028163909p:plainf:id:hiwatan:20161028163934p:plain

 

Cognitive Services を利用したモバイルアプリを簡単に作成できることがわかりました。Xamarin を使うと、C#マルチプラットフォーム対応のアプリも簡単に作成できます。皆さんも、ぜひ試してみてください。

Microsoft Cognitive Services を試してみる(4)

前回に続いて、Visual Studio でアプリを作成していきます。

3.Visual Studio でアプリ作成その2

3-1. UI(MainPage.xaml)に対する処理を MainPage.xaml.cs に記述していきます。まずは、以下を先頭に記述します。Emotion, Face, Media に関連するライブラリです。

f:id:hiwatan:20161027172523p:plain

 

3-2. "Face" と "Emotion" の API を利用するための宣言を記述します。こちらのブログの手順1-7で準備(取得)したキー(Key1)をコピーしてください。

f:id:hiwatan:20161027172530p:plain

 

3-3. 「ファイルから選ぶ」ボタンがクリックされた時の処理を UploadPicture_Clicked()関数として、public MainPage() 関数の下に記述します。ファイルから写真(イメージ)を取得する処理、取得した写真をMainPage.xamlに定義したImage1表示する処理です。

f:id:hiwatan:20161027172539p:plain

 

3-4. 「カメラで撮影」ボタンがクリックされた時の処理を TakePicture_Clicked()関数として、UploadPicture_Clicked()関するの下に記述します。カメラが利用可能かどうかのチェック、カメラで撮影した写真をアルバムに保存する処理、撮影した写真をMainPage.xamlに定義したImage1に表示する処理です。

f:id:hiwatan:20161027172546p:plain

次回は、"Emotion", "Face" API の結果を取得する処理を記述します。

Microsoft Cognitive Services を試してみる(3)

Visual Studio でアプリを作成していきます。

試した環境は、以下です。

  • OS: Windows 10 Enterprise バージョン1607, OSビルド 14393.187
  • Visual Studio Community 2015 Version 14.0.25431.01 Update3

手順

2.Visual Studio でアプリ作成その1

2-1. Visual Studio 起動。"ファイル" -> "新規作成" -> "プロジェクト" クリック。"テンプレート" -> "Visual C#" -> "Cross-Platform" から "Blank Xaml App (Xamarin.Forms Portable)" を選択。名前は、ここでは、"FaceEmotionApp1" としました。"OK" クリック。

f:id:hiwatan:20161026162031p:plain

 

2-2. NuGetパッケージのインストール。(Visual Studio での開発は、このNuGetパッケージ(開発に必要となるソフトウエアやライブラリ)をインストールすることによって、開発環境を整えていく。)今回は、以下の4つのNuGetパッケージをインストールしました。

  • Microsoft.ProjectOxford.Face (バージョン1.1.0)
  • Microsoft.ProjectOxford.Emotion(バージョン1.0.310)
  • Xam.Plugin.Connectivity(バージョン2.2.12)
  • Xam.Plugin.Media(バージョン2.3.0)

注1)NuGetパッケージのバージョンは、必ずしも最新版で動くとは限りませんでした。

注2)FaceとEmotionは、PCLプロジェクトにインストール、ConnectivityとMediaは、全プロジェクトにインストールしました。

 

NuGetパッケージのインストール方法

ソリューションエクスプローラーで、"ソリューション 'FaceEmotionApp1' (6プロジェクト)" を右クリック、"ソリューションのNuGetパッケージの管理" クリック

f:id:hiwatan:20161026162042p:plain

 

それぞれのNuGetパッケージを検索し、インストールします。NuGetパッケージのバージョンとインストール先を注意。PCLプロジェクトは、"FaceEmotionApp1"のみ選択。全プロジェクトは、すべてのプロジェクトをチェックしてインストール。

f:id:hiwatan:20161026162050p:plain

 

2-3. アプリのUIを作成。ソリューションエクスプローラーの "FaceEmotionApp1(移植可能)" の下の "MainPage.xaml" ファイルを編集します。(Xamarin (C#) の開発では、UIは、XAMLで定義します。)

以下のコードを記述します。「カメラで撮影」ボタン、「ファイルから選ぶ」ボタン、イメージ(写真)を表示するエリア、Emotion, Face APIで取得した数値を表示するラベル(性別、年齢、エモーション、スマイル、メガネ、あごひげ、口ひげ)を定義しています。

f:id:hiwatan:20161026162106p:plain

 

2-4. Emotion, Face API の結果を格納するクラス "FaceEmotionDetection" を作成します。ソリューションエクスプローラーの "FaceEmotionApp1(移植可能)" を右クリック、"追加" -> "クラス" クリック

f:id:hiwatan:20161026162117p:plain

 

"クラス"を選択、名前を"FaceEmotionDetection.cs" として、"追加"クリック。

f:id:hiwatan:20161026162127p:plain

 

以下のコードを記述して、保存してください。

f:id:hiwatan:20161026162135p:plain

 

次回は、Visual Studio でのアプリ作成その2を紹介します。

 

Microsoft Cognitive Services を試してみる(2)

今回から、Cognitive Services を活用したUWPアプリの作成手順を紹介していきます。

手順

1.Cognitive Services API 利用申し込み

1-1. まずは、下記URLより Cognitive Services API の利用を申し込みます。申し込む際には、Microsoft アカウントが必要になるので、事前に取得しておいてください。

https://www.microsoft.com/cognitive-services

1-2. "Get started for free" クリック

f:id:hiwatan:20161026135837p:plain

 

1-3. "Let's go" クリック

f:id:hiwatan:20161026135854p:plain

 

1-4. Microsoft アカウントでサインイン

f:id:hiwatan:20161026135902p:plain

 

1-5. "Request new trials" クリック

f:id:hiwatan:20161026135914p:plain

 

1-6. 今回は、"Emotion" と "Face" をチェック

f:id:hiwatan:20161026135921p:plain

 

1-7. "Emotion" と "Face" の APIが利用できる準備が整いました。後ほど出てくるプログラム(C#のコード)の中で、ここに記載されているKeyを利用します。

f:id:hiwatan:20161026135928p:plain

次回は、Visual Studio でアプリ作成を行います。

 

Microsoft Cognitive Services を試してみる(1)

msdn magazine 2016/10月号の「 Cognitive Services - Microsoft Cognitive Services による Xamarin.Forms での顔と感情の認識 」は、Microsoft Cognitive Services を試してみるのには、良い記事だと思いました。以下、私が試してみた際に気付いた点を備忘録として残しておきます。

この記事を試すと、下記のようなアプリが作成できます。UWPアプリの例です。

f:id:hiwatan:20161025172401p:plain 

f:id:hiwatan:20161025172332p:plain

 カメラで撮影、もしくは、ファイルから写真を選択すると、性別、年齢、エモーション、スマイル、メガネ、あごひげ、口ひげ の認識(判定)を行ってくれるアプリです。

次回からは、記事に従って、こちらのアプリの開発手順を試していきます。

 

 

マイクロソフトの学生向け支援プログラム Microsoft Imagine 参加方法

マイクロソフトの学生向け支援プログラム Microsoft Imagine をご存知でしょうか?

こちらに参加(登録)することで、学生の皆さんは、マイクロソフトの様々な製品やサービスを無償で利用することが可能になります。

学生向けの世界最大のITコンテストである Imagine Cup の最新情報もこちらから情報発信されますので、ご注目ください。

 

Microsoft Imagine の参加方法は、こちらのドキュメントを参照ください。

 

学生の皆さん、ぜひ、Microsoft Imagine 参加してください。よろしくお願いします。

個人ブログを始めます!

日本マイクロソフト株式会社で、テクニカルエバンジェリストとして働いている渡辺と申します。ここ数年間は、アカデミック(学生や先生)を対象とした活動をしていましたので、アカデミックブログ を更新していましたが、部署内でのロール(役割)が代わりましたので、こちらの個人ブログで情報発信を行っていきます。

主に、テクニカルな作業での備忘録として、自分自身が覚えておきたいことやTipsなどの投稿が中心になるのではないかと思います。

とはいえ、学生さん向けの活動は大好きですので、アカデミック向けの活動も継続しています。

よろしくお願いします。