質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Q&A

解決済

3回答

768閲覧

LINEのタブ付きリッチメニューにGASで選択ボタンを設置したい

EI12210217

総合スコア2

LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

1グッド

3クリップ

投稿2023/11/30 02:46

編集2023/11/30 02:49

イメージ説明### 実現したいこと

GASでLINEのタブ切り替えのリッチメニューでタブごとに6つの違う選択ボタンを設置したい。

前提

GASで3つのタブ切り替えのリッチメニューを作成しています。
全くの初心者です。

発生している問題・エラーメッセージ

選択ボタンをコードのどの部分に追記していけば良いか不明です。 bot.area({ "x": 0, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "空き家・空き地"}) ↑このような形でタブごとに6つのアクションを設定したい。

該当のソースコード

const bot = new LineBotSdk.client("YH4F8m3tmM39C/cjpih3tRlFxSJmcfH7zv6HPEItjMYUc6QYB//aB3Aa2+Z6IJ6oEb78jHgXJROdIoJu13HSoWsU2CVJ0L6rXLvbkwJDEdsHzZS6lUEZjNmzjLv+Vy9Dgh9D4zNsaTMfnN2TG5QEcAdB04t89/1O/w1cDnyilFU=");

function createRichMenus() {
// 現在のリッチメニュー設定をいったん削除する。
deleteAllRichMenu_();

// リッチメニューAを作成し、画像をアップロードする
const richmenu_id_a = createRichMenu_()
uploadRichmenuImage_("1QzON-DMVYZ8O9i-y50cx9bTS4ZCfR5zc", richmenu_id_a)

// リッチメニューBを作成し、画像をアップロードする
const richmenu_id_b = createRichMenu_()
uploadRichmenuImage_("1ry4NJNrT870XM-V4U6hrERn3cgXC9GoO", richmenu_id_b)

// リッチメニューCを作成し、画像をアップロードする
const richmenu_id_c = createRichMenu_()
uploadRichmenuImage_("1x4PzYPl6ZVfJ4vxjJFYWp0yQo3FStlfU", richmenu_id_c)

// デフォルトメニューをAに指定する。
bot.setDefaultRichMenu(richmenu_id_a)

// 各メニューのエイリアスを紐づける
bot.createRichMenuArias("switch-to-a", richmenu_id_a);
bot.createRichMenuArias("switch-to-b", richmenu_id_b);
bot.createRichMenuArias("switch-to-c", richmenu_id_c);
}

// 現在設定されているリッチメニューを全部削除する。
function deleteAllRichMenu_() {
const richMenuAliasList = JSON.parse(bot.getRichMenuAriasList().toString());
try {
for (const alias of richMenuAliasList.aliases) {
console.log(メニュー設定を削除しています...:${JSON.stringify(alias)});
bot.deleteRichMenuArias(alias.richMenuAliasId);
bot.deleteRichMenu(alias.richMenuId);
}
} catch (e) {
console.log(e);
return;
}
console.log("メニュー設定の初期化が完了しました。");
}

// リッチメニューのタップ領域やエイリアスの初期設定を行う。
function createRichMenu_() {
let richmenu = bot.richmenu({
"name": "リッチメニュー",
"barText": "メニュー",
"size": { "width": 2500, "height": 1686 },
"selected": true,
"areas": [
bot.area({
"x": 0, "y": 0, "width": 833, "height": 350,
"action": bot.aSwitch({ "aliasId": "switch-to-a", "data": "change to A" })
}),
bot.area({
"x": 833, "y": 0, "width": 833, "height": 350,
"action": bot.aSwitch({ "aliasId": "switch-to-b", "data": "change to B" })
}),
bot.area({
"x": 1666, "y": 0, "width": 833, "height": 350,
"action": bot.aSwitch({ "aliasId": "switch-to-c", "data": "change to C" })
}),
bot.area({
"x": 0, "y": 350, "width": 833, "height": 668,
"action": bot.aMessage({"text": "空き家・空き地"})
}),
]
})

let res = bot.createRichMenu(richmenu);
console.log(リッチメニューの初期設定が完了しました:${res.toString()});
return JSON.parse(res).richMenuId;
}

// 指定した画像ファイルIDの画像をアップロードし、同時に指定したリッチメニューIDと紐づける。
function uploadRichmenuImage_(imageFileId, richmenuId) {
const file = DriveApp.getFileById(imageFileId);
const blob = Utilities.newBlob(
file.getBlob().getBytes(),
file.getMimeType(),
file.getName()
);
console.log(画像 ${imageFileId} をアップロード中...);
try {
bot.setRichMenuImage(richmenuId, blob);
console.log(画像 ${imageFileId} のアップロード完了\nリッチメニューID 「${richmenuId}」との紐付け完了);
} catch (e) {
console.log(e.toString());
}
}

試したこと

bot.area({
"x": 0, "y": 350, "width": 833, "height": 668,
"action": bot.aMessage({"text": "空き家・空き地"})
↑この部分で選択ボタンを1つ作成しているが、
3つのタブ全てで"x": 0, "y": 350, "width": 833, "height": 668の位置で
同じアクションが起こってしまいます。
同じ位置でもタブごとにアクションを変更したいです。

補足情報(FW/ツールのバージョンなど)

GAS

KEN_81346👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

LINEのリッチメニューにGAS(Google Apps Script)を使ってタブ付きリッチメニューに選択ボタンを設置する方法について説明します。

前提条件
LINE Developersコンソールでチャンネルを作成し、チャネルアクセストークンを取得している。
Google Apps Scriptで必要なライブラリを設定している。
実現したいこと
GASでLINEのリッチメニューにタブごとに6つの選択ボタンを設置すること。

ステップ
Google Apps Scriptのセットアップ:
Google Apps Scriptプロジェクトを作成し、以下のスクリプトを追加します。

LINE Messaging APIのエンドポイント設定:
LINEのリッチメニューを作成するためのエンドポイントを設定します。

リッチメニューのデータ構造の作成:
各タブに6つの選択ボタンを含むリッチメニュ Subway Surfers ーのデータ構造を作成します。

投稿2024/06/14 12:37

beckham86

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

毎回、迅速なご回答有難うございます!
大変、助かっております。
リッチメニューごとのareas作成が必要だったんですね、勉強になります。

今後まだ、追加のご質問すするかもしれませんが、、
本当に有難うございました!

投稿2023/12/01 01:34

EI12210217

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

タップ領域は、タブの切り替え用領域と同様に、areas 配列に追加すればよいです。
元のコードでは、すべてのタブについて単一のリッチメニューが設定されているため、タブごとに切り替えができていませんでした。(前の回答でこの点を見落としておりすみません)
下記のように、異なるリッチメニュー構造を3つ作って設定することで、タブごとに異なるアクションをさせることが可能です。

const bot = new LineBotSdk.client("**チャンネルトークン**"); function createRichMenus() { // 現在のリッチメニューエイリアス設定をいったん削除する。 deleteAllRichMenuAliases_(); // リッチメニューAの構造を設定 let richmenu_a = bot.richmenu({ "name": "リッチメニュー", "barText": "メニュー", "size": { "width": 2500, "height": 1686 }, "selected": true, "areas": [ // 切替用タブ領域の設定 bot.area({ "x": 0, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-a", "data": "change to A" }) }), bot.area({ "x": 833, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-b", "data": "change to B" }) }), bot.area({ "x": 1666, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-c", "data": "change to C" }) }), // タップ領域の設定 bot.area({ "x": 0, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブAの選択1がタップされました"}) }), bot.area({ "x": 834, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブAの選択2がタップされました"}) }), bot.area({ "x": 1668, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブAの選択3がタップされました"}) }), bot.area({ "x": 0, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブAの選択4がタップされました"}) }), bot.area({ "x": 833, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブAの選択5がタップされました"}) }), bot.area({ "x": 1666, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブAの選択6がタップされました"}) }), ] }); // リッチメニューBの構造を設定 let richmenu_b = bot.richmenu({ "name": "リッチメニュー", "barText": "メニュー", "size": { "width": 2500, "height": 1686 }, "selected": true, "areas": [ // 切替用タブ領域の設定 bot.area({ "x": 0, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-a", "data": "change to A" }) }), bot.area({ "x": 833, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-b", "data": "change to B" }) }), bot.area({ "x": 1666, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-c", "data": "change to C" }) }), // タップ領域の設定 bot.area({ "x": 0, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブBの選択1がタップされました"}) }), bot.area({ "x": 833, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブBの選択2がタップされました"}) }), bot.area({ "x": 1666, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブBの選択3がタップされました"}) }), bot.area({ "x": 0, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブBの選択4がタップされました"}) }), bot.area({ "x": 833, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブBの選択5がタップされました"}) }), bot.area({ "x": 1666, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブBの選択6がタップされました"}) }), ] }); // リッチメニューCの構造を設定 let richmenu_c = bot.richmenu({ "name": "リッチメニュー", "barText": "メニュー", "size": { "width": 2500, "height": 1686 }, "selected": true, "areas": [ // 切替用タブ領域の設定 bot.area({ "x": 0, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-a", "data": "change to A" }) }), bot.area({ "x": 833, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-b", "data": "change to B" }) }), bot.area({ "x": 1666, "y": 0, "width": 833, "height": 350, "action": bot.aSwitch({ "aliasId": "switch-to-c", "data": "change to C" }) }), // タップ領域の設定 bot.area({ "x": 0, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブCの選択1がタップされました"}) }), bot.area({ "x": 833, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブCの選択2がタップされました"}) }), bot.area({ "x": 1666, "y": 350, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブCの選択3がタップされました"}) }), bot.area({ "x": 0, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブCの選択4がタップされました"}) }), bot.area({ "x": 833, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブCの選択5がタップされました"}) }), bot.area({ "x": 1666, "y": 1018, "width": 833, "height": 668, "action": bot.aMessage({"text": "タブCの選択6がタップされました"}) }), ] }); // リッチメニューAを作成し、画像をアップロード const richmenu_id_a = createRichMenu_(richmenu_a); uploadRichmenuImage_("メニューAの画像ファイルID", richmenu_id_a); // リッチメニューBを作成し、画像をアップロード const richmenu_id_b = createRichMenu_(richmenu_b); uploadRichmenuImage_("メニューBの画像ファイルID", richmenu_id_b); // リッチメニューCを作成し、画像をアップロード const richmenu_id_c = createRichMenu_(richmenu_c); uploadRichmenuImage_("メニューCの画像ファイルID", richmenu_id_c); // デフォルトメニューをAに指定する。 bot.setDefaultRichMenu(richmenu_id_a) // 各メニューのエイリアスを紐づける bot.createRichMenuArias("switch-to-a", richmenu_id_a); bot.createRichMenuArias("switch-to-b", richmenu_id_b); bot.createRichMenuArias("switch-to-c", richmenu_id_c); } // 現在設定されているリッチメニューの設定を全部削除する。 function deleteAllRichMenuAliases_() { const richMenuAliasList = JSON.parse(bot.getRichMenuAriasList().toString()); try { for (const alias of richMenuAliasList.aliases) { console.log(`メニュー設定を削除しています...:${JSON.stringify(alias)}`); bot.deleteRichMenuArias(alias.richMenuAliasId); //bot.deleteRichMenu(alias.richMenuId); } } catch (e) { console.log(e); return; } console.log("メニュー設定の初期化が完了しました。"); } // 引数に指定したリッチメニューの構造に基づいて初期設定を行う。 function createRichMenu_(richmenu) { let res = bot.createRichMenu(richmenu); console.log(`リッチメニューの初期設定が完了しました:${res.toString()}`); return JSON.parse(res).richMenuId; } // 指定した画像ファイルIDの画像をアップロードし、同時に指定したリッチメニューIDと紐づける。 function uploadRichmenuImage_(imageFileId, richmenuId) { const file = DriveApp.getFileById(imageFileId); const blob = Utilities.newBlob( file.getBlob().getBytes(), file.getMimeType(), file.getName() ); console.log(`画像 ${imageFileId} をアップロード中...`); try { bot.setRichMenuImage(richmenuId, blob); console.log(`画像 ${imageFileId} のアップロード完了\nリッチメニューID 「${richmenuId}」との紐付け完了`); } catch (e) { console.log(e.toString()); } }

投稿2023/11/30 12:01

編集2023/11/30 12:45
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問