こんにちは！dotDでmeepaの開発を担当している前田です。

以前、「LINE Messaging APIでリッチメニューを作成・表示させる方法」を書きましたが、「毎回richMenuId・画像を設定して何度もAPIを叩くのが面倒・・・」と思い始めてきました。
なので、Node.jsでリッチメニュー適用スクリプトを書いて、コマンド1回実行すれば、指定したLINEボットにデフォルトのリッチメニューが適用されるようにしました。

特に、リッチメニューの更新頻度が多い方や、複数のLINEボットに同じリッチメニューを適用しなければならない方は、ぜひこの記事をご覧ください！
リッチメニューの適用を楽に行うことができるようになります！

▼目次

• スクリプト
• まとめ

スクリプト

import fs from "fs";
import { Client } from "@line/bot-sdk";
import { CHANNEL_ACCESS_TOKEN, RICH_MENU } from "./config.js";

class RichMenu {
  constructor(client, richmenu) {
    this.client = client;
    this.richmenu = richmenu;
  }

  // デフォルトのリッチメニューを適用する
  async applyDefaultRichMenu() {
    await this.#createRichMenu();
    await this.#setRichMenuImage();
    await this.#setDefaultRichMenu();
  }

  // リッチメニューを作成する
  async #createRichMenu() {
    await this.client.createRichMenu(this.richmenu).then((richMenuId) => {
      this.richMenuId = richMenuId;
    });
  }

  // リッチメニューの画像をアップロードする
  async #setRichMenuImage() {
    await this.client.setRichMenuImage(
      this.richMenuId,
      fs.createReadStream("./public/img/img_richMenu.png")
    );
  }

  // デフォルトのリッチメニューを設定する
  async #setDefaultRichMenu() {
    await this.client.setDefaultRichMenu(this.richMenuId);
  }
}

const client = new Client({
  channelAccessToken: CHANNEL_ACCESS_TOKEN,
});
const richmenu = RICH_MENU;

const richMenu = new RichMenu(client, richmenu);

// デフォルトのリッチメニューを適用する
richMenu.applyDefaultRichMenu();
import fs from "fs";
import { Client } from "@line/bot-sdk";
import { CHANNEL_ACCESS_TOKEN, RICH_MENU } from "./config.js";

class RichMenu {
  constructor(client, richmenu) {
    this.client = client;
    this.richmenu = richmenu;
  }

  // デフォルトのリッチメニューを適用する
  async applyDefaultRichMenu() {
    await this.#createRichMenu();
    await this.#setRichMenuImage();
    await this.#setDefaultRichMenu();
  }

  // リッチメニューを作成する
  async #createRichMenu() {
    await this.client.createRichMenu(this.richmenu).then((richMenuId) => {
      this.richMenuId = richMenuId;
    });
  }

  // リッチメニューの画像をアップロードする
  async #setRichMenuImage() {
    await this.client.setRichMenuImage(
      this.richMenuId,
      fs.createReadStream("./public/img/img_richMenu.png")
    );
  }

  // デフォルトのリッチメニューを設定する
  async #setDefaultRichMenu() {
    await this.client.setDefaultRichMenu(this.richMenuId);
  }
}

const client = new Client({
  channelAccessToken: CHANNEL_ACCESS_TOKEN,
});
const richmenu = RICH_MENU;

const richMenu = new RichMenu(client, richmenu);

// デフォルトのリッチメニューを適用する
richMenu.applyDefaultRichMenu();

このスクリプトは、applyDefaultRichMenu()を実行して、①リッチメニューを作成する → ②リッチメニューの画像をアップロードする → ③デフォルトのリッチメニューを設定する の順でAPIを叩いて、指定したLINEボットにデフォルトのリッチメニューを適用します。

コンストラクタの第1引数には、以下の値を渡します。
'<channel access token>'はLINE Messaging APIのChannel access tokenです。

new Client({
  channelAccessToken: '<channel access token>',
});new Client({
  channelAccessToken: '<channel access token>',
});

コンストラクタの第2引数には、リッチメニューオブジェクトを渡します。

{
  size: {
    width: 2500,
    height: 1686
  },
  // Other rich menu object properties
  // ...
}
{
  size: {
    width: 2500,
    height: 1686
  },
  // Other rich menu object properties
  // ...
}

まとめ

業務のなかで、複数のLINEボットにリッチメニューを適用する場面が度々あり、もっと速く適用できたらいいなと思ったので、スクリプトを書きました。

今回の件で、手作業をしているところで自動化・効率化できそうなことはガンガンしていきたいなと思いました！

最後に、dotDでは、新しい事業を共に作っていくためのエンジニアのメンバーを募集しています！
少しでも興味を持ってくださった方はお気軽にご連絡ください！！