前回
LINEミニアプリの新規チャネルを作成するところまでやりました。
その他前提
- 自分のLINEアカウントで開発用画面が見れるように、LINE BusinessIDと紐づけした
- また、そのLINE BusinessIDを「Hello,World」ミニアプリの管理者として権限付与
- リンクされたLINE公式アカウントの設定…LINEミニアプリとLINE公式アカウントを紐づける場合は設定しておく（今回はめちゃくちゃ必要というわけではない）
など。
必要なもの
今回は開発テストなので、開発用に準備されているものを使用する。
「ウェブアプリ設定」タブをクリック。
LIFF URL（開発用）
LIFF URLは、LINEミニアプリを起動するための専用URL。
https://miniapp.line.me/{liffId}となっている。
ユーザーがこのURLをLINEアプリ内で開く（QRコード読み込みやトーク画面でタップ）ことで、エンドポイントURLのウェブページを間接的に表示する。また、LINEアプリ内で開くと、LIFF SDKを通じてLINEの認証やユーザー情報にアクセス可能。
LIFF URLは開発用のほかに、審査用と本番用も容易されているので、段階にあわせて変更する必要がある。
LIFF ID
LIFFアプリを特定し、ウェブページとLIFF URLを紐づける識別子。
LIFF URLは、LIFF ID（例：2025123456-0abcdef12）を含むため、どのミニアプリを起動するかを特定することができる。
開発用LIFF URLが「https://miniapp.line.me/2025123456-0abcdef12」だった場合、LIFF IDは「2025123456-0abcdef12」になる。
エンドポイントURL（開発用）
エンドポイントURLは、HTML/CSS/JSファイルがホストされているHTTPSサーバーのURLを設定する。
LINEミニアプリがLIFF URL経由でアクセスする際に、どのウェブページを読み込むかを指定する。
今回は後述するindex.htmlファイルをさくらのレンタルサーバにアップロードしたので、そのURLを開発用URLとして入力。
例）https://example.sakura.ne.jp/hello-world/index.html
エンドポイントURLはHTTPSであることが必須（LINEのセキュリティ要件）
エンドポイントURLは開発用のほかに、審査用と本番用も容易されているので、段階にあわせて変更する必要がある。
友だち追加オプション（任意）
この機能をオンにすると、ユーザーがこのLIFFアプリを初めて使用するときに表示される同意画面に、LINE公式アカウントを友だち追加するオプションが表示される。今回は「Hello,World」を表示したいだけなので省略した
Scan QR
Scan QRは、LIFFアプリからQRコードを読み込む機能（設定した）
詳細はLINE公式ページ参照 https://developers.line.biz/ja/docs/liff/registering-liff-apps/
ファイル
「HelloWorld」を表示するためのファイル（HTML/CSS/JS）。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloWorld - LINE Mini App</title>
<!-- LIFF SDKをCDNから読み込む -->
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</head>
<body>
<h1>HelloWorld</h1>
<p>LINEミニアプリのテストです！</p>
<script>
// LIFF初期化
async function initializeLiff() {
try {
await liff.init({ liffId: '2025123456-0abcdef12' }); // LIFF ID（例：2025123456-0abcdef12）を設定
console.log('LIFF initialized');
} catch (error) {
console.error('LIFF initialization failed', error);
}
}
// ページ読み込み時にLIFFを初期化
window.onload = initializeLiff;
</script>
</body>
</html>
HelloWorldを表示するためだけのファイル。今回はCSS/JSファイルは省略。
- https://static.line-scdn.net/liff/edge/2/sdk.jsの読み込み
- LIFF IDの紐づけ
- ページ読み込み時にLIFFを初期化
上記をindex.htmlとしてファイルをレンタルサーバにアップロードし、アップロードしたURLをエンドポイントURLとして設定しておく。
例）https://example.sakura.ne.jp/hello-world/index.html
結果
https://miniapp.line.me/2025123456-0abcdef12 にブラウザアクセスするとLINEから読みこむようにQRコード画面が表示される。
LINEで読みこむとエンドポイントURLを参照し、エンドポイントとして設定されているURL（https://example.sakura.ne.jp/hello-world/index.html）を表示する
→「HelloWorld」「LINEミニアプリのテストです！」が表示される。
表示されない場合
下記を見直す。
- index.htmlファイル内でhttps://static.line-scdn.net/liff/edge/2/sdk.jsの読み込み
- index.htmlに追加したLIFF IDの確認
- index.htmlにページ読み込み時にLIFFを初期化コードは入れたか
- ウェブアプリ設定画面でエンドポイントURLを設定したか
など。
LIFF SDKを使ってできること
- ユーザー情報取得（liff.getProfile()でユーザーIDや名前を取得）。
- トークへのメッセージ送信（liff.sendMessages()）。
- 認証状態の確認（liff.isLoggedIn()）。
こちらも試す予定。
