[レポート] What’s New in LINE Front-end Framework #linedevday_report

What's New in LINE Front-end Framework

2019年11月20日（水）・21日（木）にグランドニッコー東京 台場でLINEのデベロッパーカンファレンス「LINE DEVELOPER DAY 2019」が開催されました。

• LINE DEVELOPER DAY 2019

本記事は、セッション「What's New in LINE Front-end Framework」をレポートします。

スピーカー

清水 大輔氏（LINE UIT1室 Product Manager / Front-end Engineer）

2009年5月に NAVER Japan (現LINE)にフロントエンドエンジニアとして入社。検索サービスやLINEの様々なサービスのフロントエンド開発に携わった後、フロントエンド向けフレームワークのプロダクトマネージャーを担当。

セッション概要

LINE Front-end Framework (LIFF) は、これまでLINEの中で様々なサービスで活用され新たなユーザー体験を提供してきました。新たに提供される LINE Front-end Framework v2 (LIFF v2) によりLIFFを使ったアプリケーションの可能性をさらに広げることが可能となります。本セッションでは、LIFFで追加される新たな機能と実装面でのノウハウ、事例、今後の展望についてお話しします。

スライド

レポート

• LIFFとは
  • Web application platform
  • LINEサービスとインテグレーションされている
  • ユースケースに応じて決定する、画面サイズが3つ用意されている
  • QUICK GAMEはLIFFでできている
  • In chat appがスタート（GIFを検索、送信するアプリ）
• Advantage of LIFF v1
  • ネイティブアプリケーションとの比較
    • HTML, CSS, JavaScriptで開発できる
    • アプリケーションサーバーがなくても開発できる
  • インストールが不要
    • LINE上で動く
  • LINEと統合できる
    • メッセージ、プロフィールなど
• LIFF v2
  • UX/DX（Developer Experience）にフォーカス
  • モダンブラウザでのサポート
    • PCからでもLIFFが利用できる
    • LINEログインとの統合により基本的なAPIサポートが可能となったのでデバッグもしやすくなった
  • 初期化した場合
    • v1はエラーになるが
    • v2は認証されていない場合はWebのLINEログインページヘ遷移する
• Demo
• Deeplink
  • HTTPS Schemeのリンクがサポートされた
  • v1は、LINEスキーマ（line://）だったがv2はHTTPS（https://liff.line.me/~~）に
  • パスやクエリパラメータも認識できるようになった→ECサイトの詳細ページのシェアが可能のなった
• Open ID Connect
  • 管理コンソールでの変更でopenidが取得可能
• Bot Link
  • LIFF起動時に友だち追加を可能になる
• LIFF v2 JS SDK
  • Typescript
  • Definition file
  • チーム開発や型定義によるDXの向上
  • npmモジュール化
• New Feature
  • QR Code Reader
    • チケットの読み取りなどで利用できそう
  • ShareTargetPicker
    • LIFF v1では開いてるチャットへ送信できたが友だちや別のチャネルにメッセージ送信が可能になる
  • 他にもログイン関連のメソッド追加やUser-Agentから取得する情報などが追加された
• Advantage
  • 通常のフロントエンド開発と同様になる
  • HTTPS Schemaによりモダンブラウザでも使える
  • LINEサービスの統合追加によりさらに連携できるようになった
• 事例
  • LINE x 乗り換え案内（ジョルダン）
    • 乗換検索し友だちにシェアできる
    • 新しいLIFF View typeで機能を提供
  • LINE MINI app
    • LIFF Platform technologyを利用しているが細かいところは追って公開
• Future
  • LUI
    • Web Component
    • Built-in LINE Design System
  • Load Map
    • UX/DX
    • Fintech
    • AI

まとめ

日頃からたくさん利用させていただいているLIFF SDKの最新アップデートを再度確認できました。LINE MINI appもあるので、今後もどんどん機能拡張されるのが楽しみです。個人的にnpmモジュール化/Pay対応に期待しています！