---
title: "LIFFとは？LINEアプリ内で動くWebアプリの仕組みと開発手順を実装目線で解説"
url: "https://www.issoh.co.jp/tech/details/3396/"
published: 2024-08-26
updated: 2026-10-20
categories: ["プラットフォーム"]
publisher: "株式会社一創"
---

# LIFFとは？LINEアプリ内で動くWebアプリの仕組みと開発手順を実装目線で解説

LIFF（LINE Front-end Framework）は、LINEヤフー株式会社が提供するWebアプリのプラットフォームです。自社で用意したWebページをLINEアプリの中で開き、そのユーザーのプロフィールやユーザーIDをLINEプラットフォームから受け取れる点が、ただWebページをLINEで共有するのとの違いになります。ここでは、LIFF URLとエンドポイントURLの関係、実行環境によって使えるAPIが変わる境界、LINE Developersコンソールでの登録から`liff.init()`までの開発手順、そしてLINEミニアプリとどちらを選ぶべきかまでを扱います。SDKは2026年6月29日リリースのv2.29.1が最新です。

## まとめ

- LIFFは、自社のWebアプリをLINEアプリ内のブラウザで開き、LINEのユーザー情報やメッセージ送信機能を使えるようにする仕組みです。
- 公開先は自社サーバーのまま。LINEログインチャネルにエンドポイント（**httpsのURLのみ・URLフラグメント不可**）を登録すると、`https://liff.line.me/{liffId}` という起動用のLIFF URLが発行されます。
- **設計の初期に確認すべきなのは、実行環境によって使えるAPIが変わる点です。**`liff.sendMessages()`はLIFFブラウザ専用、`liff.login()`は逆にLIFFブラウザでは使えません（`liff.init()`実行時に自動でログインするため）。
- 二次元コード読み取り`liff.scanCodeV2()`には、コンソールでのScan QR有効化に加えて**画面サイズがFull**という条件が付きます。旧`liff.scanCode()`は非推奨です。
- LIFFブラウザではService Workerが動きません。オフライン対応やプッシュ通知を前提としたPWA設計はLIFF内では成立しないと考えてください。
- 雛形は`npx @line/create-liff-app`で生成できます。v1.1.7（2026年1月14日）時点でvanilla・react・vue・svelte・nextjs・nuxtjsの6テンプレート、JavaScript／TypeScriptを選べます。
- 店舗の会員証や順番待ちのように「LINEの友だち基盤に乗せたい」ならLIFF、独立したブランド体験と検索流入が要件ならLIFFは向きません。ミニアプリとの違いは[LINEミニアプリの解説記事](/column/details/15161/)で扱っています。

## LIFFの定義とLINEアプリ内でWebアプリが動く仕組み

LIFFは、LINEアプリの中で動くWebアプリのためのプラットフォームです。実体は通常のWebアプリケーションで、HTML・CSS・JavaScriptで作り、自社のサーバーやホスティングサービスに置きます。ここにLIFF SDKを読み込んで初期化すると、そのページはLINEプラットフォームからユーザーIDや表示名を受け取れるようになります。ログイン画面を自前で作らずにユーザーを識別できるのが、LIFFを使う実利です。

### LIFF URLとエンドポイントURLの関係

LIFFでは、ユーザーが叩くURLと、実際にコンテンツを返すURLが分かれています。LINE Developersコンソールで自社ページのURLを「エンドポイントURL」として登録すると、LIFF IDとLIFF URLが発行されます。

| 項目         | 形式・条件                         | 役割             |
| ---------- | ----------------------------- | -------------- |
| エンドポイントURL | httpsのみ／URLフラグメント（#〜）不可       | 自社が用意する実体のページ  |
| LIFF ID    | 1234567890-AbcdEfgh           | SDKの初期化時に渡す識別子 |
| LIFF URL   | https://liff.line.me/{liffId} | ユーザーが開く起動用URL  |

ユーザーがLIFF URLを開くと、LINEのサーバーを経由してエンドポイントURLへ転送されます。この転送の過程でLINE側の情報がアプリに渡るため、トークルームに直接エンドポイントURLを貼ってしまうと、見た目は同じページが開いてもLIFFとしては機能しません。配布するのは必ずLIFF URLのほうです。

### LIFFブラウザ・LINE内ブラウザ・外部ブラウザという3つの実行環境

LIFFアプリが開かれる場所は3種類あり、この区別が後述するAPIの可否をそのまま決めます。

- **LIFFブラウザ**：LIFF URLから起動したときにLINEアプリ内で開く専用ブラウザ。iOSではWKWebView、AndroidではAndroid WebViewで動きます。LIFF固有の機能はここが基準です。
- **LINE内ブラウザ**：トークに貼られた通常のURLをLINEアプリ内で開いたときのブラウザ。同じLINEアプリの中でも`liff.isInClient()`はfalseを返し、APIの可否は外部ブラウザと同じ扱いになります。
- **外部ブラウザ**：Chrome、Safari、Edge、Firefoxなど。LIFF URLはPCのブラウザからも開けますが、LINEアプリに依存する機能は動きません。

WKWebViewとAndroid WebViewは、外部ブラウザが対応しているWeb技術のすべてを備えているわけではありません。公式が挙げるLIFFブラウザの非対応機能は、theme-colorメタタグ、リンクのdownload属性、ホーム画面への追加（A2HS）、そしてService Workerの4つです。**Service Workerが動かない以上、オフライン対応・バックグラウンド同期・プッシュ通知を前提としたPWAはLIFFブラウザ内では成立しません。**この4点は外部ブラウザでは問題なく使えるため、PCのChromeだけで動作確認を済ませると発覚が遅れます。実機のLINEアプリで開いた状態を必ず検証対象に含めてください。

## LIFFアプリでできること：取得できるユーザー情報と送れるメッセージ

LIFFで得られる機能は、大きく「ユーザーを識別する」と「LINEのトーク画面に働きかける」の2系統。どちらもコンソール側の設定と対応していて、コードだけ書いても有効になりません。

### ユーザー情報の取得とスコープ設定

`liff.getProfile()`を呼ぶと、ユーザーID・表示名・プロフィール画像・ステータスメッセージを取得できます。ただし取得できるのは、LIFFアプリの登録時にスコープを選んでいる場合に限られます。2026年1月8日以降の新規LINEミニアプリチャネルでは同意の簡略化が必須になり、自動で付くのはopenidのみです。要求と拒否の分岐は[LINEミニアプリの危険性とは？権限スコープ・審査要件・個人情報の取扱いを実装目線で解説](https://www.issoh.co.jp/tech/details/16710/)で扱っています。

| スコープ                | できること                 | 注意点                  |
| ------------------- | --------------------- | -------------------- |
| profile             | ユーザーID・表示名などプロフィールの取得 | —                    |
| openid              | IDトークンの取得（ユーザーの識別）    | —                    |
| email               | IDトークンにメールアドレスを含める    | メールアドレス取得権限の申請・付与が必要 |
| chat\_message.write | ユーザーに代わってトークへメッセージを送信 | 未付与だと403             |

会員登録の入力を省略したいだけなら`profile`で足ります。メールアドレスまで求めると権限申請が必要になるうえ、同意画面のハードルも上がる。要件を先に確定させてからスコープを決めてください。

### メッセージ送信・シェア・二次元コード読み取り

トーク画面に働きかける機能は3つを押さえておけば足ります。`liff.sendMessages()`はLIFFアプリを起動したトークルームへメッセージを送るAPIで、`chat_message.write`が付与されていないと403エラーが返ります。`liff.shareTargetPicker()`は送信先の友だちやグループをユーザー自身に選ばせる画面を出すAPIで、コンソールでシェアターゲットピッカーをオンにし、かつユーザーがログイン済みである必要があります。`liff.scanCodeV2()`は二次元コードリーダー。コンソールの「Scan QR」をオンにし、さらにLIFFアプリの画面サイズをFullにしないと利用できません。

送るメッセージの見た目まで作り込むなら、LIFFから送信するペイロードにはFlex Messageも指定できます。レイアウトの組み方は[LINE Flex Messageの構造を解説した記事](/tech/details/11046/)にまとめています。

## 実行環境で使えるAPIが変わる：LIFF開発でつまずく境界

LIFFの解説記事の多くは「できること」を一覧で並べて終わります。実際、上位表示されている解説記事2本を確認しても、実行環境ごとのAPI差分には触れていません。しかし実装が止まるのはたいていその先です。同じAPIでも、LIFFブラウザで開いたか外部ブラウザで開いたかによって動いたり動かなかったりします。ここを設計の初期に押さえておかないと、テスト段階で作り直しになります。

### 環境別に見たAPIの可否と前提条件

| API                      | LIFFブラウザ      | 外部・LINE内ブラウザ | 前提条件                          |
| ------------------------ | ------------- | ------------ | ----------------------------- |
| liff.isInClient()        | true          | false        | init完了前でも呼べる                  |
| liff.getProfile()        | 可             | 可            | profileスコープ／init完了後／外部はログイン済み |
| liff.login()             | 不可            | 可            | LIFFブラウザはinit時に自動ログイン         |
| liff.sendMessages()      | 可             | 不可           | chat\_message.write／トークから起動   |
| liff.shareTargetPicker() | 可             | 可（条件付き）      | コンソールで有効化／外部はSSOセッション必須       |
| liff.scanCodeV2()        | 可（iOS 14.3以降） | WebRTC対応なら可  | Scan QRをオン／画面サイズがFull         |

ここで注意したいのが`liff.login()`です。「未ログインならログインさせる」という素直な実装をLIFFブラウザで走らせても、そこでは`liff.init()`が自動的にログイン処理を済ませているため、このAPIは利用できません。外部ブラウザとLIFFブラウザの両方をサポートするなら、`liff.isInClient()`で分岐させるのが定石です。この関数は初期化の完了を待たずに呼べます。

`liff.sendMessages()`にも見落としがあります。動作するのは1対1のトーク、グループトーク、複数人トークから起動したLIFFアプリに限られます。友だち追加直後の案内やリッチメニュー経由の導線を設計するときは、起動元がトークルームかどうかを確認してください。`liff.shareTargetPicker()`のように環境や設定で可否が変わるAPIは、呼ぶ前に`liff.isApiAvailable()`で判定しておくと、UIの出し分けまで一貫させられます。

### 古い解説記事のコピーで踏む非推奨API

LIFFは2018年から更新が続いているため、検索で上位に出る解説記事のコードが現行仕様とずれていることがあります。写経する前に次の2点だけは確認してください。

- **`liff.scanCode()`は非推奨**：二次元コードリーダーを実装する場合、公式は`liff.scanCodeV2()`の使用を推奨しています。旧APIは外部ブラウザでは利用できません。
- **`liff.permanentLink.createUrl()`は将来の非推奨候補**：公式ドキュメントは、今後のメジャーバージョンで非推奨になる可能性があるとして`liff.permanentLink.createUrlBy()`を案内しています。新規実装では後者を選びます。

CDNのURLを写すときも同様です。公式ドキュメントのサンプルにはバージョン固定形式として`2.22.3`が例示されていますが、これは例であって最新版ではありません（最新はv2.29.1）。番号までコピーすると、古いパッチ版に固定されたまま運用が始まります。

## LIFFアプリの開発手順：チャネル登録からliff.init()まで

手順そのものは短く、コンソールでの登録とSDKの初期化の2段階です。Webアプリ本体の作り方は通常のフロントエンド開発と変わりません。LIFFで予約画面を作り、IDトークンをサーバーで検証して予約者を確かめる実装例は、[LINE予約システムを自作する構成とコード](https://www.issoh.co.jp/tech/details/18647/)にまとめています。

### LINE DevelopersコンソールでのLIFFアプリ追加

LINE Developersコンソールでプロバイダーを作り、LINEログインのチャネルを作成したうえで、そのチャネルにLIFFアプリを追加します。1つのチャネルには最大30件のLIFFアプリを追加できるため、画面ごとにチャネルを分ける必要はありません。追加時に指定する主な項目は次のとおりです。

- **エンドポイントURL**：httpsのURL。URLフラグメントは指定できません。
- **サイズ**：Compact・Tall・Fullの3つから選びます。フォーム入力のように縦に長い画面はTall以上、二次元コード読み取りを使う画面はFull（`liff.scanCodeV2()`の前提条件）です。
- **スコープ**：前述の`profile`や`chat_message.write`など、必要なものだけを選びます。

登録が完了するとLIFF IDが払い出されます。これを次のSDK初期化で使います。チャネルの作成・設定の考え方は、[Messaging APIの解説記事](/column/details/3302/)でも整理しています。

### LIFF SDKの導入とバージョンの決め方

SDKの読み込み方は2通りあります。npmパッケージとして入れる方法と、CDNから読み込む方法です。

```
npm install --save @line/liff
```

CDNの場合は、常に最新のv2に追従するパスと、パッチバージョンまで固定するパスのどちらかを選びます。

```
<!-- 最新のv2に追従 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

<!-- バージョンを固定（例: 2.29.1） -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/versions/2.29.1/sdk.js"></script>
```

SDKはUTF-8で書かれているため、HTMLソースをUTF-8以外の文字コードで作成する場合は`charset="utf-8"`をあわせて指定します。追従型は改善を自動で受け取れる代わりに、意図しない挙動変化が入る可能性があります。固定型はその逆で、リリースノートを定期的に見て自分で上げる運用が前提になる。検証環境を持てない小規模な案件では追従型、決済や予約を扱うなら固定型に寄せるのが実務上の落としどころです。

初期化は次の形です。

```
liff.init({
  liffId: "1234567890-AbcdEfgh"
})
.then(() => {
  // ここからLIFFのAPIを呼べる
})
.catch((err) => {
  console.log(err);
});
```

初期化はページを開くたびに必要です。同一のLIFFアプリ内で画面遷移した場合でも、遷移先のページで改めて`liff.init()`を呼びます。SPAではなく複数ページ構成で作るときに落としやすい箇所です。

### create-liff-appによる雛形生成とテンプレート6種

ゼロから設定を書くより、公式のCLIで雛形を作るほうが、SDKの読み込みと`liff.init()`が済んだ状態から始められます。

```
npx @line/create-liff-app
```

対話形式でテンプレートと言語を選ぶと、初期化まで通ったプロジェクトが生成されます。v1.1.7（2026年1月14日リリース）時点で選べるテンプレートはvanilla・react・vue・svelte・nextjs・nuxtjsの6種類、言語はJavaScriptとTypeScriptです。対話を完全に省略するには`-t`（テンプレート）と`-l`（LIFF ID）だけでは足りず、`--ts`／`--js`と`--npm`／`--yarn`もあわせて渡します。package.jsonの要件はNode.js 14以上ですが、Node 14はすでにサポート終了済みのため、実運用ではアクティブLTSを使ってください。

Next.jsのテンプレートについては、v1.1.7でApp Routerのみを対象とする修正が入りました。Pages Router前提の古い記事を見ながら生成すると構成が食い違うため、生成されたディレクトリ構造を先に確認してください。

## LIFFとLINEミニアプリの選び分け、LIFFを選ぶべきでない場面

LINEミニアプリは、LIFF上で動くWebアプリです。技術的な土台は同じで、違いは提供形態と審査にあります。

### 認証審査で開く導線と3つの制約

認証審査を通していない状態は未認証ミニアプリとなり、ヘッダーにタイトルとエンドポイントURLのドメイン名が表示されます。審査を通すとホーム画面へのショートカット追加、カスタムパス、チャネル同意の簡略化といった導線が開きます。一方で制約は3つ。アクションボタンを隠すモジュールモードが使えず、画面サイズはFull固定、1つのチャネルに複数のLIFFアプリを持つこともできません（通常のLIFFアプリは1チャネルに最大30件）。

判断はこう分けられます。**自社サービスの一部としてLINEから開ければ十分ならLIFF、LINEのホーム画面から再訪させる導線まで欲しいならミニアプリ**です。会員証や順番待ちのように、来店客が繰り返し開くものはミニアプリの再訪導線が効きます。逆に、キャンペーン期間だけ動かすフォームにミニアプリの審査コストをかける必要はありません。費用感を含む比較は[LINEミニアプリの導入判断をまとめた記事](/column/details/15161/)で扱っています。

### LIFFを選ぶべきでない3つの条件

**検索エンジンからの流入を主要な集客経路にしたいサービスに、LIFFは向きません。**LIFFアプリはLINEのユーザーIDを前提に画面を組むため、LINE外から来た訪問者にとっては機能しない画面になりやすく、そもそも起動導線がLINE内に閉じています。第二に、LINEアカウントを持たない法人ユーザーを想定した業務システム。第三に、バックグラウンドでの位置情報取得やプッシュ通知のように、Service Workerやネイティブ機能に依存する要件です。前述のとおりLIFFブラウザではService Workerが動きません。これらの場合はWebアプリやネイティブアプリを本体とし、LINEは通知と入口だけを担わせる構成が合理的です。店舗向けの選択肢としてLINEミニアプリと専用アプリのどちらを取るかは、[店舗アプリの費用相場と導入判断をまとめた記事](/column/details/15387/)が参考になります。

## よくある質問

### LIFFは何の略で、どこが提供していますか。

LINE Front-end Frameworkの略で、LINEヤフー株式会社が提供するWebアプリのプラットフォームです。LINEアプリの中でWebアプリを動かし、LINEプラットフォームからユーザーIDなどを取得できるようにします。

### LIFFアプリを作るのにLINE公式アカウントは必要ですか。

LIFFアプリはLINE Developersコンソールで**LINEログインのチャネル**に追加します。ユーザー識別やフォーム表示までであれば、LINE公式アカウント（Messaging APIのチャネル）がなくても構いません。友だちへの一斉配信やリッチメニューからの起動まで行うなら、Messaging API側のチャネルもあわせて用意します。

そのチャネルからサーバー側で通知を送る実装は、[LINE Notify終了後の移行実装とpushエンドポイントの解説](https://www.issoh.co.jp/tech/details/17533/)にまとめています。

### LIFFアプリはLINE以外のブラウザでも動きますか。

LIFF URLはChromeやSafariなどの外部ブラウザでも開けますが、使えるAPIは限られます。LIFFブラウザ専用は`liff.sendMessages()`で、`liff.shareTargetPicker()`は外部ブラウザでもSSOのログインセッションがあれば利用できます。逆に`liff.login()`はLIFFブラウザでは使えません。両対応させるなら`liff.isInClient()`で分岐します。

### LIFFアプリのサンプルや雛形はどこで入手できますか。

公式CLIの`npx @line/create-liff-app`が最短です。vanilla・react・vue・svelte・nextjs・nuxtjsのテンプレートから選ぶと、SDKの読み込みと初期化まで済んだプロジェクトが生成されます。フレームワークを決めていない段階なら、余計な設定ファイルが増えないvanillaで挙動だけ確かめられます。

### LIFF SDKの最新バージョンはどれですか。

v2.29.1（2026年6月29日リリース）です。直近ではv2.29.0が2026年5月13日、v2.28.0が2026年3月24日にリリースされています。バージョンを固定して運用している場合は、公式のリリースノートで差分を確認してから上げてください。

## 関連記事

- [LINEミニアプリとは？仕組み・LIFFとの違い・開発費用から導入判断まで解説](/column/details/15161/)
- [Messaging APIとは？その定義と基本的な役割について解説](/column/details/3302/)
- [LINE Flex Messageの基本構造と通常メッセージにはない視覚表現の強み](/tech/details/11046/)
- [店舗アプリとは？機能・作成方法・費用相場と導入判断を開発会社視点で解説](/column/details/15387/)
- [Lea（レア）とは何か？LINE公式が公認するLINE連携ECサイト構築サービスの概要を徹底解説｜初心者でも簡単に使えるECツール](/tech/details/10093/)

---

出典: [LIFFとは？LINEアプリ内で動くWebアプリの仕組みと開発手順を実装目線で解説](<https://www.issoh.co.jp/tech/details/3396/>)（株式会社一創）