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

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



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



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899248/4876ac83-b3a7-f20c-7cd7-6ddfe1a1d219.png)
画像：LINEキャンパス公式




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

https://line-sm.com/blog/howtomakerich-menus/

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

<br>

### 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レスポンスが返ります。
```json
{
  "access_token": "{YOUR_CHANNEL_ACCESS_TOKEN}",
  "token_type": "Bearer",
  "expires_in": "{DATE_OF_EXPIRY}"
}
```
この`{YOUR_CHANNEL_ACCESS_TOKEN}`をコピーして使用します。（有効期限に注意）


<br>


### 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形式で記述する
}'
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899248/adefb3c3-4711-8005-da15-578c43c71f49.png)
画像：LINE Developers公式
```json:上記の画像のような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レスポンスが返ります。
```json
{
  "richMenuId": "{YOUR_RICH_MENU_ID}"
}
```
この `{YOUR_RICH_MENU_ID}` を保存しておきます。（画像アップロードや適用時に使用）


<br>

### 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レスポンスが返ります。
```json
{}
```




<br>

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

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

ターミナルを開き、以下のコマンドをたたきます。
```
curl -v -X GET https://api.line.me/v2/bot/richmenu/list \
-H "Authorization: Bearer {YOUR_CHANNEL_ACCESS_TOKEN}"
```
表示されたリストの中に、先ほど作成したリッチメニューが含まれていれば登録完了です。




<br>

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

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

```ruby: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 リクエストを実行しています。
```sh
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オブジェクトに含まれています。



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