こんにちは！
レアゾン・ホールディングスの櫻井です。
今回は LIFF（LINE Front-end Framework） についてご紹介します。
特に実務で使っているわけではないのですが、
- LIFFって意外と情報少なくない？
- 使いこなせたら結構便利なのでは？
- 個人の備忘録としてもまとめたい！
というモチベーションからこの記事を書きます。
LIFFとは
LIFF（LINE Front-end Framework） は、LINEが提供するWebアプリ向けのフレームワークで、LINEアプリ内のWebView上で動作します。
例えば：
- LINEユーザーのプロフィール情報を取得する
- トークにメッセージを送信する
- QRコードを読み取る
といったことが、Webアプリから直接できるようになります。
👉 「LINEネイティブ機能の一部をWebで扱えるようにする仕組み」 と捉えるとわかりやすいです。
LIFFの構造
| 要素 | 説明 |
|---|---|
| プロバイダ | 開発者単位（個人 or 企業）で、チャネルの管理単位になるグループ。 |
| チャネル | LIFFやMessaging APIの設定単位。1つのLINEサービスと対応。 |
| 公式LINEアカウント | 実際にユーザーとやりとりするLINEアカウント。 |
| LIFFアプリ | LINEアプリ内で動作するWebアプリ。チャネルに紐づく。 |
| Webhook | LINEサーバー → あなたのサーバーに通知を送る仕組み。 |
LIFFでできること
ざっくり以下のようなことが可能です：
- ユーザーのプロフィール情報取得（名前、ユーザーID、アイコン画像など）
const profile = await liff.getProfile();
console.log(profile.displayName); // 名前
console.log(profile.userId); // ユーザーID
console.log(profile.pictureUrl); // アイコン画像URL
- LINEトークにメッセージ送信
await liff.sendMessages([
{
type: "text",
text: "こんにちは！LIFFからのメッセージです！",
},
]);
- LINEログイン連携（外部ブラウザでも動作可能）
liff.login(); // 未ログインならログインへリダイレクト
- QRコード読み取り
const result = await liff.scanCode();
console.log(result.value); // QRコードの読み取り結果
今回自分の中での備忘録
実装してみて「ここ大事だな」と感じたポイントをメモしておきます。
プロバイダの中ではLINE IDが同一
LINE Developers
└── プロバイダ（Provider）
├── チャネルA（Messaging API, LIFF）
├── チャネルB（別アプリ）
同じプロバイダ内にある複数のチャネル間では、同じユーザーに対して同じ LINE ID（userId）が払い出されます。
一方で、異なるプロバイダ同士では、同じLINEユーザーでも異なるIDになります。
📌 なぜ重要？
Messaging API と LIFF を併用するケースでは、ユーザーIDでデータを突き合わせたり、統合管理する必要があるため、同じプロバイダにチャネルをまとめておく設計が必須です。
LIFFアプリは必ずHTTPSでホストする必要がある
LIFFアプリは https:// でホストされている必要があります。
開発中に localhost で動かすことはできません。
そのため、ローカル開発時は ngrok や Cloudflare Tunnel を使って、HTTPSトンネルを立てる必要があります。
まとめ
LIFFを使ってみたことで、LINEログインやプロフィール取得、トーク送信などがWebフロントエンドだけで完結できる手軽さに驚きました。
実装自体はシンプルですが、プロバイダ設計やHTTPS要件、ユーザーIDの扱いなど、事前に押さえておきたいポイントも多く、備忘録としてまとめておく価値があると感じました。
また、日本国内ではLINEの普及率が非常に高いため、ちょっとした施策やユーザー接点を作りたいときにも活用できそうだなと、個人開発ながらビジネス的な可能性も感じました。
これからも「Web × LINE」の組み合わせを、より柔軟に活かしていければと思っています！
▼ 採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。