ep.121 『つくって学ぶ LIFF プラグインとエコシステム』

  • HANATANI Takuma(@potato4d)
  • spring-raining
2022/05/20 に公開974 views

このエピソードについて

@spring_raining が @potato4d に GW 中に開発した LIFF プラグインの概要と、開発してみて感じたことを聞いてみました。

LIFF

  • LINE Front-End Framework
  • LINE App 内で Super App として Web アプリケーションを動かすための仕組み
  • LIFF は 2 つの仕組みが連携して動作している
    • LINE App 本体に含まれる LIFF の表示基盤
    • JavaScript ベースの LIFF SDK

LIFF Plugin

liff-screenshot-plugin

  • LIFF Plugin の試運転も兼ねて開発したプラグイン
  • LIFF.$SS.capture() によって動作している LIFF App のスクリーンショットを撮影できる
    • html-to-image で DOM -> SVG -> Canvas -> 任意のフォーマットに変換

使用感

  • API としては Vue 2 のプラグインシステムと非常に似通っている
    • 誰でも扱いやすく、開発者・利用者ともに作る/使うにあたって問題は起きづらい印象
  • liff.$<plugin-name> の形式に inject されるため、型定義は自分で拡張する必要がある
    • このあたりは公式のドキュメントにはないため、 liff-mock などのプラグインのソースコードを参照
    • 開発者視点では、コードを読みにいかずともこのあたりが明示されていると嬉しい
  • LIFF プラットフォームで広く利用できるという利点があるが、一社で多くの LIFF App を作ることは多くない
    • 他の LIFF App 開発者がどういうのがあると嬉しいか。みたいなところを考える必要がありそう

Refs


採用について

使用素材・クレジット

© Presented by UIT