“LIFF プレイグラウンド”のサンプルコードで LIFF アプリケーションを構築しつつ、基本的な概念を確認してみた

こんにちは、CX事業本部 Delivery部の若槻です。

最近、メッセージングアプリの LINE のプラットフォームを利用したアプリケーションの開発に携わっているのですが、いかんせん LINE 周りの開発経験は皆無だったので、概念などをいちから学習する必要性に駆られています。

そこで今回は、LINE の LIFF アプリ（後述）を開発するための以下のサンプルコード（LIFF プレイグラウンド）が公式提供されていたので、こちら使って LIFF のデモアプリケーションを実装しつつ、基本的な概念を確認してみました。

試してみた

LINE Developers コンソールからの設定

まず、LIFF アプリの開発に必要な次の要素を LINE Developers コンソールから設定します。

• プロバイダー（Provider）
• チャネル（Channel）
• LIFF アプリ

開発者は LINE Developers コンソールを利用して LINE プラットフォームを利用したサードパーティのアプリケーションを作成することができます。

プロバイダー、チャネルの作成

まずプロバイダーおよびチャネルを作成します。

プロバイダーとは、LINE プラットフォームを利用してサービスを提供し、ユーザーの情報を取得するサービス提供者を指します。そしてサービス提供者は LINE プラットフォームが提供する機能をチャネルを介して利用します。

両者の関係は次の引用図のようにプロバイダーの配下に1つまたは複数のチャネルが紐付けられます。そして LINE Developers コンソールの Admin 権限を持つ開発者は、他の開発者にプロバイダーやチャネルのアクセス権限を付与することができます。

プロバイダーを作成している様子と、作成されたプロバイダーです。作成には LINE Developers コンソールの Admin 権限が必要です。

次にプロバイダーに対してチャネルを作成します。チャネルには次の種類がありますが、今回は LIFF アプリを作成するので LINE ログインを使用します。

プロバイダーを作成している様子と、作成されたプロバイダーです。作成にはプロバイダーの Admin 権限が必要です。

プロバイダーおよびチャネルの詳しい作成方法はこちらが参考になります。

チャネルへの LIFF アプリの追加

次に、作成したチャネルに LIFF アプリを追加します。

LINE プラットフォームを利用して開発するアプリケーションには、大きく分けて次の2種類があります。

• LINE ミニアプリ
• LIFF アプリ

LINE ミニアプリをユーザーに提供するためには LINE による審査および認定が必要で、審査に通過すると LINE アプリのホームタブなどにアプリが表示されるようになります。またトークルームも利用可能です。一方で LIFF アプリは LINE による審査および認定が不要ですが、ホームタブなどには表示されず、またトークルームも利用できません。

今回構築するのは LIFF アプリです。

LINE Front-end Framework（LIFF）は LINE が提供するウェブアプリのプラットフォームで、この上で動作するウェブアプリを LIFF アプリと呼びます。

LIFF アプリは、LINE アプリ内の LIFF ブラウザでも、外部ブラウザでも動作させることができます。LIFFアプリを使うと、LINE のユーザー情報を取得して、これらを活用した機能を提供することができます。

LIFF アプリを追加している様子と、追加された LIFF アプリです。追加にはチャネルの Admin 権限が必要です。

追加された LIFF アプリから、後ほど使用する LIFF ID をコピーしておきます。

プロバイダーへのアプリの詳しい追加方法はこちらが参考になります。

プロジェクトのクローン

ここからはサンプルコードでの実装です。

まず GitHub からローカルにプロジェクトを Git クローンします。

git clone https://github.com/line/liff-playground.git

LIFF ID の設定

.envファイルに先程取得した LIFF ID を設定します。

.env

VITE_LIFF_ID="Your LIFF ID"

LIFF ID は環境変数として読み込まれ、liff.init()で LIFF アプリを初期化する際に使用されます。これにより LIFF SDJ の他のメソッドを実行できるようになります。

src/main.tsx

import liff from '@line/liff'
import React from 'react'
import ReactDOM from 'react-dom'
import './main.css'
import App from './App'

liff
  .init({ liffId: import.meta.env.VITE_LIFF_ID || '' })
  .then(() => {
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    )
  })
  .catch((e) => {
    alert(`LIFF error: ${e.message}`)
  })

依存関係のインストール

デモアプリの構築に必要な依存関係をインストールします。

yarn

アプリケーションをローカルで起動

次のコマンドを実行して、Vite により React アプリケーションをローカルで起動します。

yarn dev

起動後に`http://localhost:3000/`にアクセスすると、次のような LIFF Playground デモ画面が表示されます。（画像は LINE が公式公開しているもの）

LIFF Playground では、LIFF の次のメソッドを実行することができます。実際のアプリケーションではこれらを利用して認証やユーザー情報の取得などを行います。

• liff.login()
• liff.logout()
• liff.getAccessToken()
• liff.getProfile()
• liff.getDecodedIDToken()
• liff.getFriendship()
• liff.permanentLink.setExtraQueryParam()
• liff.permanentLink.createUrl()
• liff.sendMessages()
• liff.openWindow()
• liff.shareTargetPicker()
• liff.scanCodeV2()
• liff.closeWindow()
• liff.permission.query()
• liff.permission.requestAll()
• liff.permanentLink.createUrlBy()

それぞれのメソッドの処理については次の API リファレンスで紹介されています。

そしてデモ画面上に表示されている QR コードを LINE アプリで撮影すると、LIFF ブラウザ上でも LIFF アプリを開くことができます。これによりliff.getAccessToken()やliff.getIDToken()などによりログイン後にのみ取得可能な情報が取得されていることが確認できます。

おわりに

LIFF プレイグラウンドのサンプルコードで LIFF アプリケーションを構築しつつ、基本的な概念を確認してみました。

デモの実施およびドキュメントの読み込みを通じて、以前まではよく分かっていなかった LINE アプリケーション開発をする上で理解しておく必要のある概念が少しだけ理解できてきました。

以上