tonkunの備忘録

色々調べた事、試した事などを載せます

Xamarin.Forms Cognitive Services Face APIのデモアプリを作ってみた

Cognitive ServicesのFace APIを使った顔認識のデモを作りました。

アプリ作成にあたり、かずきさんの以下の記事を参考にさせて頂きました。
ありがとうございます(*‘▽’)

blog.okazuki.jp

FACE APIの準備

以下の記事を参考に準備をします。

tonkun-no.hatenablog.com

注意事項

ひょっとすると無料プランだと「20 Calls per minutes」に引っ掛かるかもしれません。
私はいろいろ試しているうちに無料プランが何やらExpireしたのでStandardにプランを変えました。 まぁそれでも1000 Callsで150円位かと。

使用するAPI一覧

以下のAPI一覧の中から必要なものを使っています。

Microsoft Cognitive Services

機能としては以下を使用しています。

  • 人情報の一覧取得(List Persons in a Person Group)

  • 人情報の登録(Create a Person)

  • 人情報の削除(Delete a Person)

  • 人情報への顔の登録(Add a Person Face)

  • 学習(Train Person Group)

  • 顔の検出(Detect)

  • 顔の識別(Identify)

Personを作る前にPerson Groupの作成が必要ですが、本アプリではそこは省略しています。
予め以下のURLなどから作成しておく必要があります。

https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395244/console

アプリの画面構成

アプリの画面構成は以下になります。

  • メイン画面

  • 人の一覧画面

  • 人への顔の登録画面

  • 顔認識のデモ画面

になります。

アプリの概要

  1. 人の一覧画面には現在登録されている人の一覧が表示され、人の追加・削除が可能
    ここから人を選択して顔の登録画面へ遷移する

  2. 顔の登録画面で撮った写真を登録し学習させる

  3. デモ画面で写真を撮影すると、顔の識別を行い登録データと同一の人がいれば、登録名が表示される
    信頼度や、おまけで年齢と笑顔値も表示

実装

GitHubにソースをあげてあります。

github.com

Xamarin Forms + Prismで作成しています。

MVVMでやった事がなかったので挑戦してみましたが、ViewとViewModelのみです(・ω・`) どの部分がMになるのかピンと来ませんでした。精進します。

カメラ部分はPluginにお任せです。

github.com

大事な処理はSDKやPlugin任せです。
意外と簡単にサクッと動作する所まで作る事が出来ました。 ※どちらかと言うと画面のレイアウトとか別な部分で悩みました・・・orz

実際の製品や受託開発となると、また違うとは思いますが、こういったデモレベルであればサクッと作れるは良いですね。

実行

人を登録して、写真を撮影して顔の登録も行った後で、
デモ画面から写真を撮影すると、撮影した人が登録されていれば名前や年齢が表示されます。

f:id:tonkun_no:20170602042335p:plain

顔の角度によっては顔として認識しなかったりしますが、結構良い精度で認識できていると思います。

次に試すのはFaceAPI以外にしてみたいなと思います。(・ω・)ノ

Xamarin.Forms Forms Previewerがいつの間にか動いてた(Windows単独)

以下の記事からだいぶ経ってしまいましたが、

tonkun-no.hatenablog.com

Visual Studio 2017も出たしそろそろできるだろうと試してみたら、いつの間にかWindows単独でもPreviewerが動いていました。

試した時点の環境がVisual Studio 2015とVisual Studio 2017混在環境なので、他環境での検証はできていません。(大丈夫だと思いますが・・・)

取りあえずVisual Studio2015でプロジェクトを新規作成して

f:id:tonkun_no:20170321013145p:plain

f:id:tonkun_no:20170321013243p:plain

ソリューションをビルドして、
[表示]→[その他のウィンドウ]→[Forms Previewer]を選択 f:id:tonkun_no:20170321013533p:plain

エラーで表示されませんでした。
エラーメッセージを見ると64ビット版のJDK1.8以上を入れて下さいとのこと
(以前はここまで具体的なエラーメッセージは出てなかったですね)

f:id:tonkun_no:20170321013634p:plain

何故64ビット版じゃないとダメなのかはわかりませんが、
早速Oracleのサイトからダウンロード&インストール

Java SE Development Kit 8 - Downloads

f:id:tonkun_no:20170321013939p:plain

インストールが完了したらVisual Studio
[ツール]→[オプション]からオプション画面を表示して、
[Xamarin]→[Android Settings]から[Java Development Kitの位置情報]を64bit版のJDKの場所に変更して

f:id:tonkun_no:20170321014330p:plain

再度Previewerを表示すると

f:id:tonkun_no:20170321014551p:plain

ようやくプレビュー画面を拝むことが出来ました。

f:id:tonkun_no:20170321015007p:plain

複雑なレイアウトのものは試していませんので、実用的なレイアウトだとほぼ使えないとかありそうですが、 実行せずにレイアウトを確認できるのはいいですね(・ω・)ノ

TimeSpan型で24時間以上の値を設定する

TimeSpan型に24時間以上の値を設定できないと思い込んでいましたが、

TimeSpan.Parse("20:30:00");                   // これはいける
TimeSpan.Parse("40:30:00");                   // これは例外(OverflowException)
TimeSpan time = new TimeSpan(40, 30, 0);      // これはいける
Console.WriteLine(time.ToString());           // 1.16:30:00が出力される

知りませんでした・・・orz

C#でLINE botを作ってみた

ちょっと現実から逃避していて調べものをしていた時に、サクッと作れたのでご紹介。

LINE側の準備

「Developer Trialを始める」を選択

会社・事業者を作成して選択(とりあえず法人で作ってしまったけどいいのかな?)

アカウント名・業種を決めて「確認する」を選択

内容を確認して「申し込む」を選択

「LINE@MANAGER」へを選択

LINE@MANAGERの画面が表示されるので、「Bot設定」の「APIを利用する」をクリック

f:id:tonkun_no:20170130024932p:plain

確認ダイアログで「確認」をクリック

f:id:tonkun_no:20170130025026p:plain

Bot設定」でBot用に設定を変更して「保存」をクリック

  • 受信したメッセージをこちらで用意するサーバで処理したいのでので「Webhook送信」は「利用する」に変更

  • 応答メッセージをこちらで作成するので「自動応答メッセージ」は「利用しない」に変更

  • Botのグループトーク参加」「友だち追加時あいさつ」はお好みで

f:id:tonkun_no:20170130025640p:plain

Bot設定」の「LINE Developersで設定する」をクリックする

  • 「Channel Secret」の右の「Show」をクリックして、表示される内容をメモっておく(API側で使います)

  • 画面一番下の「Channel Access Token」の右の「ISSUE」をクリックして、表示される内容をメモっておく(API側で使います)

f:id:tonkun_no:20170130030404p:plain

f:id:tonkun_no:20170130030733p:plain

LINEの準備はとりあえずここまで

アプリ側の作業

Messaging APIC#のライブラリが無いのですが、Kenichiro NakamuraさんによりSDKとテンプレートが作成されています。

C# で LINE Bot | Ken’s Tech Blog

基本これを入れるだけでそのまま動く物が出来てしまいます。すごいよ・・・( ゚Д゚)

  • LINE Bot Applicationテンプレートをダウンロード

Release Line Bot Application · kenakamu/line-bot-sdk-csharp · GitHub

  • %USERPROFILE%\Documents\Visual Studio 2015\Templates\ProjectTemplates\Visual C#\ にzipをそのまま保存

  • Visual Studio 2015起動

  • 新しいプロジェクトの作成画面に「Line Bot Application」が追加されているので、それを選択して作成

f:id:tonkun_no:20170130032243p:plain

  • Web.configの「ChannelSecret」と「ChannelToken」に先ほどメモった内容を記載

  • プロジェクトを右クリックして「公開」を選択

  • 「App Servce」画面で既に利用可能なリソースがあるのであればそれを選択、今回は「新規作成」を選択

f:id:tonkun_no:20170130033146p:plain

  • Web Appの名前、サブスクリプション、リソース、App Serviceのプラン(無料でOK)を指定して「作成」を選択

f:id:tonkun_no:20170130034433p:plain

  • そのまま「発行」を選択

f:id:tonkun_no:20170130034725p:plain

  • 発行されたURLをメモっておく

LINE側の設定

もうちょっとです。

  • LINEビジネスセンターより「アカウントリスト」を選択

LINE Business Center

  • 作成したBotが表示されていると思うのでMessaging API右の「LINE Developers」をクリックする

  • 準備の時に表示した設定画面が表示されるので画面下の「EDIT」をクリックする

f:id:tonkun_no:20170130040217p:plain

  • 編集画面が表示されるので「Webhook URL」に先ほどメモったURLを貼り付けて、プロトコルhttpsに変更し、URLの後ろに/api/linemessageを付けて「SAVE」をクリックして保存する
    ※VERIFYはうまくいかないけど無視(笑)

f:id:tonkun_no:20170130040659p:plain

これでOK

動作確認

今使っていた「LINE Developers」設定画面にあるQRコードから、LINEへ友だち追加して実際に動作を確認します。

f:id:tonkun_no:20170130043543p:plain

来た物をそのまま返すサンプルになっています。
Button、Confirm、CasouselのTemplate messageのサンプルも含まれています。

LINEの設定に多少手間取るかもしれませんが、アプリ部分はテンプレートそのままでOKです。 こんな素晴らしいSDKとテンプレートを公開して頂いているKenichiro Nakamuraさんに感謝ですね(・ω・)

Xamarin.Forms XAMLのIntellisenseをとりあえず有効にする方法

Xamarinの開発環境を再構築していたところ 以下の記事で紹介していた拡張機能がなくなっていました・・・(・ω・`)

tonkun-no.hatenablog.com

またエアXAMLに戻ってしまうのは辛いので、 暫定的にIntellisenseを有効にしてみます。

なぜかテキストエディタで開くと、Intellisenseが聞くので、 レジストリを編集して常にテキストエディタで開くようにしてみます。

以下のレジストリを編集します。

HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio\14.0_Config \XmlChooserFactory\XamarinForms

※VisualStudio2015環境の場合です

f:id:tonkun_no:20170116022921p:plain

内容については、この辺りを参考にしました。
Visual Studio Editor Choosing System – Microsoft XML Team's WebLog

設定する値ですが、
{7651A701-06E5-11D1-8EBD-00A0C90F26EA}の値を
{FA3CD31E-987B-443A-9B81-186104E8DAC1}
から
{8B382828-6202-11d1-8870-0000F87579D2}
に変更しています。

設定するテキストエディタのGUIDはこちらを参考にしました。
https://msdn.microsoft.com/ja-jp/library/bb166496.aspx

変更後のレジストリ
f:id:tonkun_no:20170116024816p:plain

めでたくIntellisenseが有効になりました。
f:id:tonkun_no:20170116030149p:plain

今回はコード表示の場合のみ変更しています。
まっさらな環境を持っていないので、今回修正したレジストリが最初からあるのかどうかちょっと不明ですが参考になれば(・ω・)ノ

Xamarin.Android Cognitive Service Face APIを使って顔認証をしてみた

qiita.com

の9日目の記事になります。

前回準備したFace APIを使ったなんちゃってログインのような処理を作ってみようと思います。

tonkun-no.hatenablog.com

処理の流れとしては

  1. カメラのプレビューから顔を検出

  2. プレビューから顔の画像を取得
    →どうしてもプレビューから画像の取得が出来なかったので、写真を撮影する方法に変更しています・・・orz

  3. 取得した画像をFace APIを使用して顔を検出

  4. 検出した顔に対してあらかじめ用意した顔リストから類似する顔を検出

  5. 検出できたら認証成功

  6. 認証に成功したら次の画面に移動

と言った感じです。

プロジェクト構成

Xamarin.Androidで作成します。 プロジェクトの構成としては、以下の通り

f:id:tonkun_no:20161206194255p:plain

AndroidプロジェクトとPCLプロジェクトの2つです。

実装

Face API周りの準備から。

NuGetからMicrosoft.ProjectOxford.FaceをPCLプロジェクトにインストール

f:id:tonkun_no:20161206194628p:plain

実際に顔認証をしている処理としては

FaceServiceClient _faceServiceClient = new FaceServiceClient("your subscription key");
private async Task<SimilarPersistedFace[]> GetSimilarFaces(Stream imageStream)
{
    try
    {
        // 顔を検出
        var faces = await _faceServiceClient.DetectAsync(imageStream);
        // 検出した顔がリストにあるか検索(1件のみ抽出)
        return await _faceServiceClient.FindSimilarAsync(faces.FirstOrDefault().FaceId, _faceListId, candidatesCount);
    }
    catch (FaceAPIException)
    {
        // 何かしらエラー
        return new SimilarPersistedFace[0];
    }
}


DetectAsyncをして、撮った画像から顔を検出して、
FindSimilarAsyncでFaceListに同じ顔があるか検索して結果を返しているだけでOK。
超簡単です。

APIの使い方はこちらを参考にしました。
Microsoft Cognitive Services

今回FaceListはあらかじめ作成しています。
同じくAPIが用意されているので、そちらを使えばサクッと作れると思います。*1

カメラ側のでの顔検出はGooglePlayServices.Visionを使います。
以前に書いた記事の機能をベースにしています。
tonkun-no.hatenablog.com

顔を検出したタイミングで写真を撮影して、 そのコールバック処理で、先ほど準備したFace APIを使用して認証を行っています。 成功した場合は次の画面へ移動、失敗した場合はそのままになっています。

ソースはGithubに上がっているので、詳しくはそちらを見てみてください。

github.com

実行

実行してみると、カメラのプレビューで顔を検出したタイミングで認証が行われ、 FaceListに登録した顔と似ていると判定されれば、認証成功として次の画面へ移動できました。
f:id:tonkun_no:20161207041408g:plain

カメラの顔検出がかなり早いので、撮影のタイミングによっては認証に失敗したりと、 何だかちょっとイマイチな動作ですが・・・そこはまぁ(・ω・`)

Face APIを使って、こんなに簡単に顔の検出等が出来るのはいいですね。 他のAPIも試してみたいと思います。

*1:CreateFaceListAsyncとAddFaceToFaceListAsyncを使用します

Cognitive Service Face APIを試してみる(準備編)

Microsoft AzureのCognitive Service Face APIを使ってみようと思います。
今回は準備編です。

Face APIの準備

Azureにログイン
Microsoft Azure: クラウド コンピューティング プラットフォームとサービス

ダッシュボードから新規で「Cognitive Services APIs」を検索し、 f:id:tonkun_no:20161128020856p:plain

「作成」をクリック f:id:tonkun_no:20161128021134p:plain

Account nameを記入し、サブスクリプションを選択、API typeから「Face API」を選択 f:id:tonkun_no:20161128021613p:plain

場所は「米国西部」しか現時点では選べないのでそのまま、Pricing tierは「F0 Free」を選択 f:id:tonkun_no:20161128022000p:plain

Resource groupはとりあえず新規作成で、Legal termsで「I Agree」を選択 f:id:tonkun_no:20161128024940p:plain

ダッシュボードにピン留めするにチェックをして「作成」をクリック f:id:tonkun_no:20161128025122p:plain

しばし待ちましょう・・・( ゚Д゚)

作成が完了したら、KeysからKEY1をコピーしておきます f:id:tonkun_no:20161128031459p:plain

Azure側の準備はこれでOKです。