LINEミニアプリ/LIFF の特徴とは [LIFF Deep Dive 書き起こし#1] #linedc
LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。
2022年5月に行われた【LINEミニアプリ】LIFF Deep Dive【LIFFプラグインリリース記念】では、LINEのLIFF担当チームをゲストとし、LIFFと新機能について登壇してもらいました。この記事は、第1回目の書き起こし記事です。2記事目はこちら
自己紹介
デベロッパープロダクトマネジメントマネジメントチームに所属していてテクニカルプロダクトマネージャーを担当しております岡本拓也です。WEB業界を転々とした後、LINEに入社してLIFF、LINELoginといったデベロッパープロダクトのフロントエンドを担当しておりました。そのフロントエンドエンジニアから1年前2年ぐらい前にテクニカルプロダクトマネージャーとして異動になりプロダクトマネージャーとして従事しております。
とある開発者AさんのストーリーでLIFFの機能を紹介
今日集まりいただいた皆さんが開発者ですので、スッと内容が入ってくるようにするためにリストアップした機能を紹介していくのではなくて、テーマをもって紹介していきたいなと思っています。LIFFに興味を持ったとある開発者Aさんのストーリーを見ながら、LIFFを紹介していきます。Aさんは開発の中で直面する出来事を機能やツールを使って難なく解決していきます。この機能やツールを使って、難なく解決している状態が、開発者体験が良い状態。我々は開発者体験のことをデベロッパーエクスペリエンス = DeXって呼んでDXだと被るんでDeX。それがいい状態になっているわけですね。今日は、その機能やツールの担当開発者自身が機能を紹介していきます。裏話もできたらと思っています。
Aさんはサークルでブースを出展するためにLIFFアプリを作りたい
Aさんは何が作りたいのかを、紹介します。仮定を作ってお話を進めた方が内容に納得感が出てくると思いますので、Aさんのアプリ用件を紹介します。正直、かなりツメの甘いアプリなんですけども、一旦目をつむってください。Aさんは、とある同人サークルのメンバーの一人。とあるイベントでサークルがブースを出展します。まだまだサークルの認知度とか知名度が低い状態です。何をファンが望んでいるのか、ニーズをつかめていない課題もあります。LIFFアプリは、事前にファンの方に共有しておく前提なんですけれども、ファンにLINEでサークルの紹介を行ってほしい目的があります。つまり、指定した友達にメッセージを送る機能が欲しい。
次に、LIFFアプリを使って来場したファンにアンケートに答えてもらって、今後のサークル運営に役立てたい。ブースに設置したQRコードを読み取る機能を用意しようとしています。イメージとしては、来場したファンの方に合わせて読み取っていただくQRコードとか変えていただければ、ユーザー種別とか特性とかも合わせて取れるわけなのでブースでQRコードを読み取っていくのは要件として入れたい。
簡単な画面遷移図を紹介しますけれども。左にトップページがあります。2つのボタンがあり「友達へシェア」と「QRコードリーダー」。友達シェアを押すと、友達選択に移動してその友達選択した結果、トーク画面inLINEと書いていますLINE上のトーク画面にメッセージを送ります。QRコードリーダーを押した場合、カメラが起動しまして、読み取ったQRコードでアンケートページが表示される流れです。この赤い線で書いているエリアが、LIFF Appのスコープにしています。
LIFFを知って活用するカスタマージャーニーがこちら
開発者Aさんのカスタマージャーニーをこちらに書きますとこの左から右の流れが本日のプレゼンの流れでもあります。まずは認知。ドキュメントを読むところから始まって、手元でLIFFの機能を試してみることになるでしょう。LIFFの開発環境を作りまして、いざ機能を実装し始めます。デバックツールを使ってより品質を高めていくことになるでしょう。将来のための拡張性を持たせるといったエンハンスの考え方も出てくるでしょう。
LIFF こと「LINE Front-end Framework」とは
ここでは、LIFFの概要や特徴を説明していきたいと思います。はいまずはLIFF。「LINE Front-end Framework」を略してLIFFと呼んでいます。LINE上で動作するWEBアプリケーションを開発するためのプラットフォームですね。HTML、CSSとかJavaScriptなどWEBのスタンダードの技術で開発することができます。さらに、LINEプラットフォーム上の情報やLINEアプリと連携した機能をJS SDKを通じて扱うことができます。
社内ではデベロッパープロダクトと呼んでいます。LIFFの最初の利用者はデベロッパーになります。そのデベロッパーがLINEから提供されたLIFFの機能を用いてサービスを作って、そのサービスを通してエンドユーザーに価値を提供している形ですね。つまり、デベロッパーに一貫した機能や開発環境 = よいDeXを提供すれば、結果的にエンドユーザーにも一貫したUXを提供することができる。
LIFFアプリとLINEミニアプリの違い
LIFFアプリとLINEミニアプリの違いをこのテーブルにまとめました。これはLINE API Use Case。皆さんご存知いたと思うんですけども、このサイトから引用した内容です。どちらもLIFF SDKを搭載しているんですけれども、LINEミニアプリは開発ためには、LINEによる審査及び認定が必要になります。その審査認定に追加したLINEミニアプリだけがLINE上で公開されているため、ユーザーは安心してミニアプリを使える状態になっています。国内にはLINEミニアプリと連携しているSaaS企業が多くいらっしゃいますので、事業にSaaSさえ使えばミニアプリを立ち上げることができる特徴もあります。動作環境ですとかサービスメッセージ利用可否など機能上の差分は今日の時点では割愛させていただきます。
LIFFはLINEが提供しているサービスでも利用されている
サービス提供者は大きく、LINEファミリーサービスとサードパーティー開発の2種類に分けられます。LINEファミリーサービスは、社内での用語、LINEが提供しているサービスのことです。みなさんおなじみのLINEオフィシャルアカウントですとか、LINE NEWSの記事のページ、スタンプショップですね、これらもLIFFを利用しています。LINEファミリーサービスの場合ですね右上のCLOSEとか、アクションボタンの他にもですね、サービスによっては設定とかお気に入りボタン。お気に入りボタンとか設定ボタンとかもヘッダーに提供しています。
LIFFを使った3つの成功事例
そして次にサードパーティアプリの事例ですね、3つのサービス紹介させてください。まずはプレイルーム。LINEを利用して離れた友達とリアルタイムで対戦できる無料のパーティーアプリ、友達が6万人を獲得していると聞いています。次に、同じくマルチプレイアプリですけれども、みんなでビンゴができるTHE BINGO。オンライン飲み会や忘年会で活躍されている。そして、子供の塾や習い事の集金 enpayですねLIFFを利用して、過去の支払い履歴をうまくまとめて、ユーザー向けに利便性を向上されている。3つ紹介させていただきました。
LIFF プラットフォームの6つの特徴と強み
選べる3つのウインドウタイプ
LIFFというプラットフォームの特徴と強みを紹介していきたいと思います。大きく6つの特徴がありますので、順番に説明していきます。開発者の皆さんが設定可能なウインドウタイプ。3つ種類があります。TallとCompactは画面が短い形になるんですけども。同時に画面上部のグレー背景になっているところですね。後の状態が見える状態になります。例えば、トーク画面上でLIFFを開いていると、トーク画面が見えたままの画面が開かれます。そのLIFFを開いている間は、この後の画面をインタラクティブに操作することも全くできないのでモーダル感の印象を与えるためにも、Tall,Compactが存在します。一応、傾向としてだけお伝えすると、FullはWEBアプリとして完結するユースケースが多いです。ミニアプリとかもその代表例なんですけども、このFullを使っています。
そして、OAやトーク画面と連携する前提のアプリ。これらはTallとかCompactを使われるケースが多いかな。後にトーク画面が出ているので、トーク画面の延長とユーザーに印象づけることができるためです。先ほど紹介したFull Viewタイプの上に表示させるのに適したモーダルもLIFFが提供しています。これらは僕らはサブウインドウと呼んでいます。モーダルのような見た目で表示されましてモーダルを実現するために、普通のブラウザとかであれば、HTML,CSSとかjQueryを使ったWEBテクノロジーでモーダル表示するケースって多いと思うんですけども、ウェブのブラウザーのヘッダー領域ですとかWEB領域を超えた先の部分。ここの部分はモーダルで覆い隠すことができなかったと思います。ウェブのモーダルでは、覆い隠すことができないので我々は別途LINEアプリ自体が生成しているモーダルを提供しています。エンドユーザーがモーダルを開いているときにこの×ボタン。この×ボタンをミスタップして「ああ、モーダルだけ閉じたかったのにLIFF自体閉じちゃった」を回避できるようになる。現在、LINEの社内サービスでのみ利用できる社内限定機能になっていますが、今後パブリック公開する予定もありますので、ぜひお楽しみください。
LINEログイン・トーク画面との連携
次にLIFFはLINEログインと統合しています。厳密には、LINEログインと完全な互換性があるわけではありません。ただ、外部ブラウザーでも簡単にLINEログインを実装できるメリットがあります。複雑な設定なしで認証認可フローを経て、LINEプラットフォームからユーザーのプロフィール情報を安全に取得できるメリットがあります。コーディングの話は、池田さんから説明ありますから。これくらいシンプルということだけここで伝えておきます。LIFFからトーク画面へメッセージを送ることもできます。
LIFFを開いて、メッセージ送信のAPIコールするとHello Worldとこの画面の流れですね。このLIFFを開くと、コンテキストと呼ばれるLIFFアプリが起動された画面に関する情報を、このLIFFブラウザ自体に内部的に渡しています。その情報を使って、LIFFは元いた画面にメッセージを送る処理が実現されています。コンテキストと概念的に小難しいものなんですけども、開発者は実際のところsendMessagesというAPIを一つコールすればメッセージ送信することができます。
クロスブラウザーサポート
LIFFはクロスブラウザ対応していますLIFF SDK V2からですねLINEアプリ以外の環境でも対応できます。多くのAPIは、PCブラウザと互換性があるので、通常のウェブブラウザでも動作します。
ユーティリティの提供
LIFFは開発中のLIFF開発のサポートすべく便利機能としてユーティリティーも提供しています。LINEのバージョンを取得、OSの種類を判別できます。Share Target Pickerは、送信先を選んでLINEの友達メッセージを送信することができる機能です。自分以外の友達もメッセージを送信することができますので、この機能を利用してユーザーにサービス連携させたり、情報を拡散させたり、ソーシャル要素を持たせることができます。
ユーザーの同意画面のスキップ
そして、もう一つ独自の強力な機能としてはミニアプリ限定機能とはなるんですけれども、本来、エンドユーザーがアプリ利用開始時に表示されているユーザー同意画面。このアプリがあなたのこういった権限、プロフィール情報を取得しようとしていますよとか。あなたのIDを取得しようとしてますよっていうのがユーザー同意画面それ自体を完全にスキップさせる機能もあります。発動条件は最小限の権限同意を求める場合に限るなど、そういった制限のことはミニアプリのドキュメントをご覧いただければなと思います。
こちらの画像にあるのは、まずLINEのミニアプリを起動したら最初にですね包括同意って僕らは呼んでいたんですけれども、このミニアプリに関する同意を求められるんですねここでアグリーとAllowとかすれば、それ以降は2回目から別のアプリを起動したときでも、同意画面を完全にスキップしてすぐにミニアプリ起動できる流れになってます。
LIFF API を作ることができる
今までで5つの特徴をご紹介しましたが、6つ目の特徴が「あなたのLIFF API」を作れるとしています。これがですね後ほど佐藤さんのプレゼンでじっくり紹介させていただきたいと思ってます。LIFFの紹介は以上になります。開発者Aさんは、LIFFについてなんとなく理解できた状態になります。実際に開発を行うにあたって、公式ドキュメントを読んでいくことになります。
LINE DevelopersからLIFFドキュメントをご覧ください
何はともあれ、最初ドキュメントを読むためにはLINE Developersへアクセスしてください。ドキュメントはログイン不要で見れますので、この画面上のドキュメントをクリックして、LINE Front-end Frameworkを選んでみてください。APIリファレンスを見ますと3種類リンクが見えているかと思います。このv2が現行バージョンになりますので、基本的にはこちらをご覧いただくことになると思います。
こちらは旧バージョンLIFF SDKのバージョンで廃止ステータスになっています。リンクだけはある状態なので、あまり使うことはないと思います。最後にサーバーAPIのがあります。これはLINE Developers上で行うような動作をAPI経由でできるサーバーAPIになります。こちらは実はですね時々、ちょっと以前、ドキュメントの配置が悪かった関係もあって、これはLIFF v1用に見えていたかと思うんですけども、実はv2どっちも対応しているサーバーAPIになりますので、ぜひご活用ください。
ここまでで僕の発表は以上です。
Discussion