SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

LINEで始めるアプリ開発

LIFFアプリの構築方法とは? LINEアプリ上に独自のサービス機能を追加しよう

LINEで始めるアプリ開発 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

リッチメニュー

 リッチメニューはLIFFアプリには必須ではないが、前述したようにリッチメニューからLIFFアプリを起動できると、動作確認に際しても便利です。

 また、最初はLIFF APIをつかったWebアプリの作成からではなく、LINEアプリ上でどのようにLIFFアプリが起動するかのイメージを持ってもらうためにもリッチメニューの登録から始めることをおすすめします。

リッチメニュー画像の作成

 リッチメニューの作成は難しいものではなく、HTMLのイメージマップに似た仕組みで画像データとタップする短形領域を指定する仕組みになっています。ただし、機能の目的上、その形状やマッピングする領域のルールについても推奨するデザインガイドがあります。

 図4は、LINE Official Account Managerでリッチメニュー画像を登録する時に表示されるレイアウトのテンプレート例です。

図4:LINE Official Account Managerでのリッチメニューのテンプレート
図4:LINE Official Account Managerでのリッチメニューのテンプレート

 主に推奨される画像サイズは、2段メニューの場合には1200x810ピクセルであり、1段メニューの場合には、高さが半分の1200x405ピクセルになっています。

 それぞれのメニュー領域について、短形のサイズは仕様上は自由に定義できます。ただし、LINE Official Account Managerの場合には、ツールの都合上、またはガイドライン上の側面から制約があるので、この制約にそって画像を作成するとよいでしょう。今回は、サンプルとして図5のような画像を使い説明していきます。

図5:サンプルとして利用するリッチメニュー画像
図5:サンプルとして利用するリッチメニュー画像

 ただし、メニュー図内で示す文言はサンプル上、特に意味はありません。

LINE Official Account Managerからの作成と登録

 リッチメニューを作成するのにもっとも簡単な方法が、LINE Official Account Managerを使った方法です。図6は、先ほどのサンプルメニュー画像を使った場合の登録例です。

図6:LINE Official Account Managerを使ったリッチメニューの作成例
図6:LINE Official Account Managerを使ったリッチメニューの作成例

 まず、リッチメニューの作成画面は、[トークルーム管理>リッチメニュー](1)からアクセスできます。最初に、(2)テンプレートから、登録するメニューのレイアウトを選択します。続いて、(3)で作成した画像をアップロードします。ここまでの操作の結果は左側のプレビューに即時に反映されますので、いろいろと試してみると何ができるのかがよく分かると思います。

 そして、リッチメニューで最も重要な部分が、(4)[アクション]の部分です。アクションで設定できる数は(2)で指定したテンプレートレイアウトによって変わります。

 アクションではメニューの指定領域をタップしたときの処理を定義します。指定できるタイプには(4)表1の種類があります。

表1:アクションとして設定できるタイプ
タイプ 説明
リンク URLを指定し、ブラウザを起動します。または、LIFFアプリを登録する際にもこのタイプを利用します。
クーポン [ツール > クーポン]から作成したクーポンコンテンツを表示します。
テキスト 指定したテキストのメッセージを送信します。
ショップカード [ツール > ショップカード]から作成したショップカードコンテンツを表示します。
設定しない 何もしない場合の設定です。例えば、ロゴ画像など何も処理しない場所を指定する場合に利用します。

 LIFFアプリをあとで確認するためにもまずは、[リンク]にて好きなURLなどを入力して、動作を確認してみてください。そして、最後に(5)で管理名と表示期間を設定し、保存すればこれで公開はされます。

 メニューの反映がすぐに確認できない場合には、LINEアプリでメニューを再表示するなどの画面操作を行ってください。

[Note]Messaging APIでできるリッチメニュー操作

 メニューを登録するには、Messaging APIを使うことでより複雑なリッチメニューの操作が可能になります。今回は、詳細に説明しないが、以下を行いたい場合には、Messaging APIのリッチメニュー操作APIを参照してください。

  • 表示するリッチメニューを利用者毎に切り替えたい
  • 表示するリッチメニューを動的に切り替えたい
  • 利用するアクションタイプをより詳細に制御したい

 利用するメニューを状況や利用者に応じて変更できるため、利用者にとってより分かりやすいメニューを提供できるようになります。

次のページ
LIFFアプリの構築

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEで始めるアプリ開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17908 2023/06/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング