LINE Messaging API の Imagemap Message について調べてみた

# はじめに

この記事を読むと、[LINE Messaging API](https://devdocs.line.me/ja/#messaging-api)が何かを少しだけ知ることができ、Imagemap Messageというタイプのメッセージ送信について詳しくなることができます。逆に最低限の例しか挙げていないため、特定言語での実装例やノウハウについては皆無となっております :pray:


# LINE Messaging API とは？

[LINE Messaging API](https://devdocs.line.me/ja/#messaging-api)とは、日本では大人気（？）のSNSの一つである**LINE**で、メッセージの送信や返信を行うことができるAPIです。今年9月末頃にリリースされ、[LINE Developer Trial](https://business.line.me/ja/services/bot)に登録することで全ての機能を無料で利用することができます。（友達数の制約あり）

LINE Messaging APIの詳細や使い方については以下のページや記事などで詳しく触れられているため、もし興味のある方はご覧になってみてください！

- [API Reference - LINE Developer](https://devdocs.line.me/ja/#messaging-api)
- [LINE Messaging API (新しいLINE BOT)を実装してみた - Traffic Jam](LINE Messaging API (新しいLINE BOT)を実装してみた)
- [LINEのMessaging APIを使うメモ：事前知識と登録編 - uzullaがブログ](http://uzulla.hateblo.jp/entry/2016/10/06/230309)


# Imagemap Messageとは？

[Imagemap Message](https://devdocs.line.me/ja/#imagemap-message) は、LINE Messaging API から送信できるメッセージタイプの一つで、複数のリンクが埋め込まれた画像をメッセージとして送信することができます。画像の特定の場所にリンクを埋め込むことができるので、柔軟で多彩な表現が可能になっています。その一方、指定が必要なパラメータ数も増えており、API へのリクエストは少々複雑です。


# どうやって送るの？

今回はメッセージ送信に[Push Message API](https://devdocs.line.me/ja/#push-message)を使うという前提のもと、どのようにしてImagemap Messageを送信するのかご紹介します。なお、LINE Messaging API自体の設定や使い方についてはこの記事では割愛するので、興味のある方は他の記事などを参考にしてみてください。


# Push Message APIのHTTPリクエスト例

Push Message APIでは、次のようなAPIリクエストを送信することでメッセージを送信することができます。

```
curl -X POST https://api.line.me/v2/bot/message/push　\
-H 'Content-Type:application/json' \
-H 'Authorization: Bearer {Channel Access Token}' \
-d '
{
    "to": {User ID or Group ID or Room ID},
    "messages":[
      {Send Message Object}
    ]
}'
```

どのようなメッセージを送るかは `Send Message Object` の部分に、各メッセージタイプに応じたSend Message Objectと呼ばれるJSONを指定する必要があります。 たとえば`Text`タイプのSend Message Objectは次のようなJSONになります。

```
{
    "type": "text",
    "text": "Hello, world"
}
```


# Imagemap MessageのSend Message Objectについて

ImagemapのSend Message Objectは次のようなJSONになります。

```
{
    "type": "imagemap",
    "baseUrl": "https://hogefuga.com/images/test.",
    "altText": "this is an imagemap message",
    "baseSize": {
        "height": 1040,
        "width": 1040
    },
    "actions": [
        {
            "type": "uri",
            "linkUri": "https://example.com/",
            "area": {
                "x": 0,
                "y": 0,
                "width": 520,
                "height": 1040
            }
        },
        {
            "type": "message",
            "text": "hello",
            "area": {
                "x": 520,
                "y": 0,
                "width": 520,
                "height": 1040
            }
        }
    ]
}
```

大きく分けて`type`, `baseUrl`, `altText`, `baseSize`, `actions`の5つのパラメータを指定する必要があります。


## `type`パラメータについて

`type`はSend Message Objectの共通のパラメータの一つで、そのJSONがどのタイプのメッセージなのかを指定します。よって今回の場合は`imagemap`となります。


## `altText` パラメータについて

Imagemap Messageが表示できない端末で、代替テキストとして何を表示するかを指定します。


## `baseUrl`パラメータについて

Imagemap Messageとして送信する画像のURLを指定します。ただし、単純な画像のURL(`.jpg`, `.png`)ではなく、次のような形式でアクセス可能なURLを用意する必要があります。`baseUrl`に指定するURLを `http://hogefuga.com/imaes/otofu` と想定した場合で説明します。
 
- `http://hogefuga.com/images/otofu/{画像の横幅サイズ(px)}`の形式でアクセスすると指定したサイズの画像をレスポンスとして返す
  - 例) `http://hogefuga.com/images/otofu/1040`
- LINE側からアクセスされうる横幅サイズは`1040px`, `700px`, `460px`, `300px`, `240px`の5通り
- LINE のクライアント端末により、リクエストされる画像のサイズが異なる
- 画像フォーマットは`JPEG` or `PNG`の2種類
- ファイルサイズは最大1MB

よって、1つのImagemap Messageを送信するためには5種類のサイズの画像を用意する必要があります。ここがImagemap Messageで一番ハードルを上げている部分じゃないでしょうか。


## `baseSize`パラメータについて

`baseSize`には基本比率サイズの幅`width`と高さ`height`を指定します。公式のリファレンスによると、`width`には`1040`を指定し、`height`には幅を`1040`としたときの高さの指定が必要、とされています。


## `actions(Imagemap Action Object)` パラメータについて

`actions`には`Imagemap Action Object`と呼ばれるJSONを指定します。`Imagemap Action Object`には、`画像のどこにリンクを埋め込むか`と`リンクがタップされたときに何をするか`を指定します。

- `Imagemap Action Object`の例

```
{
    "type": "uri",
    "linkUri": "https://example.com/",
    "area": {
        "x": 0,
        "y": 0,
        "width": 520,
        "height": 1040
    }
}
```


### `actions.type`について

リンクをタップされた時のアクションの種類を指定します。以下の2つから選択することができます。

- `uri`
- `message`

`uri`タイプでは次のような`Imagemap Action Object`になります。このタイプを指定することで、リンクがタップされた時に指定されたURLを開くアクションを設定することができます。

```
{
    "type": "uri",
    "linkUri": "https://example.com/",
    "area": {
        "x": 0,
        "y": 0,
        "width": 520,
        "height": 1040
    }
}
```

`linkUri`にはタップされた時に開くURLを指定します。`area`には後述する`Imagemap Area Object`と呼ばれる、タップ領域を定義するためのJSONを指定します。

一方で、`message`タイプの場合は以下の通りです。このタイプでは、リンクを押された時に指定したメッセージをユーザに発言させるアクションを設定することが可能です。

```
{
    "type": "message",
    "text": "hello",
    "area": {
        "x": 520,
        "y": 0,
        "width": 520,
        "height": 1040
    }
}
```

`text`には送信するメッセージの文字列を指定します。`area`には上述の`Imagemap Area Object`の JSONを指定し、タップ領域の定義します。


### `actions.area(Imagemap Area Object)`について

`Imagemap Area Object`のJSONには、Imagemapに指定した画像の幅を**1040**とした場合のアクションを定義する領域の指定を行います。座標は左上を原点としており、そこから右方向に何pxで、下方向に何pxの位置からこのぐらいの領域を指定する、という形で表現します。以下の例では画像の左上から幅520px・高さ1040pxのアクションの領域を定義する`Imagemap Area Object`のJSONを示します。

```
"area": {
    "x": 0,
    "y": 0,
    "width": 520,
    "height": 1040
}
```


# まとめ

LINE Messaging APIのImagemap Messageについてまとめました。個人的な考えではありますが、Imagemap Messageを送信するには以下の高いハードルが立ちはだかっていると思います。

- 送信する画像1つにつき、5通りのサイズの用意が必須で、そのためのエンドポイントを用意する必要がある
- アクションの領域の指定が座標ベースなため、直感的な指定が非常に難しい

このハードルを超えるのはなかなか簡単にいかないとは思いますが、少しでも興味を持っていただけた方はぜひ頑張ってImagemap Messageを送ってみると面白いかもしれませんね！