概要
アプリ内で任意のウェブサイトを表示する新機能
- LINE Front-end Framework 略して LIFF
- 2018年6月6日に公開された
アプリ内でリンクを開く流れ
- ユーザーは
line://app/...というLINE URLスキームをタップする - すると、下からニュッと WebView が出てくる
- 開発者が任意のウェブサイトを表示できる
LINE Developers アカウントの登録が必要
- 位置付けとしては Messaging API の一部
- LINE Bot を作る時に使われる API
- ただし LIFF 自体は Bot を使う必要はない
- なぜなら、 ユーザーはリンクを踏むだけで良いから
- じゃあ、そのリンクはどうやってユーザーに伝えるのか？
- そこで、リンクを Bot に喋らせる、という風に使える
- 外部アプリ（e.g. ブラウザ）からリンクを踏ませることも可能
ベータ版
- 新しい LIFF の登録や設定の更新は API を直接叩いて行う
- ウェブのコンソールはまだ用意されていない
- iOS と Android のみ対応
何がすごいのか
LINEを閉じる必要がない
- 圧倒的な UX の向上
- 手軽な LINE Bot と自由度の高いウェブのギャップを埋める存在
- アプリ内ブラウザの進化系
- 筆者の知る限り、他のチャットアプリで同様の機能を持つものはない
- 2018/06/14 追記 コメント欄より、Facebook Messanger にも同様の機能があるとの情報をいただきました
- 筆者の知る限り、他のチャットアプリで同様の機能を持つものはない
コンテキストが取得できる
- ユーザーの ID が取得できる
- ユーザーがどこでリンクを踏んだのか、次の４つのタイプのいずれかで取得できる
- utou：1対1トーク
- room：トークルーム
- group：グループ
- none：トーク画面以外
-
どのトークでリンクが開かれたのかが分かる
- utouId, roomId, groupId のいずれかが与えられる
- 複数のグループから LIFF を使いたいシナリオでも、それぞれのグループに紐づけた形でウェブページの内容をパーソナライズできる
ウェブサイトからメッセージを送れる
- ウェブサイトからトークに、インタラクティブにメッセージが送れる
- 対応しているメッセージの種類は以下の５つ
- テキスト
- 画像
- 動画
- 音声
- 位置情報
- テキスト
- テンプレート。ただし、設定できるアクションはURIアクションのみ
- ドキュメントにはそう書かれているが、実際にはスタンプ(sticker)も使える
- 発言者は リンクを踏んだ本人ということになる
- ここが Bot と大きく違うところ
試し方
- line://app/1586581840-elV2a1Alにスマホからアクセスする
- 初回起動時のみ下記のような許諾を要求されるので、
同意するをタップする
作り方
- Messaging API のチャネルを作成する
2. https://developers.line.me/ja/docs/liff/getting-started/ を参照
3. ダッシュボードからチャネルアクセストークンを再生成し、控えておく - 適当なウェブサイトを公開する
3. 公式のサンプルをクローンし、Heroku などにデプロイすると良い（静的なウェブページとしてホスティングできれば良い）
4. Heroku アカウントを持っているなら、Deploy to Herokuボタンを押すのが最も手軽
5. デプロイできたら、ウェブサイトの URL を控えておく - ウェブサイトを LIFF アプリとして登録する
7. https://developers.line.me/ja/docs/liff/registering-liff-apps/ を参照
8. ここでチャネルアクセストークンとウェブサイトの URL が必要になる
9.liffIdを取得できたら、line://app/{liffId}を開く
注意事項
HTML がキャッシュされる
- Android 版では HTML が端末にキャッシュがされるため、ランディングページの HTML が更新されなくなる
- LINE アプリ自体のキャッシュを削除すると更新されるようになる
cookie や localStorage の永続性は保障されない
- ステートレスな API を心がける
- userId や roomId などはフロントエンドから取得できるので、それらをキーにする
デバイスや OS の機能を利用したい場合
位置情報の取得やカメラやマイクへのアクセスなど、デバイスまたはOSの機能を利用するAPIは、必ずユーザーアクションをトリガーとして実行されるように実装します。
https://developers.line.me/ja/docs/liff/overview/
謝辞
- このような面白い機能をいち早く教えてくれた西村惟さんに感謝