LIFF(LINE Front-end Framework)は、
「LINEログイン」というLINEアカウントの連携を仲介してくれる仕組みを使って、マイページのようにユーザの個別情報を取り扱ったコンテンツをすばやく提供できるSDKです。
認証以外の機能もいくつかあるので、気になる方は公式コンテンツも読んでみてください。
この記事では、LIFFのウェブアプリタイプ[1]をはじめて開発するときの準備についてまとめました。
画面の操作手順などはLINEの公式リファレンスが充実していますので、大筋のながれやポイントを中心に紹介しています。
- LIFF開発をはじめるまえに準備するもの
- 初期設定の手順
LIFF開発をはじめるまえに準備するもの
ウェブアプリタイプのLIFFを開発することになったら、まえもって準備しておくと良いものです。
- httpsで公開されているウェブコンテンツ …
アプリ本体 - LINEアカウント + スマートフォンLINEアプリ …
デバッグ環境 - LINE Developersアカウント …
認証アカウント
1.httpsで公開されているウェブコンテンツ
ウェブアプリタイプのLIFFは、
公開されているウェブコンテンツへJavaScriptのLIFF SDKを組み込むとLINEの認証ができるようになる仕組みです。
したがいまして、コンテンツを設置するインフラは自前で手配します。
3.ウェブコンテンツの設定でも紹介している、公式のスターターアプリなどのリポジトリをpullして準備するとよいでしょう。
この自前で用意するコンテンツを、公式マニュアルではLIFFのエンドポイントと呼んでおり
初期設定で、チャネルからLIFFを設定をするときに登録します。
なお、LIFFのエンドポイントはhttpsが必須になっています。
2.LINEアカウント + スマートフォンLINEアプリ
LINEログインはLINEアプリからだけでなくPCやスマホのWebブラウザでも使用できますが、LIFFにはLINEアプリから起動したときのみ使用できる機能もあります。
スマホのLINEアプリ上での提供を想定している場合は、デバッグ環境として開発用アカウントでLINEアプリへログイン可能なスマホもあらかじめ手配しておくとスムーズです。
3.LINE Developersアカウント
ウェブコンテンツをLIFFとして動作させるための紐付けに、
LINE Developersのユーザ向けに提供されているLINE Developersコンソールという管理画面を利用します。
LINE Developersのアカウント作成は無料です。
メールアドレスがあれば登録できるLINE Business IDから作ることも、LINEアカウントから作ることもできますが
LINE DevelopersのアカウントはLINEアカウントから作るほうがスムーズです[2]。
初期設定の手順
LINE DevelopersでLIFFの設定を作成し、エンドポイントのウェブアプリと紐付ける手順です。
- チャネルを作成
- チャネルへLIFFを作成
- ウェブコンテンツの設定
1.チャネルを作成
LINE Developersコンソールへログインします。
Developers内はアカウント > プロバイダー > チャネルという階層になっており、LIFFはチャネルの配下へ設定します。
ログインすると、最初にプロバイダーを選択するよう促され
プロバイダーの画面に入るとすぐ、チャネルを作成するボタンが見つかります。
チャネルの新規作成では、最初に種別を選ぶよう促されます。
LIFFで使用するのはLINEログインです。
ひきつづき必須項目を選択・入力し、LINE開発規約に同意チェックを入れて作成を完了します。
途中で選択するアプリタイプは、ウェブアプリを選択します。
これでチャネルの作成は完了です。
2.チャネルへLIFFを作成
作成したチャネルのLIFFタブから、最初のLIFFを追加します。
チャネル内のLIFFに関する設定は、すべて後から編集できます。
それぞれの項目の役割は、公式ガイドで詳しく解説されています。
チャネルを設定すると、LIFF IDとLIFF URLが発行されます。
つぎの手順でSDKのliff.initによる初期化を実行するとき、このLIFF IDが必要です。
3.ウェブコンテンツの設定
開発プロジェクトへ、CDNかnpmパッケージでLIFF SDKを組み込みます。
公式リファレンスのクイックスタートガイドが詳しいため、参考にして設定してみてください。
その後、チャネルを介してLIFF機能を利用できるよう
最初に表示されるページへ、組み込んだLIFF SDKのliff.initやliff.loginという処理を記述します。
設定済みのサンプルリポジトリもあるので、適宜ご活用ください。
以上で初期設定は完了です！🎉
LINEアプリのトークルームでLIFF URLを発言し、開いてみましょう。
読了ありがとうございます、いかがだったでしょうか。
他にも、私が開発をはじめたときつまづいたことを中心にLIFF開発に関するTipsをスクラップしているので、よろしければご覧ください。
それでは、よきLIFF開発ライフを！
Discussion