LIFFアプリを作る

2019.06.13

LIFFとは

正式名称は「LINE Front-end Framework」で、LINEが開発者向けに提供しているMessaging APIの新機能として、2018年6月に発表されたSDKです。
Webサイトとしてhtml javascriptで作ったアプリをLINEトークルーム内で動作させることができ、ユーザーのLINEアカウントのIDなどの情報も取得することが可能なため、認証を用いた様々な用途のアプリが作成可能です。
LIFFを利用して作成したアプリケーションは、LINEのアカウントを持っていてログインさえできていれば誰でもアクセスが可能であるため、WebサービスにおけるユーザーのSNS認証の敷居とバックエンドの開発コストを大幅に下げることができます。
LIFFを利用するには、LINE Developpersに開発者として登録することが必要で、加えていくつかの手順を踏む必要があります。

LIFFアプリ動作イメージ

以下のようにLINEトークルーム内で動作させることが可能です。
ウィンドウ内の文字列を見ると、LINEのユーザー名やID、プロフィール画像のurlなどの情報が取得できています。
LIFF上からトークルームにメッセージを送ることも可能です。

認証

LIFFアプリを利用するための認証は以下の情報取得の同意とLINEそのものへのログインの2ステップのみです。この情報取得の同意は初めてのアプリ起動時にのみ表示され、同意して認証が終了すると2回目以降は表示されません。そのためスムーズにアプリを利用することができ、この手軽さによりユーザーのUXを改善することが可能です。

LIFFアプリ情報フロー

LIFFアプリ内部の情報フローはシンプルにまとめると以下のようになっています。

用語説明

Messaging API

トーク上で自動でメッセージを返すbotの作成や、ユーザーのプロフィール情報を取得し利用するアプリなどの開発、ビジネスコネクト等の利用が可能になるAPIです。LINEが開発者向けに提供しています。
今回扱うLIFFは、このAPIの中の一つのSDKとして提供されています。

プロバイダー

作成するアプリごとに設定できる開発者情報のセットです。
後述のチャネルと組み合わせて利用します。

チャネル

LINEのプラットフォームを利用するための通信路となるオブジェクトのことです。
作成したプロバイダー情報と結びつけることによって利用します。
チャネルは、先ほど作成したプロバイダーに対して複数作成することができます。

今回は、LINEの開発者アカウントの登録から、このLIFFアプリの作成から利用するまでの手順をまとめてみようと思います。

LIFFアプリの作成手順

LIFFアプリを作成し、実際に利用するまでの手順は以下の通りです。

  1. LINE Developpers開発用アカウントの設定
  2. Messaging APIのチャネルを作成
  3. LIFFアプリの作成・公開
  4. チャネルにLIFFアプリを登録
  5. アプリを利用する

1. LINE Developpers開発用アカウントの設定

アカウントの設定

LINEの提供するAPIを利用するには、LINE Developersでの開発者アカウントの作成が必須となります。
LINE Developpersにアクセスし、プロダクト一覧の中から今回利用するMessaging APIを選択します。

するとMessaging APIのdocumentページに飛ぶので、「今すぐはじめよう」をクリックします。

LINE Bussiness IDのログイン画面になるので、既にLINEアカウントを持っている場合はログイン、開発用の別アカウントを使用したい場合などには新たにアカウントを作成します。

プロバイダーの作成

アカウントを作成できたら次に、プロバイダーを作成します。
自分のアカウントページ左のメニューから「プロバイダー」を選択し、「新規プロバイダー作成」をクリックし、作成するプロバイダー名を入力して「作成」を押すとプロバイダーが作成されます。
作成されたプロバイダーは左のメニューに追加されています。

2. Messaging APIのチャネルを作成

LINEの提供するプラットフォームを利用するためには、「チャネル」と呼ばれる通信路のような役割のオブジェクトを作成し、これと作成したLIFFアプリを紐付ける必要があります。
「新規チャネル作成」から「Messaging API」を選択し、作成するアプリの諸情報を入力してください。
最後に「完了」を押すとチャネルが作成されます。

3. LIFFアプリの作成・公開

LIFFの実装方法や仕様はこちらの公式ドキュメントに詳しくまとまっています。
LIFF SDKを利用するために以下のCDNをhtmlに追加してください。


作成したLIFFアプリはインターネット上にデプロイされている必要があり、アプリを自作して公開する場合は、作成したアプリのデータを参照可能なサーバーに置きアクセスできる状態にしておく必要があります。
以下が今回作成したデモアプリのコードです。

[liff.html]
[liff.js]

4. チャネルにLIFFアプリを登録

次に、手順2で作成したチャネルと手順3で作成したLIFFアプリを紐づけます。
作成したチャネルのページのタブメニューの中から「LIFF」タブを選択し、「追加」から新たにLIFFの情報を追加します。
LIFFの名前・サイズ・サイトを公開しているURL・BLE(Bluetooth)機能のon off 等の情報を入力して、保存します。
サイズというパラメータは、トークルーム内で動作する際のウィンドウの大きさの指定で、Compact・Tall・Fullの三種類から選択することができます。
実際の表示イメージは以下の通りです。
アプリの用途に合わせて設定してください。

情報を入力して「保存する」を押すと、チャネルとアプリケーションが結び付けられ、LIFFアプリとして利用できるようになります。

5, アプリを利用する

作成・公開したアプリを実際に利用してみます。

LIFFアプリの起動

LINE Developpersアカウントページ → 作成したプロバイダー → 作成したチャネル → 「LIFF」のタブを選択すると、手順4で設定したLIFFアプリの情報を以下のように確認することができます。

「LIFF URL」の欄の、「line://app」から始まるURLが今回作成したLIFFアプリを呼び出すためのURLです。
このURLをウェブサイトに埋め込んだり、LINEのトークルームに貼ってクリックすると、自動的にLINEが立ち上がりLIFFアプリを起動させることができます。
(PCでは、LINEデスクトップアプリが入っていてもアプリは立ち上がりません)

こちらをタップするとLIFFアプリが起動します。

LINEがインストールされたスマートフォンでサイトを見ている方はこちら↑のリンクをタップしてみてください。
LINEが起動し、LIFFアプリが起動すると思います。

まとめ

今回は、LINEの提供するLIFF SDKを用いたWebアプリケーションを作成し、実際にLINEアプリのトークルーム内で動かす所までの手順をまとめました。
冒頭で少し述べた通り、一般向けのWebサービスを公開するに当たってネックになる点の一つとして、ユーザーの認証の問題があります。
都度そのサービス固有のIDとパスワードを登録させる従来の方法と比べ、LIFFアプリケーションの認証情報はLINEのログイン情報のみなので実質バックエンド開発の必要が無く、今やLINEは準インフラと呼ばれるほど国内で普及しているため、ユーザーの参入の敷居を下げることも可能です。
2018年11月には「LINE Things」というBluetoothを用いたIoT開発が可能になる新たなプラットフォームも発表され、LIFFおよびMessaging APIを用いたアプリ開発はこれからのスタンダードとなる可能性を充分に秘めているのではないでしょうか。