LINE LIFFアプリケーションの環境構築: React

どもども！今回は、LINEの内部ブラウザを使ってアプリ構築ができるLIFF（LINE Front-end Framework：LINEログイン）の開発環境構築についてまとめました。良い開発体験のためにngrokを使って効率的に開発できる環境を作っています。React＋ViteでLIFFアプリ構築

はじめもす

ども！日曜日をまるっと使って部屋の模様替えをしていた龍ちゃんです。景色を変えると気分も変わるので博打ですね。久々に週末をソロで過ごしていました。1人呑みから1人ステーキまでいろんなことしていましたね。良いリフレッシュでした。

さて！今回は、本業とはあまり関係のない検証話になります。LINE内でブラウザ起動することができるアプリケーションを開発していきます。良いプロジェクトとして扱っていくために、普段使用している技術で初期的なアプリケーションとして実装しました。

今回の記事で取り扱う内容は以下になります。

• LIFFアプリの開発環境を構築する
• React＋ViteでLIFF（LINE Front-end Framework：LINEログイン）アプリを構築する

それでは、始めていきましょう。

LIFFアプリって何？

そもそもLIFF（LINE Front-end Framework）アプリって何？という方のためにお話していこうと思います。最近だと、モバイルオーダーができるお店も増えてきましたよね。そして、注文前に一度「LINE友達登録」とかしてLINE内でブラウザが立ち上がったりしませんでした？あれです！あれのイメージを持ってください。

ざっくりいうと、LINE内でブラウザを起動して、LINEに登録している情報を使ってなんやかんやすることができるアプリケーションのことです。以下にサンプルを出しておきます。

LIFFアプリは、LINEの内部ブラウザでの利用が推奨されています。ですが、外部ブラウザでも使用することができます。

LIFFアプリで取得することができる情報としては、以下になります。

• Profileに設定している情報
• アクセストークン
• IDトークン

LINE上で設定しているプロフィール情報にはアクセスすることができるので、「ようこそ〇〇さん」といった表記はすぐ実現することができます。アクセストークンとIDトークンに関しては、サーバーと連携してデータを管理したいときに使用します。

セキュアに運用する話は、突っ込んで書いていく予定なので、ここではLIFFアプリについてふんわりと理解をしておいてください。

LIFFアプリを開発していく

それでは、実際にLIFFアプリケーションを開発していくところまでを進めていきます。この辺は、公式のドキュメントにしっかりと書かれているので見比べてもらえるとうれしいです。

取り扱うデモアプリケーションを開発するまでに必要なステップは以下になります。

• LINE Developersにアプリケーション登録を行う
• React＋Viteで開発環境を作成する
• LIFFアプリを作成して登録をする
• ngrokでHTTPS化 or HTTPSのアプリケーションにデプロイ

LINE Developersに登録する

まずは、LINE Developersに登録しましょう。プロバイダー登録なども済ませておいて成功すると新規チャンネル登録というボタンがあるのでクリックしてください。

以下の画面が立ち上がったら、「LINEログイン」を選択してください。

すると画面が切り替わるので、必要な情報を入力してください。

ひとまず、ここで設定が必要なのは以上になります。

React + Viteで環境構築を行う

LINEのLIFFアプリは、自前で作成する方法と公式が出している「Create LIFF App」の二つの方法があります。どちらの方法についても解説をしていきます。環境構築が面倒な場合はこちらのリポジトリのinitialize-envブランチからクローンしてもらえると楽です。

公式が出している方法はこちらになります。コマンドは以下です。

npx @line/create-liff-app

こちらの方法では、対話式でプロジェクトを作成することができます。

自前で作成を行う場合は、React＋Viteでベースとなるプロジェクトを作成します。その後、以下のパッケージを追加することで、CLIで作成したものと同等の環境になります。

yarn add @line/liff

ひとまず、LIFFアプリケーションを作成することができる状態は整いました。

公式のサンプルについて解説を入れておきます。自前で作成した場合は、App.tsxに以下のコードを張り付けてください。

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

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
		// 初期セットアップ
		// LINE内部ブラウザの場合は、ログイン処理も同時に終了する
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID
      })
      .then(() => {
        setMessage("LIFF init succeeded.");
      })
      .catch((e: Error) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  });

  return (
    <div className="App">
      <h1>create-liff-app</h1>
      {message && <p>{message}</p>}
      {error && (
        <p>
          <code>{error}</code>
        </p>
      )}
      <a
        href="<https://developers.line.biz/ja/docs/liff/>"
        target="_blank"
        rel="noreferrer"
      >
        LIFF Documentation
      </a>
    </div>
  );
}

export default App;

.envファイルを作成して、以下をコピペ作成してください。現在はLIFF_IDは取得することができません。こちらは、次の章で作成することができます。

VITE_LIFF_ID="xxxxxxxxxxxxxx"

LIFFアプリを作成して登録する

また、LINE Developersの画面に戻ってください。先ほど作成したアプリケーションの画面を開いて以下の画面を開いてください。

追加を押すと画面が切り替わります。

特に気を使って設定する必要があるのは、以下の３点になります。

• エンドポイントURL
• サイズ
• Scope

エンドポイントURLは有効なHTTPSを挿入する必要があります。後から変更もできますが、値を入力しなければ先に進むことができないので、ここでは試しにhttps://example.comを入れておきます。

サイズはLINEの内部ブラウザで表示されるサイズになります。この辺は好きなサイズを設定してください。

Scopeは設定したアプリケーションの権限について設定しています。この辺りも作成するアプリケーションによって設定してください。

設定が完了すると先ほどの画面に戻ってきます。

LIFF_IDをこちらで取得することができます。

ngrokでHTTPS化 or HTTPSのアプリケーションにデプロイ

先ほども説明しましたが、LIFFアプリには有効なHTTPSなURLを設定する必要があります。僕が知っている方法は3つありますが、その中でもよく使う方法と開発体験が良い方法を紹介します。

• Azure Static Web Appsにデプロイする
• ngrokでlocalhostをHTTPS化させる

開発体験のためにもngrokを使用していきたいと思います。（変更の度にデプロイすると面倒なので…）簡単に言うと、「ローカルのポートをhttps化」するとこができます。登録してダッシュボードにログインするとセットアップ方法が書いてあります。公式がわかりやすいのでそちらを参考にして構築してください。一応コマンドをかいておきます。

choco install ngrok

認証情報を追加します。

ngrok config add-authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

起動しているポートをngrokを用いて設定します。サンプルでは80番ポートを実行しています。

ngrok http 80

実行すると実行結果にhttps化されたURLが払い出されます。

そちらを先ほどのLIFFの設定に反映させることで、開発環境をリアルタイムにLINE上で確認することができます。

おわりもす

お疲れ様です。ひとまず、LIFFアプリを開発する環境を設定することができました。実際の運用面でのセットアップは、別の記事で解説をしていきたいと思います。久しぶりに週末で検証を進めることができました。今後はLIFFアプリケーション系の記事をまとめていきたいと思います。

プロジェクト周りはCI/CDばかりを書いているので、息継ぎ程度にフロントもバックも書いていきます( *´艸｀)

ではまた！

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube