【LINE BOT】GASで『イメージマップメッセージ』の送り方

LINE BOTを作成する機会が増えきた「くら(@arukayies)」です！

LINE公式ドキュメントを参考にGASを使って各APIを試してみました。

今回は「イメージマップメッセージ」の送り方を紹介します。
イメージマップメッセージについてのドキュメントはこちらを参照してください。

事前準備

LINE Developersでトークンを取得してください。

【LINE BOT】LINE Messaging APIアクセストークンの取得方法

LINE BOTを作成するのに必要なアクセストークンの取得方法を説明しています。

arukayies.com

2019.07.02

LINEの送信先IDの調べ方はこの手順で確認できます。

【LINE BOT】GASで『userId』の取得方法

LINE BOTを作成する機会が増えきた「くら(twitter@arukayies)」です！GASを使って各APIを試してみました。今回は「「userId」の取得方法を紹介します。

arukayies.com

GASのスクリプトプロパティの追加手順は過去の記事で紹介しています。
手順7〜からが該当手順です。

【LINE BOT】GASで作るLINE BOTの作り方

GASで作るLINE BOTの作り方を説明しています。「サンプル」としゃべると、「サンプルサンプルサンプル」と発言するLINE BOTの作り方です。

arukayies.com

画像データの配置

イメージマップを使用するために５つの画像を配置する必要があります。
公式ドキュメントの「画像の設定方法」を参照してください。

『イメージマップメッセージ』を送るサンプルコード

『イメージマップメッセージ』を送った結果

4つのタップ領域を持つ画像のメッセージ例

「hello」をタップすると、「hello」と返します

「world」をタップすると、「world」と返します

「goolge」をタップすると、「google」を開きます

「yahoo」をタップすると、「yahoo」を開きます

画像と動画を組み合わせたメッセージ例

これを送信するとこんな感じに受信します

動画をタップし

「See More」をタップすると、externalLinkで指定したリンクに遷移します。

「google」をタップすると、「googleがタップされました」と返します

「yahoo」をタップすると、「yahooがタップされました」と返します

映像：ＮＨＫクリエイティブ・ライブラリー