LIFF開発とは？できること・活用事例・アプリ開発の手順を解説【2024年最新版】

「公式アカウントは開設したが、もっとビジネスにLINEを活用したい」と考えている店舗・企業の方であれば、注目の高まる「LIFF開発とはなにか？」気になっているのではないでしょうか？

・LIFF開発とは？LIFFアプリとLINEミニアプリは違う？
・LIFFアプリ開発でなにができるようになる？
・LIFFアプリの開発方法は？

そこで本記事は、LIFF開発でなにができるのか、作れるアプリや開発手順を含む知っておきたいLIFF開発の基礎知識を徹底解説！LIFF開発を具体的にイメージできる活用事例も紹介します。

※LIFFの自社開発が難しい、開発パートナーとしてタッグの組める優秀なLIFFアプリ開発会社を探している方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

【無料】おすすめのLIFFアプリ開発会社を紹介してもらう

アプリ開発に役立つ記事もご覧ください LIFF開発におすすめ！アプリ開発かんたんマニュアル

LIFF（LIne Front-end Framework）開発とは

画像引用：Saichat

LIFF（LIne Front-end Framework）とは、LINEが提供しているWebアプリケーション・プラットフォームのこと。LINEオフィシャルアカウント、LINE NEWSの記事ページ、スタンプショップなどでLIFFが活用されています。広く一般にも公開されており、LINEアプリの持つ機能を利用したWebアプリを誰でも開発できます。

つまり、LIFF開発とは「LINEアプリの持つ機能を利用できる、LIFFプラットフォームで動作するWebアプリを開発」すること。こうしたLIFFで動作するWebアプリのことをLINEでは「LIFFアプリ」と呼んでいます。

LIFFプラットフォームで動作する「LIFFアプリ」

LIFFアプリの特徴として挙げられるのは、下記の通りです。

• LINEアプリに組み込まれた「LIFFブラウザ」で起動すること
• ユーザーのプロフィール情報を安全に取得できること

例えば、ユーザーと友達になるだけでトークルームから直接LIFFアプリを起動でき、ユーザー登録やログイン不要でサービスを利用できます。また、LIFFアプリ開発で利用されるソフトウェア開発キット「LIFF SDK v2」からはクロスブラウザ機能もサポートされたため、PCなどのWebブラウザからもLIFFアプリを起動可能。どのような環境でもLINEとシームレスに連携した環境を構築できるのです。

LIFFで開発できるアプリの種類と違い

LIFFアプリという名称を聞いて、LINEミニアプリとなにが違うのか疑問を感じた方も多いでしょう。実は、LINEミニアプリもLIFFプラットフォームで動作しており「LINEミニアプリはLIFFアプリの一種」と定義されています。ただし、同じLIFFプラットフォームで動作する共通点はあるものの、両者には以下のような違いがあります。

参考：LINE API UseCase

LINEミニアプリには「LINE上で公開される」「LINE Payが実装できる」などのメリットがあります。店舗の予約機能構築や自社サービスの会員証発行などができます。ただし審査・認証が必要なため、やや開発のハードルが高くなる傾向にあります。

一方LIFFアプリは、トークルームからしか起動できない制限はあるものの、審査・認証が不要なため、好きなタイミングでリリースできる気軽さがあるといえるでしょう。本記事でも、LIFFアプリ開発を中心に解説していきます。

LINEミニアプリについてより詳しく知りたい方は、以下の記事も参考にしてください。
関連記事：LINEミニアプリ開発とは？開発会社と開発費用の相場について解説

【無料】LIFF開発について相談する

LIFFアプリの仕組み・機能・できること

ここまでの解説でもお分かりのように、LIFFアプリはLIFF SDKの組み込まれた「Webアプリ」です。つまり、Webアプリ開発の知識・スキルがあれば、LIFFアプリ自体の開発は可能。利用される開発言語・技術も「HTML」「CSS」「JavaScript」などの一般的なWeb技術が中心になります。

もちろん、「LIFFアプリ = Webアプリ」でもあるため、LIFFアプリを開発・活用するにはWebサーバ、アプリケーションサーバのホスティングが必要です。

LINE Login / Messaging API連携

画像引用：LINE API Use Case「LINE予約システムで、手軽にお店の予約を」

LINE外部のサービスにホスティングされたWebアプリを、LIFFアプリとしてLINEに組み込む仕組みが「LIFF SDK」です。LIFF SDKは「LINE Login」と統合されていて、LINEビジネスユーザーにはおなじみの「Messageing API」との連携も可能です。例えば、サロンチェーンの公式アカウントにLIFFアプリを導入すれば、店舗検索・スタッフの検索・予約から、確定メッセージ・リマインダーまでを友達登録するだけで実現できます。

画面サイズを選べるLIFFブラウザ

LIFFアプリは、ユーザーがトークルームからURLをタップすると、LIFFブラウザから起動します。

このときのLIFFブラウザ表示領域は、「Full」「Tall」「Compact」3つの画面サイズが用意されており、LIFFアプリの利用目的に応じて選択可能。開発したLIFFアプリを登録する際に、どれかひとつを選択する必要がありますが、後から任意のサイズに変更可能です。

画像引用：LINE Developers「LINE Front-end Framework（LIFF）」

ちなみに、画面サイズを「Full」に設定すると、ヘッダーにはアクションボタンが表示されます。アクションボタンをクリックしてもらうと、LIFFアプリをユーザーの友だちにシェアしてもらえます。

便利機能を実装できるユーティリティー

LIFFアプリ開発をアシストする便利機能も実装可能なユーティリティーが用意されているのも、LIFF SDKの特徴です。例えば「scanCodeV2」は、LINEアプリ経由ではなく、WebRTCを利用してLIFFブラウザから端末のカメラを直接制御できるユーティリティーです。LIFFアプリの登録時にチェックを入れるだけで利用できるため、開発コストの削減にもつながります。

Share Target Picker

画像引用：LINE-engineering

LINEならではのLIFF機能としては、送信先を選んでLINEの友達にメッセージを送信できる「Share Target Picker」が挙げられるでしょう。自分以外の友達にもメッセージ送信できるため、情報の拡散やサービス連携への誘導などが可能になります。

【無料】LIFF開発について相談する

LIFFアプリの活用事例

LIFFアプリのメリットは、iOS / Android向けのアプリを用意することなく、6,600万人といわれるLINEユーザーにリーチできること。また、登録の手間なく気軽に利用してもらえること。そして、顧客の特性に応じたメッセージ配信・キャンペーンを実施できることです。こうしたLIFFアプリの特性を活かした活用事例を2つほど紹介しておきましょう。

株式会社ジンズ

2001年のアイウエア事業参入以来、急成長を遂げている株式会社ジンズ。既存顧客との接点として「JINSアプリ」を活用していた同社ですが、ライトユーザーとの関係性強化を目的に、2018年からLINE公式アカウントの本格運用を開始。「待ち時間確認」「店舗検索」などをLIFFアプリで提供するほか、LINE Beaconを活用したキャンペーンも展開しています。

画像引用：LINE for Business

LINE Beaconで配信されたメッセージを受け取り、スロットを回すだけで割引クーポンが当たる「スロットキャンペーン」が大好評。各種施策の成果は、約200万人という友だち数になって現れています。

ロクシタンジャポン株式会社

コスメティックブランド「L’OCCITANE」を中心に、国内100店舗以上を運営するロクシタンジャポン株式会社。ECチャネルとの統合やオムニチャネルを推進するため、LIFFアプリを活用した「モバイル会員証」施策を展開しています。

画像引用：LINE for Business

自社ECサイトに、Messaging APIを活用したLINEログイン機能を実装。また、MAツールと併用したメッセージ配信やキャンペーンを実施するとともに、LIFFアプリを会員証とすることで実店舗との連携も実現しました。これにより、新規顧客の40%が会員登録してくれるようになり、ユーザーごとに最適な施策を実行できるようになりつつあります。

【無料】LIFF開発について相談する

LIFFアプリの開発手順

それでは、具体的にLIFFアプリ開発はどのような方法・手順で進めていけばいいのか。以下から簡単に解説していきます。

プロバイダーとチャネルの作成

LIFFアプリを開発・公開するためには、LINE Developersコンソールにアクセスして「プロバイダー」「チャネル」を作成する必要があります。操作は簡単。LINEアカウントもしくはビジネスアカウントでLINE Developersコンソールにログインして「開発者アカウント」を作成してから、ホーム画面の「新規プロバイダー作成」をクリックします。

画像引用：LINE Developers「チャネルを作成する」

画面が表示されたら、任意のプロバイダー名を入力して「作成」をクリック。チャネルの作成に移ります。チャネルとは、LINEプラットフォームが提供する機能を利用するための通信路のことです。

画像引用：LINE Developers「LINE Developersコンソールの概要」

プロバイダーページの「チャネル設定」タブにいくつかのチャネル種類が表示されますが、LIFFアプリ開発の場合は「LINEログイン」でチャネルを作成します。

プロバイダー・チャネルの作成が完了したら、LIFFアプリを開発していきましょう。既存のWebアプリに「LIFF SDK」を組み込むだけでも問題ありませんが、新規にLIFFアプリ開発する場合は、LINEが用意する「Create LIFF App」を活用してLIFFアプリの開発環境を構築できます。

Create LIFF Appとは

Create LIFF Appとは、質問に答えていくだけで「LIFFアプリのひな形」「開発環境」を生成してくれる「CLI（コマンドラインインターフェース）」ツール。たとえば、「$ npx @line/create-liff-app」コマンドを実行して質問に答えていくと、以下のようなプログラミング言語 / フレームワークを生成してくれ、すぐに開発に取りかかれます。

Next.jsであれば、バックエンドも含めたLIFFアプリ開発が可能。既存のWebアプリを活用しながら、ReactでLIFFアプリのフロントエンドを開発するなども可能です。

LIFFアプリにLIFF SDKを組み込む

開発したWebアプリは、そのままではLIFFアプリとして機能しません。すでに解説したように、Webアプリに「LIFF SDK」を組み込むことでLIFFアプリとして機能します。LIFF SDKを組み込む方法は大きく「CDNパスを指定する」「npmパッケージを利用する」の2つがあります。

CDNパスを指定して組み込む

開発したLIFFアプリの「<script>」要素「src」属性に、LIFF SDKのCDNパスを指定する方法です。LIFF SDKのメジャーバージョンアップの際にURLを更新する必要のある「CDNエッジパス」および、現時点でのLIFF SDKを使い続ける際の「CDN固定パス」を選べます。たとえば、CDNエッジパスの指定例は以下の通り。

・<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

npmパッケージを利用する

LIFF SDKのインストーラーとして用意された「npmパッケージ」を、WebアプリにインストールしてLIFFの機能を利用する方法です。手順は以下の2つ。

LIFF APIの呼び出し設定

WebアプリにLIFF SDKを組み込むと、LIFFアプリならではのさまざまな機能をAPIで呼び出せるようになります。たとえば、「liff.login()」メソッドでログイン処理を実行する、ログイン時にLIFFアプリが動作しているユーザー環境を取得するなどが可能です。

1 ログイン処理

2 LIFFアプリの動作環境取得

ホスティングサーバ

画像引用：Firebase

Webアプリである「LIFFアプリ」をデプロイ（展開）するには、ホスティングサーバが必要です。LINEでは、LIFFアプリのデプロイ先としてAWS / GCPなどのパブリッククラウドを想定しているようですが、どこまでサービスをスケーリングできるかわからないのであれば、mBaaS（mobile Backend as a Service）を利用するのもひとつの方法です。

たとえば、Googleが提供するサーバレスサービス「Firebase」であれば、Webアプリのホスティングだけでなく、プッシュ通知やアナリティクスによる分析など、必要なサービスだけ利用可能。
無料枠が設けられているため、まずはスモールスタートで様子を見たいというニーズにもピッタリです。

Firebaseについてより詳しく知りたい方は、以下の記事も参考にしてください。
関連記事：アプリ開発を効率化するFirebaseとは？活用するメリット・注意点・アプリとの関係性を解説！

チャネルにLIFFアプリを登録

最後に、完成したLIFFアプリを公開します。LINE Developersコンソールで「LINEログイン」>「LIFF」タブを選択し「追加」をクリックします。

基本情報を入力して「追加」をクリックすると「LIFF ID」「LIFF URL」が生成されます。トーク画面にLIFF URLを入力し、LIFFアプリが開けるかどうかチェックしてみましょう。

注意！LIFFアプリ開発ではカスタム機能は利用できない

LINEと連携した多彩な機能を利用できるLIFFアプリですが、カスタム機能は利用できないことに注意が必要。カスタム機能とは、LINEミニアプリのみで実現できる以下のような機能のことです。

LINE公式アカウントの活用戦略にもよりますが、カスタム機能が必要なのであれば、LINEミニアプリ開発も視野に入れた検討が必要です。

【無料】LIFF開発について相談する

LIFF開発まとめ

LINEビジネスユーザーから注目される「LIFF」とはなにか？知りたい方に向け、本記事では、LIFF開発でできること、作れるアプリや開発手順・活用事例を含む、知っておきたいLIFF開発の基礎知識を解説してきました。

HTML / CSS / JavaScriptなどのWeb技術で開発可能なLIFFアプリは、ある意味、比較的ハードルの低い取り組みやすいアプリだといえるかもしれません。しかし、だからこそLINEとの連携を含めたサービス設計、アイデアが重要。実現可能性の検証も含め、判断に迷うようなことがあれば、外部専門家のアドバイスを求めることも必要でしょう。

※LIFFの自社開発が難しい、開発パートナーとしてタッグの組める優秀なLIFFアプリ開発会社を探している方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

コンサルタントのご紹介 岩田 専任のコンサルタントが、
お客様の予算と目的を丁寧にヒアリング。
最適な会社をピックアップ・ご紹介させていただきます！
初心者の方でも安心してご相談いただけます。

【無料】おすすめのLIFFアプリ開発会社を紹介してもらう