【ハンズオン】写真を送るとAIが分析してくれるLINE Botを1時間で作ってみよう

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VSFCXF3V42"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-VSFCXF3V42');
</script>

# 【ハンズオン】写真を送るとAIが分析してくれるLINE Botを1時間で作ってみよう

これはハンズオンイベント[写真を送るとAIが分析してくれるLINE Botを1時間で作ってみよう ~プロトアウト授業体験会~](https://protoout.connpass.com/event/203577/)の資料です。


# 1.オウム返しBotを作ろう

## 1.1.この章のゴール

- 送信した文字をそのまま返す`オウム返しBot`を作成する

### 1.1.1.完成イメージ

<iframe width="414" height="736" src="https://www.youtube.com/embed/BIkEuLy2tAs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 1.2.ここからは話を聞くタイム

<a href="https://gyazo.com/6529781dd996c64228080c383aa4a325"><img src="https://i.gyazo.com/6529781dd996c64228080c383aa4a325.png" alt="Image from Gyazo" width="500"/></a>

### 1.2.1.LINE Botとは？

最近では、チャットボットやツイートボットなど`Bot`と名前が付いているものがあります。

LINE Bot も上記の Bot の仲間で、プログラムが自動で返信してくれる LINE アカウントのことを指します。
LINE アプリとプログラムの連携には、LINE が提供している`Messaging API`を利用します。

#### 1.2.1.2.有名なLINE Bot

##### ユーザーから操作可能なタイプ

- JR 東日本 Chat Bot（[https://info.jreast-chat.com/](https://info.jreast-chat.com/)）
- ヤマト運輸（[https://www.kuronekoyamato.co.jp/ytc/campaign/renkei/LINE/](https://www.kuronekoyamato.co.jp/ytc/campaign/renkei/LINE/)）

##### 広告プッシュタイプ

- ユニクロ・GU（[http://official-blog.line.me/ja/archives/28533966.html](http://official-blog.line.me/ja/archives/28533966.html)）
- 楽天（[http://official-blog.line.me/ja/archives/24736939.html](http://official-blog.line.me/ja/archives/24736939.html)）

また最近、LINE Bot のユースケースが発表されました。LINE Bot を作る際に参考にしてみると良いと思います。

> LINE API UseCase - ビジネスの悩みをLINEを使って解決：https://lineapiusecase.com/ja/top.html

#### 1.2.1.3.なぜLINE Botを作るのか

##### 一般的なメリット

- ユーザーに利用してもらうときにアプリのインストールが不要（友達登録だけで OK！　簡単！）
- ユーザーへのプッシュ通知を簡単に送ることができる（量が多いとお金がかかる）

##### プロトタイピング観点でのメリット

- LINE のチャット画面を利用するので UI を最初から考える必要がなく、プロトタイプの価値の創造に注力できる。
  - 必要に応じて、凝った UI も実現できる（[FlexMessage](https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/)や[LIFF](https://developers.line.biz/ja/docs/liff/overview/)を利用）
- Node.js の SDK が公式に用意されており、UI からサーバーまでを JavaScript で書くことで、最小限の学習で作ることができる。

### 1.2.2.システム概要図

本ハンズオンでの登場人物は以下の 3 つです。  
主に、サーバーの部分のプログラムを編集していきます。

<a href="https://gyazo.com/1ceade2f10b784b68f3bed71efcf83e3"><img src="https://i.gyazo.com/1ceade2f10b784b68f3bed71efcf83e3.png" alt="Image from Gyazo" width="933"/></a>

#### 1.2.2.1.オウム返しBotのシステム概要図

`1. オウム返しBotを作ろう`では、LINE アプリから送信した文字列をサーバーで受け取り、LINE アプリにそのまま返すオウム返し Bot を作成します。

<a href="https://gyazo.com/ef380d63c53fba3e41b79216fb7f0070"><img src="https://i.gyazo.com/ef380d63c53fba3e41b79216fb7f0070.png" alt="Image from Gyazo" width="822"/></a>

#### 1.2.2.2.感情分析AI+LINE Botのシステム概要図

`2. 感情分析AIと組み合わせよう`では、LINE アプリから送信した画像を、Azure Face API に送信し感情分析します。  
その結果をサーバーで変換して、LINE アプリに結果を表示します。

<a href="https://gyazo.com/221d9176e00f46fb5923f0c4944e6274"><img src="https://i.gyazo.com/221d9176e00f46fb5923f0c4944e6274.png" alt="Image from Gyazo" width="987"/></a>

## 1.3.ここからは手を動かすタイム

<a href="https://gyazo.com/3600fb35b96dcd212cc0d4b6f3240e74"><img src="https://i.gyazo.com/3600fb35b96dcd212cc0d4b6f3240e74.png" alt="Image from Gyazo" width="500"/></a>

### 1.3.1.LINE Botを登録しよう

LINE Developers と呼ばれるサイトから LINE Bot を登録できるので作業していきます。

LINE Developers を開き、ログインします。
→ https://developers.line.biz/ja/

<a href="https://gyazo.com/55926be4e43791a4d30a2c4fa35b77c1"><img src="https://i.gyazo.com/55926be4e43791a4d30a2c4fa35b77c1.png" alt="Image from Gyazo" width="912"/></a>

<a href="https://gyazo.com/6921026259dc0cacb200097e82340289"><img src="https://i.gyazo.com/6921026259dc0cacb200097e82340289.png" alt="Image from Gyazo" width="912"/></a>

ログインできたら、プロバイダーの`作成`をクリックします。

<a href="https://gyazo.com/ef306d3ca442a7a8df95cce418778b57"><img src="https://i.gyazo.com/ef306d3ca442a7a8df95cce418778b57.png" alt="Image from Gyazo" width="1249"/></a>

プロバイダー名を入力し、`作成`をクリックします（名前は好きなもので OK です）。

<a href="https://gyazo.com/718446885e86eb2f547379fb63fbbd59"><img src="https://i.gyazo.com/718446885e86eb2f547379fb63fbbd59.png" alt="Image from Gyazo" width="1249"/></a>

Messaging API を作成します。

<a href="https://gyazo.com/ca20e71a634a089a5ce80aeda3dd065a"><img src="https://i.gyazo.com/ca20e71a634a089a5ce80aeda3dd065a.png" alt="Image from Gyazo" width="1249"/></a>

必要な項目を入力し、`作成`をクリックします。

| 項目 | 内容 | 備考 |
| -- | -- | -- |
| プロバイダー | 先程作成したものを選択 | -- |
| チャネル名 | 好きな名前 | Bot名になります。`LINE`という文字は入れられないので注意。 |
| チャネル説明 | チャネルの説明 | -- |
| 大業種 | 適当に選択 | -- |
| 小業種 | 適当に選択 | -- |

<a href="https://gyazo.com/6a8e7227b84a5433e3d1f5a5c673c5ed"><img src="https://i.gyazo.com/6a8e7227b84a5433e3d1f5a5c673c5ed.png" alt="Image from Gyazo" width="1249"/></a>

<a href="https://gyazo.com/378b1d61ba94943527c9af268b1ec0d6"><img src="https://i.gyazo.com/378b1d61ba94943527c9af268b1ec0d6.png" alt="Image from Gyazo" width="1249"/></a>

<a href="https://gyazo.com/7b46e4c918db445c98c876a175c975d4"><img src="https://i.gyazo.com/7b46e4c918db445c98c876a175c975d4.png" alt="Image from Gyazo" width="1249"/></a>

<a href="https://gyazo.com/ce7837928b7b873d9ec2d48e4a5fa9cc"><img src="https://i.gyazo.com/ce7837928b7b873d9ec2d48e4a5fa9cc.png" alt="Image from Gyazo" width="1249"/></a>

こんな画面が表示されれば登録完了です。

<a href="https://gyazo.com/331c4e70599ed34ffb735ea0c9b5a772"><img src="https://i.gyazo.com/331c4e70599ed34ffb735ea0c9b5a772.png" alt="Image from Gyazo" width="1134"/></a>

QR コードを LINE アプリで読み取り、友達登録しましょう。

<a href="https://gyazo.com/a59294c0b4135a4bfb2a3f40fc5d6f9b"><img src="https://i.gyazo.com/a59294c0b4135a4bfb2a3f40fc5d6f9b.png" alt="Image from Gyazo" width="1134"/></a>

<a href="https://gyazo.com/1e6049acab5fcc1a83f73000949701f6"><img src="https://i.gyazo.com/1e6049acab5fcc1a83f73000949701f6.png" alt="Image from Gyazo" width="400"/></a>

### 1.3.2.Gitpodを開こう

Gitpod は、オンライン利用できるエディタです。

以下の URL を開きましょう。  
https://gitpod.io/#https://github.com/tmitsuoka0423/line-bot-azure-face-api-handson

GitHub アカウントでログインします。

<a href="https://gyazo.com/14aca92f43ed9cfa88f3484178124d0d"><img src="https://i.gyazo.com/14aca92f43ed9cfa88f3484178124d0d.png" alt="Image from Gyazo" width="1000"/></a>

<a href="https://gyazo.com/21ef753c6e49040badfcc0442fcc1298"><img src="https://i.gyazo.com/21ef753c6e49040badfcc0442fcc1298.png" alt="Image from Gyazo" width="1000"/></a>

このような画面が表示されます。

<a href="https://gyazo.com/d8ef262a41e320c525d51762be79a8b6"><img src="https://i.gyazo.com/d8ef262a41e320c525d51762be79a8b6.png" alt="Image from Gyazo" width="1000"/></a>

Gitpod の準備はこれで OK です。  
オウム返し Bot を動かす準備を進めていきましょう！

### 1.3.3.オウム返しBotを動かしてみよう

Gitpod 上でコードを編集しましょう。  
LINE Bot の設定を追記する必要があるので編集していきます。

サイドバーから`index.js`を開き、`チャネルシークレット`・`チャネルアクセストークン`の設定箇所までスクロールします。

<a href="https://gyazo.com/54036709b6af66f45ac166a2862b4345"><img src="https://i.gyazo.com/54036709b6af66f45ac166a2862b4345.png" alt="Image from Gyazo" width="1000"/></a>

`チャネルシークレット`・`チャネルアクセストークン`は[LINE Developers](https://developers.line.biz/ja/)のサイトから取得できます。

先程作成したチャネルを開き、`Basic settings`タブ・`Messaging API`タブからそれぞれ、`チャネルシークレット`・`チャネルアクセストークン`をコピーしてきます。

<a href="https://gyazo.com/f1660c511e41f7ec87132b5d30e70f8e"><img src="https://i.gyazo.com/f1660c511e41f7ec87132b5d30e70f8e.png" alt="Image from Gyazo" width="1000"/></a>

<a href="https://gyazo.com/16624ba230246f77b31fccb6ae650061"><img src="https://i.gyazo.com/16624ba230246f77b31fccb6ae650061.png" alt="Image from Gyazo" width="1000"/></a>

入力するとこのようになります。  
(シークレットキーとアクセストークンの値は人によって異なります)

> `注意！`  
> シークレットキーとアクセストークンは公開しないようにしましょう。  
> Botを悪用されるリスクがあります。

<a href="https://gyazo.com/1ad95b14a073bb15cb2e3b687cf9bb8a"><img src="https://i.gyazo.com/1ad95b14a073bb15cb2e3b687cf9bb8a.png" alt="Image from Gyazo" width="1122.68"/></a>

ターミナルに`node index.js`と入力して、`Enter`を押します。

<a href="https://gyazo.com/0cd665b2856038452f724002cad15e24"><img src="https://i.gyazo.com/0cd665b2856038452f724002cad15e24.png" alt="Image from Gyazo" width="1000"/></a>

`Make Public`をクリックします。

<a href="https://gyazo.com/c4ef4785b2d3f857aa1bce0fe523b640"><img src="https://i.gyazo.com/c4ef4785b2d3f857aa1bce0fe523b640.png" alt="Image from Gyazo" width="1000"/></a>

`Open Ports`タブの`Open Browwer`をクリックします。

<a href="https://gyazo.com/4fc6b6d4917879ba10e28f129e7d2cd4"><img src="https://i.gyazo.com/4fc6b6d4917879ba10e28f129e7d2cd4.png" alt="Image from Gyazo" width="1000"/></a>

新しいタブが開くので、そのページの URL をコピーし、Bot チャネルの`Webhook URL`にペーストします。

<a href="https://gyazo.com/afa573e55291365780c8ee43b88682b6"><img src="https://i.gyazo.com/afa573e55291365780c8ee43b88682b6.png" alt="Image from Gyazo" width="1000"/></a>

接続確認をします。  
`Verify`をクリックして、`Success`と表示されれば OK です。

<a href="https://gyazo.com/a8a87743e1d9b02fdd7b1936070d13c0"><img src="https://i.gyazo.com/a8a87743e1d9b02fdd7b1936070d13c0.png" alt="Image from Gyazo" width="974"/></a>

<a href="https://gyazo.com/084611d55d08bb89b44ba163097932bf"><img src="https://i.gyazo.com/084611d55d08bb89b44ba163097932bf.png" alt="Image from Gyazo" width="974"/></a>

実際に LINE で動作確認してみましょう。  
Bot ページに表示されている QR コードを読み取り、Bot と友達になってから、適当に文字を送ってみましょう。

<iframe width="414" height="736" src="https://www.youtube.com/embed/BIkEuLy2tAs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

オウム返し Bot の作成は以上で完了です！  

### 1.3.4.(任意)自動応答メッセージをオフにする

LINE Bot はデフォルトでは、`あいさつメッセージ`と`応答メッセージ`がオンになっています。  
この設定を変更しましょう。

Messaging API 設定タブ > 応答メッセージ > `編集`をクリックし、LINE 公式アカウント設定画面を開きます。

<a href="https://gyazo.com/b9ba1653be88c67ff0661251c545ba8f"><img src="https://i.gyazo.com/b9ba1653be88c67ff0661251c545ba8f.png" alt="Image from Gyazo" width="1076"/></a>

不要なメッセージをオフにします。

<a href="https://gyazo.com/bd8567c7e1c492642e61e31fef9390b2"><img src="https://i.gyazo.com/bd8567c7e1c492642e61e31fef9390b2.png" alt="Image from Gyazo" width="1076"/></a>

これでオウム返しだけが返ってくるようになりました。

### 1.3.5.(課題)オウム2倍返しBOTを作ってみよう

完成イメージ

<a href="https://gyazo.com/472f5b31bf7d3ab224ffdece712b05b1"><img src="https://i.gyazo.com/472f5b31bf7d3ab224ffdece712b05b1.png" alt="Image from Gyazo" width="437"/></a>

### 1.3.6.(課題)オウム返しBotにキャラ付けしよう

NARUTO 風

<a href="https://gyazo.com/ed3c6c6db6dc37f429d698aa1c6b41de"><img src="https://i.gyazo.com/ed3c6c6db6dc37f429d698aa1c6b41de.png" alt="Image from Gyazo" width="441"/></a>

## 1.4.まとめ

- LINE Developers から LINE Bot のチャンネルを作成し、友達登録しました。
- LINE アプリ⇔Express サーバーでオウム返し Bot を作成しました。

<a href="https://gyazo.com/ef380d63c53fba3e41b79216fb7f0070"><img src="https://i.gyazo.com/ef380d63c53fba3e41b79216fb7f0070.png" alt="Image from Gyazo" width="822"/></a>

次は AI のサービスの1つである`Face API`と組み合わせていきます。

> ！！注意！！  
> 後で使うので、Gitpodのタブは**閉じない**ようにしましょう！

# 2.感情分析AIと組み合わせよう

## 2.1.この章のゴール

- LINE Bot と Azure Face API を組み合わせて、感情分析 Bot を作成する

### 2.1.1.完成イメージ

<iframe width="414" height="736" src="https://www.youtube.com/embed/5tFfPfBr-HU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 2.1.2.システム概要図

<a href="https://gyazo.com/221d9176e00f46fb5923f0c4944e6274"><img src="https://i.gyazo.com/221d9176e00f46fb5923f0c4944e6274.png" alt="Image from Gyazo" width="987"/></a>

## 2.2.ここからは話を聞くタイム

<a href="https://gyazo.com/6529781dd996c64228080c383aa4a325"><img src="https://i.gyazo.com/6529781dd996c64228080c383aa4a325.png" alt="Image from Gyazo" width="500"/></a>

### 2.2.1.Microsoft Azure とは？

> 公式サイトはこちら：https://azure.microsoft.com/ja-jp/

ざっくり説明します。

- Microsoft が提供しているクラウドサービスのこと
- 200 以上のサービスが提供されている
- AI・機械学習系のサービスも充実している

今日は Azure のサービスの内、AI を提供しているサービスである`Cognitive Service`の`Face API`を利用します。

### 2.2.2.Face APIの紹介

> 公式ドキュメントはこちら：https://azure.microsoft.com/ja-jp/services/cognitive-services/face/

`Face API`には大きく分けて 3 つの機能が提供されています。

- 顔検出
- 顔認証
- 感情認識

それぞれについて簡単に説明します。

#### 2.2.2.1.顔検出

<a href="https://gyazo.com/96883a0d6cec3835d1dd226f2787122f"><img src="https://i.gyazo.com/96883a0d6cec3835d1dd226f2787122f.png" alt="Image from Gyazo" width="1308"/></a>

> 1人以上の人間の顔と各種の属性(年齢、感情、ポーズ、笑顔、顔ひげなど)を検出できます。  
> また、画像内の顔ごとに27個の特徴点が抽出されます。

#### 2.2.2.2.顔認証

<a href="https://gyazo.com/b95cfdb0061bed0eb926aa9340247015"><img src="https://i.gyazo.com/b95cfdb0061bed0eb926aa9340247015.png" alt="Image from Gyazo" width="1081"/></a>

> 2つの顔が同一人物のものである可能性を検証し、信頼度スコアを取得します。

#### 2.2.2.3.感情認識

<a href="https://gyazo.com/94e6036245e1a74871c1720903da2455"><img src="https://i.gyazo.com/94e6036245e1a74871c1720903da2455.png" alt="Image from Gyazo" width="1286"/></a>

> 怒り、軽蔑、嫌悪感、恐怖、喜び、中立、悲しみ、驚きなど、認識された表情を検出します。

`Face API`は、複雑なプログラミングをせずに利用できる**API**として提供されています。

### 2.2.3.ここまでのまとめ

- Azure とは、Microsoft が提供しているクラウドサービスのこと。
- Azure の AI・機械学習系のサービスの 1 つとして、**感情分析AI**が提供されている。
- 感情分析 AI は**API**として提供されているので、簡単にプロダクトに組み込める。

## 2.3.ここからは手を動かすタイム

<a href="https://gyazo.com/3600fb35b96dcd212cc0d4b6f3240e74"><img src="https://i.gyazo.com/3600fb35b96dcd212cc0d4b6f3240e74.png" alt="Image from Gyazo" width="500"/></a>

### 2.3.1.Face APIを使ってみよう

#### 2.3.1.1.Azureポータルにログインする

Azure ポータルを開きます。  
https://portal.azure.com/

ログインし、以下のようなページが表示されれば OK です。

<a href="https://gyazo.com/9c41bc6e713573818c8a2086a6e204be"><img src="https://i.gyazo.com/9c41bc6e713573818c8a2086a6e204be.png" alt="Image from Gyazo" width="1024"/></a>

Face API のリソースを作成します。

<a href="https://gyazo.com/506f1466fe43354518e43cc5a3bd24fa"><img src="https://i.gyazo.com/506f1466fe43354518e43cc5a3bd24fa.png" alt="Image from Gyazo" width="1024"/></a>

<a href="https://gyazo.com/5201c4d4037788c001d79f1cdfef8725"><img src="https://i.gyazo.com/5201c4d4037788c001d79f1cdfef8725.png" alt="Image from Gyazo" width="1024"/></a>

#### 2.3.1.2.リソースグループを作成する

> 既にリソースグループを作成している方は作成不要です

リソースグループの`新規作成`をクリックし、リソースグループ名`handson-20210320`を入力します。

<a href="https://gyazo.com/cd8c999ccca54a34eba230c44e926a48"><img src="https://i.gyazo.com/cd8c999ccca54a34eba230c44e926a48.png" alt="Image from Gyazo" width="1024"/></a>

<a href="https://gyazo.com/199465814a832fa28eb3c97955c9eb48"><img src="https://i.gyazo.com/199465814a832fa28eb3c97955c9eb48.png" alt="Image from Gyazo" width="1024"/></a>

リソースグループが作成されました。

<a href="https://gyazo.com/c9cb77de2d96a1974c24eaed0b967e9c"><img src="https://i.gyazo.com/c9cb77de2d96a1974c24eaed0b967e9c.png" alt="Image from Gyazo" width="1024"/></a>

#### 2.3.1.3.Face APIのリソースを作成する

残りの項目を埋めて、`確認および作成`をクリックします。

| 項目 | 値 | 備考 |
| -- | -- | -- |
| リージョン | 東日本 | 一番近い`東日本`を選択します。 |
| 名前 | `handson-{名前}-20210320` | ユニークな名前をつける必要があります。今日は名字を入れましょう。 |
| 価格レベル | `Free F0` | 無料のものを選択します |

> 同じサブスクリプションでは、無料のFace APIは一つしか作成できません。  
> 既に作成済みの場合はそちらを利用しましょう。  
> サブスクリプションを新しく作成してもOKです。

<a href="https://gyazo.com/f574fe4dc34f2111a5993def294400e5"><img src="https://i.gyazo.com/f574fe4dc34f2111a5993def294400e5.png" alt="Image from Gyazo" width="1024"/></a>

<a href="https://gyazo.com/0a4485f141306087f5bc4f6273f04eb8"><img src="https://i.gyazo.com/0a4485f141306087f5bc4f6273f04eb8.png" alt="Image from Gyazo" width="1024"/></a>

デプロイが完了したら、`リソースに移動`をクリックします。

<a href="https://gyazo.com/bd110a382065d4c69ea82a7b41a9dc0c"><img src="https://i.gyazo.com/bd110a382065d4c69ea82a7b41a9dc0c.png" alt="Image from Gyazo" width="1024"/></a>

`キー1`と`エンドポイント`をコピーします。

<a href="https://gyazo.com/199c26da328160a466584e4f420b3f69"><img src="https://i.gyazo.com/199c26da328160a466584e4f420b3f69.png" alt="Image from Gyazo" width="1034"/></a>

### 2.3.2.Face APIとLINE Botを組み合わせよう

#### 2.3.2.1.コードにFace APIのキー・エンドポイントを記入する

Gitpod のタブを開きます。

> Gitpodを一度閉じてしまった人は、[ここ](https://gitpod.io/#https://github.com/tmitsuoka0423/line-bot-azure-face-api-handson)をクリックして再度開きましょう。  
> その際、LINE Developerコンソールから、`チャネルシークレット`と`チャネルアクセストークン`を再びコピーしてくる必要があります。

24 行目あたりにある、`faceKey`・`faceEndPoint`にそれぞれ、先程コピーした`キー1`・`エンドポイント`をペーストします。

<a href="https://gyazo.com/80f298f713ff96a00375a670ce6e6b5d"><img src="https://i.gyazo.com/80f298f713ff96a00375a670ce6e6b5d.png" alt="Image from Gyazo" width="1532"/></a>

こんな感じになれば OK です。

> `キー1`・`エンドポイント`の内容は人によって変わるので注意。

<a href="https://gyazo.com/aa93ee89377d1cd8d9ac5bb68cfa88bb"><img src="https://i.gyazo.com/aa93ee89377d1cd8d9ac5bb68cfa88bb.png" alt="Image from Gyazo" width="1089.152"/></a>

#### 2.3.2.2.Expressを再起動する

ターミナルをクリックし、`Ctrl + C`を押して、Express を一度停止させます。

<a href="https://gyazo.com/8357e06087a090b6d7eba35bc7b52b09"><img src="https://i.gyazo.com/8357e06087a090b6d7eba35bc7b52b09.png" alt="Image from Gyazo" width="1089.152"/></a>

`^C`が出ていれば停止できています。

<a href="https://gyazo.com/2b7b172dea88a6999a4e8600ca427ea4"><img src="https://i.gyazo.com/2b7b172dea88a6999a4e8600ca427ea4.png" alt="Image from Gyazo" width="1089.152"/></a>

ターミナルに`node index.js`と入力して、`Enter`を押します。

<a href="https://gyazo.com/0cd665b2856038452f724002cad15e24"><img src="https://i.gyazo.com/0cd665b2856038452f724002cad15e24.png" alt="Image from Gyazo" width="1000"/></a>

Express が起動していることを確認します。

<a href="https://gyazo.com/b50a862bf882e03edcf0fe5501d1e676"><img src="https://i.gyazo.com/b50a862bf882e03edcf0fe5501d1e676.png" alt="Image from Gyazo" width="1089.152"/></a>

以上で、感情分析 Bot の設定は終わりです。

### 2.3.3.感情分析Botを動かしてみよう

Bot に人の顔が写っている写真を送信してみましょう。  
感情が分析されて返ってきます。

<iframe width="414" height="736" src="https://www.youtube.com/embed/5tFfPfBr-HU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

以上で感情分析 Bot の作成はおしまいです！

## 2.4.まとめ

- Azure が提供している AI・機械学習系サービスである Face API を利用するため、Azure 上でリソースを作成しました。
- LINE Bot と Face API 組み合わせて、送った写真の感情分析を行う Bot を作成しました。

# 3. 後片付け

本ハンズオンで作成したリソースの削除方法を記載します。

## 3.1.LINE Botを削除する

[LINE Developersコンソール](https://developers.line.biz/ja/)で削除を行います。
削除したい LINE Bot を選択し、`チャネル基本設定 > チャネルの削除`から削除を行います。
<a href="https://gyazo.com/ad032c6c9d489de7048155b4933cc5fa"><img src="https://i.gyazo.com/ad032c6c9d489de7048155b4933cc5fa.png" alt="Image from Gyazo" width="1012"/></a>

<a href="https://gyazo.com/609188aec9f1f6ae7a59bcb3ee83aee7"><img src="https://i.gyazo.com/609188aec9f1f6ae7a59bcb3ee83aee7.png" alt="Image from Gyazo" width="1012"/></a>

<a href="https://gyazo.com/e6d7db454249fc2ae6356fd3242a28c6"><img src="https://i.gyazo.com/e6d7db454249fc2ae6356fd3242a28c6.png" alt="Image from Gyazo" width="1307"/></a>

<a href="https://gyazo.com/0ebff3d78fd4b77753bb8d8fe16a0f32"><img src="https://i.gyazo.com/0ebff3d78fd4b77753bb8d8fe16a0f32.png" alt="Image from Gyazo" width="1307"/></a>
これで LINE Bot を削除できました。

## 3.2.Face APIのリソースを削除する

Azure ポータルから削除を行います。

<a href="https://gyazo.com/00388c8dbccb154480632633d8d1e6b0"><img src="https://i.gyazo.com/00388c8dbccb154480632633d8d1e6b0.png" alt="Image from Gyazo" width="1085.088"/></a>

<a href="https://gyazo.com/9d8bf2b2b83945674bdf064fb88f170e"><img src="https://i.gyazo.com/9d8bf2b2b83945674bdf064fb88f170e.png" alt="Image from Gyazo" width="957.072"/></a>
今回作成した以外のものが**含まれていない**ことを確認し、`リソースグループの削除`をクリックします。
<a href="https://gyazo.com/6432d7e7eca5c80e9545e8b4e41a8e3e"><img src="https://i.gyazo.com/6432d7e7eca5c80e9545e8b4e41a8e3e.png" alt="Image from Gyazo" width="1129.792"/></a>
リソースグループ名を入力し、`削除`をクリックします。
<a href="https://gyazo.com/21b71105bd3d6ac20ef5fa6b640d67f2"><img src="https://i.gyazo.com/21b71105bd3d6ac20ef5fa6b640d67f2.png" alt="Image from Gyazo" width="1129.792"/></a>
削除処理が行われます（数分かかります。）。
<a href="https://gyazo.com/3f14d7f4872b1a6e28bd7edeb2a21e84"><img src="https://i.gyazo.com/3f14d7f4872b1a6e28bd7edeb2a21e84.png" alt="Image from Gyazo" width="1240.536"/></a>

<a href="https://gyazo.com/dd549bea8c5537a3c5a3e3f40559b807"><img src="https://i.gyazo.com/dd549bea8c5537a3c5a3e3f40559b807.png" alt="Image from Gyazo" width="1240.536"/></a>
リソースグループが削除されたことを確認して完了です。

# 4.アンケート回答

次回のハンズオンイベントの改善のため、アンケートにご協力ください。(3 分ほどで回答できます)
https://forms.gle/d2V4YxXbHvSrf66p9

提出頂いた方から、QA 用 Google Meet に移動 or 解散とします。

### ハンズオンへのご参加ありがとうございました！