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

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

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

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

事前準備

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

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

LINEBOTに必要なトークンの取得方法を画像付きで解説します。

arukayies.com

2020.05.03

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

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

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

arukayies.com

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

GASで作る簡単なLINE BOTの作り方

GASで作るLINE BOTの簡単な作り方を紹介します！

arukayies.com

画像データの配置

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

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

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

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

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

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

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

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

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

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

動画をタップし

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

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

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

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