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

### 実現したいこと

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

前提

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

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

選択ボタンをコードのどの部分に追記していけば良いか不明です。

      bot.area({
        "x": 0, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "空き家・空き地"})
↑このような形でタブごとに６つのアクションを設定したい。

該当のソースコード

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": "空き家・空き地"})
↑この部分で選択ボタンを１つ作成しているが、
３つのタブ全てで"x": 0, "y": 350, "width": 833, "height": 668の位置で
同じアクションが起こってしまいます。
同じ位置でもタブごとにアクションを変更したいです。

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

GAS

行動規範の内容に同意します

回答2件

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

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

投稿2023/12/01 01:34

EI12210217

総合スコア2

ベストアンサー

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


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の選択１がタップされました"})
      }),
      bot.area({
        "x": 834, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブAの選択２がタップされました"})
      }),
      bot.area({
        "x": 1668, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブAの選択３がタップされました"})
      }),
      bot.area({
        "x": 0, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブAの選択４がタップされました"})
      }),
      bot.area({
        "x": 833, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブAの選択５がタップされました"})
      }),
      bot.area({
        "x": 1666, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブAの選択６がタップされました"})
      }),
    ]
  });

  // リッチメニュー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の選択１がタップされました"})
      }),
      bot.area({
        "x": 833, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブBの選択２がタップされました"})
      }),
      bot.area({
        "x": 1666, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブBの選択３がタップされました"})
      }),
      bot.area({
        "x": 0, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブBの選択４がタップされました"})
      }),
      bot.area({
        "x": 833, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブBの選択５がタップされました"})
      }),
      bot.area({
        "x": 1666, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブBの選択６がタップされました"})
      }),
    ]
  });

  // リッチメニュー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の選択１がタップされました"})
      }),
      bot.area({
        "x": 833, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブCの選択２がタップされました"})
      }),
      bot.area({
        "x": 1666, "y": 350, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブCの選択３がタップされました"})
      }),
      bot.area({
        "x": 0, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブCの選択４がタップされました"})
      }),
      bot.area({
        "x": 833, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブCの選択５がタップされました"})
      }),
      bot.area({
        "x": 1666, "y": 1018, "width": 833, "height": 668,
        "action": bot.aMessage({"text": "タブCの選択６がタップされました"})
      }),
    ]
  });

  // リッチメニュー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