結論：ログアウトボタンは環境によって使い分けよう
LIFFアプリでログアウト機能を実装する前に知っておくべき重要なポイント
- LIFFブラウザ（ミニアプリ）：自動ログインのため、ログアウトボタンは不要
- 外部ブラウザ：通常のWebアプリと同様、ログアウト機能が必要
解決策：環境判定してUIを出し分ける
// ✅ 正解：環境に応じた設計
if (liff.isInClient()) {
// LIFFブラウザ：ログアウトボタンを表示しない
return <div>自動ログイン中です</div>;
} else {
// 外部ブラウザ：ログアウトボタンを表示
return <button onClick={logout}>ログアウト</button>;
}
ユーザーの混乱
環境によって使い分けない場合、以下のような混乱を招く可能性があります。
👨🦳 想定ユーザーA：「ログアウトボタンを押したのに、アプリを再起動すると勝手にログインしてる！バグか？」
👴 想定ユーザーB：「まえのアカウントでログインしたいのに、ログアウトできないぞ...」
👵 想定ユーザーC：「PCだとログアウトできるのに、スマホだとできない。なぜかしら？」
問題の原因
// ❌ すべての環境で同じUIを表示
function MyApp() {
return (
<div>
<h1>ようこそ！</h1>
{/* この実装が混乱の原因 */}
<button onClick={() => liff.logout()}>ログアウト</button>
</div>
);
}
🔍 LIFFの自動ログイン仕様
LIFFブラウザ（ミニアプリ）の動作
-
liff.init()→ 強制的に自動ログイン -
liff.logout()→ 一時的にログアウト - アプリ再起動 → また自動ログイン
外部ブラウザの動作
-
liff.init()→ ログアウト状態 -
liff.login()→ ログイン -
liff.logout()→ 完全にログアウト
解決方法
1. 環境判定を最初に行う
const isInClient = liff.isInClient();
const shouldShowLogout = !isInClient && liff.isLoggedIn();
2. 環境によって機能を制御する
// 外部ブラウザにのみログアウト機能を提供
<button>
ログアウト
</button>
3. 代替手段の提供
function AccountSwitchHelper() {
return (
<div>
<h4>別アカウントでログインをしたい場合</h4>
<button onClick={openWebUrl}>
Webブラウザでアプリを開く
</button>
</div>
);
}
今後への教訓
今回の経験を通じて、プラットフォーム固有の技術を扱う際の重要な教訓を得ました。
LIFFに限らず、今後も以下のようなケースで同じ失敗をしないよう気をつけたいと思います。
PWA：ブラウザとアプリでの動作差異
WebView系：ネイティブアプリ内ブラウザの制約
SNSプラットフォーム系：Facebook App、Twitter埋め込みなど
ブラウザ：iOS Safari、Android Chromeの仕様差
今後気をつけるポイント
- 「普通のWebアプリ」と思い込まない
- すべての環境でテストしてからリリース
- プラットフォーム固有の制約を事前に調査
新しい技術を学ぶ時は、「既存の知識で類推できる」と決めつけず、その技術特有の癖や制約をしっかり理解することが大切ですね。
まとめ
重要なポイント
- LIFFブラウザでは自動ログインのため、ログアウトボタンは混乱の元
-
環境判定（
liff.isInClient()）で適切にUI切り替え - 代替手段を提供する
実装の順序
- 環境判定
- 適切なUI表示
- 説明とヘルプの追加
これで、ユーザーが混乱しない、使いやすいLIFFアプリが作れます！