【コピペで簡単！】LIFFの開発環境をNuxt3で構築する

こんにちは！株式会社プロットハブのエンジニア小野です。今回はローカルにLIFFの開発環境をNuxt3で構築する方法を画像を交えながら解説しようと思います！

これからLIFFでアプリを作成したい方はぜひ参考にしてください。

手っ取り早くLIFFの開発環境を構築したい方は、[こちら](#手っ取り早くLIFFの開発環境を構築する)をご覧ください。

LIFFとは？

LINE Front-end Framework（LIFF）は、LINEヤフー株式会社が提供するウェブアプリのプラットフォームです。ウェブアプリにLIFF SDKを組み込むと、LINEプラットフォーム上の情報やLINEアプリと連携した機能を扱うことができます。

引用元: LINE Developers

LIFFで使用できる言語、フレームワーク

言語

JavaScript

TypeScript

フレームワーク

Next.js

Nuxt

React

Vue.js

Svelte

フロントエンドの主要なフレームワークは使用できるので自分の得意なフレームワークで開発することができます。

動作環境

Node.js: 20.14.0

Nuxt3: 3.11.2

公式ではnode.jsのバージョンは`v18.17.1`以上を推奨しています。

チュートリアルに沿って構築する

公式ドキュメントに沿ってLIFFの開発環境を構築していきます。

結論から言うとこの手順の通りにしてもうまくいきませんでした。

ですが備忘録も兼ねているので、まずはこの手順に沿って進めていきます。

Create LIFF Appを使用して開発環境を構築する

npx @line/create-liff-app -t nuxtjs --ts --npm

-t, --ts, --npmはそれぞれテンプレート（Nuxt）、TypeScript、npmを指定しています。

オプションを指定しない場合は対話形式で選択できます。

コマンドを実行すると以下のようにプロジェクト名とLIFF IDを入力するように求められます。

LIFF IDは後から設定できるのでまだ取得していない方は空欄で進めてください。

LIFF IDの取得方法は別記事で紹介しているのでまだの方はこちらを参考にしてください。

オプション一覧

短いオプション	長いオプション	引数	動作
-v	–version		バージョン情報を表示する
-t	–template	<template>	テンプレートを指定する引数の選択肢: vanilla、react、vue、svelte、nextjs、nuxtjs
-l	–liffid	<liff id>	LIFF IDを指定する
–js	–javascript		JavaScriptで記述されたソースコードを生成する
–ts	–typescript		TypeScriptで記述されたソースコードを生成する
–npm	-use-npm		パッケージマネージャにnpmを使用する
–yarn	–use-yarn		パッケージマネージャにYarnを使用する
-h	–help		コマンドのヘルプを表示する

プロジェクト名とLIFF IDを入力するとプロジェクトが生成されます。

ここでエラーが発生しました。

Trace: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received

npx @line/create-liff-app -t nuxtjs --ts --npm

Welcome to the Create LIFF App

? Enter your project name: test-nuxt

? Please enter your LIFF ID:

Don't you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/ liffId

Generating liff app using `create-app`, this might take a while.

create-nuxt-app v5.0.0

✨ Generating Nuxt.js project in test-nuxt

Trace: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

at new NodeError (node:internal/errors:405:5)

at validateString (node:internal/validators:162:11)

at join (node:path:1171:7)

at GeneratorContext.actions (/Users/ryota/.npm/_npx/ea7c6e7510ea3309/node_modules/create-nuxt-app/lib/saofile.js:81:22)

at module.exports (/Users/ryota/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/runActions.js:12:30)

at SAO.runGenerator (/Users/ryota/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/index.js:133:36)

at SAO.run (/Users/ryota/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/index.js:101:16) {

code: 'ERR_INVALID_ARG_TYPE'

}

at /Users/ryota/.npm/_npx/ea7c6e7510ea3309/node_modules/create-nuxt-app/lib/cli.js:56:19

{

command: 'npx create-nuxt-app test-nuxt --answers {"name":"test-nuxt","pm":"npm","language":"ts","features":["axios"],"linter":["eslint"],"ui":"none","test":"none","mode":"universal","target":"server","devTools":"none","vcs":"none"}'

}

Nuxtで作成する際にCreate LIFF Appではtemplateの選択がされていないようです。

Githubのissueにも同様のエラーが報告されていました。
https://github.com/line/create-liff-app/issues/27

記事執筆時点ではまだ解決されていないようですが現在Nuxtの最新はNuxt3なので無視して進めます。

またこちらのコマンドはNuxt2を作成するコマンドなので気をつけてください。

Nuxt3のプロジェクトを作成する

Create LIFF AppではNuxt2のプロジェクトが作成されるので、Nuxt3のプロジェクトを作成します。

npx nuxi@latest init プロジェクト名

今回はnpmでインストールしていきます。

成功すると以下のようなメッセージがターミナルに出力されます。

npx nuxi@latest init nuxt_liff
✔ Which package manager would you like to use?

npm

◐ Installing dependencies... 13:14:15

> postinstall

> nuxt prepare

✔ Types generated in .nuxt 13:14:51

added 848 packages, and audited 850 packages in 36s

166 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

✔ Installation completed. 13:14:51

✔ Initialize git repository?

No

13:14:57

✨ Nuxt project has been created with the v3 template. Next steps:

› cd nuxt_liff 13:14:57

› Start development server with npm run dev

開発サーバーを立ち上げる

cd プロジェクト名

npm run dev

http://localhost:3000/でNuxtが起動しているか確認

今回はSPAで作成するのでnuxt.config.tsのssrをfalseにします

export default defineNuxtConfig({

ssr: false,

})

画面が表示されていれば次からliffをインストールします。

LIFF SDKをインストールする

npm install @line/liff

LIFFの初期化

無事にLIFFがインストールされたので、LIFFの初期化を行います。

plugins/liff.tsを作成し以下のコードを記述します。

YOUR_LIFF_IDは作成したLIFF IDに置き換えてください。

LIFF IDは.envで管理するのが一般的ですが、今回は説明のため直接記述しています。

plugins/liff.ts

import { defineNuxtPlugin } from '#app'
import liff from '@line/liff';

export default defineNuxtPlugin(() => {
  liff.init({ liffId: "YOUR_LIFF_ID" }).then(() => {
    if (liff.isLoggedIn()) {
      console.log("LIFF initialization successful and user is logged in.");
    } else {
      console.log("LIFF initialization successful but user is not logged in.");
    }
  }).catch((error) => {
    console.error("LIFF initialization failed", error);
  });
});

ここまででLIFFの初期化が完了しました。

開発サーバーを再起動させて動作確認を行います。

npm run dev

LIFF IDを.envに記述する

envファイルを作成し、LIFF IDを記述します。

touch .env.local

.env.localにLIFF IDを記述します。

LIFF_ID=xxxxxx

package.jsonのscripts.devに–dotenv .env.localを追加して読み込むenvファイルを指定します。

package.json

"scripts": {
    "dev": "nuxt dev --dotenv .env.local",
},

Nuxt3ではdotenvはデフォルトで使えるようになっているので–dotenvを指定するだけで.envファイルが読み込まれます。

runtimeConfigを使用して環境変数を扱うことができるのでnuxt.config.tsに以下を追加します。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  runtimeConfig: {
    public: {
      LIFF_ID: process.env.LIFF_ID
    }
  }
})

plugins/liff.tsを以下のように修正して先ほど登録したliffidを取得します。

plugins/liff.ts

import { defineNuxtPlugin } from '#app'
import liff from '@line/liff';

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig(); // 変更箇所
    const liffId = config.public.LIFF_ID; // 変更箇所

    liff.init({ liffId: liffId }).then(() => {
        if (liff.isLoggedIn()) {
        console.log("LIFF initialization successful and user is logged in.");
        } else {
        console.log("LIFF initialization successful but user is not logged in.");
        }
    }).catch((error) => {
        console.error("LIFF initialization failed", error);
    });
    nuxtApp.provide('liff', liff);
});

ここまででLIFF IDをenvから取得して初期化することができました。

あとは任意のタイミングでログインするだけです。

これでほぼ完成ですが、LIFFのログイン処理を実装していきます。

LIFFのログイン処理を実装する

ログインボタンをクリックした際にログイン処理を行うようにします。

components/LoginButton.vueを作成し以下のコードを記述します。

components/LoginButton.vue

<template>
  <button @click="login" class="login-button">
    LINEでログイン
  </button>
</template>

<script setup>
import { useNuxtApp } from '#app';

const nuxtApp = useNuxtApp();
const liff = nuxtApp.$liff;

const login = () => {
  if (!liff.isLoggedIn()) {
    liff.login();
  } else {
    alert("すでにログイン済みです。");
  }
}
</script>

<style scoped>
.login-button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #00C300;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

app.vueにLoginButtonを追加します。

app.vue

<template>
  <LoginButton />
</template>

<script setup>
import LoginButton from '~/components/LoginButton.vue';
</script>

上記のようなボタンが表示されていれば完成です！

ログインボタンをクリックするとLINEのログイン画面が表示されるのでログインしてください。

手っ取り早くLIFFの開発環境を構築する

npx nuxi@latest init プロジェクト名

cd プロジェクト名
npm install @line/liff

touch .env.local

.env.localにLIFF IDを記述します。

LIFF_ID=xxxxxx

package.jsonのscripts.devに–dotenv .env.localを追加して読み込むenvファイルを指定します。

package.json

"scripts": {
    "dev": "nuxt dev --dotenv .env.local",
},

nuxt.config.tsにruntimeConfigを追加します。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  runtimeConfig: {
    public: {
      LIFF_ID: process.env.LIFF_ID
    }
  }
})

plugins/liff.tsを以下のように修正して先ほど登録したliffidを取得します。

plugins/liff.ts

import { defineNuxtPlugin } from '#app'
import liff from '@line/liff';

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig(); // 変更箇所
    const liffId = config.public.LIFF_ID; // 変更箇所

    liff.init({ liffId: liffId }).then(() => {
        if (liff.isLoggedIn()) {
        console.log("LIFF initialization successful and user is logged in.");
        } else {
        console.log("LIFF initialization successful but user is not logged in.");
        }
    }).catch((error) => {
        console.error("LIFF initialization failed", error);
    });
    nuxtApp.provide('liff', liff);
});

components/LoginButton.vueを作成し以下のコードを記述します。

components/LoginButton.vue

<template>
  <button @click="login" class="login-button">
    LINEでログイン
  </button>
</template>

<script setup>
import { useNuxtApp } from '#app';

const nuxtApp = useNuxtApp();
const liff = nuxtApp.$liff;

const login = () => {
  if (!liff.isLoggedIn()) {
    liff.login();
  } else {
    alert("すでにログイン済みです。");
  }
}
</script>

<style scoped>
.login-button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #00C300;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

app.vueにLoginButtonを追加します。

app.vue

<template>
  <LoginButton />
</template>

<script setup>
import LoginButton from '~/components/LoginButton.vue';
</script>

以上でLIFFの開発環境を構築することができました。

まとめ

今回はLIFFの開発環境をNuxt3で構築する方法を解説しました。

公式サイトの情報が古かったので少し手間取りましたが、無事に動作確認ができました。

LIFFはLINEの機能を使ったアプリを作成する際に便利なのでぜひ活用してみてください！

次回はnetlifyを使ってデプロイする方法を解説します。

ホームページ制作を大阪で安く頼むならプロットハブ！
毎月5社限定企画実施中

LIFFとは？

LIFFで使用できる言語、フレームワーク

言語

フレームワーク

動作環境

チュートリアルに沿って構築する

Create LIFF Appを使用して開発環境を構築する

Nuxt3のプロジェクトを作成する

開発サーバーを立ち上げる

LIFF SDKをインストールする

LIFFの初期化

LIFF IDを.envに記述する

LIFFのログイン処理を実装する

手っ取り早くLIFFの開発環境を構築する

まとめ

全カテゴリ一覧

全タグ一覧

ホームページ制作を大阪で安く頼むならプロットハブ！毎月5社限定企画実施中