line messaging apiでリッチメニューを作成

lineのリッチメニューを作成してみました。

line official account manager でリッチメニューは簡単に作成できるのですが、今回はリッチメニューにタブを付けるためにmessaging apiを使用しました。

messaging apiを使用することで、より複雑な画面を作成できました。

const width = 2500;
const height = 1686;
const switchHeight = 250;
const menuHeight = height - switchHeight;

export const richMenuAliasAtoB = 'rich-menu-alias-b';
export const richMenuAliasBtoA = 'rich-menu-alias-a';

const tabs: RichMenu['areas'] = [
  {
    bounds: {
      x: 0,
      y: 0,
      width: width / 2,
      height: switchHeight,
    },
    action: {
      type: 'richmenuswitch',
      richMenuAliasId: richMenuAliasAtoB,
      data: 'Bタブへ移動',
    },
  },
  {
    bounds: {
      x: width / 2,
      y: 0,
      width: width / 2,
      height: switchHeight,
    },
    action: {
      type: 'richmenuswitch',
      richMenuAliasId: richMenuAliasBtoA,
      data: 'Aタブへ移動',
    },
  },
];

export const mainRichMenu: RichMenu = {
  size: {
    width,
    height,
  },
  selected: true,
  name: 'name',
  chatBarText: 'Tap to open',
  areas: [
    ...tabs,
      {
         bounds: {
        x: 0,
        y: switchHeight,
        width: width / 3,
        height: menuHeight / 2,
      },
      action: {
        type: 'message',
        label: 'Q&A',
        text: '送信されるテキスト',
      },
   },

  ],
};

export const subRichMenu: RichMenu = {
  size: {
    width,
    height,
  },
  selected: true,
  name: 'name',
  chatBarText: 'Tap to open',
  areas: [
    ...tabs,
   
    {
      bounds: {
        x: width / 3,
        y: switchHeight,
        width: width / 3,
        height: menuHeight / 2,
      },
      action: {
        type: 'uri',
        label: 'ホームページ',
        uri: '遷移先URL',
      },
    },
  ],
};

ひとつややこしかったのは、リッチメニューを更新する際に@line/bot-sdkのcreateRichMenuとsetRichMenuを使用しますが、一度createRichMenuを実行したあとは、再度createRichMenu実行前にdeleteRichMenuAliasを実行する必要があるということです。

liffを含め多くの機能を試した結果、使用したのはmessaging apiだけになったのですが楽しかったので良かったです。