業務でLINEミニアプリを開発した際、実装や情報収集で苦労したので、今回は自分がつまずいたポイントを交えながらLINEミニアプリの基本的な作り方を紹介します。
LINEミニアプリとは
LINE友だち追加しなくても利用できるLIFFアプリのこと。
ユーザーはストアからアプリをダウンロードしたり、会員登録する必要なく、LINEのアカウントを使ってサービスを利用することができます。
うまく活用すれば、自社サービスのユーザーアカウントとLINEアカウントを掛け合わせて、LINE機能を使った効果的な販促が可能になります✨
💡ポイント
- LIFF：LINEアプリ内で動作するWebアプリケーションを開発するためのフレームワーク
- LIFFアプリ：LIFFを用いたウェブアプリ
- LIFFブラウザ：LINE上で開くWebブラウザ
LIFFアプリについて
この記事に辿りついた人の中には、LIFFアプリという単語も度々目にしているかもしれません。 どちらもLIFFを使ったWebアプリと言えますが、2025年2月にLINEからLIFFアプリを新規作成する際は、LINEミニアプリとして作成することを推奨する、ということが発表されています。 ニュース：LIFFアプリを新規作成する際は、LINEミニアプリとして作成することを推奨します
そのため、今後はLIFFを使ったアプリ＝LINEミニアプリ、と捉えて良いかと思います。
LINEミニアプリで何ができるの？そもそもLINEで開くWebアプリとはどういうもの？と、イメージが湧きづらいと思うので、実際に作成しながらLINEミニアプリについて見ていこうと思います。
事前準備
- LINE Developersコンソールへのログイン
- プロバイダーの作成
- LINEミニアプリチャネルの作成
- 公式LINEアカウントの作成
LINE Developersコンソールへのログイン
LINEミニアプリ開発に必要なBusiness IDと開発者アカウントを作成し、コンソールにログインします。
Business ID にはいくつかのログイン方法があるので、LINE Developersコンソールへのログインの記事を参考にログインし、開発者アカウントを作成します。
ここで紐づけたLINEアカウントが開発用LINEアカウントとなり、そのLINEアカウントで開発中のLINEミニアプリにアクセスできるようになります。
プロバイダーの作成
LINEミニアプリのサービス提供者となるプロバイダーを作成します。 プロバイダーを作成する
💡ポイント
プロバイダーは開発会社名ではなく、サービス提供者ごとに作成することが推奨されます。
一度LINE公式アカウントを管理するプロバイダーを選択すると、変更することができません。そのため、個人名や開発会社名にすると、名前が残り続けるリスクがあるため、避けたほうが良いでしょう。 また、プロバイダーが異なるとLINE user ID（LINEアカウントごとに割り当てられる個別ID）も変わるため、作り直す場合はIDの引き継ぎ対応も考える必要があります。 プロバイダー選択時の注意
LINEミニアプリチャネル
作成したプロバイダー以下で、LINEミニアプリのチャネルを作成します。
💡ポイント
ミニアプリのチャネルは削除ができないため、作成は慎重に。 また一度作成したチャネルを後から他のプロバイダーに移動することもできません。 チャネルとプロバイダーの連携に関する注意点
プロバイダーとチャネル管理のベストプラクティス
プロバイダーとチャネルの作成、紐付け、連携には注意点がたくさんあるため、作成する前にしっかり計画を練ることをおすすめします。
LINEミニアプリチャネルの内部構造
LINEミニアプリチャネルの中は、さらに開発用、審査用、本番用の3つの内部チャネルに分かれています。それぞれにLIFF IDが割り当てられており、LIFF URLも異なります。
LINEミニアプリチャネルの内部構造
LIFF URL
LIFF ID0000000000-XXXXXXXXを含んだ各チャネルごとのURLです。アクセスすると、次に説明するエンドポイントURLに遷移します。LINEミニアプリのURLとしてはこのURLを公開します。
エンドポイントURL
デプロイしたアプリケーションのURLを設定します。
LIFF URLとエンドポイントURLの関係
LIFF URLを経てエンドポイントURL、つまりアプリケーションページに遷移しますが、その途中で内部でリダイレクトが2度かかっています（1次リダイレクト、2次リダイレクト）。そのため、画面上ではリダイレクトが数回かかっているような挙動になります。
💡ポイント
LIFF URLにパラメータをつけてアクセスした場合、以下のような振る舞いになるため、アプリ側でパラメータ制御している場合は注意が必要です。 LIFF URLにアクセスしてからLIFFアプリが開くまでの動作について
https://miniapp.line.me/2010000000-XXXXXX?utm_source=hogeでアクセス- 1次リダイレクト時は、エンドポイントURLにliff.stateとしてパラメータが入ります
https://developers.line.biz/liff-endpoint&liff.state=?utm_source=hoge - 2次リダイレクト時に正常化します
https://developers.line.biz/liff-endpoint?utm_source=hoge
LINEミニアプリ制作
アプリケーション部分を作成して、実際にLINE上で確認してみます。 基本的にはwebアプリとして開発し、LIFF SDKを組み込んだらLIFFアプリとなります。
今回はHTML + Javascript + PHPの構成とします。
初期化
headでLIFF SDKを読み込みます。 LIFFアプリにLIFF SDKを組み込む
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
その後liff.initメソッドを使い初期化します。 LIFFアプリを初期化する
await liff.init({ liffId: "0000000000-XXXXXXXX" });
💡ポイント
アクセス元のLIFF URLとLIFF IDは一致している必要があるため、開発・審査・本番それぞれで異なるLIFF IDを使用する点に注意してください。また、liff.initの初期化は1次・2次リダイレクトどちらも動作する必要があります。
LINEプロフィールの表示
LINEプロフィール情報を取得して表示してみます。
表示するだけならliff.getProfile()が使えますが、このメソッドで取得したユーザー情報をサーバーに送信しないという制約があるため、今回はサーバで扱うことを考えてアクセストークンを使用したプロフィール情報の取得を紹介します。 アクセストークンを送信してユーザー情報を取得する
全体の流れは上記の記事に載っていますが、おおまかな流れは以下の通り。
- フロントで取得したアクセストークンをバックエンドに送る
- LINE APIを使用して検証
- LINEプロフィール情報（LINE user ID, name, picture）を取得
- フロントで表示させる
フロントエンド
// アクセストークンの取得
const accessToken = liff.getAccessToken();
// アクセストークンを使ってAPIエンドポイントでプロフィール情報を取得
const res = await fetch(window.location.origin + '/api/profile', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ access_token: accessToken }),
});
const profile = await res.json();
// 取得した情報をHTMLに埋め込み
document.getElementById('profileName').textContent = profile.display_name;
document.getElementById('profilePicture').src = profile.picture_url;
バックエンド
// アクセストークンとLINE APIを使ってプロフィールを取得する
public static function fetchProfile(string $accessToken): ?array
{
$ch = curl_init('https://api.line.me/v2/profile');
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => ['Authorization: Bearer ' . $accessToken],
]);
$body = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$data = json_decode($body, true);
return [
'display_name' => $data['displayName'],
'picture_url' => $data['pictureUrl'],
];
}
認証の許可
プロフィール情報など、特定の情報を取得するメソッドを使用する場合、ユーザーから情報取得の同意を得る必要があります。同意が必要なスコープには以下の3種類があります。
- email … ユーザーのメールアドレスを取得する際に必要なスコープ
- profile … ユーザーの表示名・プロフィール画像・ステータスメッセージを取得する際に必要なスコープ
- chat_message.write … LINEのトークルームにメッセージを送信する際に必要なスコープ
同意画面は、LINEミニアプリを開いた際に表示されます。
チャネル同意の簡略化
2026年1月8日以降のLINEミニアプリでは「チャネル同意の簡略化」機能が常に有効になりました。これはユーザーが一度簡略化に同意すれば、以降は同意画面をスキップできる、というものです。
日本の新規LINEミニアプリチャネルにおいて、2026年1月8日に「チャネル同意の簡略化」機能の利用が必須になります
ただし、省略できるのは、openidスコープ（ユーザーID取得）のみで、profileなど他のスコープは引き続きユーザーの同意が必要です。
同意画面の表示タイミングについて
「チャネル同意の簡略化」機能が有効なとき、同意画面はアプリを開いた時点ではなく、該当スコープが必要なメソッド（liff.getProfile()など）を実行したタイミングで初めて表示されます。
この仕様が、アクセストークンを使ってプロフィール情報を取得する際に注意が必要になります。
- フロントエンドでアクセストークンを発行（
liff.getAccessToken()） - アクセストークンをバックエンドに送信
- LINEにプロフィール情報を問い合わせ
この時、liff.getAccessToken()の呼び出し時に同意画面は表示されません。また、このメソッドで発行したアクセストークンには発行時点で同意済みのスコープのみが含まれます。
このフローの場合、1でprofileスコープへの同意が得られていないままトークンが発行されているため、3でプロフィール情報を問い合わせようとしたときに、LINEから認証が足りないとエラーが返ります。
対処法
アクセストークン発行前にliff.permission.query()とliff.permission.requestAll()を呼び出し、必要なスコープへの同意を事前に取得しておくことで回避できます。
liff.permission.query()メソッドとliff.permission.requestAll()メソッドを使う
全体像
ここまでを踏まえたコードがこちらです。（変数化、エラーハンドリングなどは省略）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルLINEミニアプリ</title>
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script>
async function main() {
// 1. LIFF初期化
await liff.init({ liffId: "0000000000-XXXXXXXX" });
// 2. スコープ確認（同意画面の表示）
if ((await liff.permission.query('profile')).state === 'prompt') {
await liff.permission.requestAll();
}
// 3. アクセストークン取得
const accessToken = liff.getAccessToken();
// 4. バックエンドでプロフィール取得
const profile = await fetch('/api/profile', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ access_token: accessToken }),
}).then(r => r.json());
// 5. HTMLへ埋め込み
document.getElementById('profileName').textContent = profile.display_name;
document.getElementById('profilePicture').src = profile.picture_url;
}
window.addEventListener('load', main);
</script>
</head>
<body>
<h1 class="title">サンプルLINEミニアプリ</h1>
<div class="profile">
<h2 class="profile__label">あなたのプロフィール情報</h2>
<div class="profile__content" id="profile">
<img class="profile__img" id="profilePicture" alt="プロフィール画像">
<div>
<p class="profile__role">LINE ユーザーネーム</p>
<p class="profile__name" id="profileName"></p>
</div>
</div>
</div>
</body>
</html>
ローカル環境での動作確認
LINEミニアプリはLINE上でしか正常に動作しないため、ローカルの動作確認であっても、コードを公開するなどしてLINEからアクセスできるようにする必要があります。
ローカル環境を外部に公開する方法はいくつかあると思いますが、今回はngrokを使用して確認していきます。ngrokについての記事はたくさんあると思うのでここでは割愛します。
手順
ngrokで発行されたURLを、LINEミニアプリチャネルのエンドポイントURLに設定します。
コンソールからngrokを起動し、ngrok URLでローカルサーバーを公開します。
grok http --domain=tiara-hoge-fuga.ngrok-free.dev 80
スマホから、LIFF URLにアクセスします。
初回アクセスの場合、 チャネル同意の簡略化にまだ同意していない場合は、簡略化同意画面が開きます。参考画像
また、profileスコープへの同意もしていない場合は、permission.requestAll()により同意画面が開きます。
認証後、LINEプロフィールが取得できていたら成功です🎉
💡ポイント01
スコープに対する同意は、LINEアプリの設定→アカウント→連動アプリから該当のアプリをタップ→連動を解除することでリセットすることができます。挙動を再度確認したいときに便利です。
💡ポイント02
開発中のLINEミニアプリには、チャネルごとに権限を付与された開発LINEアカウントでしかアクセスできません。
他の人にも確認してもらう場合は、開発者アカウントの作成と開発用LINEアカウントの紐付けを依頼しましょう。 また、LINEミニアプリチャネルでも、権限設定からそのメンバーを追加する必要があります。
チャネルで開発者の追加、開発者権限の編集、または開発者の削除をする
本番公開
LINEミニアプリの公開は、アプリケーションを公開してそのURLをエンドポイントURLに指定するだけで利用可能になります。
また、LINEに申請することで認証済みLINEミニアプリとすることもできます。
認証済みアプリのメリット
プロバイダーに「認証済み」表記が追加
- ユーザーが安心して同意しやすくなります
- ※2026年4月より認証バッジから「認証済み」表記に変更
同意画面の友だち追加オプションがデフォルトでオンになる
- 公式LINEアカウントへの友だち追加を促しやすくなります
- 認証プロバイダーの場合、認可画面上の友だち追加オプションはデフォルトでオンになります
その他使える機能についてはカスタム機能をご覧ください。
認証済みアプリにするために
認証済みミニアプリにするには以下の手順が必要です。
- LINEミニアプリポリシーへの準拠
- 審査用LIFF URLへのアプリデプロイ
- LINE審査（最長2週間、リジェクトされる場合もあり）
詳しくはLINEミニアプリの審査依頼前の確認事項をご覧ください。
💡ポイント
開発・審査・本番それぞれでLIFF IDが異なるため、環境の切り替え方法を事前に設計しておく必要があります。
例：URLパラメータで環境を判断する場合、1次リダイレクト時にliff.init()が動作している必要があるため、パラメータはstateから取得するような実装が必要になる、など
なお、審査用は審査員のみがアクセス可能なため、こちらで動作確認することはできません🥲
まとめ
LINEミニアプリは、LINEアカウントだけでサービスを利用できる手軽さが魅力です。取得したLINE user IDと自社サービスのアカウントを紐付けることで、LINE機能を活用した効果的な販促ツールにもなります。
一方で、Web開発とは異なる独自の概念や注意点が多く、実装に苦労しやすい部分もあります。 この記事が、これからLINEミニアプリを制作する人にとって少しでも参考になれば幸いです📱
おまけ：オフショアならではのつまづき
ベトナムのエンジニアと共同で開発を行っていましたが、開発中、「チャネル同意の簡略化」がベトナム環境では有効にならず、お互いに表示されるフローが異なり、確認に時間を要した場面がありました。
ちょうどベトナムに行く機会があったので現地で検証してみましたが、日本の端末では動作したことから、端末の地域設定が影響していた可能性があります。
LINEは地域によって機能などが最適化されている印象があるため、オフショア開発の際は、日本端末で最終動作確認を行うなど、挙動に十分な注意が必要だと感じました。
