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

##はじめに

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

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

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

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

![faceapi.png](https://qiita-image-store.s3.amazonaws.com/0/260380/1c822f60-73bf-4f74-4ef1-376ce5ec40f4.png)

##事前準備

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

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

「＋リソースの作成」をクリックします。
![キャプチャ_1.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/a7deb8dd-eee0-abc0-5a46-69260ec64501.jpeg)

「AI＋Machine Lerning」をクリックします。
![キャプチャ_2.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/e6df5d8f-7858-f04e-f043-18a38646cb01.jpeg)

「Face API」をクリックします。
![キャプチャ_3.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/6112c909-138f-7f3b-18ff-ecbf72150fcc.jpeg)

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

全部を入力し「作成」をクリック
![キャプチャ_4.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/1b9c0a3d-780d-a052-b9aa-ea99cf26f03d.jpeg)

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

全てのリソースから、登録したリソースをクリックします。
![キャプチャ_5.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/4bffc621-00ff-b61e-836e-3ef4477103c6.jpeg)

「Overview」をクリックします。
![キャプチャ_6.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/82bed183-c682-dca0-031e-29c28b479f11.jpeg)

登録した内容が正しいか確認できます。
「Endpoint」は大事ですので、ここで確認できることを覚えておきましょう！
![キャプチャ_7.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/cda03d5a-e304-872f-ea9e-bf70a28e56a7.jpeg)

こんどはリソース内メニューから「Keys」をクリックします。
![キャプチャ_8.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/ffce5c5d-c0b8-0219-25b8-4e8c42eef337.jpeg)

ここのキーもアプリ製作時に必要です。
ふたつのキーが生成されますが、使うのは片方でよいです。
使うときは右の青いボタンをクリックするとクリップボードにコピーされます。
（Endpointもコピーボタンあります）
![キャプチャ_9.JPG](https://qiita-image-store.s3.amazonaws.com/0/260380/0e536854-bc4d-917e-f192-7a683530b4f5.jpeg)

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


##アプリを製作する

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

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

    
```js
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をコールする処理を書きます
    
```js
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で製作の方はこちらの[記事](https://qiita.com/TaskForceYokohama/items/8d5fc87ea55351131dc3)も参考にしてください！

あとはAzureからのコールバックを書けば完成です！
    
```js
// 成功時！
.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機能はいろいろあるので
活用できればアプリ製作の幅も広がります！
是非試してみてくださいね！