[LINE]#1 初期設定とリッチメニューオブジェクト

どうも。つじけ（tsujikenzo）です。このシリーズでは、「スプレッドシートとGASでリッチメニューを管理しよう」をお送りします。今回は「初期設定とリッチメニューオブジェクト」です。

はじめに
1. 事前準備
2. 全体像
Canvaでリッチメニュー画像を作成する
Google Driveにアップロードして、imageIDを取得してスプレッドシートに入力する
スクリプトエディタを開く
1. リッチメニューオブジェクトとは
クラスを作成する
まとめ
1. このシリーズの目次

はじめに

リッチメニューはLINE公式アカウントの、トーク画面下部に表示されるメニュー機能です。

LINEのトーク画面下部に固定で表示されるので、ユーザーにクリックしてもらいやすくなります。

引用元：LINE Developers リッチメニューの構造

リッチメニューは、LINE Official Account Managerでも作成したり、管理が可能です。全ユーザーに一斉送信だけするばあいや、リッチメニューは変更しない、という方は、まずこちらをオススメします。

しかしながら、期間限定のクーポンをどんどん発行したり、臨時のお知らせなどをユーザーに伝えたいとき、リッチメニューの変更がラクになるといいですよね。

ということで、スプレッドシートとGASを使って、リッチメニューを管理してみましょう。

事前準備

以下の項目について、下記ブログを参考に、理解された上で読んでいただけるとスムーズです。

LINE公式アカウントを作成する
Messaging APIで特定のユーザーにメッセージを送信する

また、以下を準備しておきましょう。

スプレッドシート1枚
GASスクリプトエディタ1つ
Canva（リッチメニュー作成用エディタ）無料アカウント
GAS中級程度（クラス構文、プロパティストアなど）の基礎知識

スプレッドシートは、こちらで配布していますので、コピーして使用してください。

セル内に式が入力されていますが、ArrayFormula関数などを使うと、GASが予期せぬ動きをするかもしれません（保証できません）。

スプレッドシートは何百行にもならないと思いますので、式のコピーでお使いください。

[配布用]リッチメニュー管理表

シート1 タイトル,画像イメージ,baseURL,imageID,richMenuId,name,size,chatBarText,selected,area（1つ目しか表示していないよ）

全体像

リッチメニューを作成し、ユーザーに送信する全体の流れは、以下になります。

Canvaでリッチメニュー画像を作成する
Google Driveにアップロードして、imageIDを取得してスプレッドシートに入力する
タップ領域の指定や、タップ時に飛ぶURL先などを指定する、新規リッチメニューオブジェクトをGASに書く
リッチメニューオブジェクトをLINEサーバーにアップロードする
リッチメニューオブジェクト一覧をLINEサーバーから取得してスプレッドシートを更新する
リッチメニュー画像とリッチメニューIDをLINEサーバー上で紐づける
ユーザーにリッチメニューを送信する

Canvaでリッチメニュー画像を作成する

Canvaには、リッチメニューのテンプレートがあり、とても便利です。「リッチメニュー」と検索しましょう。

今回は、3つのタップ領域があるデザインを選択します。サイズが「2500 x 1686 px」のものにしましょう。

デザインしたらダウンロードします。ファイルサイズが1MBを越えないように気を付けましょう。

Google Driveにアップロードして、imageIDを取得してスプレッドシートに入力する

画像をダウンロードしたら、Google Driveにアップロードします。

アクセス権限を「リンクを知っている全員」に変更します。

「リンクをコピー」をクリックすると、画像のファイルidを確認できます。

https://drive.google.com/file/d/{画像ファイルID}/view?usp=share_link

スプレッドシートのD列に入力します。B列に画像イメージが確認できると思います。(もし、表示されないばあいは、アクセス権限や、ファイルIDをもう一度確認しましょう。もし万が一表示されなくても、次に進んでいただいてかまいません)

スクリプトエディタを開く

「Enum_RichMenu.gs」というスクリプトファイルを作成します。（名前はなんでもかまいません）

ここに、オブジェクト形式で、リッチメニューオブジェクトを記述します。

リッチメニューオブジェクトとは

リッチメニューは、複数のプロパティ、およびオブジェクトからなる、リッチメニューを構成するオブジェクトです。

オブジェクトの第1階層には、サイズや名前など、リッチメニューの基礎となるプロパティが用意されています。

sizeとareaは、オブジェクトです。areaオブジェクトの中には、タップ位置の座標を決めるboundsオブジェクトや、タップされたときのアクションを決めるactionオブジェクトが用意されています。

また、areaオブジェクトは、配列で複数指定可能です。リッチメニューのタップ可能な場所が3か所あるということは、areaオブジェクトが複数あり、配列で格納されている、ということです。

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": false,
  "name": "Nice richmenu",
  "chatBarText": "Tap to open",
  "areas": [ //タップする場所が1つしかないばあいでも配列で格納する
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 2500,
        "height": 1686
      },
      "action": {
        "type": "message",
        "tect": "action=buy&itemid=123"
      }
    }
  ]
}

それでは、実際にコードを書いてみましょう。Enum_RichMenu.gsに記述します。

const richMenuEnum = {

  testRichMenuSource: {
    "size": {
      "width": 2500,
      "height": 1686
    },
    "selected": false,
    "name": "99_richMenu_test",
    "chatBarText": "▲タップしてメニューを表示▲",
    "areas": [ //リッチメニューの画像下部に、垂直に3分割
      { //左"bounds": {
          "x": 0,
          "y": 1686 / 2,
          "width": 2500 / 3,
          "height": 1686 / 2
        },
        "action": {
          "type": "uri",
          "uri": "https://www.instagram.com/darvishsefat11/",
        }
      },
      { //中"bounds": {
          "x": 2500 / 3,
          "y": 1686 / 2,
          "width": 2500 / 3,
          "height": 1686 / 2
        },
        "action": {
          "type": "uri",
          "uri": "https://tonari-it.com/"
        }
      },
      { //右"bounds": {
          "x": (2500 / 3) * 2,
          "y": 1686 / 2,
          "width": 2500 / 3,
          "height": 1686 / 2
        },
        "action": {
          "type": "message",
          "text": "info@gmail.comまでメールしてくださいね",
        }
      }
    ]
  },

  testRichMenuSource2: {
    //2つ目以降はここに記述する
  }

}

//書き換え禁止処置
const　ENUM_RICHMENU = Object.freeze(richMenuEnum);

クラスを作成する

新しいスクリプトファイル「RichMenu.gs」を準備します。

リッチメニュークラスと、クラスをテストする関数を記述します。

/** リッチメニューに関するクラス */
class RichMenu {

}


/** TEST用関数 */
function testRichMenu() {

  //インスタンス生成
  const r = new RichMenu();
  console.log(r); //{}

  //リッチメニューオブジェクトを取得する
  const richmenuObject = ENUM_RICHMENU["testRichMenuSource"];
  console.log(richmenuObject);

}

testRichMenu()関数を実行しましょう。コンソールログに、空のオブジェクトと、リッチメニューオブジェクトが取得されたらOKです。