【LINE】Messaging API を使用したリッチメニュー作成手順

はじめに

業務でLINEのリッチメニューを作成する機会があったので、忘れないうちにドキュメント化し、記事として残すことにしました。
コードを書くのとは違い、高度な技術や知識は必要ないので、気軽に参考にしていただけると幸いです。

リッチメニューとは

リッチメニュー（Rich Menu）とは、主に LINE公式アカウント で利用できる機能の一つで、トーク画面の下部に表示されるカスタマイズ可能なメニューのことです。
画像やテキストを自由に配置し、ボタンをタップすると ウェブサイトへ遷移したり、特定のアクションを実行したりできます。

画像：LINEキャンパス公式

新しくリッチメニューを作成する

リッチメニューの作成方法には、LINE Official Account Manager にログインして「リッチメニュー」セクションから新規作成する方法もあります。

ですが、今回はLIFFアプリを組み込んで動的にリッチメニューを変更することができるよう、Messaging API を使用したリッチメニューの作成手順を紹介します。

1.　LINE Messaging API のチャネルアクセストークンを取得する

「通常のチャネルアクセストークンの取得方法」

まず、LINE Developers コンソールにLINEアカウントでログイン
→　プロバイダー（または新規作成したプロバイダー）を選択
→　「Messaging API」を有効にしたチャネルを選択
→　「Messaging API 設定」タブを開く
→　「チャネルアクセストークン（ロングターム）」の「発行」ボタンをクリック
→　発行されたトークンをコピーして仕様する

「ステートレスでのチャネルアクセストークンの取得方法」

ターミナルを開き、以下のコマンドをたたきます。

curl -v -X POST https://api.line.me/oauth2/v3/token \
-H 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=client_credentials' \
--data-urlencode 'client_id={YOUR_CHANNEL_ID}' \
--data-urlencode 'client_secret={YOUR_CHANNEL_SECRET}'

成功すると、以下のようなJSONレスポンスが返ります。

{
  "access_token": "{YOUR_CHANNEL_ACCESS_TOKEN}",
  "token_type": "Bearer",
  "expires_in": "{DATE_OF_EXPIRY}"
}

この{YOUR_CHANNEL_ACCESS_TOKEN}をコピーして使用します。（有効期限に注意）

2.　リッチメニュー情報をPOSTする

先ほど取得したチャネルアクセストークンを使用して、新しく作成したリッチメニューの情報をLINEのサーバー上に保存します。
ターミナルを開き、以下のコマンドをたたきます。

curl -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {YOUR_CHANNEL_ACCESS_TOKEN}' \
-H 'Content-Type: application/json' \
-d '{
    //ここにリッチメニューの設定情報をJSON形式で記述する
}'

画像：LINE Developers公式

上記の画像のような6分割リッチメニューの例

curl -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {YOUR_CHANNEL_ACCESS_TOKEN}' \
-H 'Content-Type: application/json' \
-d '{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": false,
  "name": "LINE Developers Sample",
  "chatBarText": "Tap For More!",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 833,
        "height": 873
      },
      "action": {
        "type": "uri",
        "uri": "https://www.recommend_me.example.com"
      }
    },
    {
      "bounds": {
        "x": 833,
        "y": 0,
        "width": 833,
        "height": 873
      },
      "action": {
        "type": "uri",
        "uri": "https://www.share_location.example.com"
      }
    },
    {
      "bounds": {
        "x": 1666,
        "y": 0,
        "width": 833,
        "height": 873
      },
      "action": {
        "type": "uri",
        "uri": "https://www.call_me.example.com"
      }
    },
    {
      "bounds": {
        "x": 0,
        "y": 873,
        "width": 833,
        "height": 813
      },
      "action": {
        "type": "uri",
        "uri": "https://www.profile.example.com"
      }
    },
    {
      "bounds": {
        "x": 833,
        "y": 873,
        "width": 833,
        "height": 813
      },
      "action": {
        "type": "uri",
        "uri": "https://www.find_me.example.com"
      }
    },
    {
      "bounds": {
        "x": 1666,
        "y": 873,
        "width": 833,
        "height": 813
      },
      "action": {
        "type": "uri",
        "uri": "https://www.talk_to_me.example.com"
      }
    }
  ]
}'

成功すると、以下のようなJSONレスポンスが返ります。

{
  "richMenuId": "{YOUR_RICH_MENU_ID}"
}

この {YOUR_RICH_MENU_ID} を保存しておきます。（画像アップロードや適用時に使用）

3.　リッチメニュー画像のアップロード

次に、リッチメニュー用の画像を登録します。（画像をアップロードしないと、ユーザーには何も表示されず、タップすることができません。）

ターミナルを開き、以下のコマンドをたたきます。

curl -X POST "https://api-data.line.me/v2/bot/richmenu/{YOUR_RICH_MENU_ID}/content" \
     -H "Authorization: Bearer {YOUR_CHANNEL_ACCESS_TOKEN}" \
     -H "Content-Type: image/jpeg" \
     -T "{画像ファイルのパス}"

注）　利用可能な画像フォーマットは、image/jpegもしくはimage/pngです。

また、作成したリッチメニューの情報に合わせた画像をアップロードします。
例）横幅:2500, 高さ:1686で（上段３・下段３）と均等に６分割されたデザインの画像

成功すると、以下のようなJSONレスポンスが返ります。

{}

4.　作成済みリッチメニューリストの表示

最後に、リッチメニューのリストを表示させて、リッチメニューがちゃんと作成されているかを確認します。

ターミナルを開き、以下のコマンドをたたきます。

curl -v -X GET https://api.line.me/v2/bot/richmenu/list \
-H "Authorization: Bearer {YOUR_CHANNEL_ACCESS_TOKEN}"

表示されたリストの中に、先ほど作成したリッチメニューが含まれていれば登録完了です。

5.　コード内でリッチメニューの表示を切り替える

コード内でユーザーのLINE画面のリッチメニュー表示を切り替える場合は、
以下のような関数を作成し、実行します。

rubyでの例

def change_user_rich_menu(uid, richMenuId, client)
  if !client.link_user_rich_menu(uid, richMenuId).is_a?(Net::HTTPSuccess) then
    raise 'リッチメニューの変更に失敗しました'
  end
end

・uid：リッチメニューを適用する対象の LINE User ID
・richMenuId：適用するリッチメニューの rich_menu_id
・client：LINE Messaging API を操作するためのクラス（Line::Bot::Client.new などで作成）

client.link_user_rich_menu(uid, menuId)は、内部的に以下のような HTTP リクエストを実行しています。

curl -X POST "https://api.line.me/v2/bot/user/{USER_ID}/richmenu/{RICH_MENU_ID}" \
-H "Authorization: Bearer {YOUR_CHANNEL_ACCESS_TOKEN}"

※{YOUR_CHANNEL_ACCESS_TOKEN}はclientオブジェクトに含まれています。

おわりに

初めてリッチメニューに触れた際は、「なんだか難しそう」とかなり身構えてしまいましたが、同じ手順で作成を繰り返すうちに慣れることができました。
画像サイズや画像データサイズ、画像フォーマット等、一部注意が必要な点はありますが、流れとしてはそれほど複雑ではないので、一度試してみてください。