1. ホーム /
  2. Blog /
  3. LINE /
  4. 「Create LIFF App」でLIFFアプリの開発環境を構築
LINE

「Create LIFF App」でLIFFアプリの開発環境を構築

  • 2023.03.02
  • by ShinyaTomozumi
  • 0

以前の記事で、「LIFF」アプリのスタートまで構築しました。

「LIFF」アプリの開発入門 (Next.jsで構築)

しかし、スターターアプリでは「TypeScript」では構築されていない等といった問題があります。
そこでLINEが用意した「Create LIFF App」というツールを使用します。
「Next.js」の最新バージョンでは若干想定外の動作もあったので、そこも含めて起動までをまとめました。

環境

  • Mac Intel Ventura 13.1
  • npm 9.4.2
  • yarn 1.22.17

準備

「LINE Developers」から「LIFF」アプリを追加して、「LIFF ID」を用意してください。
「LIFF」アプリの追加方法は前回の記事を参照してください。

Create LIFF Appでプロジェクトを構築

まずはプロジェクトを管理する作業スペースに移動します。

$ cd {作業スペース}

以下のコマンドで「create-liff-app」を実行します。

$ npx @line/create-liff-app

コマンド実行後に確認と質問が聞かれるので、以下のようになります。

Ok to proceed? (y) :

最初にアプリケーション名を入力します。

? Enter your project name: {アプリケーション名}

次はどのテンプレートを使用するかを選択します。
操作はキーボードの上下キーで動かしてエンターキーで決定します。
「nextjs」を選択します。

? Which template do you want to use? (Use arrow keys) 
❯ vanilla 
  react 
  vue 
  svelte 
  nextjs 
  nuxtjs

使用する言語について聞かれます。
言語は「TypeScript」を設定します。

? JavaScript or TypeScript? (Use arrow keys)
❯ JavaScript 
  TypeScript

次に「LIFF ID」を設定します。
設定した内容は、プロジェクト作成時に「.env.local」に保存されます。

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

使用するパッケージマネージャーについて聞かれますので「yarn」を選択します。

? Which package manager do you want to use? (Use arrow keys) 
❯ yarn 
  npm

以下からは、「Next.js」をインストールする際の質問となります。
キーボードの左右で操作します。

ソースコードの記述ルールを設定する「ESLint」を使用するか確認されます。
こちらは「Yes」を選択しましょう。

? Would you like to use ESLint with this project? › No / Yes

以下の内容は、プロジェクトで「src」フォルダを作成するかと質問されます。
とりあえず「No」のままにしておきます。
「Yes」とした場合は、「src」フォルダ以下で「pages」と「styles」を管理するようになります。
ただ「Create LIFF App」の場合は、プロジェクト直下にも「pages」と「styles」が存在したままとなります。

? Would you like to use `src/` directory with this project? › No / Yes

以下は、「app」フォルダを作成するかどうかです。
こちらも特に必要がなければ「No」とします。
詳細は「next.js 13」の「app」に関する情報を確認してください。

? Would you like to use experimental `app/` directory with this project? › No / Yes

次は「import」使用時のエイリアスの設定です。
例えば「@/」の場合、「@」はプロジェクトのトップディレクトリのエイリアスとなります。
その場合に「pages」から「lib」フォルダを読み込む場合「../lib」と定義する必要が無く、「@/lib」と呼び出す事が出来ます。
ここは特に必要がなければ、そのままエンター(@/)を押しましょう。

? What import alias would you like configured? › @/*

以上で「LIFF」アプリのプロジェクトのインストールが開始されます。

入力を省く場合

ちなみに上記の選択肢を省きたい場合は、以下のコマンドを入力します。
※ただし「Next.js」の選択肢は表示されます。

npx @line/create-liff-app {プロジェクト名} -t nextjs --ts --yarn -l {LIFF ID}

ローカルで起動する

まずはプロジェクトフォルダに移動します。

$ cd {プロジェクトフォルダのパス}

以下のコマンドでローカルサーバーを起動します。

$ yarn dev

サーバー起動時にURLが表示されていますので、ブラウザでアクセスします。

http://localhost:3000

以下のような画面が表示されれば成功です。

「src」を使用した場合

プロジェクト直下にある「pages」と「styles」にあるファイルを「src」側に移動します。
その際に直下にある「pages」と「styles」は削除してから、ローカルのサーバーを再起動します。

これで開発の準備は出来ました。
「Next.js」はデフォルトでSSRでの書き出しとなっているので、必要に応じて「package.json」に「export」を設定しましょう。

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },

以上で「LIFF」アプリの開発準備が出来ました！
これらを元に実装を進めていきましょう！