アプリ編part2 ~Postmanでオシャレなリッチメニューを作成しよう！！

こちらの記事の続きとなります。

tech.nri-net.com

本シリーズのトップページはこちら！！

tech.nri-net.com

はじめに
リッチメニュー設定の流れ
IDEウィークを開催してみて

はじめに

前回記事でアプリケーションの機能部分の実装は終了しました！本記事ではLINEのリッチメニューを作成する方法についてご紹介します。

リッチメニュー設定の流れ

リッチメニューの作成は、PostmanというAPIの開発とテストを支援するためのツールを用いて実施していきます。Postman及びAPIについての説明は、以下記事で詳しく解説をしてくれているので、ぜひご覧ください。

tech.nri-net.com

自分がやりたいことも上記とほぼ同じです。具体的には、Postmanでリッチメニュー設定のjsonファイルを作成し、それをLINE側にPOSTすることでLINEトーク画面にリッチメニューを表示させていきます。

今回は下記のようなテキスト送信、及びタブ切り替え機能を有したリッチメニューを作成していきます。

画像の作成

まず、リッチメニューに設定したい画像を作成しましょう。リッチメニューに設定できる画像サイズは以下である必要があります。

画像フォーマット：JPEGまたはPNG
画像サイズ（ピクセル）：2500x1686、2500x843、1200x810、1200x405、800x540、800x270
最大ファイルサイズ：1MB

リッチメニューのタブ切り替え（下図）を実装するため、画像を2枚用意します。

これ以降の作業は2枚の画像に対して同様の作業を実施してください。

リッチメニューの作成

次はPostmanのbodyタブで画像内の「タップ領域」と「アクション」に関する設定を実施します。

設定は以下のようなjson形式で記述していきます。

{
{
    "size": {
        "width": 2500,
        "height": 1686
    },
    "selected": true,
    "name": "richmenu-a",
    "chatBarText": "Tap to open",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 200,
                "width": 833,
                "height": 740
            },
            "action": {
                "type": "message",
                "text": "イングランド"
            }
        },
~~~~~~~~~~~~省略 他の5つも同様~~~~~~~~~~~~~~~~~~~~~~~~~
        {
            "bounds": {
                "x": 1251,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-b",
                "data": "richmenu-changed-to-b"
            }
        }
    ]
}

タップ領域はareas内のbounds内で設定します。始点(x,y)とそこからの高さ(height)と広さ(width)で領域を指定し、actionでタップ後のアクションを指定します。今回の場合はテキスト送信なので、typeをmessage、textにタップ時のテキストを入力します。

タブの切り替えは、typeをrichmenuswitch、richMenuAliasIdに切り替え先のリッチメニューエイリアスIDを指定します。リッチメニューエイリアスIDとはいわば、切り替え先リッチメニューの一意の識別子のことです。こちらは後ほど実装します。

"action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-b",
                "data": "richmenu-changed-to-b"
            }

リッチメニューをLINEと関連付ける

上記で作成した設定ファイルをLINE側に紐づけていきます。まず、Postman内で「認可」タブに移動し、Auth TypeにLINE Messaging APIのチャンネルアクセストークンを入力します。

次に、ヘッダータブへ移動し、KEYをContent-Type 、Valueをapplication/jsonとしたキーバリューカラムを作成します。

画面左上にHTTPメソッドを選択する場所があるので、「POST」を選択し、https://api.line.me/v2/bot/richmenuを入力しましょう。送信ボタンを押して成功すれば以下のようなレスポンスが返ってきます。

この一連の流れでPostman内部では次のようなコマンドが実行されています。

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
`{
## リッチメニューAの設定内容
    "size": {
        "width": 2500,
        "height": 1686
    },...............
}`

curl(カール)コマンドは、指定されたURLへのデータ転送および取得を可能とするコマンドです。そのURLとしてLINEリッチメニューAPIエンドポイントを今回は指定しています。

さらに、curlコマンドはオプションで、APIエンドポイントに様々な情報を付与することができます。本ケースでは認証・認可情報としてチャンネルアクセストークン、メソッドとしてPOST、リッチメニューのjsonファイルをリクエストボディとしてAPIエンドポイントに送信しています。リクエストを受けたAPIはLINEとのやり取りを通じてリッチメニューIDをレスポンスとして返します。

リッチメニューに画像をアップロードする

次に先ほど作成した画像をリッチメニューに関連付けます。
Postman内のrequest URLに

https://api-data.line.me/v2/bot/richmenu/{リッチメニューID}/content

を入力します。そして、ヘッダータブに移動し、KEYをContent-Type 、Valueをimage/pngとしたキーバリューカラムを作成し、画像をアップロードしましょう。

リッチメニューエイリアスを作成する

リッチメニューエイリアスは、リッチメニューを識別するためのラベルのようなものです。これにより、複数のリッチメニューを簡単に管理し、切り替えることができます。具体的には、各リッチメニューに一意のエイリアスを設定し、そのエイリアスを使ってリッチメニューを呼び出すことができます。

では、具体的に見ていきましょう。 request url、ヘッダー、リクエストボディに以下の内容を入力し、sendボタンを押します。

request url : https://api.line.me/v2/bot/richmenu/alias
Content Type : application/json
request body : {
    "richMenuAliasId": "richmenu-alias-a",
    "richMenuId": "richmenu-19682466851b21e2d7c0ed482ee0930f" #リッチメニューAのID
}

さて、これにてリッチメニューの実装は終了です！！うまく設定できていれば、LINE内にリッチメニューが設定され、テキスト送信、タブ切り替えが可能となります。