LIFFアプリ開発徹底入門 #React

はじめに

業務でLIFFについて扱っているので、自身の学びのために一から簡易的なアプリを作って、その全体像を把握してみます。
LIFFアプリはReactとTypeScriptで作成します。

前提

本記事は以下の3つを前提として進めていきます

Node.jsの導入が終わっていること
LINE Buisinessアカウントのプロバイダーが作成済であること
Renderのアカウントを作成済であること

LINEの設定、およびRenderアカウントの作成については以下の記事で触れていますので参考にしてみてください。

また上記以外の付加情報として、私の環境は
OSがMac Ventura 13.6.7
Node.jsのバージョンはv20.10.0
使用している開発ツールがVS Code
となっています。

LIFFとは

LIFFとはLINE Front-end Frameworkの略で、LINEが提供するWebアプリのプラットフォームです。
LIFFを使うことでLINEの情報を使用したアプリケーションを作成することができます。

何ができるのか

何ができるかを確認するための簡易アプリをLINEが用意してくれています。
LINEプレイグラウンド

ざっとページを確認すると分かりますが、LINEログインや、OSの情報の取得、LINEプロフィールの取得など、様々な機能が用意されています。

こちらの調査によれば、スマホ・携帯利用者の8割がLINEを利用しているらしいので、LIFFを使うことでLINEと連携した便利なアプリケーションを作成することができそうです。
https://www.moba-ken.jp/project/service/20240422.html

習うより慣れよ、なので実際にLIFFアプリの開発を一から行ってみましょう。

LIFFで簡単なアプリを作る

環境構築

viteの導入

npm create viteでReactのプロジェクトを生成しましょう。
プロジェクト名、使用するフレームワーク、JavaScriptかTypeScriptかを選択します。
今回は以下のような設定とします。

生成したプロジェクトのディレクトリへ移動し、依存関係のインストールを行います。

npm run devでアプリを立ち上げます。

Localのアドレスへアクセスし、以下のような画面が表示されれば成功です。

通常、viteのポート番号は5173ですが、私は別で使っていたので5174となっています。

LIFF SDKの導入

立ち上げたアプリを一旦終了し、以下のコマンドでLIFF SDKをインストールします。
npm install @line/liff

アプリの作成

ファイル・フォルダの整理

今回はユーザー名を取得して、「こんにちは、〇〇さん」と出力するだけのお手軽アプリを作ります。

まず、元から用意されているファイルやフォルダのうち、不要なものをは削除して以下の通りにします。

そして2つのファイルを編集します。

index.htmlの編集

こちらはほぼ初期値のままですが、以下のようにしておきます。

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LIFF DEMO</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

こちらは今回のアプリの動きに大きく寄与しないので特に解説しません。

App.tsxの編集

つぎに、App.tsxです。

App.tsx

import liff from "@line/liff";
import { useEffect, useState } from "react";

function App() {
  const [userName, setUserName] = useState("名無し");
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID,
        withLoginOnExternalBrowser: true,
      })
      .then(() => {
        console.log("init");
        liff
          .getProfile()
          .then((profile) => {
            console.log("get profile");
            setIsLoggedIn(liff.isLoggedIn());
            setUserName(profile.displayName);
          })
          .catch(() => {
            console.log("get profile failed");
          });
      })
      .catch(() => {
        console.log("init failed");
      });
  }, []);

  return <h1>{isLoggedIn ? `こんにちは、${userName}さん` : "Loading..."}</h1>;
}

export default App;

一見複雑なように見えますが、抑えておくべきポイントは3つです。

liff.initの使用

LIFFアプリを使う上で、これは必ず必要になります。
この初期化を行うことで、ほかのliffのメソッドを使用可能になります。

initメソッドにはオブジェクトの形式で設定を渡すことができ、liffidのみが必須になります。
ここではliffidには環境変数から取得した値を設定するようにします。
この値はLIFFアプリを登録したあとでないと取得できないため、一旦このようにしておきます。

また、LINE以外のブラウザから開いたときにLINEログインを強制できるようにwithLoginOnExternalBrowserオプションをtrueで設定しておきましょう。

非同期処理の使用

liff.initはPromiseオブジェクトを戻り値として返却します。
これは非同期処理に関連するオブジェクトで、LIFF独自のものではなく、JavaScriptの仕様です。
Promiseについての詳細な解説はここではしませんが、成功したときの処理をthenに、失敗したときの処理をcatchに書くものと思ってください。

then、catchの引数にはそれぞれコールバック関数を渡す必要があるため、それぞれアロー関数で処理を定義しています。