Azureで憧れのAIを使ったアプリを作ってみる！

##はじめに

近頃のソフトウェア業界のホットワードの一つといえば、
AIが入ってくると思います。
憧れのAIを使えば、あんな事もこんな事も色々できちゃう！
とは、思っても何となくAIって敷居が高いですよね。

しかし、実際はそんなことありません！
近頃は優秀なAIを簡単に利用するためのサービスが沢山あります。
それらを上手に活用する事で、
AIを使ったアプリが簡単に作れてしまいます！

というわけで、今回はMicroSoft AzureのFaceAPIを使ったスマホアプリを
作ってみます。

FaceAPIでは、画像をAIによる解析を行い、
そこに写っている人物についての表情の解析を行います。

##事前準備

Azureのログインアカウントを登録してください。
登録にはMicroSoftアカウントが必要です。

##FaceAPIをリソースに登録する

「＋リソースの作成」をクリックします。

「AI＋Machine Lerning」をクリックします。

「Face API」をクリックします。

Nameに任意の名称（使用するアプリ名など）
サブスクリプションには一先ず「従量課金」（用途や環境によって変わります）
場所は「米国中西部」（たぶん何処でもいいと思います）
価格レベルに「F0(20 1分あたりの～」　（これなら使用量が少ないうちは無料で使えます）
Resource groupは初めてであれば新規作成で任意の名称を設定、
以前に作成していれば、それを選んでいいと思います。

全部を入力し「作成」をクリック

全てのリソースを見ると、FaceAPIのリソースが登録されていると思います。

全てのリソースから、登録したリソースをクリックします。

「Overview」をクリックします。

登録した内容が正しいか確認できます。
「Endpoint」は大事ですので、ここで確認できることを覚えておきましょう！

こんどはリソース内メニューから「Keys」をクリックします。

ここのキーもアプリ製作時に必要です。
ふたつのキーが生成されますが、使うのは片方でよいです。
使うときは右の青いボタンをクリックするとクリップボードにコピーされます。
（Endpointもコピーボタンあります）

これでAzureの準備完了です！

##アプリを製作する

今回の例はMonaca(JavaScript)で製作時の例です。

Azureから返ってきた値をセットする変数を用意します。
（別になくてもいいです）

var age = 0;                // 年齢'
var gender = 0;             // 性別 （male/female)
var emoSmile = 0;           // 笑顔'
var emoAnger = 0;           // 怒り'
var emoContempt = 0;        // 不面目
var emoDisgust = 0;         // 嫌気
var emoFear = 0;            // 恐怖
var emoHappiness = 0;       // 幸福
var emoNeutral = 0;         // 無感動
var emoSadness = 0;         // 悲しみ
var emoSuprise = 0;         // 感嘆
var makeEye = 0;            // 化粧-目 (true/false)
var makeLip = 0;            // 化粧-唇 (true/false)
var hairBald = 0;           // 髪の量
var hairInvisible = 0;      // スキンヘッド (true/false)
var glasses = 0;            // メガネ (NoGlasses/ReadingGlasses/Sunglasses/SwimmingGoggles)

Azureをコールする処理を書きます

var subscriptionKey = "xxxxxxx" ⇒ここにAzureのKeysからコピッたキーを書きます
var uriBase = "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";
     ⇒ここはEndpointのサーバー名を入れます。「westcentralus」の名称を選択したサーバーのものに変えてください。
var params = {
    "returnFaceId": "true",
    "returnFaceLandmarks": "false",
    "returnFaceAttributes": "age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise",
};
        
// Perform the REST API call.
$.ajax({
    url: uriBase + "?" + $.param(params),
    
    // Request headers.
    beforeSend: function(xhrObj){
        xhrObj.setRequestHeader("Content-Type","application/octet-stream");
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
    },

    type: "POST",

    // Request body.
    data: file_azure,　⇒ここにAzureに送る画像データを設定します。
    processData: false,
    cache : false
})

これでFaceAPIがコールされるはずです。
Monacaで製作の方はこちらの記事も参考にしてください！

あとはAzureからのコールバックを書けば完成です！

// 成功時！
.done(function(data) {
    // 写真に人が写っていれば、その人数がlengthに入ります
    if( data.length > 0 ){
       // 複数人の場合data["1"]、["2"]となっていきます
       // 年齢
       age = data["0"].faceAttributes.age;  
       // 性別 （male/female)
       gender = data["0"].faceAttributes.gender; 
       // 数理のデータは100倍して0～100の数値にします。（使いやすいから）
       // 笑顔
       emoSmile = Math.floor(data["0"].faceAttributes.smile * 100);
       // 怒り
       emoAnger = Math.floor(data["0"].faceAttributes.emotion.anger * 100); 
       // 不面目
       emoContempt = Math.floor(data["0"].faceAttributes.emotion.contempt * 100); 
       // 嫌気
       emoDisgust = Math.floor(data["0"].faceAttributes.emotion.disgust * 100);                    
       // 恐怖
       emoFear = Math.floor(data["0"].faceAttributes.emotion.fear * 100);
       // 幸福
       emoHappiness = Math.floor(data["0"].faceAttributes.emotion.happiness * 100); 
       // 無感動
       emoNeutral = Math.floor(data["0"].faceAttributes.emotion.neutral * 100);
       // 悲しみ
       emoSadness = Math.floor(data["0"].faceAttributes.emotion.sadness * 100);      
       // 感嘆
       emoSuprise = Math.floor(data["0"].faceAttributes.emotion.surprise * 100);           
       // 化粧-目 (true/false)
       makeEye = data["0"].faceAttributes.makeup.eyeMakeup; 
       // 化粧-唇 (true/false)
       makeLip = data["0"].faceAttributes.makeup.lipMakeup;     
       // 髪の量
       hairBald = data["0"].faceAttributes.hair.bald; 
       // スキンヘッド (true/false)
       hairInvisible = data["0"].faceAttributes.hair.invisible;
       // メガネ (NoGlasses/ReadingGlasses/Sunglasses/SwimmingGoggles)
       glasses = data["0"].faceAttributes.glasses; 
    }
    // FaceAPIから取得した情報を使います
    alert("あなたは" + age + "歳です");
    if( emoSmile > 50 )
    {
        alert("とても笑顔です");
    }
    else if( emoSmile > 0 ) {
        alert("笑顔です");
    }
    else {
        alert("笑顔じゃありません");
    }
})
//失敗時！
.fail(function(jqXHR, textStatus, errorThrown) {
    // Display error message.
    var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): ";
    errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ?
        jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message;
    alert(errorString);
    console.log(errorString);
});       

こんな感じのコードを書くだけでAIを使った処理が作れてしまいます！
FaceAPI以外にもAzureのAI機能はいろいろあるので
活用できればアプリ製作の幅も広がります！
是非試してみてくださいね！