設計中に、一度だけ変なアイデアが浮かんだ。「フォームに『あなたのLINE IDを入力してください』という欄を作る」という案だ。
1秒で捨てた。ユーザーは自分のLINE User IDを知らない。LINEのアプリ画面を探しても、どこにも表示されていない。「U」で始まる33文字の英数字を、自分で調べて入力できる人間は開発者しかいない。
では、どうするか。
LIFFという選択肢
LIFF（LINE Front-end Framework）はLINEアプリ内でWebページを開く仕組みだ。LINEの内蔵ブラウザで表示されるため、JavaScriptのSDKからLINEユーザーの情報にアクセスできる。
具体的には、LIFFのページを開いているユーザーのLINE User IDを、ユーザーが何も操作しなくても取得できる。
liff.init({ liffId: 'YOUR_LIFF_ID' }).then(async () => {
if (!liff.isLoggedIn()) {
liff.login();
return;
}
const profile = await liff.getProfile();
document.getElementById('line-user-id').value = profile.userId;
});フォームのhiddenフィールドに、自動でLINE User IDがセットされる。フォームを送信するとそのIDがGASに届く。GASはそのIDを宛先にして予約確認のLINEメッセージを送る。
ユーザーがやることは何もない。予約フォームを普通に書いて送信するだけだ。
動いた瞬間
実装してLINEのリッチメニューからフォームを開いたとき、hiddenフィールドにUser IDが自動でセットされているのを確認した。「Uxxxxxxxx...」という文字列が、見えないフィールドに静かに入っている。
ユーザーは何もしていない。LINEアプリがそのユーザーだと認識しているから、そのIDが届いている。
この「見えない自動化」は、ユーザー体験として正しい。テクノロジーが透明であることが、使いやすさの本質だと思う。
LINEの外から開かれたとき
LIFFはLINEアプリの内側で開くことが前提だ。PCのChromeやSafariで開いた場合、liff.isLoggedIn()はfalseを返し、LINEのログインページにリダイレクトされる。
これは違和感がある体験だ。予約フォームを開こうとしたら、LINEにログインを求められる。
しかし予約システムでは割り切った。オーナーのお客さんはLINEを使っている。予約のリンクはLINEのリッチメニューかトーク画面に置く。その動線から入れば、必ずLINEアプリ内で開く。「LINE外からアクセスする人」のために設計を複雑にする必要はないと判断した。
設計はターゲットのユーザーに最適化する。全員のために設計しようとすると、誰にとっても中途半端になる。
hiddenフィールドにIDを入れる設計について
LINE User IDをhiddenフィールドに入れると、ブラウザの開発者ツールで見れる。「これはセキュリティリスクか」と一度考えた。
LINE User IDは公開されても単独では悪用できない。メッセージを送信するには、サーバー側で管理しているチャンネルアクセストークンが必要だ。IDだけ持っていても、LINEアカウントに何もできない。
このことを確認した上で、hiddenフィールドで渡す設計を許容した。セキュリティは「何が漏れるか」より「それで何ができるか」で判断する。
LIFFがなかった時代
今回の設計ではLIFFを使うことで、予約→LINE通知の流れを1ステップで実現できた。
LIFFがなければ「LINEで予約コードを取得する→フォームに入力する」という2ステップになる。フォームとLINEの間でユーザーが行き来する必要がある。
その摩擦の分だけ、予約を完了せずに離脱する人が増える。1ステップと2ステップの差は小さいようで大きい。予約フォームは完了してもらわなければ意味がない。
*次回は「GASスプレッドシート予約管理——在庫管理と同じ考え方で枠を設計した」*
*シンプルシステム株式会社 代表 伊藤勝彦*