リッチメニュー
リッチメニューはLIFFアプリには必須ではないが、前述したようにリッチメニューからLIFFアプリを起動できると、動作確認に際しても便利です。
また、最初はLIFF APIをつかったWebアプリの作成からではなく、LINEアプリ上でどのようにLIFFアプリが起動するかのイメージを持ってもらうためにもリッチメニューの登録から始めることをおすすめします。
リッチメニュー画像の作成
リッチメニューの作成は難しいものではなく、HTMLのイメージマップに似た仕組みで画像データとタップする短形領域を指定する仕組みになっています。ただし、機能の目的上、その形状やマッピングする領域のルールについても推奨するデザインガイドがあります。
図4は、LINE Official Account Managerでリッチメニュー画像を登録する時に表示されるレイアウトのテンプレート例です。
主に推奨される画像サイズは、2段メニューの場合には1200x810ピクセルであり、1段メニューの場合には、高さが半分の1200x405ピクセルになっています。
それぞれのメニュー領域について、短形のサイズは仕様上は自由に定義できます。ただし、LINE Official Account Managerの場合には、ツールの都合上、またはガイドライン上の側面から制約があるので、この制約にそって画像を作成するとよいでしょう。今回は、サンプルとして図5のような画像を使い説明していきます。
ただし、メニュー図内で示す文言はサンプル上、特に意味はありません。
LINE Official Account Managerからの作成と登録
リッチメニューを作成するのにもっとも簡単な方法が、LINE Official Account Managerを使った方法です。図6は、先ほどのサンプルメニュー画像を使った場合の登録例です。
まず、リッチメニューの作成画面は、［トークルーム管理＞リッチメニュー］（1）からアクセスできます。最初に、（2）テンプレートから、登録するメニューのレイアウトを選択します。続いて、（3）で作成した画像をアップロードします。ここまでの操作の結果は左側のプレビューに即時に反映されますので、いろいろと試してみると何ができるのかがよく分かると思います。
そして、リッチメニューで最も重要な部分が、（4）[アクション]の部分です。アクションで設定できる数は（2）で指定したテンプレートレイアウトによって変わります。
アクションではメニューの指定領域をタップしたときの処理を定義します。指定できるタイプには（4）表1の種類があります。
| タイプ | 説明 |
| リンク | URLを指定し、ブラウザを起動します。または、LIFFアプリを登録する際にもこのタイプを利用します。 |
| クーポン | [ツール > クーポン]から作成したクーポンコンテンツを表示します。 |
| テキスト | 指定したテキストのメッセージを送信します。 |
| ショップカード | [ツール > ショップカード]から作成したショップカードコンテンツを表示します。 |
| 設定しない | 何もしない場合の設定です。例えば、ロゴ画像など何も処理しない場所を指定する場合に利用します。 |
LIFFアプリをあとで確認するためにもまずは、[リンク]にて好きなURLなどを入力して、動作を確認してみてください。そして、最後に（5）で管理名と表示期間を設定し、保存すればこれで公開はされます。
メニューの反映がすぐに確認できない場合には、LINEアプリでメニューを再表示するなどの画面操作を行ってください。
［Note］Messaging APIでできるリッチメニュー操作
メニューを登録するには、Messaging APIを使うことでより複雑なリッチメニューの操作が可能になります。今回は、詳細に説明しないが、以下を行いたい場合には、Messaging APIのリッチメニュー操作APIを参照してください。
- 表示するリッチメニューを利用者毎に切り替えたい
- 表示するリッチメニューを動的に切り替えたい
- 利用するアクションタイプをより詳細に制御したい
利用するメニューを状況や利用者に応じて変更できるため、利用者にとってより分かりやすいメニューを提供できるようになります。
