LIFFプラットフォームで動作するWebアプリの作り方　LINE向けアプリの作り方超入門

LIFFの超入門

胡ケイブン氏（以下、胡）：それでは本日のセッションを始めたいと思います。初めまして、LIFFやLINEログインなどの開発者向けのデベロップメントプロダクトのプロジェクトマネージャーを担当している胡と申します。これまではQAリードを担当していましたが、2020年の4月にPMに転向しました。

池田泰樹氏（以下、池田）：初めまして。LIFFやLINE Design System Globalの開発を担当している、フロントエンドエンジニアの池田と申します。本日はよろしくお願いいたします。

胡：本日は「LIFFの超入門」と題して、前半は私からLIFFおよびLINEミニアプリの特徴、事例や新機能などを紹介します。後半では実際にLIFFアプリをどう開発するのか、LIFF SDK開発者の池田さんより手順を解説してもらいます。よろしくお願いします。

「LIFFアプリ」と「LINEミニアプリ」

それでは私のパートに移ります。LINE Front-end Framework、通称LIFFとは、LINEが提供するWebアプリのプラットフォームです。WebアプリにLIFF SDKを組み込むことでLINEアプリと連携ができ、LINEの機能や情報を利用したWebアプリを作成できます。このLIFFプラットフォームで動作するWebアプリは、大きく分けて「LIFFアプリ」と「LINEミニアプリ」の2種類があります。

LIFFアプリとLINEミニアプリの違いをテーブルにまとめてみました。どちらもLIFF SDKを搭載しているのですが、LINEミニアプリを開発するにはLINEによる審査および認定が必要です。審査に通過したLINEミニアプリだけがLINEで公開されるため、ユーザーは安心してLINEミニアプリを利用できます。

その他動作環境、サービスメッセージ利用可否の違いはありますが、時間の都合上、詳細な説明は割愛いたします。

LIFFの活用事例

続きまして、LIFFの活用事例を紹介していきます。サービス提供者によって、大きく「LINEファミリーサービス」と「サードパーティ開発者」の2種類に分けられます。みなさんお馴染みの、LINE公式アカウントやLINE NEWS、LINEのスタンプショップも、実はLIFFを利用しています。LINEファミリーサービスの場合、右上のクローズ、アクションボタンの他にもお気に入りや設定ボタンなど、多様なUIコンポーネントをヘッダーに実装しています。

サードパーティアプリの事例として、4つのサービスを紹介したいと思います。まずはプレイルーム。LINEを利用して離れた友だちとリアルタイムで対戦できる無料パーティゲームアプリとして、友だち6万人を獲得しています。同じくマルチプレイアプリですが、LINEだけでみんなでビンゴができるTHE BINGOは、オンライン飲み会や忘年会で活躍しています。

子どもの塾や習い事の集金をLINEで実現するenpayは、LIFFを利用して過去の支払い履歴をうまくまとめているため、ユーザー向けに利便性を向上させています。最後に、高齢でリテラシーが高くないユーザー向けのスマート相続アプリは、視認性を向上させるUIと入力補助などの工夫が施されています。

LINEミニアプリの事例

ここからLINEミニアプリの事例を紹介します。飲食店では、テーブルオーダー機能をLINEミニアプリを通して実現しています。消費者が入店したチェックインから注文、決済一連のオペレーションは、すべてLINEミニアプリ上で完結できます。コロナ禍において店舗スタッフとお客さまが非接触になるという点で、メリットがあります。

続きまして、美容院予約および会員証アプリの事例です。会員登録と会員カード、クーポンを1つのLINEミニアプリで完結します。サービスメッセージを通して、決済の内容を確認できます。またLINE公式アカウントとの連携が可能なので、クーポンの配信も実施しています。リテンション増加の効果が見えます。

今年リリースした新機能

さて事例を紹介したところで、ここから今年（2021年）にリリースした新機能の紹介を含め、LIFFというプラットフォームの特徴と強みを紹介していきたいと思います。画面に表示されているとおり、大きく6つのトピックがあります。

順番に説明していきます。LIFFはLINEログインを統合しています。ここで動作確認用のプレイグラウンドアプリを用意していますので、実際の動作を見てみましょう。

外部ブラウザの例では、LIFFアプリ起動後にLIFFログインを実行すると、LINEログインのログイン画面に遷移します。メールアドレスなどの情報を入力して送信するとLINEと連携できます。こうして煩雑な設定なしで、認証・認可フローを経て、LINEプラットフォームからユーザーのプロフィール情報を安全に取得できるメリットがあります。

実際のサンプルコード上でも、LIFFを初期化したあとliff.login()メソッドをコールするだけで、ログイン処理が完了します。非常なシンプルなコードで、LINEにログインできます。

次にあまり知られていないかもしれませんが、LIFFはクロスブラウザーをサポートしています。LIFF SDKバージョン2より、LINEアプリ以外の環境でも対応できるようになりました。多くのLIFF APIは、PCのブラウザーと互換性があるので、通常のWebブラウザー上でも動作します。

次にLIFFの独自機能として、Share Target Pickerが挙げられます。Share Target Pickerとは、送信先を選んでLINEの友だちにメッセージを送信できる機能です。自分以外の友だちにもメッセージを送信できますので、この機能を利用してユーザーにサービスを連携させたり情報を拡散させたりできる、ソーシャル要素をもたせることも可能です。

そんなパワフルなShare Target Pickerですが、送り先を特定するなど、今後もさらに機能を追加していく予定です。

続いて、自前で実装しなくてもさまざまなユーティリティを利用できるというのもLIFFの1つの強みです。ここで、10月頭に新たにリリースされたscanCodeV2を紹介します。従来のスキャンコードであるLINEアプリのカメラを起動する方式と比較して、WebRTCを利用したscanCodeV2は、LIFFブラウザ上でWebカメラを起動します。

LINE Developersコンソールで設定を有効にすれば利用できるので、サービス側は自前でコードリーダーを実装するコストが省けます。

次に、ユーザー認証タスクに集中させることができる新機能として、LIFFサブウィンドウを紹介したいと思います。LIFFの仕様としては複数のLIFFブラウザを同時に利用することはできませんが、サブウィンドウは既存のLIFFブラウザの上に、さらにもう1つのモーダルウィンドウを被せる機能です。

ユーザーの集中を切らすことなく、また一時的な機能を提供する途中に、ユーザーが意図をせずにサービスから離脱してしまう問題も解消されます。画面のサンプルのように、サブウィンドウには複数の画面サイズがあるので、利用シーンに応じて指定することが可能です。現在、LINEサービスのみ利用できる社内限定機能ですが、パブリックAPIとして近日公開する予定でいます。

次に、今年（2021年）リリースした新機能の1つとしてLINEミニアプリチャネルのチャネル同意の簡略化を紹介します。もともとLINEミニアプリに初回アクセスするたびに、ユーザーのプロフィール情報を取得するために都度同意画面が表示されますが、チャネル同意の簡略化を有効にしたLINEミニアプリでは、同意プロセスを初回のみ行うことで、別のLINEミニアプリに初めてアクセスする時は同意画面をスキップして、すぐにサービスの利用を開始できるようになります。

その他、かゆいところに手の届く機能をいくつか用意しています。LIFFアプリの遷移元のreferrerをURL上から取得できるliff.referrerクエリパラメータを始め、LIFFのダークモード対応を始めました。こちらも近日公開する予定です。かなり駆け足ですが、私からの紹介は以上となります。

時間の都合上、LIFFの特徴や新機能を簡単に紹介することしかできませんが、LIFFをより詳しく知りたいという方はLINE Developersの関連ドキュメントを参照してください。

このあとの時間は池田さんにバトンタッチして、LIFFの開発手順について説明していきます。池田さんよろしくお願いします。

LIFFアプリの登録

池田：胡さんありがとうございます。これからLIFF開発について話していきたいと思います。LIFFアプリの開発を大きく2つのステップに分けました。1つ目は、LINE DevelopersコンソールでLIFFを登録すること。そして2つ目は、LIFF JavaScript SDKを使って実際にアプリケーションを開発することです。

まずLIFFアプリの登録についてですが、LINE Developersコンソール上でProvider、Channel、そしてLIFFを作る必要があります。左側が右側の親になっていて、3つのステップに分かれていますが、LINE DevelopersコンソールはGUIで特に難しいことはないので、簡単に設定できると思います。

こちらは、ProviderとChannelを作ったあとのChannelの中の画面です。LIFFのタブ上でこちらのAddボタンでLIFFを追加できます。

ボタンを押すとこのような画面になります。上から簡単に説明すると、まずはアプリの名前を設定でき、そして次がアプリのサイズを設定できます。右側の画像を見てもらうとわかりやすいと思います。次にエンドポイントURLですが、ここはご自身で作成されたWebアプリのURLを入力します。

次にスコープです。こちらに設定した内容がユーザーに権限の譲渡をお願いするユーザー同意画面に表示されることになります。Bot lijk featureは、簡単にいうとLINE公式アカウントに関するオプションです。

次にScan QRはLIFFのscanCode APIを使えるようにするオプションです。Module modeはヘッダーにシェアボタンを表示するかどうかのオプションです。以上の内容を設定して登録を完了するとLIFF IDなどが発行されます。

LIFF SDKを使ったWebアプリの開発

これで準備が終わったので、次は実際にLIFF SDKを使ったWebアプリの開発について話していきます。まずLIFF SDKをプロジェクトにインストールしてもらう必要がありますが、上のようにCDNを使うこともできますし、Node.jsを使われる場合は、npmやyarnを使ったインストールもできます。お好みのほうをお使いください。

インストールが終わったら、SDKを使ってアプリ内でLIFFの初期化を行うことでLIFFアプリとして動作するようになります。LIFF SDKのliff.initメソッドに、先ほど登録したLIFF IDを渡して初期化が完了すると、LIFFが提供するAPIを簡単に使えます。こちらの例は先ほど公表しましたが、ログインしていない場合はliff.login API、ログインしている場合はliff.getProfile APIを呼び出しています。

1つ懸念点として、こちらの例のように、Vanilla JavaScriptを使う時はけっこうわかりやすいと思うのですが、Next.jsやNuxt.jsのWebフレームワークを使用する場合、どう書くのが最適かわかりづらい場合があるかもしれません。その場合のために、LIFFではstarterを複数用意していまして、そちらを利用してもらうと、より簡単に開発を始められると思います。

こちらの動画で流れている@line/create-liff-appは、まだ試作段階ですが、各フレームワークでLIFFを使う場合のボイラープレートを簡単にインストールできるよう、提供を予定しています。こちらの動画では、アプリの名前、そしてテンプレートを選んで、使うパッケージマネージャーを指定して使うプロジェクトをインストールしました。

そしてプロジェクトにインストールして開発のコマンドを打ち、プロジェクトが立ち上がるまでを紹介しています。

開発がひととおり終わりましたら、作成したWebアプリをデプロイします。HerokuやNetlifyなど好きなものをお使いください。今回自分はVercelを使いました。LINE DevelopersコンソールでエンドポイントURLが正しいかご確認ください。

あとは、実際にLINEのトークルーム上でデバッグします。もちろん、外部ブラウザでの利用も可能です。LINE Developersのコンソール上でLIFF URLを使用できるので、それをトークルームに貼り付けてもらって、動きを確認できます。

こちらは、実際に先ほど見せたLIFFのscanCodeV2 APIを使用したLIFFアプリになります。

LIFFアプリの開発のハードル自体はとても低い

LIFFアプリ開発の概要は、以上となります。LIFFアプリの開発のハードル自体はとても低いと思っているので、ぜひ試していただいたら幸いです。

そう言いつつも、LIFFアプリの開発においてペインポイントがないわけではありません。ドキュメンテーションやデバッキングのissue、またカスタマイズ性の難しさなどのさまざまなペインポイントが挙げられています。実際にLIFFアプリを開発すると、直面するかもしれない問題です。このような開発者体験を改善する話を、このすぐ次のセッションで詳しく話しています。「すべてのLIFFアプリ開発者の開発体験を向上させるために」という題名になっていますので、興味のある方はぜひ聞いてみてください。

以上になります。ご清聴ありがとうございました。