Help us understand the problem. What is going on with this article?

写真を送ると文字起こしして返信してくれる LINE Bot ”OCR ちゃん”

More than 1 year has passed since last update.

送信した画像ファイルを解析して、OCR 処理した結果をトークで返信してくれる LINE Bot を Microsoft FLOW でサクっと作ります。

コーディング不要です。

image.png

画像解析は Microsoft Azure Cognitive Services の Computer Vision を使います。
https://azure.microsoft.com/ja-jp/services/cognitive-services/computer-vision/

LINE Developers コンソール

LINE Messaging API を利用するため、LINE Developers コンソールでチャネルを作成しましょう。こちらのドキュメントを参照します。

TITLE: Messaging APIを利用するには
URL: https://developers.line.biz/ja/docs/messaging-api/getting-started/

"自動応答メッセージ" は "利用しない" に設定します。
image.png

Microsoft Flow

Microsoft Flow で Bot を作成します。
https://flow.microsoft.com/ja-jp/

Microsoft Flow の概要や使い方はこちらが参考になります。
https://docs.microsoft.com/ja-jp/learn/modules/get-started-with-flow/

フローの作成

"HTTP 要求の受信時" をトリガーに指定します。
image.png

image.png

"サンプルのペイロードを使用してスキーマを生成する" をクリックします。

サンプルとして、こちらのドキュメントにあるペイロードを利用します。
https://developers.line.biz/ja/reference/messaging-api/

"Webhookイベントオブジェクトの例" を用います。

{
  "destination": "xxxxxxxxxx", 
  "events": [
    {
      "replyToken": "0f3779fba3b349968c5d07db31eab56f",
      "type": "message",
      "timestamp": 1462629479859,
      "source": {
        "type": "user",
        "userId": "U4af4980629..."
      },
      "message": {
        "id": "325708",
        "type": "text",
        "text": "Hello, world"
      }
    },
    {
      "replyToken": "8cf9239d56244f4197887e939187e19e",
      "type": "follow",
      "timestamp": 1462629479859,
      "source": {
        "type": "user",
        "userId": "U4af4980629..."
      }
    }
  ]
}

image.png

"+ 新しいステップ" をクリック。
image.png

"HTTP" をアクションに指定します。
image.png

こちらのドキュメントの情報を基に送信された画像を取得するため、"HTTP" アクションのパラメータを設定します。
https://developers.line.biz/ja/reference/messaging-api/#get-content

image.png

方法: GET
URI: https://api.line.me/v2/bot/message/{messageId}/content
ヘッダー:
Authorization Bearer {channel access token}

URI の {messageId} は、トリガーに指定した "HTTP 要求の受信時" に関連した動的なコンテンツから指定します。この指定により "Apply to each" が自動的に追加されます。

{channel access token} は LINE Developers Console で生成したアクセス トークンを記述します。

image.png

image.png

"アクションの追加" をクリックします。

"Computer Vision API" の "Optical Character Recognition (OCR) to Text" を指定します。
image.png

"Image Source" は "Image Content" を選択、"Image Content" は、前のアクションに指定した "HTTP" に関連した動的なコンテンツから "本文" を指定します。

image.png

"アクションの追加" をクリックします。
"HTTP" を次のアクションに指定します。

image.png

こちらのドキュメントの情報を基に "HTTP" アクションのパラメータを設定します。
https://developers.line.biz/ja/reference/messaging-api/#send-reply-message

image.png

方法: POST
URI: https://api.line.me/v2/bot/message/reply
ヘッダー:
Content-Type application/json
Authorization Bearer {channel access token}

{channel access token} は、前の HTTP アクションと同様です。

本文:
JSON ペイロードは、前述の URL のページの情報を基に記述します。

{
    "replyToken":"[replyToken]}",
    "messages":[
        {
            "type":"text",
            "text":"[text]}"
        }
    ]
}

[replyToken] と [text] は、"HTTP 要求の受信時" と "Optical Character Recognition (OCR) to Text" に関連した動的なコンテンツから指定します。

"保存" をクリックします。

"HTTP 要求の受信時" の HTTP POST の URL が生成されます。この URL を LINE Developers コンソールで "Webhook送信" を "利用する" に変更し、"Webhook URL" を記述します。

image.png

image.png

動作確認

image.png

LINE Developers の QR コードを読み取って、友達に追加します。

画像ファイルを送って、Bot から返信があることを確認します。

image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした