SHOEISHA iD

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

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

LINEで始めるアプリ開発

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

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

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

 今回は、LINEアプリ上に独自のサービス機能を追加できるLIFFアプリの構築方法について紹介します。

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

LIFFアプリの概要

 LIFF(LINE Front-end Framework)アプリについては、第一回でも説明しましたが、LINE上のメッセージやメニューから各サービスに特化した独自のWebアプリ画面へと利用者を誘導できる機能です。通常のWebアプリにLINEログインAPIを使って実装するのではなく、LIFFアプリとして公開することで以下のような利点があります。

  • LINEアプリと一体化しているUIの見せ方ができる
  • Webアプリ上からLINEのメッセージ送信ができる

LIFFアプリの作成から公開までの流れ

 LIFFアプリはWebアプリを作成し、LINE Developersコンソール上でURLを登録すれば手続き上は終了です。

 しかし、それだけでは利用者がそのアプリを見つけられません。従って、そのアプリまで利用者を誘導するところまでを作成する必要があります。その誘導方法として、もっともイメージしやすいのが、LINEアプリ上のメニューとして表示するケースでしょう。その場合には、図1のような手順で作成していきます。

 また、開発する際にもメニュー上から表示できるので、すばやく動作を確認するためにも、最初はこの流れで作成することをおすすめします。LINEサービスではこのメニューを「リッチメニュー」と呼びます。

図1:LIFFアプリを作成して、公開するまでの流れ
図1:LIFFアプリを作成して、公開するまでの流れ

 (2)で登録すべきURLは自サーバのURL、(3)で登録するURLは(2)で発行されたURLになるのでご注意ください。

 また、リッチメニューを作成し、公開する方法としては、LINE Official Account Managerを使って手動で公開する方法と、Messaging APIを使って公開する方法があります。最初は、LINE Official Account Managerで公開し、よりシステム的な制御が必要な場合にはMessaging APIを使って公開するようにしていけばよいと思います。

LIFFアプリの技術的な制限と特徴

 LIFFアプリはWebアプリではあるが、通常のWebアプリとまったく同じな訳ではありません。例えば、図2のような画面遷移をしたいケースをもとに説明します。

図2:LIFFアプリでの画面遷移
図2:LIFFアプリでの画面遷移

 一般的な画面遷移の場合、つまり、URLの遷移と共にブラウザが新規にロードされる場合には注意が必要です。例えば、(1)のURLをもつ画面と(2)のURLを持つ画面があった場合で、かつ双方ともLINE Front-end Framework(以下、LIFF API)を使う場合には、どちらのURLもLIFFアプリとして登録しないと正常に動作しません。ただし、(1)の画面以外ではLIFF APIを使わないのであれば、自由に画面遷移は可能です。

 そもそもReactやVue.jsのようなJavaScriptフレームワークを使って開発しているのであれば、SPAという手法で画面遷移をしているケースが多いはずです。この場合には、画面遷移と共にブラウザのページを新規にロードしないので、とくに懸念事項がなく、どの画面でもLIFF APIの使用が可能です。そのため、筆者がLIFFアプリを作成する際には、SPAという手法を使ってWebアプリを構築することにしています。

 また、LIFFアプリを作る際に必ずしも、LIFF APIを使わなければならない訳ではありません。例えば、誰でも参照できるページをLINEメニューからショートカットとして表示するだけであれば、既存のWebページをLIFFアプリのURLとして登録すれば十分です。つまり、LIFF APIを使うかどうかはLIFFアプリを作成する上で必須ではなく、LINEアカウントの情報を利用したい場合に必要なAPIです。

 画面遷移が多い機能をLIFFアプリとして作ることは少なく、あまり問題にぶつかることはないとは思いますが、画面遷移で問題にぶつかった際にはこの制限を思い出すようにしてください。

LIFFアプリの利用用途

 ここまでの説明だとLINEログインのAPIを使ってWebアプリとして作成することと何が違うのかと疑問に持つ方もいるかもしれません。LIFFアプリとして作成が必要なのは、以下のようなケースです。

  1. LINEアプリ上の中で指定したWebアプリを起動したい場合
  2. Webアプリ上から、LINEメッセージを送信したい場合

 つまり、WebアプリとLINEのメッセージ画面の双方を利用したアプリケーションを作成したい場合には、LIFFアプリにすることでより利用者が自然な流れでサービスを使えるようになります。

 例えば、図3のような来店予約を想定します。

図3:LIFFアプリの利用シーン例
図3:LIFFアプリの利用シーン例

 予約の日時やその他の入力はWebアプリ画面で作成します。予約依頼の情報をWebアプリからLINEメッセージとして送信します。そして、予約結果をそのメッセージへの返信で通知します。

 利用者の確定処理をLINEメッセージとして送信するのは、その後の結果をメッセージとして返信するためです。このようにすることで、Messaging API側で有料送信としてメッセージを送信せず、返信として無料で結果が送信できます。

 このような利用ケースで、Webアプリだけの場合には、予約結果を画面上に表示するだけでなく、あとで利用者が確認できるようにするためにも一般的にはメールで通知します。しかし、LIFFアプリではこのようにLINEアプリの中だけで利用が完結します。

 このように「ともだち登録」機能を使ったチャネルサービスを運用しているのであれば、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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング