24日目にLINEミニアプリが完成する初心者 ── Day3. LIFFスターターアプリの導入


# はじめに

前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day2.基本設定」と題して、LINE Developers アカウントの作成と、プロジェクトの初期設定を行いました。

https://qiita.com/non_watanabe/private/a883a2037417eeff1916

<br/>
Day3は、LINE ミニアプリ開発の第一歩として、スターターアプリをダウンロードして実際に動かしてみたいと思います。

導入ができると以下のような画面が動かせるようになる予定です！

https://liff-starter.netlify.app

<br/>
この導入を通して、今回開発で使うことになる LIFF に実際に触れ、開発イメージを掴めればと思っています。

# LIFF とは

まず初めに LINE ミニアプリ初心者の筆者からすると「そもそも LIFF とは？」という感じなので、先に調べておきたいと思います。

> LINE Front-end Framework（LIFF）は、LINE ヤフー株式会社が提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFF アプリと呼びます。

なるほど、LINE が提供しているプラットフォームなのか。
どうりで LINE ミニアプリを初心者の筆者が聞いたことないはずだ。
<br/>

LIFF アプリを使うと、LINE のユーザー ID などを LINE プラットフォームから取得できるので、それを使ってユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできるようになるそうです。

<br/>
「もっと詳しく知りたいよ！」という方は公式サイトを見てみてください。

https://developers.line.biz/ja/docs/liff/overview/

# 前準備

LIFF スターターアプリをダウンロードする前に環境の確認を行っておきたいと思います。

<br/>
スターターアプリの実行には Node.js のインストールが必要です。

mac ならターミナル、Windows の場合はコマンドプロンプトで以下のコマンドを実行し、インストールの確認をしておきましょう。

```terminal
$ node -v
```

:::note warn
**このプロジェクトでは v18.18.0 の node.js が必要です。**

この記事の公開日時点での node.js の安定版は v22.11.0 です。
インストールされていない方や、v18.18.0 より下のバージョンの場合は[公式サイト](https://nodejs.org/en)からインストールを行いましょう。

※ちなみに筆者は[Volta](https://volta.sh/)を使ってインストールを行いました。
:::

# LIFF スターターアプリの導入

では前準備が完了したら LIFF スターターアプリをダウンロードしていきましょう！

ちなみに LIFF スターターアプリとは、 LIFF アプリ開発に必要な最低限の機能を持ったテンプレートです。

https://github.com/line/line-liff-v2-starter

<br/>
LIFF スターターアプリを元にカスタマイズしていくことで、独自の LIFF アプリを開発できるようになるようなので、これは導入しない手はないですね。

## ダウンロード

ダウンロードはターミナルで以下のコマンドを実行して行っていきます。

```terminal
$ git clone https://github.com/line/line-liff-v2-starter.git
```

<br/>
ダウンロードが完了したらディレクトリに移動して VSCode で開いていきましょう。

```terminal
$ cd line-liff-v2-starter
$ vscode .
```

## パッケージのインストール

LIFF スターターアプリには、Nextjs、Nuxt.js、Vanilla JS の LIFE アプリが用意されています。

今回は筆者が慣れた Next.js を使っていきたいと思います。

<br/>
以下のコマンドで Next.js のディレクトリへ移動します。

```terminal
$ cd src/nextjs
```

<br/>
パッケージのインストールを以下のコマンドで実行します。

```terminal
$ npm install
```

## 起動

インストールが完了したら早速以下のコマンドで、 LIFF スターターアプリを起動してみましょう。

```terminal
$ npm run dev

> liff-starter-nextjs@0.1.0 dev
> next dev -p 9000

  ▲ Next.js 15.0.1
  - Local:        http://localhost:9000

 ✓ Starting...
 ✓ Ready in 924ms
```

<br/>
9000 番で起動が出来たようなので、URL にアクセスしてみたいと思います。

http://localhost:9000

<br/>
以下のように画面が表示されれば起動は完了です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/b8b4c22d-365b-c963-290a-580e1726f48a.png)

## 内容を変更してみる

せっかくなので、画面の内容を少し触ってみましょう。

表示されている画面の内容はディレクトリで言うと`src/nextjs/pages/index.js`に書いてあるのでここを変更していきます。

今回は以下の通り、簡単に表示名だけ変更してみたいと思います。

```js:index.js
import Head from "next/head";
import packageJson from "../package.json";

export default function Home(props) {
  /** You can access to liff and liffError object through the props.
   *  const { liff, liffError } = props;
   *  console.log(liff.getVersion());
   *
   *  Learn more about LIFF API documentation (https://developers.line.biz/en/reference/liff)
   **/
  return (
    <div>
      <Head>
        <title>LIFF Starter</title>
      </Head>
      <div className="home">
        <h1 className="home__title">
          Welcome to <br />
          <a
            className="home__title__link"
            href="https://developers.line.biz/en/docs/liff/overview/"
          >
            Mahalo Living! {/* ここを変更 */}
          </a>
        </h1>
        <div className="home__badges">
          <span className="home__badges__badge badge--primary">
            LIFF Starter
          </span>
          <span className="home__badges__badge badge--secondary">nextjs</span>
          <span className="home__badges__badge badge--primary">
            {packageJson.version}
          </span>
          <a
            href="https://github.com/line/line-liff-v2-starter"
            target="_blank"
            rel="noreferrer"
            className="home__badges__badge badge--secondary"
          >
            GitHub
          </a>
        </div>
        <div className="home__buttons">
          <a
            href="https://developers.line.biz/en/docs/liff/developing-liff-apps/"
            target="_blank"
            rel="noreferrer"
            className="home__buttons__button button--primary"
          >
            LIFF Documentation
          </a>
          <a
            href="https://liff-playground.netlify.app/"
            target="_blank"
            rel="noreferrer"
            className="home__buttons__button button--tertiary"
          >
            LIFF Playground
          </a>
          <a
            href="https://developers.line.biz/console/"
            target="_blank"
            rel="noreferrer"
            className="home__buttons__button button--secondary"
          >
            LINE Developers Console
          </a>
        </div>
      </div>
    </div>
  );
}
```

<br/>
画面を見てみるとホットリロードなので、表示がすぐ変わったのが分かると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/6089d6e5-825b-1b8f-ff00-0f2f7aa039a5.png)

JavaScript で簡単に編集ができるので、皆さんも是非触ってみてください。

# まとめ

ここまでで、LIFF スターターアプリの導入が完了しました。

次回は、今回導入した LIFF スターターアプリを実際にデプロイしていきたいと思います。

残りは 21 日！
気になる方は是非フォローやカレンダー購読をお願いします:star: