LINE Message APIのリッチメニューを使ってLIFFのアプリを呼び出す

はじめに

このLIFFを試してみたかったのでサンプルコードを実行してみました。その際に「リッチメニュー」という機能を使って、メニュー画面からLIFFのアプリを呼び出してみました。

LIFFを使う

LINE Developersより設定できます。公式のガイドを参考にすれば普通に設定が可能です。
今回LIFFのアプリは公式のサンプルコードをForkしました。ここで、公式ガイドでは「Heroku」を使ってサーバを立ててエントリーポイントを取得していますが、私は直接に「GitHub Pages」を使ってGitHub上でエントリーポイントを取得しました。方法はこんな感じです。
URLを取得できればここを参考にLIFFを追加します。このとき、curlコマンドを使ってliffidを取得する方法も書いてありますが、別にサイト上で登録すればLIFF URLが発行されるので「LINE Things」を使わない場合はターミナルでの操作は不要だと思います。また、このLIFF URLがLINEアカウントとLIFFを連携させるためのURLです。このLIFF URLをスマートフォンのブラウザで開けばLIFFのアプリを立ち上げることができます。

リッチメニューでLIFFを起動する

リッチメニューの説明と設定方法は公式ガイドを参照してください。今回は、「メニューをタッチすることでLIFFが起動する」までを設定してみました。リッチメニューの説明はcurlコマンドを用いて行います。
まずはリッチメニューのレイアウトやメニュー名などの作成です。

 curl -v -X POST https://api.line.me/v2/bot/richmenu \
  -H 'Authorization: Bearer  {channel access token}' \
  -H 'Content-Type:application/json' \
  -d \
  '{
    "size":{
        "width":2500,
        "height":1686
    },
    "selected":false,
    "name":"Controller",
    "chatBarText":"Controller",
    "areas":[
        {
          "bounds":{
              "x":0,
              "y":0,
              "width":2500,
              "height":1686
          },
          "action":{  
            "type":"uri",
            "label":"View map",
            "uri":"{LINE URL}"
            }
        }
    ]
  }'

{channel access token}に「アクセストークン」を、{LINE URL}にはそのまま「LINE URL」を設定してください。送信が成功すると{"richMenuId": "{richmenu-id}"}の形でrichMenuIdが返ってきます。
次に画像を設定します。このとき画像サイズは2500×1686または2500×843ピクセルに調整する必要があるのでこことかでリサイズするといいと思います。画像を用意したらそれをカレントディレクトリに置いて以下のようにコマンドを打ちます。

curl -v -X POST https://api.line.me/v2/bot/richmenu/{richMenuId}/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/jpeg" \
-T image.jpg

image.jpgを自分の画像ファイル名に変換して、{richMenuId}に先ほど取得したIDを「richmenu-」の形でそのまま入力します。
最後に以下のコマンドでリッチメニューを適用します。

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} \
-H "Authorization: Bearer {channel access token}"

さいごに

リッチメニューの他にもMessageAPIには色んな機能があるのでそれも試していきたいです。