1. ホーム
  2. /
  3. [LINE BOT]
  4. /
  5. 【GAS】LINE BOTでイメージマップメッセージを送信する方法|画像・動画・タップ領域を組み合わせる

【GAS】LINE BOTでイメージマップメッセージを送信する方法|画像・動画・タップ領域を組み合わせる

【GAS】LINE BOTでイメージマップメッセージを送信する方法|画像・動画・タップ領域を組み合わせる

この記事では、Google Apps Script (GAS) を使って、LINE BOTで「イメージマップメッセージ」を送信する方法を解説します。

イメージマップメッセージは、1つの画像に複数のタップ領域を設定できるメッセージ形式です。ユーザーがタップした場所に応じて、異なるアクション(メッセージ送信、URL遷移など)を実行させることができ、クーポンやキャンペーンの告知など、多様な用途で活用できます。

公式ドキュメント:イメージマップメッセージ | LINE Developers

Google Apps Script 始め方 スプレッドシート 活用例
Google Apps Script 始め方 スプレッドシート 活用例 を各ショップで検索
LINE BOT チャットボット 作り方
LINE BOT チャットボット 作り方 を各ショップで検索

事前準備

メッセージを送信するには、以下の2つの情報が必要です。

1. チャンネルアクセストークンの取得

LINE Developersコンソールから、利用するBOTのチャンネルアクセストークンを取得してください。詳しい手順は以下の記事で解説しています。

【初心者向け】LINE Messaging APIのアクセストークンを取得する方法を解説
【初心者向け】LINE Messaging APIのアクセストークンを取得する方法を解説

LINE BOT開発に不可欠なMessaging APIのチャンネルアクセストークンを取得する手順を、実際の画面キャリプチャを交えて詳しく解説します。LINE Developersへの登録からプロバイダー、チャンネル作成、トークン発行までを網羅。

2. ユーザーIDの取得

メッセージの送信先となるLINEユーザーのIDが必要です。取得方法は以下の記事を参考にしてください。

【GAS】LINE BOTでユーザーIDを取得する方法|Webhookで情報を受け取る
【GAS】LINE BOTでユーザーIDを取得する方法|Webhookで情報を受け取る

Google Apps Script(GAS)を使って、LINE BOTと友だちになっているユーザーのIDを取得する方法を解説します。Webhook経由で送信されるイベント情報から、特定のユーザーを識別するための`userId`を抜き出すサンプルコードを紹介します。

イメージマップ用の画像データ配置

イメージマップメッセージでは、表示する画像を事前にサーバーへアップロードしておく必要があります。

画像はbaseUrlで指定したURLを元に、画像の解像度ごとに分割して用意します。例えば、baseUrlhttps://example.com/images/imagemap の場合、https://example.com/images/imagemap/1040.pnghttps://example.com/images/imagemap/700.png といったURLでアクセスできるように配置します。

詳しくは公式ドキュメントの「画像の設定方法」を参照してください。

イメージマップ画像の分割

GASでイメージマップメッセージを送信するサンプルコード

以下のサンプルコードは、GASで画像と動画を組み合わせたイメージマップメッセージを送信する例です。

コード内の TOKENDEBUGID は、ご自身の環境に合わせて書き換えてください。

const TOKEN = 'LINEのトークンを指定(取得方法:https://arukayies.com/gas/line_bot/gettoken)';
const DEBUGID = 'LINEのユーザIDを指定(取得方法:https://arukayies.com/gas/line_bot/get-userid)';

//LINEBOTでイメージマップメッセージを送るサンプル
function pushmessage_imagemap() {
  //イメージマップメッセージを送る
  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/push', {
    'headers': {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + TOKEN, //LINEのトークンを指定
    },
    'method': 'POST',
    'payload': JSON.stringify({
      'to': DEBUGID, //LINEのユーザIDを指定
      'messages': [
        {
          'type': 'imagemap',
          'baseUrl': 'https://arukayies.com/image/imagemap_sample',
          'altText': 'イメージマップメッセージのサンプルです',
          'baseSize': {
            'width': 1040,
            'height': 1040
          },
          'video': {
            'originalContentUrl': 'https://www9.nhk.or.jp/das/movie/D0002160/D0002160266_00000_V_000.mp4', //猫動画を再生
            'previewImageUrl': 'https://placehold.jp/240x240.jpg?text=test',
            'area': {
              'x': 0,
              'y': 0,
              'width': 1040,
              'height': 520
            },
            'externalLink': {
              'linkUri': 'https://www.nhk.or.jp/archives/creative/material/category-list.html?i=2',
              'label': 'See More'
            }
          },
          'actions': [
            {
              'type': 'message', //タップすると「googleがタップされました」と返信
              'text': 'googleがタップされました',
              'area': {
                'x': 0,
                'y': 520,
                'width': 520,
                'height': 520
              }
            },
            {
              'type': 'message', //タップすると「yahooがタップされました」と返信
              'text': 'yahooがタップされました',
              'area': {
                'x': 520,
                'y': 520,
                'width': 520,
                'height': 520
              }
            }
          ]
        }
      ],
      'notificationDisabled': false // trueだとユーザーに通知されない
    }),
  });
}

送信結果

上記のコードを実行すると、LINEに以下のようなメッセージが届きます。

1. メッセージ受信時

上半分が動画、下半分がタップ可能な画像領域として表示されます。

イメージマップ受信画面

2. 動画領域の操作

動画領域をタップすると再生が始まります。「See More」をタップすると、externalLink で指定したURLに遷移します。

動画再生と外部リンク

3. 画像領域の操作

下半分の各領域をタップすると、actions で設定したメッセージがBOTに送信されます。

  • 左下をタップ: 「googleがタップされました」というメッセージが送信されます。

    左下のタップアクション

  • 右下をタップ: 「yahooがタップされました」というメッセージが送信されます。

    右下のタップアクション


*映像素材:[NHKクリエイティブ・ライブラリー](https://www.nhk.or.jp/archives/creative/)*

まとめ

今回はGASを使ってイメージマップメッセージを送信する方法を紹介しました。 画像や動画、タップ領域を組み合わせることで、ユーザーの操作に応じて動的に反応するリッチなコンテンツを提供できます。

その他のメッセージアクションについては、以下の記事で詳しく解説しています。

【LINE BOT】GASで使える7種類のアクションオブジェクトまとめと比較
【LINE BOT】GASで使える7種類のアクションオブジェクトまとめと比較

LINE BOT開発で必須のアクションオブジェクト7種類(ポストバック、メッセージ、URI、日時選択、カメラ、カメラロール、位置情報)の機能と使い方をGoogle Apps Script (GAS) のサンプルを交えて徹底解説。それぞれの違いや最適な使い分けがわかります。

Google Apps Script 始め方 スプレッドシート 活用例
Google Apps Script 始め方 スプレッドシート 活用例 を各ショップで検索
LINE BOT チャットボット 作り方
LINE BOT チャットボット 作り方 を各ショップで検索

関連記事

【GAS】LINE Messaging APIでクイックリプライメッセージを送信する方法

【GAS】LINE Messaging APIでクイックリプライメッセージを送信する方法

この記事では、Google Apps Script (GAS) を利用して、LINE BOTで「クイックリプライ」メッセージを送信する方法を初心者向けに分かりやすく解説します。

クイックリプライは、ユーザーがメッセージに対して簡単なボタン操作で返信できるようにする機能です。これにより、ユーザー体験を向上させることができます。

公式ドキュメントはこちらです。

Google Apps Script 始め方 スプレッドシート 活用例
Google Apps Script 始め方 スプレッドシート 活用例 を各ショップで検索
LINE BOT チャットボット 作り方
LINE BOT チャットボット 作り方 を各ショップで検索

【GAS】LINE Messaging APIで画像カルーセルメッセージを送信する方法

【GAS】LINE Messaging APIで画像カルーセルメッセージを送信する方法

この記事では、Google Apps Script (GAS) を利用して、LINE BOTで「画像カルーセルテンプレートメッセージ」を送信する方法を解説します。

画像カルーセルは、複数の画像を横にスクロールできる形式で表示し、それぞれにアクションを割り当てることができるメッセージタイプです。商品紹介や選択肢の提示など、視覚的でインタラクティブな表現が可能になります。

公式ドキュメントはこちらを参照してください。

Google Apps Script 始め方 スプレッドシート 活用例
Google Apps Script 始め方 スプレッドシート 活用例 を各ショップで検索
LINE BOT チャットボット 作り方
LINE BOT チャットボット 作り方 を各ショップで検索