本題

今回は LINE の LIFF アプリを Remix で作ってみようと思い立ったので、パパっと作ってみようと思います。

前提

LINE ログインチャネルの作成

LIFF アプリを作るためには事前に LINE Developers にて LINE ログインを作成しておく必要があるので、作成しておきましょう。
※LINE ミニアプリでも LIFF アプリを作れますが、今回はファットすぎるため利用しません

今回はアプリタイプ：ウェブアプリで作成しました。

LIFF アプリの作成

また、LIFF アプリも作成しておきましょう。
まだ実装はしていないですが、LIFF アプリ自体を作っておくことは可能です。

作成時の項目は以下で設定します。

LIFF アプリ名
- お好み
サイズ
- Full ※お好み
エンドポイント URL
- まだアプリケーションを作っていないので、一旦 https://example.com としておきましょう。後で再設定します
Scope
- 今回は liff.getProfile() を使うので、profile にチェックを入れておきます。その他は任意
その他
- 不要

LIFF ID を用意

上記の準備が終わったら、LIFF 一覧に LIFF ID が表示されています。

アプリケーションで利用するのでメモっておきましょう。

LIFF アプリの実装

それでは LIFF アプリを実装していきましょう。

今回実装する LIFF アプリは、雑に画面に LINE のプロファイル情報を表示するアプリケーションにしてみます。

LINE 公式が Create LIFF App という便利なものを用意してくれていますが、今回は利用しません。
というのも、まだ Remix でのテンプレートが用意されていないためです。
そのためゼロから書いていきます。

準備

まずは Remix の環境を用意します。@line/liff も入れておきましょう。

npx create-remix@latest
npm install @line/liff

また、LIFF ID をアプリケーションで利用するので .env から取れるようにしておきましょう。

`.env`

VITE_LIFF_ID=<メモった LIFF ID を書く>

`env.d.ts`

/// <reference types="@remix-run/node" />
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_LIFF_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

実装

次にアプリの実装をしていきます。

エラー処理は適宜入れてください。

`app/routes/_index.tsx`

import { Profile } from "@liff/get-profile";
import liff from "@line/liff";
import { json, type MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { useEffect, useState } from "react";

export const meta: MetaFunction = () => {
  return [{ title: "LIFF サンプル" }];
};

export const loader = async () => {
  return json({ ENV: { liffId: import.meta.env.VITE_LIFF_ID } });
};

export default function LiffSample() {
  const data = useLoaderData<typeof loader>();

  const [loading, setLoading] = useState(true);
  const [profile, setProfile] = useState<Profile>();

  useEffect(() => {
    liff
      .init({ liffId: data.ENV.liffId })
      .then(() => liff.getProfile())
      .then((p) => {
        setProfile(p);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [data]);

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <>
          {profile ? (
            <>
              <h1>ようこそ、{profile.displayName}さん！</h1>
              <p>
                <img
                  src={profile.pictureUrl}
                  alt="profile"
                  width={100}
                  height={100}
                />
              </p>
            </>
          ) : (
            <p>ユーザー情報が読み込めませんでした。</p>
          )}
        </>
      )}
    </div>
  );
}