📱

これからLIFF開発をはじめるときの準備

webdev2022/09/20に公開

LIFF(LINE Front-end Framework)は、
「LINEログイン」というLINEアカウントの連携を仲介してくれる仕組みを使って、マイページのようにユーザの個別情報を取り扱ったコンテンツをすばやく提供できるSDKです。

認証以外の機能もいくつかあるので、気になる方は公式コンテンツも読んでみてください。
https://developers.line.biz/ja/docs/liff/


この記事では、LIFFのウェブアプリタイプ[1]をはじめて開発するときの準備についてまとめました。
画面の操作手順などはLINEの公式リファレンスが充実していますので、大筋のながれやポイントを中心に紹介しています。

  • LIFF開発をはじめるまえに準備するもの
  • 初期設定の手順

LIFF開発をはじめるまえに準備するもの

necessities

ウェブアプリタイプのLIFFを開発することになったら、まえもって準備しておくと良いものです。

  1. httpsで公開されているウェブコンテンツ … アプリ本体
  2. LINEアカウント + スマートフォンLINEアプリ … デバッグ環境
  3. 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コンソールという管理画面を利用します。

https://developers.line.biz/

LINE Developersのアカウント作成は無料です。
メールアドレスがあれば登録できるLINE Business IDから作ることも、LINEアカウントから作ることもできますが
LINE DevelopersのアカウントはLINEアカウントから作るほうがスムーズです[2]

初期設定の手順

LINE DevelopersでLIFFの設定を作成し、エンドポイントのウェブアプリと紐付ける手順です。

  1. チャネルを作成
  2. チャネルへLIFFを作成
  3. ウェブコンテンツの設定

1.チャネルを作成

LINE Developersコンソールへログインします。

Developers内はアカウント > プロバイダー > チャネルという階層になっており、LIFFはチャネルの配下へ設定します。
ログインすると、最初にプロバイダーを選択するよう促され
プロバイダーの画面に入るとすぐ、チャネルを作成するボタンが見つかります。

チャネルの新規作成では、最初に種別を選ぶよう促されます。
LIFFで使用するのはLINEログインです。

ひきつづき必須項目を選択・入力し、LINE開発規約に同意チェックを入れて作成を完了します。
途中で選択するアプリタイプは、ウェブアプリを選択します。

これでチャネルの作成は完了です。

2.チャネルへLIFFを作成

作成したチャネルのLIFFタブから、最初のLIFFを追加します。

チャネル内のLIFFに関する設定は、すべて後から編集できます
それぞれの項目の役割は、公式ガイドで詳しく解説されています。

https://developers.line.biz/ja/docs/liff/registering-liff-apps/

チャネルを設定すると、LIFF IDLIFF URLが発行されます。
つぎの手順でSDKのliff.initによる初期化を実行するとき、このLIFF IDが必要です。

3.ウェブコンテンツの設定

開発プロジェクトへ、CDNかnpmパッケージでLIFF SDKを組み込みます。
公式リファレンスのクイックスタートガイドが詳しいため、参考にして設定してみてください。

その後、チャネルを介してLIFF機能を利用できるよう
最初に表示されるページへ、組み込んだLIFF SDKのliff.initliff.loginという処理を記述します。

設定済みのサンプルリポジトリもあるので、適宜ご活用ください。

以上で初期設定は完了です!🎉
LINEアプリのトークルームでLIFF URLを発言し、開いてみましょう。


読了ありがとうございます、いかがだったでしょうか。
他にも、私が開発をはじめたときつまづいたことを中心にLIFF開発に関するTipsをスクラップしているので、よろしければご覧ください。

それでは、よきLIFF開発ライフを!

https://zenn.dev/webdev/scraps/16975fa8b9ba23

脚注
  1. LIFFのアプリタイプは、ネイティブアプリウェブアプリが選べます。 ↩︎

  2. LINE Business IDでLINE Developersのアカウントを作成した場合、あとでマイページからLINEアカウントを紐付ける設定も必要になります。どのみちLINEアカウントはDevelopersで開発するために必要なので、最初からLINEアカウントで作成しておくと二度手間をさけられます。 ↩︎

TAM

お客さまと共に新しい価値を創る。パートナー型デジタル・エージェンシーTAMのテックブログです。 採用情報:https://wantedly.com/companies/tam/

Discussion

ログインするとコメントできます