LINE Bot を Bot Framework Composer でローコード開発する : その 5 画像の受け取りと外部サービスでの画像解析

[前回](https://qiita.com/kenakamu/items/efb880fa923a5596f882) は文字列以外のメッセージとして、スタンプの送受信や、画像の送信を見ていきました。今回はユーザーが送ってきた画像の受け取り方と、画像の解析、および結果の返信を行います。

# ユーザーからの画像を受け取る

まず、前回と同様にユーザーから送られる情報を確認します。

1\. メインダイアログの「Unknown intent」直後に「Send a response」を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/00d7de0e-e2ed-c55c-1025-a57806b63dc2.png)

2\. ボットを再起動して LINE クライアントから画像を送信。応答を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/a92a7d7e-044c-3cdd-e208-291eeb3a108c.png)

3\. contentUrl のアドレスをコピーして、Postman でデータ取得を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/63dc310d-5990-652c-e31a-fc0b321d2276.png)

上記の結果より LINE から画像を送ると以下の情報が取れることが分かりました。

- turn.activity.channelData.message.type が image
- turn.activity.attachments[0].contentUrl のアドレスで画像が取得できる

# Computer Vision の準備

画像を解析するために、Microsoft が提供する Cognitive サービスより [Computer Vision](https://azure.microsoft.com/ja-jp/services/cognitive-services/computer-vision/) を使います。

[Computer Vision](https://azure.microsoft.com/ja-jp/services/cognitive-services/computer-vision/) のページにあるデモで、機能を試せます。任意の写真を送って解析結果を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1d29cb2a-89c6-b5f9-b0e5-9bc37dcd4ae7.png)

実施は API 経由で利用するため、サービスを作成します。

1\. [Azure ポータル](https://portal.azure.com) より現在ボットがあるリソースグループを選択し、「追加」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/dfc88c20-608c-8257-280c-613b1d8218f8.png)

2\.「Computer Vision」で検索して、サービスを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/54e3c18b-0981-546c-504d-90406b21a114.png)

3\. 無償版である F0 を選択して「作成」。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/d0a20be6-25eb-c0c7-52a1-7f38390c838d.png)

4\. リソースが作成されたらリソースに移動し、キーとアドレスをコピーしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7a9b2cee-fcba-ac41-32e5-bbf0cd4c239b.png)

## Computer Vision を試す

1\. リソースの画面より「API コンソール」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ce35d772-ed2a-4c3c-914c-a817f9729f74.png)

2\. リソースを作成した地域をクリック。今回の場合は West US 2。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/5f4bfa30-0af7-183b-52ef-a668ba48a2c3.png)

3\. visualFeatures より「Description」、languageで「ja」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/5766cafd-bb50-978e-a8f1-1a4ee4a8e22b.png)

4\.「Ocp-Apim-Subscription-Key」に先ほど確認したキーを入力。リクエストのボディに画像のアドレスを設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/9f8fe335-8c78-99db-49d2-856a0b648899.png)

5\. 「HTTP Request」が実際に送信される内容。後ほど利用。画面一番下の「Send」をクリックし結果を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7ca3a15d-d48b-0f66-323d-7c698321246b.png)

# ダイアログの作成

受け取った画像を Computer Vision に送信し、結果を返すダイアログを作成します。

1\.「New Dialog」より「AnalyzeImageDialog」を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/662be42d-a26c-f141-7724-ccd107888f03.png)

2\. BeginDialog より「Access External resources」の「Send an HTTP request」アクションを追加。

3\.「POST」を選択し、アドレスを先ほどテストした画面より ```https://westus2.api.cognitive.microsoft.com/vision/v2.0/analyze?visualFeatures=Description&language=ja``` を張り付け。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/88810343-afd2-dbc8-098d-fb5f24d521e6.png)

4\. Body に以下 JSON を張り付け。

- first(): Common Expression の関数で、配列の中で一番初めのものを取得

```json
{
  "url": "${first(turn.activity.attachments).contentUrl}"
}
```

5\. ヘッダーも先ほどのテスト画面を参考に 2 つ追加。

- ContentType: application/json
- Ocp-Apim-Subscription-Key: Computer Vision のキー

6\. 結果を dialog.response で取得。形式は JSON のまま。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1b3f04db-c1cc-d8a8-d5f9-cc1e1d7ed03b.png)

7\. 応答送信のアクションを追加し、```- '${dialog.response}'``` を指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/0a1fc980-e3c2-1071-2e39-10d3569968f2.png)

これで解析結果が JSON として返ります。

# トリガーの作成

スタンプを取得した時同様、message.type で判定します。今後もパターンが増える可能性があるため、if/else で分岐していたものを switch/cases に変更しておきます。

1\. メインダイアログの「Unknown intent」を開き、既存の内容を一旦削除。その後「Branch: switch」を追加。「Condition」に ```turn.activity.channeldata.message.type``` を指定。また「Cases」には「sticker」と「image」を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7a0a3643-b337-c317-624a-5d0d70809570.png)

2\. default ブランチに応答の送信アクションを追加し、```- '${turn.activity.text}'``` を指定。また「sticker」ブランチ、「image」ブランチはそれぞれ対応するダイアログの開始を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/8d0326af-8ffa-0e91-e04a-194be120a30c.png)

# テスト

ボットを再起動して LINE クライアントより画像を送ります。結果無事帰ってくれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1afb8156-a20d-50cc-2816-a6dfed31901f.png)

# 応答メッセージの加工

現在結果が JSON のままである為、結果の返し方を変更します。

1\. AnalyzeImageDialog の BeginDialog より最後の応答送信アクションを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/535b7270-cff5-3988-9e7b-1645dc14637d.png)

2\. 中身を以下に変更。

```text
[Herocard   
    title = ${first(dialog.response.content.description.captions).text}
    subtitle = ${concat('確率:', first(dialog.response.content.description.captions).confidence)}
    text = ${concat('タグ:', join(dialog.response.content.description.tags, ','))}
    images = ${first(turn.activity.attachments).contentUrl}
]
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/e3da5c7c-4f41-f4b3-da49-107e0bdc1476.png)

# テスト

再度 LINE クライアントから写真を送信して、解析結果が変わることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/8959ec54-bf75-5d5f-7130-2b28aa8ae570.png)

# Custom Vision

Computer Vision はマイクロソフトが事前に作成したモデルを使いますが、カスタムビジョンを使うと、独自の解析モデルを使う事もできます。Composer からの呼び出し方はほぼ同じのため、興味があれば試してください。

以下の GitHub レポジトリに使い方を含めた情報があります。
[Microsoft Cognitive Services を利用した 画像分析アプリ (201906 版)](https://github.com/ayako/CogServicesVisionSamples_201906)

# まとめ

今回は画像の受け取り方法と外部サービスの呼び出しを見ていきました。画像は LINE プラットフォームから Bot Connector に自動で変換されているため、容易に取得できました。

外部 Web サービスについては、呼び出しの方法は簡単ですが、サービスごとにアドレスやヘッダー、ボディの内容が異なる他、戻り値も異なるため、サービスの使い方をよく調べることが必要となります。Postman などを活用しながら、API 連携をしてください。

[次の記事へ](https://qiita.com/kenakamu/items/a8f4882adbd57659cfd0)