TOP

トップ

Service

事業紹介

動画配信パッケージ

LINEミニアプリ開発

Shopify開発

デザイン・開発まるっとパック

プロダクト/システム運用保守サービス

Lab型開発サービス

地域DXソリューション

Works

実績

インタビュー

開発実績

Products

自社プロダクト

About

会社概要

会社情報

FAQ

お役立ち資料

Blog

ブログ

Recruit

採用情報

採用情報

採用メッセージ

News

ニュース

Contact

お問い合わせ

thumb image

LIFFとは LINEの中で動くWebアプリでできること、できないこと

LINEでお店の会員証を開いたり、予約画面を出したりしたことがあると思います。あの画面の多くは、LINEのアプリそのものではなく、LINEの中で開いているWebページです。それを作るための仕組みがLIFFです。

LIFFは一般に「リフ」と呼ばれます。LINE Front-end Framework の頭文字で、LINEヤフー株式会社が提供しているWebアプリのプラットフォームです。

この記事では、LIFFでできることと利用条件、画面や起動方法を設計するときの注意点を説明します。開発の手順とコード例も紹介します。

Enlyt(エンライト)は福岡の受託開発会社で、LINEミニアプリとLIFFアプリの開発を続けてきました。実際に作って運用してきた立場から書きます。

システム開発をお考えなら、
私たちEnlytエンライトにご相談ください。
お客様の業務内容や目的を伺い、必要な機能と進め方を一緒に整理します。どんな開発をしてきた会社か、実績とサービス内容をご覧ください。

サービスを見る開発事例を見る

LIFFとは何か

LIFFの仕組みのイメージ

LIFFは、自社で用意したWebページを、LINEアプリの中で開けるようにする仕組みです。中身はHTML、JavaScript、CSSで作られた、ふつうのWebページです。そこにLIFF SDKという部品を読み込むと、LINEの情報を受け取れるようになります。

ふつうのWebページとの違いは、誰が見ているかが分かることです。LINEにログインした状態で開かれるため、LIFF SDKを通じてユーザーIDや表示名を受け取れます。会員証や予約のように、相手が誰か分からないと成り立たない画面を、ログイン画面を自前で作らずに出せます。

名前の意味

正式名称は LINE Front-end Framework です。フロントエンドは、利用者が操作する画面側を指します。公式に読み仮名は示されていません。

LINEミニアプリとの関係

よく一緒に出てくるLINEミニアプリも、LIFFの上で動くWebアプリです。LIFFが土台にあたります。

LINEミニアプリには、認証審査を通していない未認証ミニアプリと、通した認証済ミニアプリがあります。審査が必須というわけではありません。未認証のままでも作れますが、使える機能に制限があり、ヘッダーにエンドポイントURLのドメイン名が表示されます。認証を通すと、ホーム画面へのショートカットなどが使えるようになります。

公式ドキュメントでは、新規のLIFFアプリはLINEミニアプリとして作成することを推奨しています。今後、LIFFとLINEミニアプリのブランド統合を予定しているためです。

未認証ミニアプリと認証済ミニアプリの違いや、それぞれで使える機能の条件は、LINE Developersの公式ドキュメントにまとまっています。

liff.line.me というURLを見かけたとき

LINEのトークやリッチメニューから画面を開くと、アドレスが liff.line.me で始まっていることがあります。見慣れないドメインなので、不審に思う方もいます。

これはLIFFアプリを開くためのURLで、LINEヤフーのドメインです。liff.line.me/ のあとに続く数字と英字の並びがLIFF IDで、どのLIFFアプリを開くかを指しています。このURLを開くと、そのLIFFアプリに設定されているエンドポイントURL、つまり事業者が用意したWebページが読み込まれます。

つまり liff.line.me というアドレス自体は、事業者のサービスをLINE経由で開いていることを示すもので、それ以上の意味はありません。中身が信頼できるかどうかは、どの事業者のページが開かれているかで判断します。

line://app/ で始まる文字列を見かけることもあります。これは古い形式のURLスキームで、同じくLIFFアプリを指しています。

LIFFでできること

LIFFでできることは、大きく分けると3つです。LINEの情報を受け取ること、LINEにメッセージを送ること、そして端末の機能を使うことです。

LINEのアカウント情報を受け取る

LINEログインを通して、ユーザーID、表示名、プロフィール画像、ステータスメッセージを受け取れます。

ユーザーIDは、プロバイダーごとに別の値が発行されます。同じプロバイダーの下にあるチャネルなら、種類が違っても同じ人には同じIDが割り当てられます。プロバイダーが違えば、同じ人でも別のIDになります。

チャネルは、作成後に別のプロバイダーへ移せません。既存のLINEサービスと会員情報を連携させる予定がある場合は、新しく作る前に、そのサービスで使っているプロバイダーを確認してください。

このIDを自社の会員番号と結びつけると、次に開いたときに誰かが分かります。会員証やポイント、予約履歴の表示は、この仕組みの上に成り立っています。IDの扱いについてはLINEのID連携の仕組みでも書いています。

開いているトークにメッセージを送る

LIFFアプリを開いたトークに、利用者の名前でメッセージを送れます。予約が完了したときに、その内容をトークに残す、といった使い方です。起動元と権限の条件については、次の章で説明します。

送り先を選んでもらって送る

送信先を利用者に選んでもらう画面を出して、そこへメッセージを送ることもできます。紹介やシェアの導線で使われます。利用者がログインしていることと、LINE Developersコンソールでこの機能を有効にしていることが条件です。

端末の機能を使う

中身はWebページなので、端末の機能は、LIFFブラウザとOSが対応している範囲で使えます。カメラで読み取る、位置情報を受け取る、写真を選んでもらう、といった処理が書けます。モバイルバッテリーの貸し出しや、店頭での読み取りに使われているのはこの部分です。

LIFFで条件が付くこと、できないこと

LIFFには、起動方法や権限、対応ブラウザによる制約があります。必要な機能が想定する利用環境で動くかどうかは、設計に入る前に確認してください。

トークへの送信には3つの条件が付く

さきほどの「開いているトークにメッセージを送る」は、どこから開いても使えるわけではありません。公式のAPIリファレンスには、次の3つが条件として挙げられています。

  • 1対1のトーク、グループトーク、または複数人トークから起動したLIFFアプリのLIFFブラウザ内であること
  • chat_message.write スコープが有効であること
  • LIFFアプリが「最近使用したサービス」から再読み込みされていないこと

満たさない場合は403のエラーになります。公式が挙げている例は、Keepメモの機能を利用してアクセスした場合、ウェブサイトのリダイレクト処理などによりLIFFアプリを開くためのURLスキームにアクセスした場合、LIFF間遷移のあとにスコープが無効になった場合、利用者がスコープを認可しなかった場合です。

送れるのは1回につき5通までで、テンプレートメッセージとFlex MessageではURIアクションしか使えない、といった制限もあります。

トークへの送信を組み込む場合は、想定する起動経路でこの3条件を満たすか確認してください。

こちらから好きなときに通知は送れない

LIFFは利用者が開いたときに動くもので、事業者が任意のタイミングで通知を送る機能はありません。再来店を促す配信やキャンペーンの案内は、LINE公式アカウントからの配信として別に設計します。LIFFの中だけで完結しないので、見積もりの前に関係者で共有しておくと行き違いが減ります。

LIFFブラウザでしか動かないものがある

LIFFアプリは外部のブラウザからも開けます。公式ドキュメントでは、LINEアプリの中にある通常のLINE内ブラウザも、LIFFからは外部ブラウザとして扱われるとされています。

外部ブラウザで開かれた場合、LIFFブラウザ向けの機能は使えません。liff.sendMessages() によるトークへの送信や、LINEミニアプリのアプリ内課金などがこれにあたります。押しても何も起きないボタンが残らないよう、どこで開かれているかを判定して表示を分けます。

LIFFブラウザが対応していないWeb技術がある

通常のブラウザで使えても、LIFFブラウザでは使えない機能もあります。公式ドキュメントには、次の4つが挙げられています。

  • theme-color メタタグ
  • download属性
  • ホーム画面への追加(A2HS)
  • Service Worker

LIFFブラウザでは、Service Workerを前提としたオフライン対応やWebプッシュ通知は使えません。外部ブラウザで開く場合は、そのブラウザの対応状況を別に確認します。今後サポートされる可能性があるとも書かれていますが、いま設計するなら前提にはできません。

画面の作り込みは自分たちの仕事になる

LIFFは画面の部品を提供するものではありません。ボタンの形も一覧の並べ方も自分たちで作ります。LINEの画面になじむように、見た目を調整する作業も開発の範囲に入ります。

LIFFを使った開発の事例

実際にどう使われているかを3つ挙げます。

乗車予約をLINEの中で完結させた例

オンデマンド交通システムの予約を、LIFFアプリで受けられるようにした事例です。2024年に公開したインタビューの時点で、この交通システム自体の導入自治体は77を超えていました。予約は電話が8割ほどを占めていて、オペレーターの負担が大きく、耳の不自由な方は使えないという状態でした。インターネット予約も用意されていましたが、高齢の利用者には操作が難しいという課題がありました。

そこで、すでにあるインターネット予約の仕組みを、LINEの中から使えるようにしました。新しいアプリを入れてもらわずに済むことが、この選び方の理由です。なお、77という数字は交通システム全体の導入数で、LIFFアプリの導入数ではありません。

詳しくは乗車予約LIFFアプリの開発事例と、導入にあたってのインタビューに載せています。

デジタル会員証の例

ロクシタンのLIFFを活用した事例

化粧品ブランドのロクシタンは、LINE公式アカウントの中でデジタル会員証を提供しています。2019年2月に公開されたケーススタディによると、取材の時点で、施策開始後に獲得した新規顧客のうち約40%がモバイル会員証に登録していました。

同じ記事の中で、会員証と購入率の関係については分析を続けている段階だと書かれています。この数値は取り組み全体の結果であり、LIFFを導入すれば同じ成果が得られることを示すものではありません。

出典はLINEヤフー for Business のケーススタディです。

モバイルバッテリーの貸し出しの例

ChargeSpotのLIFFを活用した事例

ChargeSPOTは、駅や商業施設に設置されたモバイルバッテリーを借りて返せるサービスです。公式の案内によると、LINE公式アカウントを友だち追加したあと、メニューからレンタルの画面を開き、バッテリースタンドのQRコードを読み取って決済まで進める流れになっています。

専用アプリを事前にインストールしていなくても利用できます。流れはChargeSPOTのLINE公式アカウントの使い方に書かれています。

開発環境を用意する

LIFFアプリの開発環境のイメージ

ここからは開発を担当する方向けの内容です。以下は、LINEログインチャネルにLIFFアプリを追加する場合の手順です。新規で作る場合は、前に書いたとおりLINEミニアプリとして作ることが公式で推奨されているので、そちらの手順も確認してください。

プロバイダーを決める

最初にLINE Developersコンソールでアカウントを作ります。LINEアカウントでログインできます。

次にプロバイダーを決めます。プロバイダーはサービスを提供する事業者の単位で、この下にチャネルを作ります。社内の別部署がすでに作っている場合があるので、新しく作る前に確認してください。連携させたいLINEサービスがあるなら、同じプロバイダーにそろえます。受託で作る場合も、開発会社ではなく発注側のプロバイダーを使います。

LIFFアプリを登録する

チャネルの中でLIFFアプリを追加します。ここで決めるのは、アプリの名前、画面の表示サイズ、そしてエンドポイントURL(LINEから呼び出される、自分たちが用意したWebページのアドレス)です。LINEのトークやリッチメニューからLIFFアプリが開かれると、このURLのページが読み込まれます。

あわせて、どの情報を受け取るかの権限を選びます。プロフィールを受け取るなら profile、トークにメッセージを送るなら chat_message.write が必要です。後で出てくるIDトークンを使う例では、openid スコープも有効にして、利用者の認可を得ます。スコープを選ばなかった場合や利用者が認可しなかった場合は、IDトークンを取得できません。後から変更できますが、認証済ミニアプリとして出す場合はスコープの変更に再審査がかかるため、最初に整理しておくと手戻りが減ります。

手元で動かす

LIFFアプリの中身は、ふつうのWebページです。HTMLにLIFF SDKを読み込むところから始めます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script type="text/javascript" src="index.js" defer></script>
<title>LIFF App</title>
</head>
<body>
<h1>Hello LIFF App</h1>
<p id="name"></p>
<button id="sendButton" disabled>トークに送る</button>
<button id="shareButton" disabled>友だちに送る</button>
</body>
</html>

見た目は style.css で整えます。

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  padding: 16px;
}
h1 {
  font-size: 20px;
  color: #333;
}
button {
  background-color: #06c755;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}
button:disabled {
  background-color: #ccc;
  cursor: default;
}

ボタンは最初は押せない状態にしておき、初期化が終わってから有効にします。この2つとJavaScriptをWebサーバーに置き、そのアドレスをエンドポイントURLに設定します。手元で動かすときも、httpsで外から見える状態にします。LINEはhttpのURLを受け付けません。

LINEの中で確認する

ブラウザで開いて動くことと、LINEの中で開いて動くことは別です。LIFFブラウザでしか動かないメソッドがあるので、LINEアプリから実際に開いて確認してください。

LIFFアプリのURLはコンソールに表示されます。それを自分のトークに貼って開けば、利用者と同じ経路で確認できます。

LIFF SDKでよく使う処理

実際に書くコードを、動く順に並べます。

初期化してから、プロフィールを受け取る

プロフィール取得などの処理は、初期化が終わってから実行します。この index.js は、初期化、ログインの確認、プロフィールの取得、ボタンの用意を順に行う形にしています。profileスコープを有効にしている前提の例です。

const liffId = "自分のLIFF ID";
 
async function main() {
  await liff.init({ liffId });
 
  if (!liff.isLoggedIn()) {
    liff.login();
    return;
  }
 
  const profile = await liff.getProfile();
  document.getElementById("name").textContent = profile.displayName;
 
  await sendIdTokenToServer();
  setupSendButton();
  setupShareButton();
}
 
main().catch(console.error);

外部のブラウザで開かれた場合は、ここでログイン処理が入ります。ログインを通せば、同意された権限の範囲でプロフィールを受け取れます。

サーバーに渡すのは、プロフィールではなくトークン

画面側で受け取ったユーザーIDをそのままサーバーに送り、本人確認の代わりにする作りは避けてください。画面側から送られてくる値は、書き換えられる可能性があるためです。

公式ドキュメントにも、liff.getDecodedIDToken() および liff.getProfile() で取得したユーザーのプロフィールの詳細を、LIFFアプリからサーバーに送信しないでください、と書かれています。送るのはIDトークンかアクセストークンで、サーバー側でLINEのエンドポイントに問い合わせて検証します。

次は、初期化とログインの確認が終わったあとに、IDトークンを自社のサーバーへ送る部分です。さきほどの main() から呼び出します。送信先の /api/login と、受け取ったトークンを検証するサーバー側の処理は別に実装します。

async function sendIdTokenToServer() {
  const idToken = liff.getIDToken();
  if (!idToken) {
    console.error("IDトークンを取得できませんでした");
    return;
  }
 
  await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ idToken })
  });
}

既存の会員番号と結びつけるときも同じです。トークンを検証したうえで、その会員本人であることを確かめる処理を別に用意します。

開いているトークにメッセージを送る

前の章の3つの条件を満たした状態で、利用者のボタン操作から呼び出します。クリック処理の登録も初期化のあとに行うので、main() から呼ぶ関数にしています。

function setupSendButton() {
  const button = document.getElementById("sendButton");
  button.disabled = false;
 
  button.addEventListener("click", async () => {
    try {
      await liff.sendMessages([
        { type: "text", text: "予約を受け付けました" }
      ]);
    } catch (error) {
      console.error(error);
    }
  });
}

送り先を選んでもらって送る

友だちやグループを選ぶ画面を出して、選ばれた相手に送ります。紹介やシェアに使う処理です。コンソールでこの機能を有効にしておきます。こちらも main() から呼んで、初期化のあとにボタンを有効にします。

function setupShareButton() {
  const button = document.getElementById("shareButton");
  button.disabled = false;
 
  button.addEventListener("click", async () => {
    try {
      const result = await liff.shareTargetPicker([
        { type: "text", text: "このお店の予約ページです" }
      ]);
      console.log(result ? "送信しました" : "送らずに閉じられました");
    } catch (error) {
      console.error(error);
    }
  });
}

LIFFブラウザかどうかを見る

LIFFブラウザかどうかで使える処理が変わるので、判定して表示を分けます。LINEアプリの中でも、通常のLINE内ブラウザで開かれた場合は外部ブラウザと同じ扱いです。

if (liff.isInClient()) {
  // LIFFブラウザで開かれている
} else {
  // 外部ブラウザ、またはLINE内ブラウザで開かれている
}

公開するまでに決めること

手元で動いたら、公開に向けて決めることがいくつか残ります。

LIFFアプリを配信するWebサーバーを決めます。ファイルを置いてhttpsで配信し、そのアドレスをエンドポイントURLにします。サーバーが止まるとLINEの中の画面も開かなくなるため、公開後は正常に動いているか監視する必要もあります。

利用する機能に必要な権限も確認します。コンソールで設定したスコープが足りなければエラーになり、多すぎれば利用者の同意画面に不要な項目が並びます。

利用者が画面を開く方法も決めます。リッチメニューから開くのか、トークのメッセージから開くのか、店頭のQRコードから開くのか。入口によって使える処理が変わります。

公開後の保守担当者も決めておきます。LINE側の仕様は変わりますし、認証済ミニアプリの場合は、チャネル名やエンドポイントURL、スコープなどの変更に再審査がかかります。仕様変更を確認し、必要な修正を担当する人を決めておきます。

自社で作るか、外に出すか

LIFFアプリそのものは、Webページが作れる人なら作れます。難しいのはLIFFの部分ではないことが多い、という印象です。

手が止まりやすいのは、既存のシステムとつなぐところです。会員情報がどこにあるか、予約の在庫をどこが持っているか、LINEのユーザーIDをどこに保存するか、トークンをどこで検証するか。連携方法は、既存システムの構成やデータの管理方法によって異なります。開発前に、それぞれの仕様を確認してください。

もうひとつは、公開したあとです。LINE側の仕様変更に追いつく作業と、利用者からの問い合わせに答える作業が残ります。作るところまでは自社でやって、運用だけ外に出す形もあります。

既製のサービスで足りることもあります。会員証やスタンプカードのように、よくある機能だけならパッケージが出ています。既製サービスで対応できる機能と、自社向けの開発が必要な機能を分けてから、開発範囲を決めます。

EnlytでのLIFF開発

Enlytでは、LINEログインからのユーザーID連携、基幹システムとのID連携、アンケートの画面、Messaging APIを使った配信まで、LINEまわりの開発を続けてきました。

ご相談をいただいたときは、LIFFで作ると決まっている場合でも、まず使う方と業務の条件を伺っています。LINEミニアプリのほうが合うこともあれば、既製のサービスで足りることもあるためです。要件が固まっていない状態でもご相談いただけます。

これまでの開発は大手飲料メーカーのLINEミニアプリの開発事例、ポイント表示APIの開発事例、大手小売スーパーのLINEアプリの開発事例などでご覧いただけます。

LINEの中で何を動かすか。迷ったら私たちEnlytエンライトにご相談ください!

LINEで何をしたいか、いまお使いのシステムとどうつなぐか、誰が運用するかを伺い、LIFFで作る範囲と進め方を整理します。既製のサービスで足りる場合はそうお伝えします。

サービス内容 →対応範囲、進め方、クライアント開発の事例 →これまでの開発実績お客様の声 →お客様インタビューどんな会社? →代表とメンバー、考え方
開発の資料をダウンロード(無料)LIFF開発を相談する

よくある質問

LIFFとLINEミニアプリはどちらを選べばよいですか

これから新しく作るなら、公式ドキュメントがLINEミニアプリとして作成することを推奨しています。ブランド統合が予定されているためです。そのうえで、認証審査を受けるかどうかは別の判断になります。未認証のままでも使えますが、機能に制限があり、ヘッダーにドメイン名が出ます。未認証ミニアプリと認証済ミニアプリの違いと利用条件は、LINE Developersの公式ドキュメントをご確認ください。

いまあるWebサイトをLIFFアプリにできますか

既存サイトの構成や使っている機能によりますが、LIFFアプリとして利用できる場合があります。LIFF SDKを読み込んで、LINE Developersコンソールにエンドポイントとして登録する流れです。ただし、LINEの中で開く前提の画面幅や、ログイン済みであることを前提にした動きは作り直します。Service Workerを使っている場合は、LIFFブラウザでは動かない点にも注意してください。

LIFFから利用者に通知を送れますか

事業者が任意のタイミングで通知を送る機能はありません。LIFFは利用者が開いたときに動くものです。開いているトークに送る処理はありますが、起動元と権限の条件が付きます。再来店の案内などは、LINE公式アカウントからの配信として別に用意します。

liff.line.me のURLは安全ですか

URL自体はLINEヤフーのドメインで、LIFFアプリを開くためのものです。開くと事業者が用意したページが読み込まれるので、中身の信頼性は、どの事業者のページかで判断します。

開発にどのくらいかかりますか

画面の数と、既存システムとつなぐかどうかで変わります。会員証のように画面が少なくつなぎ先がないものと、予約や在庫を扱うものとでは規模が違います。費用の考え方はLIFFアプリの導入を検討する企業向けガイドで整理しています。

まとめ

LIFFは、自社のWebページをLINEの中で開けるようにして、誰が見ているかを分かるようにする仕組みです。会員証や予約のように、相手が分からないと成り立たない画面を、アプリを入れてもらわずに出せます。

条件が付くのは3つです。トークへの送信は起動元と権限によること、事業者が任意のタイミングで通知を送る機能はないこと、LIFFブラウザではService Workerなど一部のWeb技術が使えないこと。どれも設計に入る前に確認しておく項目です。

新しく作る場合は、公式がLINEミニアプリとしての作成を推奨している点と、ユーザーIDがプロバイダーごとに変わる点を先に確認しておくと、後からの手戻りが減ります。

Enlytでは、ご希望の開発方式に加えて、利用する方や業務の条件を伺い、別の形も含めて検討します。何を作るか決まっていない段階でもご相談ください。

参考にした情報

バナー画像 バナー画像

他の記事

View More

arrow-forward

PM/ディレクター

自治体の公式LINE、住民が開く理由はありますか?官民MEET広島で自治体の方と話して感じたこと

#LINE #アイデア #サービス

PM/ディレクター

自分の性質、ちゃんと知ってますか?|マルチタスクが苦手なまま、仕事を回す方法

PM/ディレクター

ハルシネーション対策はプロンプトだけでは足りない AIに適当なことを答えさせない3つの判断

#アイデア #コミュニケーション #チーム