こんにちは。えのもとです。

普段はバックエンドを担当することが多いですがインフラからフロントエンドまで何でも屋として働いております。
最近自分のアイデンティティがどこにあるのか不安な者です。

よろしくお願いします。

今回の記事について

LINEが提供するLINE Front-end Framework (LIFF)について、LINE公式アカウントの登録からLIFFアプリの起動までの手順をまとめてみました。
公式サイトのドキュメントは豊富ですが、これらの手順をまとめたドキュメントは見当たらなかったので、どなたかの参考になれば幸いです。
今回作成するLIFFアプリの全体像をまとめると下記のような構成になります。

LINE Developersとは？

LINEのさまざまなプロダクトを利用するための開発者向けポータルサイトです。

LINE公式アカウントの管理やLIFFの設定を行うことができます。
また開発ドキュメントも閲覧することができます。

LIFFとは？

LINE上で動作するウェブアプリです。
HTML、CSS、JSで構成されています。

LINEのプラットフォームで実行することでLINEのユーザー情報を取得することができます。
そのため、それらの情報を活用した機能の開発やユーザーの代わりにメッセージを送信したりできます。

やってみた

さっそくLIFFアプリを試してみます。

アカウント登録

まずはLINE Developersのアカウントを登録します。
公式サイトから”ログイン”をクリックし”アカウントを作成”をクリックします。
LINE Developersの公式サイト

メールアドレスを入力します。

メールが飛んできますのでメールにあるリンクから名前とパスワードを登録します。

登録をクリックします。

サービスに移動します。

アカウント情報を入力し、アカウントを作成します。
これでアカウント登録は完了です。

プロバイダーの登録

まずプロバイダーを登録します。これがないと何も始まりません。

なおここで登録する名前はLINE公式アカウントの提供者としてそのまま表示されますので注意が必要です。

LINEログインチャネルの登録

次にLIFFアプリ用にチャネルを登録します。
チャネルにはいくつか種類がありますが、LIFFアプリを設定するためには “LINEログイン” チャネルを選択する必要があります。

必要な情報を入力します。

LIFFアプリの登録

LIFFアプリを追加します。

LIFF IDを取得するためここではエンドポイントは仮のURLとしています。

LIFFアプリの構築

次にLIFFアプリを構築します。
構築には公式チュートリアルを利用します。
LIFFアプリの公式チュートリアル

チュートリアルではnetlifyを利用するためアクセス可能なWebsite URLを得ることができます。

LIFFアプリのエンドポイントを設定

構築したLIFFアプリのWebsite URLをLIFF設定画面のエンドポイントに設定します。
これでLIFFアプリの用意ができました。

Messaging APIチャネルの登録

次に公式アカウントの設定を行なっていきます。
まずは”新規チャネル作成”をクリックします。

チャネルの種類は “Messaging API” を選択します。

必要な情報を入力します。

確認画面が表示されますので “OK” をクリックします。

リッチメニューの登録

リッチメニューとは公式アカウントで表示できるカスタムメニューのことです。

まずは LINE Official Account Managerに移動します。
先ほど作成した Messaging APIチャネル の “チャネル基本設定” にリンクがありますのでこちらをクリックします。

ホームに移動します。

サイドメニューの”トークルーム管理”から”リッチメニュー”をクリックし”リッチメニューを作成”をクリックします。

必要な情報を入力して”保存”をクリックします。
これでリッチメニューの登録は完了です。

確認してみる

LINE Developersのサイトに戻って、Messaging API チャンネルのQRコードをスマホで読み取ります。

友だち追加します。

デフォルトのウェルカムメッセージとリッチメニューが表示されました。
リッチメニュー（Aが表示されているエリア）をタップします。

すると認証画面が開くので “許可する” をタップします。

登録しておいたLIFFアプリが起動しました。
これでLIFFアプリでLINEのユーザー情報を取得することができるようになりました。

まとめ

長くなってしまいましたが手順としては以上になります。
冒頭でもお見せしましたが、プロバイダ、チャネル、LIFFなどの全体像をまとめると下記のような構成になります。

チャネルの種類の違いやLIFFとの関係性、またLIFFの起動方法など、
調査をしつつ全体像を把握するのに苦労しました。

LIFFを初めて扱う方々の参考になれば幸いです！