[Cloud103]#1 PostmanでMS Face APIを使ってみる

# AGENDA

0.事前準備
1.MS Face API
2.Postman準備
3.PostmanでMS Face API

# 0.事前準備

事前準備として無料のAzureアカウント作成と、Face APIキーの取得を行います。

*＜2017/6/8補記＞*
*先日以下のリンクを見つけました。以下の(1)~(2)の手順より簡単にAPIキーが取得できるようです(要：MS or LinkedIn or Facebook or Githubアカウント）。*
https://azure.microsoft.com/ja-jp/try/cognitive-services/



## (1)Azureアカウント
Azureアカウントを持っていない方は以下を参考にアカウントを作成してください。
https://azure.microsoft.com/ja-jp/free/
<img width="388" alt="51.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/311534b2-7eb8-005a-d35e-bf9e145ddca6.png">

ちょとお詫び：

以前はAzureアカウントなしで"Cognitive APIアカウント"作成して使えましたが、最近はAzureアカウントが必須のようです。

https://docs.microsoft.com/ja-jp/azure/cognitive-services/cognitive-services-apis-create-account

<img width="307" alt="50.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/34dc7a6f-cf71-7522-8ee8-7381d34b6de7.png">

## (2)Face APIキーの取得
上記URLに従ってAzure Portalから"AI+Cognitive Service"を有効化してFace API用のキーを取得します。

「新規」から
<img width="327" alt="41.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/75a5bd34-82d3-3ff6-9fe1-fff97d5701e8.png">


「AI+Cognitive Sevice> Face API」を選択
<img width="347" alt="43.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/24d87384-cee0-0507-763c-c7a114a837d2.png">

~~適当に~~適切に設定
<img width="160" alt="44.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/933c0893-8b52-ed50-86f3-3be9f9ac8891.png">

出来た！
<img width="586" alt="45.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/68229088-992e-172a-f324-7d45d95d9b5d.png">

エンドポイントとキー１をメモ帳などにコピペしておきます(コピペ忘れたら「概要」ページから確認できます）。
<img width="164" alt="46.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/c4e989a4-7abc-6079-024c-48e74e246b3b.png">

なお、本ハンズオンは以下記事を参考にしています。分かりにくい部分があれば元ネタを参照してください:sweat:

**30分でAIが使えるようになる　写真から年齢と性別を認識する「Face API」を試してみた**
http://www.itmedia.co.jp/news/articles/1703/17/news086.html


# 1.MS Face API

## (1)こんな感じのAPI

以下の「顔検出」を触ってみます。
https://azure.microsoft.com/ja-jp/services/cognitive-services/face/
<img width="418" alt="02.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/79389/cc8012c0-cd52-ab70-71b7-7a21c4a00393.png">


こんな画像のURLを入力してみます（お好きな写真でどうぞ！）。
http://www.bibeaute.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-14-at-1.18.03-PM.png
![Screen-Shot-2015-05-14-at-1.18.03-PM.png](https://qiita-image-store.s3.amazonaws.com/0/79389/280fa499-94f4-3b6f-4193-ea875711b182.png)

<img width="340" alt="03.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/198549cf-f729-9264-c4cc-1848e54b933d.png">

## (2)API Testing Console

API仕様ページからAPIのテストが出来ます

さっきのページの下の方にAPI仕様へのリンクがあります。
https://azure.microsoft.com/ja-jp/services/cognitive-services/face/

<img width="278" alt="04.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/bce8e2c5-5db3-5077-79de-5d90032d5f0f.png">

こんな感じ
<img width="369" alt="05.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/23505967-b85f-82b4-f037-a69fde424fb7.png">

分かりにくいけど、まん中あたりに API Testing Consoleがあります。
<img width="199" alt="06.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/2f27ce8b-35f8-a309-3b34-2689103a66b6.png">

保存しておいたキー１と画像URLを入れてみます
<img width="271" alt="07.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/2d54836a-2c4d-4ff6-5250-a5da07623179.png">

リクエスト送信
<img width="341" alt="08.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/dc7a2746-1800-2d1a-7a2c-6838cbf24300.png">

出来たけどなんか結果が少ない...
<img width="342" alt="09.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/79389/8493a9e8-5764-9867-a72a-15aa98d49029.png">

こんな感じでemotionも指定してみます
<img width="273" alt="10.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/b28ddb42-c02b-29ad-859c-977275c9a51e.png">

出来ました！
<img width="275" alt="11.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/79389/e7306842-7bb0-dd1c-12bc-fd08a1f4d9e9.png">

# 2.Postman準備
API Testing Consoleは便利ですが、いつもこんな便利なものがAPI仕様とセットで提供されているとは限りません。そんな時はPostmanで同じようなテストをしてみましょう。

https://www.getpostman.com/
<img width="468" alt="20.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/72cb10e3-3c3d-fc7e-1b40-3ac93a9d113e.png">

会社提供PCなどでアプリがインストール出来ない場合は、ChromeApp版を入れましょう。

"Chrome"ボタンをクリック
<img width="500" alt="21.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/1bd53ab6-96f0-fe3b-a3b6-b13aee5f6295.png">

"Chromeに追加をクリック
<img width="185" alt="22.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/a682be83-3c08-b520-1c3e-6b3c8e1ad05b.png">

追加できました。
<img width="379" alt="23.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/f77ab72d-d301-8279-5bf2-676d73c20728.png">

(注)インストール直後はPostmanが起動していますが、インストール済のPostmanを起動するときは、最近のChromeはアプリランチャーがなくなったので、この図のように
```
chrome://apps
```
から起動してください(アプリランチャーなくなってて焦った:sweat:)

ユーザ登録は「後で」
<img width="438" alt="24.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/de905af2-4d6f-489a-7b33-bb98437aee57.png">

これでPostmanが使える状態です
<img width="468" alt="25.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/63f61638-a838-4837-0833-48ee2c77db9b.png">

# 3.PostmanでMS Face API

Postman使ってAPI Testing Consoleと同じことやってみます

"POST"を指定してエンドポイントURLを入れます（選んだRegionでURLの頭が異なります）

```
https://southeastasia.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=emotion
```
<img width="551" alt="31.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/d377def7-bd57-86c3-c95c-a287319aab15.png">

Header指定します。Ocp-Apim-Subscription-Keyにキー１入れます。
```
Ocp-Apim-Subscription-Key
Content-Type
application/json
```
<img width="401" alt="32.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/27a3c77f-ee8f-0cab-9918-2e9dd7e61074.png">

Bodyを"row"で指定して画像URLを入れます。

```
{

	"url":"http://www.bibeaute.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-14-at-1.18.03-PM.png"
}
```
<img width="397" alt="034.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/ca427b31-ee05-fc42-a496-86d02ac1c095.png">

"SEND"すると下に結果が表示されます
<img width="230" alt="035.PNG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/a463e515-49fe-ab45-deb9-658cf4066291.png">

おしまい。

Enjoy :tada: