前回
LINEミニアプリ「HelloWorld」をLINEで表示するまでの手順をまとめました。
ここでは前回までの、LINEミニアプリ「HelloWorld」がLINEで表示ができていることを前提に進めます。
LIFF SDKを使ってできること
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
Hello,Worldミニアプリでは、LIFF SDKを読み込んでいます。これを使うと下記のようなことができます。
- ユーザー情報取得（liff.getProfile()でユーザーIDや名前を取得）。
- トークへのメッセージ送信（liff.sendMessages()）。
- 認証状態の確認（liff.isLoggedIn()）。
こんにちは、〇〇さんを表示する
※「おい」は私のLINE BusinessIDと紐づけられたアカウントのユーザー名
LIFF SDKを使用して、サンプル画面のようにQRコードを読み取った人のLINEアカウント情報を使用して、画面上に表示する方法の説明になります。
ウェブアプリ設定の確認
LINE Developersで以下の設定を確認、設定する。
スコープの使用設定を確認
ウェブアプリ設定のScopeの箇所でprofileを設定しておく必要がある。有効にしておくことで、プロフィール情報を取得することができるようになる。
WEBブラウザ誘導設定
また、LINEミニアプリでは、LINE未使用ユーザーにたいして、WEBブラウザに誘導する機能があります。
その場合、「こんにちは、ゲストさん」のような分岐があると親切です。
公式ドキュメント：LINEをインストールしていない場合の動作
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>
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</head>
<body>
<h1>HelloWorld</h1>
<p>LINEミニアプリのテストです！</p>
<div id="greeting"></div> <!-- プロフィール表示用のコンテナ -->
<script>
async function initializeLiff() {
const greetingElement = document.getElementById('greeting');
try {
// LIFF初期化
await liff.init({ liffId: '2025123456-0abcdef12' });
console.log('LIFF initialized');
// LINEユーザー向け: プロフィール取得
const profile = await liff.getProfile();
greetingElement.innerHTML = `<p>こんにちは、${profile.displayName}さん</p>`;
} catch (error) {
console.error('LIFF initialization failed', error);
// 非LINEユーザー向け: フォールバック表示
greetingElement.innerHTML = `<p>こんにちは、ゲストさん</p>`;
}
}
// ページ読み込み時にLIFFを初期化
window.onload = initializeLiff;
</script>
</body>
</html>
liff.getProfile()
現在のユーザーのプロフィール情報を取得します。
（なお取得できる情報はメインプロフィールのみです。ユーザーのサブプロフィールは取得できません。）
公式ドキュメント参照：https://developers.line.biz/ja/reference/liff/#get-profile
ここからユーザーのIDや表示名が取得できます。今回はこの表示名を使用しています。
分岐で「こんにちは【表示名】さん」か「こんにちは、ゲストさん」のどちらかをgreetingの箇所に表示されるように設定します。
結果
LINEから表示した場合
QRコードを読み取ってLINEアプリから確認すると、確認しているユーザーのプロフィール表示名が確認できる。
WEBブラウザ上で確認した場合
非LINEユーザーや初期化失敗時に「こんにちは、ゲストさん」と表示される。
