LIFF（LINE Front-end Framework）アプリを作ってみる

LIFF（LINE Front-end Framework）とは？

LIFF（LINE Front-end Framework）とは、LINE株式会社が提供するLINEトーク画面上で動くWebアプリのプラットフォームです。LIFFを使って動作するアプリを「LIFFアプリ」といいます。

LIFFアプリでできること

LIFFアプリのメリットは主に以下があります。

①LINEのトークルーム上でWebアプリを起動する。
②LINEのトークルームにメッセージをプッシュ配信する
③QRコードを読み取る
④LINE公式アカウントへのユーザー登録を促して、囲い込める
⑤外部ブラウザからURLで呼び出せる
⑥スマホアプリに比べて、開発予算がざっくり半額以下になることが多い
⑦スマホアプリに比べて、開発が容易にできる

特に日本においてはLINEを使うことが主流の文化です。
コミュニティを作って情報をアクティブにファンユーザーに発信していくという流れが、安価で組みやすいのが大きなメリットだと思います。

一方でLIFFアプリのデメリットとしては以下があげられます。

①ウェブアプリなので、ネイティブアプリにはヌルヌル感やデザインの馴染み度合いで劣る
②LINEアプリがないと活かされない
③プッシュ配信が一定数を超える場合は有料になる

特にスマホアプリの最大のメリットであるプッシュ通知が利用回数に応じて有料になってしまう、というのは最大のハードルかと思います。

ただ今回はご紹介しませんが、LINEミニアプリでこの問題はかなり解決されます。よってLINEミニアプリが今後、日本でスマホアプリに置き換わる日が来るかもしれません。

LIFFアプリの作り方

ここから実際に作ってみます。

①LINE Developersに登録する

LINE DevelopersはいわゆるLINEが提供するAPIなどの機能を使うための開発者用の管理画面です。

ここからコンソールに入るためには、自身もしくはビジネスアカウントを作成する必要があります。

②LINEログインチャネルを作成する

コンソールに入るとこんな感じで、Adminに自分の名前のプロバイダが1つ作成されていると思います。

新規チャネル作成を押すと、以下のようなポップアップが表示されます。

今回はここのLINEログインを使います。

まずLINEログインを選択して、情報を埋めていきます。

チャネル名やチャネル説明は後から変えられるので、一旦適当でいいです。
チャネルアイコンはなくても動きます。

LINEログイン設定にて、ウェブアプリにチェックをつけます。

LIFFにて、LIFFアプリを追加します。

LIFFアプリ名は管理のための名前なので自分が分かる形でつけましょう。

サイズ機能がLIFFが一般的なウェブアプリと違う一要素になります。
Full, Tall, Conpactという3タイプのレイアウトが指定できます。

エンドポイントURLには表示させたいURLを入れます。
ここではLINE FukuokaのSmart City取り組み紹介URLを設定しておきます。

Scopeはユーザーに対する権限許可に関する依頼項目です。
・openid：IDトークンを取得するためのスコープ
・email：メールアドレスを取得するためのスコープ
・profile：プロフィール情報を取得するためのスコープ
・chat_message.write：メッセージを投稿するためのスコープ。アカウントの種類によっては、このオプションが［全て表示］の下に表示されることがあります。

細かい説明は割愛しますが、要するにIDやアカウント名などを使わせてねっていうお願い項目だと思っていただければ良いです。

LIFFアプリを表示する

保存すると、作成したLIFFアプリが表示されます。これで完成です！

シェアターゲットピッカーはLINE上の友だちにシェアする機能だという認識で良いです。とりあえずオンにしておきます。

では、LIFF URLのURLをLINEのどこかトークルームに貼り付けてアクセスしてみましょう。
先程エンドポイントURLで設定した素敵なLINE Fukuoka Smart Cityページが表示されたと思います。

ね、簡単でしょ。

さらにここからLINE公式アカウントとの連携がLIFFアプリの真骨頂になってくるのですが、長くなるのでまた次回、気が向いたら更新します。

ではでは。