himanago

Azure・C#などのMS系技術やLINE関連技術など、好きな技術について書くブログ

進化した LIFF v2 によるサイト導線強化について

最近、個人的に LIFF v2 が熱いと思っています。

LIFF は LINE Front-end Framework の略で、LINE 内に埋め込める Web アプリを作れるフレームワークです。
主に LINE Bot に Web のインターフェースを組み合わせる用途で使われてきました。

LINE Front-end Framework

LIFF v2

10月の v2 リリースを皮切りに、大きなアップデートが続いています。

リリースノート

いくつかのトピックがありますが、中でも Web サイトから LINE Bot 連携サービスへの導線強化に大きな意味があるものが目立ちます。今回はその観点で変更点を見ていきます。

外部ブラウザで動作するようになった

これまでは、LIFF で作った Web アプリは LINE アプリ内のみでの動作でしたが、PC・スマホ等の一般的な Web ブラウザで動かすことができるようになりました。

デバッグがしやすい

通常のブラウザで動かせるというのは、開発者にとってはデバッグがしやすくなるという利点があります。LINE アプリ内のブラウザには開発者ツールがないのでデバッグがつらかったですが、そこが解消されます。

LINE アプリ内でしか動かない API(メッセージ送信や QR コード読み取りなど)もあるので、そのあたりはこれまで通り alert デバッグ等でなんとかしないといけないのかなとは思いますが、初期化処理や CSS 操作での見た目の問題などベーシックな部分の開発を Web の世界だけで完結できるのはかなり効率が良くなりそう。

エンドポイント URL そのままで動く

LIFF は line://app/xxxxx というような URL を使って LINE 内で開いてきましたが、外部ブラウザで動作させる場合はエンドポイント URL にそのままアクセスすれば OK です。

f:id:himanago:20191208060506p:plain

これは、つまり 既存の Web サイト / Web アプリに LIFF の SDK を何も考えずそのまま導入できる ということを意味します。

すでに稼働している Web サイトを LIFF 対応したい場合のハードルが大きく下がる気がしています。

HTTPS のURLスキームと Deep Link

これが大きい!

外部ブラウザ動作用の URL としてはエンドポイント URL そのままを利用しますが、LIFF v2 では URL として、Deep Link(端末にインストールされているアプリへの遷移)をサポートするようになりました。

スキームはドキュメントにありますが、これまで line://app/{liffId} であった LIFF へアクセスするための URL を、 https://liff.line.me/{liffId}/ とすることで以下の動きをする Deep Link 対応の URL となります。

  • LINE がインストールされている端末(主にスマホを想定)→LINE アプリが起動しその中で LIFF ページが開く
  • LINE がインストールされていない端末(主に PC を想定)→エンドポイント URL にリダイレクト

参考:LINE URLスキームを使う

line://~~ が非推奨になっていることからも、LINE Developers で LIFF 作成時に表示される LIFF URL も https のものに変更されるものと予想しています。

Deep Link の注意点としては、関係のないアカウントとのトーク画面を開いている状態で踏むと、その関係ないトーク画面上でそのまま LIFF が開くので、メッセージ送信の API などを使う場合は気を付けないといけません。
ユーザーの誤操作・誤爆を誘発してしまい予期せぬクレームにも発展しかねないので、LIFF からのメッセージ送信の設計は慎重に行う必要があると考えられます。

逆に Flex Message などを友だちとのトークで使えるような LIFF 便利アプリなんかも作ることができそうではあります。

ログイン強化

LINE ログインとの互換性向上

ユーザー情報の取得が簡単になり、また外部ブラウザでの動作時にも LINE ログインの機能が使えます。
これにより、Web アプリと LINE の連携がかなりしやすくなってきています。

LINE ログインのチャネルにしか作れないようになる

LIFF はこれまで Messaging APIBot)のチャネルの下に作ることが多かったですが、今後は「LINE ログイン」チャネルのににしか作れなくなるようです。

f:id:himanago:20191208061237p:plain

※ LIFF は何か別のチャネルの下にサブで追加するもの

LIFF はこれまで Bot の入力インターフェースの補完という印象が強かったですが、今後は LINE ログイン強化や Deep Link により、Web の世界から LINE へつなぐ役割を大きく担う存在になっていきそうです。

Bot の友だち追加もできる

LIFF の使用を開始するとき、ユーザーに連携する LINE 公式アカウント(Bot など)を友だち追加してもらうことができます。 このあたりの設定は LIFF の設定画面の「ボットリンク機能」から行え、ON にすると認証時に友だち追加をあわせて行えます(Normal と Aggressive はタイミングの違い)。

f:id:himanago:20191208064100p:plain

なので、LINE ログインチャネルにしか作れなくなっても、従来通りの Bot に対する補完としても LIFF は使っていくことができます。

ユーザーの Bot への導線強化に期待大

以上に見てきた機能強化から、LIFF v2 を使うとWeb やメール、他のアプリから LINE 公式アカウントへ誘導することが驚くほど簡単にできてしまいます。
なぜなら、https の LIFF URL にアクセスさせるだけでサービスへの LINE ログイン&Bot 友だち追加を行ってもらえるから です。

URL ひとつでこれだけできるのは、実はとんでもないことなのでは!?と思います。Web サイトと LINE 公式アカウント(Bot)を両方運営している/しようとしている方は、その連携を大きく強化できるので、LIFF v2 の導入を検討したほうが良いと思います。

まとめ

WebからLINE(Bot)への導線をしっかり確保できるので、きちんと設計すれば間違いなくかなりの武器になると思われます。

業務で複数の LINE Bot を開発していますが、LIFF v2 の進化は業務ニーズにこたえる正当な進化という印象で、今回の v2 はとてもうれしく思っています。

ほかにも機能追加など細かい部分でアップデートがあるので、開発や運営を進める中で感じたことなどあればまた書いていこうと思います。