line-liff

LINE LIFF（フロントエンドフレームワーク）

LIFF に関する質問に、記憶だけで答えないでください。LINE は API を頻繁に更新するため、トレーニングデータは信頼できません。必ず以下のリファレンスを参照してください。

LINE 内で LIFF ウェブアプリを構築、レビュー、デバッグするためのリファレンスです。

ワークフロー

構築

1. references/guidelines.md を読みます（登録、エンドポイント URL のルール、環境との互換性）
2. 実装する機能に関連するリファレンスを読み込みます
3. アーキテクチャや設計を選ぶ際は、方向性に関するガイダンスとして references/experts.md を参照します
4. リファレンスの仕様と制約に従ってコードを記述します

レビュー／デバッグ

1. references/guidelines.md を読みます（URL の制約、認証フロー、API の利用可否）
2. レビューするコードに関連するリファレンスを読み込みます
3. 仕様と照らし合わせてコードを確認します（エンドポイント URL のルール、スコープの要件、環境の制限、初期化の順序）
4. 設計パターンに関する懸念がある場合は、references/experts.md を参照します
5. 違反箇所を具体的な制約とあわせて報告します

環境変数

LIFF_ID=LIFF app ID (from LINE Developers Console)
LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)

SDK

CDN または npm からインストールできます。ツリーシェイキングでバンドルサイズを約 34% 削減するには、プラガブル SDK を使用してください。

SDK のインストール、CDN／npm のセットアップ、プラガブル SDK → references/api.md § Pluggable SDK

初期化

liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
  .then(() => { /* use LIFF APIs */ })
  .catch(err => console.error(err.code, err.message));

• 初期化前に利用可能なメソッドを除き、すべての LIFF API より前に呼び出す必要があります
• withLoginOnExternalBrowser: true — 外部ブラウザーでログインを自動的に開始します
• liff.ready — 初期化の完了時に解決される Promise です

はじめに

1. LINE Developers Console で LINE Login チャネルを作成します
2. LIFF アプリを追加し、エンドポイント URLを設定します（HTTPS が必須です）
3. SDK を組み込み、liff.init() を呼び出します
4. または、npx @line/create-liff-app でひな形を作成します（React/Vue/Svelte/Next.js/Nuxt/vanilla）

API リファレンス

API の完全なリファレンス（メソッド、パラメーター、スコープ、利用可否マトリックス）→ references/api.md

ビューサイズ

種類	表示範囲
Full	画面の 100%
Tall	約 75%
Compact	約 50%

主な制約

• エンドポイント URL：liff.init() は、登録済みのエンドポイント URL と同じ階層またはその配下でのみ動作します
• URL の処理：liff.init() の解決後にのみ URL を変更してください
• ユニバーサルリンク：主なエントリーポイントとして https://liff.line.me/{liffId} を使用します
• トークンのセキュリティ：検証のため、生の ID Token をサーバーに送信してください。デコードしたトークンは決して公開しないでください → server-auth.md を参照
• ログイン動作の違い：LIFF ブラウザーでは自動、外部ブラウザーでは手動です
• 非推奨 API：liff.scanCode() → scanCodeV2() を使用してください。liff.getLanguage() → getAppLanguage() を使用してください。liff.permanentLink.createUrl() → createUrlBy() を使用してください（v3 で削除される可能性があります）

リファレンス一覧

ファイル	トピック
references/api.md	LIFF v2 API の完全なリファレンス、プラガブル SDK モジュール、エラーコード
references/guidelines.md	登録、エンドポイント URL のルール、認証フロー、UI/UX、環境との互換性
references/navigation.md	LIFF URL、liff.state、パーマネントリンク、LIFF 間の遷移、ブラウザーの最小化
references/plugins.md	LIFF プラグインの開発、フックシステム、公式プラグイン（Inspector、Mock）
references/server-api.md	LIFF Server API（v1）— LIFF アプリのプログラムによる CRUD（作成、更新、一覧表示、削除）
references/server-auth.md	サーバーサイドでの ID Token（JWT）検証
references/cli.md	LIFF CLI — ローカル HTTPS 開発サーバー、アプリの CRUD、Inspector によるデバッグ、ngrok
references/experts.md	アーキテクチャに関するガイダンスを提供する LIFF ドメインエキスパート

SDK とツール

• npm: @line/liff
• プラグイン可能な SDK: @line/liff/core + 個別のモジュール
• 公式プラグイン: @line/liff-inspector | @line/liff-mock
• LIFF CLI: CLI ツール（作成、サーブ、デプロイ、HTTPS 開発サーバー）
• LIFF アプリの作成: npx @line/create-liff-app — スキャフォールディング（React/Vue/Svelte/Next.js/Nuxt/vanilla、JS/TS）
• LIFF Playground: liff-playground.netlify.app — オンラインでの API テスト
• スターターアプリ: line/line-liff-v2-starter（vanilla/Next.js/Nuxt）