LIFFの新機能 "liff.requestFriendship()" を早速試してみた。
こんにちは、リテールアプリ共創部マッハチームの morimorikochanです。
今回は、LIFF v2.28.0 で追加された liff.requestFriendship() を試してみたので、挙動や使いどころについて共有します。
liff.requestFriendship() とは？
LIFF v2.28.0 で追加されたメソッドです。
呼び出すと、LIFFブラウザ上でLINE公式アカウントの友だち追加またはブロック解除を促すサブウィンドウが表示されます。ユーザーは画面遷移することなく、その場で友だち追加やブロック解除を行うことができます。
await liff.requestFriendship();
引数なし、戻り値は Promise です。ただし、ユーザーが実際に友だち追加したかどうかは戻り値からは判別できません。 友だち状態を確認したい場合は liff.getFriendship() を別途呼び出す必要があります。
制約事項
- LIFFアプリの画面サイズが Full である必要があります
- LIFFチャネルに リンクされたLINE公式アカウント が設定されている必要があります
実際の挙動
1. すでに友だちの場合
ローディングが一瞬表示されて、すぐにサブウィンドウが閉じるだけでした。ユーザーに対して特に何も表示されません。
公式ドキュメントの記述通りでした。
LINE公式アカウントと既に友だちになっている場合は、サブウィンドウが表示された後、自動で閉じられます。
https://developers.line.biz/ja/reference/liff/#request-friendship
2. ブロック済みの場合
ブロック解除を促すサブウィンドウが表示されます。ユーザーがブロック解除を行うと、ユーザーが自律的にブロック解除した時と同様に初回案内メッセージが届きました。
こちらも公式ドキュメント通りでした。
LINE公式アカウントをブロックしている場合は、ブロック解除を促すサブウィンドウが表示されます。
https://developers.line.biz/ja/reference/liff/#request-friendship
3. そもそも友だちではない場合
こちらは環境が用意できず確認できませんでした...。おそらく友だち追加を促すサブウィンドウが表示されるのだと思いますが、公式ドキュメント通りの挙動になるかは未検証です。
使いどころ
実際に触ってみて、以下のようなケースで便利に使えそうだと感じました。
1. 友だち登録を条件にした操作の前に挟む
例えばLINEミニアプリ内でクーポンを発行する際に「LINE公式アカウントの友だち登録が必要」という要件がある場合、requestFriendship() をクーポン発行フローの手前に挟むことで、ユーザーに画面遷移させることなくスムーズに友だち登録を促せます。
2. 運用途中でLINE公式アカウントをリンクしたケースへの対応
LINEミニアプリをリリースした後にLINE公式アカウントをリンクさせた場合、既存ユーザーは友だち登録していない状態です。そのようなケースで requestFriendship() を使えば、既存ユーザーに対しても手軽に友だち登録を促進できます。
従来は「友だち追加はこちら」のようなリンクを用意してLINE公式アカウントのページに飛ばす必要がありましたが、requestFriendship() ならアプリ内で完結するのでユーザー体験がかなり良くなるのではないでしょうか。
検証用のアプリを作った
liff.requestFriendship() と liff.getFriendship() の挙動を確認するため、LIFFスターターアプリ（Vanilla JS）でシンプルなデモアプリを作成しました。
友だち状態の表示、友だち追加リクエスト、状態の再確認ができるようになっています。
主要な実装は以下の通りです。
async function requestFriendship() {
try {
await liff.requestFriendship();
// Promise解決後に友だち状態を再確認する
const { friendFlag } = await liff.getFriendship();
console.log('友だち状態:', friendFlag);
} catch (error) {
// 公式ドキュメントには記載されていませんが、条件を満たさない場合はFORBIDDENエラーになるようです
if (error.code === 'FORBIDDEN') {
console.error('画面サイズがFull以外、またはLINE公式アカウントが未設定です');
}
}
}
requestFriendship() の戻り値からはユーザーの操作結果がわからないので、Promise解決後に getFriendship() で状態を確認するようにしています。
LINE Developers Console で必要な設定
必要な設定をまとめておきます。
- LIFFアプリの画面サイズ:
Fullに設定 - 友だち追加オプション:
On (normal)またはOn (aggressive)に設定 - リンクされたLINE公式アカウント: "チャネル基本設定"で、Messaging APIチャネルに紐づくLINE公式アカウントをリンク
1と2の設定箇所
特に3番目の設定を忘れがちなので注意が必要です。LINE公式アカウントとLINE Loginチャネルは同じプロバイダー配下にある必要があります。
まとめ
liff.requestFriendship()はLIFF v2.28.0 で追加された、友だち追加/ブロック解除を促すAPI- サブウィンドウが表示されるのでユーザーはアプリから離脱せずに友だち追加できる
- 戻り値からユーザーの操作結果はわからないので、
liff.getFriendship()で事後確認が必要 - 画面サイズ
Full+ リンクされたLINE公式アカウントの設定が必須 - ブロック済みユーザーに対しても使えるので、ブロック解除の促進にも活用できそう
友だち追加周りのUXがLIFFアプリ内で完結するようになったのは地味にありがたいですね。今までだと外部リンクに飛ばす必要があったので、ユーザーの離脱ポイントが1つ減りそうです💪
検証に使ったコード
