Help us understand the problem. What is going on with this article?

LINE Front-end Framework (LIFF) を触ってみた

More than 1 year has passed since last update.

概要

アプリ内で任意のウェブサイトを表示する新機能

アプリ内でリンクを開く流れ

  • ユーザーは 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 と自由度の高いウェブのギャップを埋める存在
  • アプリ内ブラウザの進化系

コンテキストが取得できる

  • ユーザーの ID が取得できる
  • ユーザーがどこでリンクを踏んだのか、次の4つのタイプのいずれかで取得できる
    • utou:1対1トーク
    • room:トークルーム
    • group:グループ
    • none:トーク画面以外
  • どのトークでリンクが開かれたのかが分かる
    • utouId, roomId, groupId のいずれかが与えられる
    • 複数のグループから LIFF を使いたいシナリオでも、それぞれのグループに紐づけた形でウェブページの内容をパーソナライズできる

ウェブサイトからメッセージを送れる

  • ウェブサイトからトークに、インタラクティブにメッセージが送れる
  • 対応しているメッセージの種類は以下の5つ
    • テキスト
    • 画像
    • 動画
    • 音声
    • 位置情報
    • テキスト
    • テンプレート。ただし、設定できるアクションはURIアクションのみ
  • ドキュメントにはそう書かれているが、実際にはスタンプ(sticker)も使える
  • 発言者は リンクを踏んだ本人ということになる
    • ここが Bot と大きく違うところ

試し方

  • line://app/1586581840-elV2a1Alにスマホからアクセスする
  • 初回起動時のみ下記のような許諾を要求されるので、 同意するをタップする

作り方

  1. Messaging API のチャネルを作成する
    1. https://developers.line.me/ja/docs/liff/getting-started/ を参照
    2. ダッシュボードからチャネルアクセストークンを再生成し、控えておく
  2. 適当なウェブサイトを公開する
    1. 公式のサンプルをクローンし、Heroku などにデプロイすると良い(静的なウェブページとしてホスティングできれば良い)
    2. Heroku アカウントを持っているなら、Deploy to Heroku ボタンを押すのが最も手軽
    3. デプロイできたら、ウェブサイトの URL を控えておく
  3. ウェブサイトを LIFF アプリとして登録する
    1. https://developers.line.me/ja/docs/liff/registering-liff-apps/ を参照
    2. ここでチャネルアクセストークンとウェブサイトの URL が必要になる
    3. 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/

謝辞

  • このような面白い機能をいち早く教えてくれた西村惟さんに感謝

参照リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away