【Make】LINE：Download a Message Attachment モジュールっていったい何？

## どんなモジュール？
![Download Message Attachment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904038/72810970-d167-edb4-28ae-b17c61f92035.png)
**「LINE：Download a Message Attachment」** は、ユーザーがLINEから送信した**画像、動画、音声、ファイルをダウンロード**します。

:::note warn
テキスト、ステッカー、絵文字はダウンロードできません。また、トーク画面から公式LINEアカウントへは直接ファイルの送信ができません。
:::

<details><summary><font color = "blue"> LINE公式アカウントへPDFファイルなどを送信する方法 </font></summary>

LINE公式アカウントから友だちにはファイル送信できるのに、
友だちからLINE公式アカウントへはファイル送信ができません。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904038/7e3df33f-3f89-7e22-0bdd-6cc49ac87f98.png)

送信しようとしても「＋」にファイルの項目が出てこないし、写真マーク　⇒「田」⇒「開く」でファイルを選択しても「読み込めないファイルです」と一瞬だけ表示されて閉じてしまいます。

そこで、**スマホからLINE公式アカウントへファイルを送信したい時の解決法** として、**「Keepメモ」を使う** 方法をご紹介します。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904038/d1cc5a0c-58e6-3b3b-cfa2-e997d298473b.png)

1. LINEアプリのホーム画面右上の **「Keepメモ」をタップ**
1. 左下「＋」マークから **「ファイル」** をタップ
1. 送信したいファイルを✔して右上の **「選択」** をタップ
1. 「Keepメモ」の画面にファイルが送信されているので長押しして **「転送」** をタップ
1. 送信したいLINE公式アカウントを選択して送信

これでLINE公式アカウント側にファイルを送ることができます。
</details>

## ダウンロードしたファイルの使い方例
別のモジュールを連携することで以下のような使い方ができます。
* 「Google Drive」や「Dropbox」モジュールを連携させ、ファイルをクラウド上に保存する
* 「Google Vartex AI(Gemini)」モジュールを使って、画像の内容をAIで読み取る
* Make 標準の 「Image」や「Cloudinary」モジュール を使って、画像をリサイズやトリミングする

## モジュールの設定方法
### 前提条件
* [LINE アプリ](https://developers.line.biz/console/ "LINE アプリ") がインストールされている
* [LINE Developers コンソール](https://line.me/ja/ "LINE Developers コンソール") に開発者アカウントがある
* ボット専用の [Messaging API チャネル](https://developers.line.biz/ja/docs/messaging-api/getting-started/ "Messaging API チャネル") を作成済み
* LINE アカウントをMakeに接続済み
* MakeのシナリオでLINE：「Watch Events」モジュールを設定済み

### 設定手順の概要
1. 「+」⇒「Add another module」をクリックして「LINE」の「Download a Message Attachment」モジュールを選択
1. 「Connection」で接続先を選択
1. 「Message ID」にLINEのWebhookを通じて受信した添付ファイルを対象に設定<br>![カーソルを当てると選択できる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904038/18c1e3fc-ba9f-fc0b-f507-ed8fb2e11fb5.png)

⇑　LINEのWebhookを通じて受信した添付ファイルを対象に設定する。

左の赤枠内の必須項目、「Message ID」に、右の赤枠 `Events[]` `Message` `Message ID` を選ぶことで、`Message ID` の右横の数字部分（送信された画像や動画に1つ1つ別の番号が自動で付けられる）を受け取って処理をする。

### 裏側ではこんなコードが送られているよ 
送信元(ユーザー)からLINEでメッセージを送ると、LINEプラットフォームでJSON形式の下のようなコードが生成されて、Make側に送られます。

**画像が送られた場合の例**
```json
{ // 画像を送った場合の例
    "destination": "xxxxxxxxxx",
    "events": [ // events という名前の配列の中の
        {
            "type": "message",
            "message": { // message というオブジェクトの
                "type": "image",
                "id": "354718705033693859", // id というキーを指定すると、その値であるたった１つ（一意）の　354718705033693859　が取り出せる
                "quoteToken": "q3Plxr4AgKd...",
                "contentProvider": {
                    "type": "line"
                },
                "imageSet": {
                    "id": "E005D41A7288F41B65593ED38FF6E9834B046AB36A37921A56BC236F13A91855",
                    "index": 1,
                    "total": 2
                }
            },
            "timestamp": 1627356924513,
            "source": {
                "type": "user",
                "userId": "U4af4980629..."
            },
            "webhookEventId": "01FZ74A0TDDPYRVKNK77XKC3ZR",
            "deliveryContext": {
                "isRedelivery": false
            },
            "replyToken": "7840b71058e24a5d91f9b5726c7512c9",
            "mode": "active"
        }
    ]
}
```
プログラミングの配列では左側のキー(key)を指定すると、右側の値(value)を取り出せるから
```PHP
"キー(key)":"値(value)",
"id":"354718705033693859",
```
`events` 配列の特定の要素の `message.id` を指定することで、そのイベントに関連するメッセージのID (`354718705033693859`) を取り出すことができます。

画像が送られた場合の例では `events[0].message.id` と指定していることになります。


## 扱える形式はこちら
* [写真](https://developers.line.biz/ja/reference/messaging-api/#image-message "写真")　`image` （JPEG、PNG）10MBまで
* [動画](https://developers.line.biz/ja/reference/messaging-api/#video-message "動画")　`video` （mp4）200MBまで
* [音声](https://developers.line.biz/ja/reference/messaging-api/#audio-message "音声")　`audio` （mp3、m4a）200MBまで
* ファイル　`file`（pdf、txt、docx、xlsx、pptx、csv など）
<font color = "red">（）内の形式は送信可能であることを確認済</font>

LINEで送信すると、保存された形式によって自動的に `image` や `video` などに振り分けられます。

上図１番左の「LINE：Watch Events」から「LINE：Download a Message Attachment」で受け取るメッセージのタイプ `Events[]` `Message` `Type` が上の４つであればOK。

![画像の場合.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904038/03cd7d42-fc60-0b86-6f2a-b6f5ba979fa0.png)

## なぜこの４つのタイプだけなのか？
### コンテンツを取得するリクエストの例
```sh
curl -v -X GET https://api-data.line.me/v2/bot/message/{messageId}/content \
-H 'Authorization: Bearer {channel access token}'
```
Webhookで受信したメッセージIDを使って、ユーザーが送信した**画像、動画、音声、およびファイル**を取得するために、`api-data.line.me` という**大容量データ送受信用のドメイン名を使います**。

それ以外では `api.line.me` を使います。

:::note info
他のエンドポイントとドメイン名が異なるからなんですね。
【参考】≫　[コンテンツを取得する](https://developers.line.biz/ja/reference/messaging-api/#get-content "コンテンツを取得する")
:::

ちなみに、`api-data.line.me` は以下のエンドポイントにも使われます。
* ユーザーIDアップロード用のオーディエンスを作成する（ファイル指定）
* ユーザーIDアップロード用のオーディエンスにユーザーIDまたはIFAを追加する（ファイル指定）
* リッチメニューの画像をアップロードする
* リッチメニューの画像をダウンロードする

<details><summary>
<font color = "blue">エンドポイントとは？</font></summary>

コンピューターネットワークで接続されているパソコン・スマホ・プリンターなどの端末。
ただし、ここではAPIエンドポイントを指している。
* API：アプリケーション同士がやり取りするための「窓口」みたいなもの
* エンドポイント：その「窓口の住所」のこと。具体的には、データやサービスを提供してくれる URL
</details>

#### メッセージIDとは
Messaging API全体で一意（同じ値は存在しない）のIDです。
つまり、**API全体で「そのメッセージだけのID」が割り振られる**ため、IDを見れば **「どのメッセージか」を一意に特定できます**。

1. メッセージの種類やチャネルに関係なく、Messaging APIを使って送信されるすべてのメッセージに、それぞれ一意のIDが割り当てられる。
1. 画像やテキストなど、メッセージの種類ごとにIDが変わるわけではない。
1. チャネルごと（異なるユーザーやアカウントごと）に一意ではなく、Messaging API全体で見ても**重複しないIDが付与**される。

#### {messageId} の｛｝は何？
プレースホルダーを表していて、
* サンプルやテンプレートとして利用
* 開発者に動的に値を埋め込む必要がある箇所を示す

ために使われます。

この場合の例では、メッセージ ID が `354718705033693859` なので、URL は次のようになります：

```sh
https://api-data.line.me/v2/bot/message/354718705033693859/content
```

実際のコードに｛｝はつきません。

## まとめ
**「LINE：Download a Message Attachment」** モジュールは、
* ユーザーがLINEから送信した**画像、動画、音声、ファイルをダウンロード**できる
* うまく活用することで、LINEメッセージの添付ファイル管理を効率化や、ビジネスプロセスの最適化に繋げられる