昨今、LINEを使った集客ツールの一つとしてLINE上で動くアプリ：LIFFアプリが注目を集めています。DX推進においても直接関係するものではありませんが、間接的に様々なシーンで活用されることが増えています。今回はLIFFアプリの作成方法を紹介していきます。
LINE Front-end Framework（LIFF）とは
まず、LIFFアプリを作るためにはLINE Front-end Framework（LIFF）と呼ばれるLINEが提供する専用のプラットフォームを用います。
LIFFを使うと、ユーザー情報をLINEから取得して利用することもできるので、ユーザーに応じた情報を提供したり、LIFFアプリからフォームを送信すれば、ユーザーの代わりにLINEを送ったりすることができます。
ProviderとChannelを作成する
それでは早速、LIFFミニアプリを作っていきます。
LINE Developersコンソール上で、自分のLINEアカウントでログインします。ログインするだけでLINE Developersアカウントが作成され、Developrs コンソールが利用できるようになります。
コンソールにアクセスした後、自身のProviderを作ります。
Create a new providerをクリックして、Providerを作ります。
Providerを作成したら、次はChannelを作ります。
Create a new channelをクリックして、LINE Loginを選びます。
なお、すでにいくつかChannelがある場合は上記の画面になりますが、ない場合はCreate a LINE Login channel、Create a messaging API channel..などCreate 〇〇（channelの種類）channelと書かれた選択肢がある画面に飛ぶので、Create a LINE Login channelを選択してください。
必要事項を記入し画面下部のCreateボタンを押すと、登録完了です。
LIFFアプリにLIFF SDKを組み込む
LIFFアプリとは言っても、中身は普通のwebアプリと同じです。LIFFアプリを使いたいwebアプリを作成していきましょう。
webアプリを作成したら、LIFF SDKを読み込みます。これはLINE上からユーザー情報を取得する際に必須となります。
例えば、どのユーザーに対しても「Hello world」と表示するだけのアプリであればLIFF SDKを読み込む必要はありませんが、LINEに登録しているユーザー名を取得して、「Hello 〇〇さん」などと表示したい場合にはSDKを読み込む必要があります。
SDKの読み込みにはnpmで読み込む方法とCDNパスを指定する方法があり、どちらでも大丈夫ですが、今回はより簡単なCDNパスで指定します。
作成したwebアプリのhead部分に以下を追加してください。
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>注意：どのバージョンを使うべきかに関しては、公式にも書いてありますが、リリースノートをこまめにチェックし、バージョン管理していくことも留意しておくようにしましょう。
このSDKを読み込むことで、LIFF独自のメソッドを利用することができます。（例：liff.getProfile()）
こちらに関しては公式リファレンスに詳しく載っていますので、そちらをご確認ください。
Channelにアプリを登録する
LIFFアプリ用のwebアプリが完成したら、次は先程作ったChannelに登録を行っていきます。
LIFFアプリとして使うためには、URLで指定をする必要があるため、実際に公開する必要があることに注意してください。ホスティングには何を使っても大丈夫ですが、開発用途などであればherokuやVercelなどを使うと簡単に用意することができます。
それではホスティングが完了したら、コンソール画面に戻ってください。
まずは先程作ったChannelの管理画面を開きます。
LIFFのメニューを選択して、Addボタンを押します。
すると、フォーム画面が表示されますので必要事項を記入していきます。
フォーム内のEndpoint URLに作成したwebアプリのURLを入れてください。ここで設定したURLのページが、LIFFアプリ起動時に最初に開くページになります。
必要事項を入力してAddを押せば登録完了です。
このとき表示されているLIFF URLがLIFFアプリとしてアクセスするためのURLです。このURLを自身のLINEのトークルームに貼り付けてみて、クリックしてみてください。
外部リンクであればそのままsafariなどが開き外部ページに飛ばされますが、今回はLIFFアプリで指定しているので、外部ページには飛ばされず、LINE内で開かれるのが確認できるかと思います。
まとめ
今回は、LIFFアプリの作り方を説明しました。今回の手順をまとめると以下のような流れになります。
- Line Developers コンソールにログインする
- ProviderとChannelを作成する
- webアプリを作る
- 作ったwebアプリにLIFF SDKを読み込む
- アプリを公開する
- 公開したURLをChannelに登録する
このような作業をしていくことで、LIFFアプリを構築することができることがご理解いただけたら幸いです。DX推進においても、LIFFアプリを用いることで様々なオフライン/オンラインデータをLINE上に発信するようなことが実現できますので、DX化におけるアイデアの１つとして抑えていくと良いでしょう。