学生証と顔認証で本人確認してみる [1] 〜MS Azure、Face APIの利用準備をしよう〜

皆様初めまして。たてしきと申します。
大学の授業でRaspberry Piを使ったシステム構築を行うことになったのでログがてら方法を書いてみます。
## 追記 2021/06/04
こんなのやってたんですね。

https://qiita.com/official-events/5a0932fbeb1443ae1094

いいですね、~~AP~~AIの記事書くの。僕も早速タグつけておきます。
## どうしてやろうとした？
不審者が学生証拾って大学内入れたら怖いですよね。つまりそういうことさ(？)
まぁ、入口とかで顔含め本人確認できれば安心だよねってだけです。
## お品書き
・**学生証と顔認証で本人確認してみる [1] 〜MS Azure、Face APIの利用準備をしよう〜** ←いまここ！ 
・[学生証と顔認証で本人確認してみる [2] 〜Face APIにユーザーを覚えさせよう〜](https://qiita.com/Tateshiki0529/items/bd6c38cb193d65235d71) \:blush: <font color="Red">***New!***</font> \:blush:
・[学生証と顔認証で本人確認してみる [3] 〜Node-REDを使ってシステムを構築しよう〜](https://qiita.com/Tateshiki0529/items/638c5f63502e8e736c30) \:blush: <font color="Red">***New!***</font> \:blush:
・~~学生証と顔認証で本人確認してみる [4] 〜実際に使ってみよう〜 (仮)~~ (執筆中)

## まず初めに
今回のシステムの構想(？)はこんな感じです。
![フローチャート(?)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/4d18a00c-9ae2-7c58-cc2d-f85244cf2b2c.png)
FeliCaを読み込んだ際に画像を撮影、Microsoft Azure Face APIにて顔認証・ユーザー特定、残りはNode-REDですべてのシステムを構築します。
## 使うもの
- Raspberry Pi ×2 (FeliCa読み込み用、処理用) ※一つにまとめたかったんですけど…学校の備品なんで…
- FeliCaリーダ ×1 (FeliCa読み込み用のPiに接続)
- パソコン ×1 (DBサーバ、MQTTサーバ用) ※これもいつかは一つにまとめたい…
- 学生証 ×1 (FeliCa対応のやつ、Suicaとかでもいいね)
- **Webカメラ ×1 (一番大事だよね)**  
※カメラ忘れてたので追記しました。

## 手順
### 1. Microsoft Azure アカウントを作成する  
Azureのアカウントを作成します。作成方法はいろいろ調べる…というかガイドに沿って作成すればいいので割愛。ただクレカと電話番号が必要です。(今回は無料プランを使いますが)
### 2. Cognitive Serviceのアクティベート  
[ここ](https://portal.azure.com/#home)からAzureのホームへ。「リソースの作成」をクリック。
![Azure-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/b131e4fa-7adc-573d-d3f6-6374105190c4.png)
「Cognitive Services」  
と入力して検索。  
丸で囲った部分の「作成」をクリック。
![Azure-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/ebde4cde-9e79-2ac8-ee56-e3353812262e.png)
入力は適当に。「無料試用版」と「Standard S0」の選択だけお忘れなく。
![Azure-3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/5810edc3-6f01-8f54-7a0e-228e536d2ee0.png)
![Azure-3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/0bceb914-57ba-dc4a-93fa-fde176040c5a.png)
※授業名が「作るシステム」だったのでこの名前になってます…  
完成。リソースに移動しましょう。
![Azure-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/c2286cd7-d430-09ed-a29c-db309864fe41.png)
### 3. Face APIの設定
#### 3-1. キーとエンドポイントを取得
左メニューの「キーとエンドポイント」をクリック。  
![Azure-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/4f823e1a-1deb-7920-ca53-897c4be78009.png)
キー1を使います。キー2は予備用とかなんとか。
エンドポイントはこのURLを使います。
#### 3-2. 接続テスト
[Cognitive Services APIs Reference - Face - Detect](https://japaneast.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236/console)でテストしてみましょう。
今回はサンプルの画像として、[Generated Photos](https://generated.photos/)の画像を利用します。
![freeface.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/e68440a0-6223-b054-b3ca-779e72093ddc.png)
ダンディな男の人の写真ですね。
画像データは2種類の方法(URL, バイナリデータ)でアップロードできますが、テストではURLを利用します。
適当なサーバに画像を保存して(ここでは https://example.com/images 直下)、パラメータを指定します。
Host - Nameの欄は、「[resource name].cognitiveservices.azure.com」のほうを選択してください。
Resource Nameには先ほど控えたエンドポイントのcognitive～の前の固有ID(ここではtsukuru-system-faceapi)を入力します。
Headers - Content-Typeの欄は、今回のテストでは「application/json」で。
Ocp-Apim-Subscription-Keyの欄には、先ほど控えたキー1を入力。
Request bodyのurlに画像のパスを入力して(ここでは https://example.com/images/face.png )、「Send」をクリック。
![Azure-6-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/ddb3f319-5d9c-cb27-1313-cfa003e4af89.png)
![Azure-6-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/2b28ce55-9b7c-280c-15b2-f572ad267a66.png)
Response statusが「200 OK」になっていれば成功。返り値については後述します。
![Azure-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596729/d4d6245c-9af5-40eb-2a4e-7d28d60a6c42.png)
もし「400 Bad Request」になった場合は、画像のパスを確認してみて下さい。
「401 Bad Request」になった場合は、サブスクキーの入力がミスってます。
## お疲れさまでした
次の記事では、Face APIのトレーニングを行います。

前: なし
次: [学生証と顔認証で本人確認してみる [2] 〜Face APIにユーザーを覚えさせよう〜](https://qiita.com/Tateshiki0529/items/bd6c38cb193d65235d71)