LINEで使える「名刺リーダーbot」を完全ノーコードで自作してみた話（Power Automate × LINE Messaging API）

※本記事は「[LINE DC Advent Calendar 2021 (クリスマスプレゼント付き) Advent Calendar 2021](https://qiita.com/advent-calendar/2021/linedc) 19日目」の記事です。

こんにちわ、 [のりじ](https://twitter.com/nori790822) です。
[LINE Messaging API](https://developers.line.biz/ja/services/messaging-api/) を利用したLINE Botはノーコードでも作ることができます。
今回は[Power Automate](https://powerautomate.microsoft.com/ja-jp/)を利用して、LINEで名刺の画像を送信（LINEのカメラで撮影した画像も可）すると名刺の情報を解析してGoogleスプレッドシートに記載するLINE Botを完全ノーコードで作ってみたので、その方法を紹介します。

# 0. 事前準備

今回は結果をGoogleスプレッドシートに記載します。

![linead-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/5b44aee2-735c-1496-85d7-506df177c899.jpeg)

図のような項目を記載したシート（今回のファイル名は「名刺一覧」）を事前に用意しておきます。

また、今回はPower Platformで利用できるAI機能「AI Builder」のカスタムモデルを利用して画像を解析します。
「AI Builderの利用方法は以下の記事にしていますので、参考にされてください。

- [AI Builderの「カスタムモデル」で日本語対応の「名刺リーダー」を作る](https://qiita.com/nori790822/items/8a2303adace8dde68fab)

# 1. LINE Messaging APIの設定

![linead-02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/e2a1a101-8aa8-dd6e-8c44-15ff66c84670.jpeg)

[LINE Developers](https://developers.line.biz/ja/) のページにアクセスし、新規のLINE Messaging APIを作成します。

![linead-03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/afa232ec-2c22-522e-e942-f779e567dc38.jpeg)

詳細な作成方法は今回は割愛しますが、Messaging APIページの設定が図のようになるようにしておきます。

# 2. Power Autoamteでワークフローを作成

![linead-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/e1f495c5-9432-b01e-d024-09769db1000a.jpeg)

ワークフローの全体図はこのような形になります。
どのような処理を行っているかと言うと、LINEで名刺画像を送信するとAI Builderで画像解析し、分析結果をGoogleスプレッドシートに記載・LINEにメッセージを返信します。

# 2-1. トリガーの設定

まずトリガーを設定します。
検索窓に「要求」と入力し、「HTTP要求の受信時」をクリックします。

![linead-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/eeeb7467-2394-3000-442f-4625567e27cb.jpeg)

赤枠内の「要求本文のJSONスキーマ」は以下の内容をコピペします。

```

{
    "properties": {
        "events": {
            "items": {
                "message": {
                    "properties": {
                        "address": {
                            "type": "string"
                        },
                        "fileName": {
                            "type": "string"
                        },
                        "fileSize": {
                            "type": "number"
                        },
                        "id": {
                            "type": "string"
                        },
                        "latitude": {
                            "type": "number"
                        },
                        "longitude": {
                            "type": "number"
                        },
                        "packageId": {
                            "type": "string"
                        },
                        "stickerId": {
                            "type": "string"
                        },
                        "text": {
                            "type": "string"
                        },
                        "title": {
                            "type": "string"
                        },
                        "type": {
                            "type": "string"
                        }
                    },
                    "type": "object"
                },
                "postback": {
                    "properties": {
                        "data": {
                            "type": "string"
                        }
                    },
                    "type": "object"
                },
                "properties": {
                    "replyToken": {
                        "type": "string"
                    },
                    "source": {
                        "properties": {
                            "groupId": {
                                "type": "string"
                            },
                            "type": {
                                "type": "string"
                            },
                            "userId": {
                                "type": "string"
                            }
                        },
                        "type": "object"
                    },
                    "timestamp": {
                        "type": "number"
                    },
                    "type": {
                        "type": "string"
                    }
                },
                "type": "object"
            },
            "type": "array"
        }
    },
    "type": "object"
}

```

「HTTP POSTのURL」の部分は、ワークフローを保存すると自動で表示されます。

# 2-2. アクションの設定

「アクションの追加」をクリックし、検索窓に「コントロール」と入力。

![linead-06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/b705ca6b-1f39-febd-801b-6a798c107517.jpeg)

表示される一覧の中から「Apply to each」をクリックします。

![linead-07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/48c48bb9-9279-be95-3f0e-c2e2171c3a5e.jpeg)

「動的なコンテンツ」の中の「events」を選択します。

![linead-08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/35b1c479-94e9-3fde-07ff-b600cb06a870.jpeg)

次に検索窓に「HTTP」と入力して、HTTPコネクタを選択します。
以下の内容を入力します。

1. 方法：「GET」を選択
2. URI：「https://api-data.line.me/v2/bot/message/@{items('Apply_to_each')?['message']?['id']}/content 」を入力
3. ヘッダー：この部分は[LINE Developers](https://developers.line.biz/ja/) のMessaging APIページの下方にある「チャネルアクセストークン」の内容をコピペ

![linead-09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/2b166ac9-1d69-ca95-0bb6-b25af9c9434b.jpeg)

検索窓に「AI Builder」と入力し、一覧の中から「予測」をクリック。

![linead-010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/17698a51-e63c-cbd0-d839-c14c98007056.jpeg)

「モデル」は、AI Builderで作成したものを選択します。
HTTPコネクタ「動的なコンテンツ」の内容を選択して、図のような表示になるようにします。

![linead-012.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/11210f60-26b3-a856-e086-eb02d3083cd8.jpeg)


検索窓に「Google」と入力し、「Googleスプレッドシート」をクリック。
一覧の中から「行の挿入」をクリック。
初めてGoogleスプレッドシートを利用する場合は、サインインを求められます。

![linead-011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/24dfc7b6-1a30-d5be-4dba-afa5f8aa75af.jpeg)

サインインが出来ると、スプレッドシートとシートを選択します。
「0.事前準備」で作成した項目が自動で表示されるので、「予測」の動的コンテンツの中から各項目の最後が「Value」となっているものを選択していきます。

![linead-013.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/13c3c65f-d9e0-d223-0c54-55fb83bc8dc8.jpeg)

検索窓に「データ操作」と入力し、一覧から「作成」をクリック。

![linead-014.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/62ae1408-721b-2cb2-92c9-b7f2b3b274bb.jpeg)

「入力」の部分に図のような内容を入力します。

![linead-016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/e97eebdc-973c-a8e2-af9c-f8104649597b.jpeg)

検索窓に「HTTP」と入力し、HTTPコネクタを選択。
以下の内容を入力します。

1. 方法：「POST」を選択
2. URI：「https://api.line.me/v2/bot/message/reply 」を入力
3. ヘッダー：この部分は[LINE Developers](https://developers.line.biz/ja/) のMessaging APIページの下方にある「チャネルアクセストークン」の内容をコピペ
4. 以下の内容を入力

```
{
  "messages": [
    {
      "text": "@{outputs('作成')}",
      "type": "text"
    }
  ],
  "replyToken": @{items('Apply_to_each')?['replyToken']}
}
```

以上の内容を保存すれば、ワークフローは完成です。

# 3. 実行結果

では、LINEのルームから名刺画像を送信してみます。

![linead-017.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/69794565-563d-159e-ce0b-2b6e66bd7cec.jpeg)

半角スペースは多少入っていますが、名刺の内容はキチンと読み取れています。

![linead-018.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103396/0681dab5-fcb0-731f-379b-8d267e18ac3a.jpeg)

また、Googleスプレッドシートにも名刺の内容が図のように問題なく入力されました。

# 最後に

このように、サービスを組み合わせることでノーコードでも簡単にLINEで使える「名刺リーダーbot」が作成できました！
今回は横向きの名刺画像の学習しか行っていないため縦向きの名刺には対応できませんが、ノーコードで専門知識が無くても利用できる「AI Builder」も日本語解析の精度がかなりよくなっていると思います。

ノーコードサービスをうまく活用すると、このようなLINE BOTが手軽にできるので、ぜひチャレンジしてみてください！