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

はじめに

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

LINE Messaging API とは？

LINE Messaging APIとは、日本では大人気（？）のSNSの一つであるLINEで、メッセージの送信や返信を行うことができるAPIです。今年9月末頃にリリースされ、LINE Developer Trialに登録することで全ての機能を無料で利用することができます。（友達数の制約あり）

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

• API Reference - LINE Developer
• [LINE Messaging API (新しいLINE BOT)を実装してみた - Traffic Jam](LINE Messaging API (新しいLINE BOT)を実装してみた)
• LINEのMessaging APIを使うメモ：事前知識と登録編 - uzullaがブログ

Imagemap Messageとは？

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

どうやって送るの？

今回はメッセージ送信にPush Message APIを使うという前提のもと、どのようにして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を送ってみると面白いかもしれませんね！