はじめに
前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day2.基本設定」と題して、LINE Developers アカウントの作成と、プロジェクトの初期設定を行いました。
Day3は、LINE ミニアプリ開発の第一歩として、スターターアプリをダウンロードして実際に動かしてみたいと思います。
導入ができると以下のような画面が動かせるようになる予定です！
この導入を通して、今回開発で使うことになる LIFF に実際に触れ、開発イメージを掴めればと思っています。
LIFF とは
まず初めに LINE ミニアプリ初心者の筆者からすると「そもそも LIFF とは？」という感じなので、先に調べておきたいと思います。
LINE Front-end Framework（LIFF）は、LINE ヤフー株式会社が提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFF アプリと呼びます。
なるほど、LINE が提供しているプラットフォームなのか。
どうりで LINE ミニアプリを初心者の筆者が聞いたことないはずだ。
LIFF アプリを使うと、LINE のユーザー ID などを LINE プラットフォームから取得できるので、それを使ってユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできるようになるそうです。
「もっと詳しく知りたいよ！」という方は公式サイトを見てみてください。
前準備
LIFF スターターアプリをダウンロードする前に環境の確認を行っておきたいと思います。
スターターアプリの実行には Node.js のインストールが必要です。
mac ならターミナル、Windows の場合はコマンドプロンプトで以下のコマンドを実行し、インストールの確認をしておきましょう。
$ node -v
LIFF スターターアプリの導入
では前準備が完了したら LIFF スターターアプリをダウンロードしていきましょう！
ちなみに LIFF スターターアプリとは、 LIFF アプリ開発に必要な最低限の機能を持ったテンプレートです。
LIFF スターターアプリを元にカスタマイズしていくことで、独自の LIFF アプリを開発できるようになるようなので、これは導入しない手はないですね。
ダウンロード
ダウンロードはターミナルで以下のコマンドを実行して行っていきます。
$ git clone https://github.com/line/line-liff-v2-starter.git
ダウンロードが完了したらディレクトリに移動して VSCode で開いていきましょう。
$ cd line-liff-v2-starter
$ vscode .
パッケージのインストール
LIFF スターターアプリには、Nextjs、Nuxt.js、Vanilla JS の LIFE アプリが用意されています。
今回は筆者が慣れた Next.js を使っていきたいと思います。
以下のコマンドで Next.js のディレクトリへ移動します。
$ cd src/nextjs
パッケージのインストールを以下のコマンドで実行します。
$ npm install
起動
インストールが完了したら早速以下のコマンドで、 LIFF スターターアプリを起動してみましょう。
$ 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
9000 番で起動が出来たようなので、URL にアクセスしてみたいと思います。
以下のように画面が表示されれば起動は完了です！
内容を変更してみる
せっかくなので、画面の内容を少し触ってみましょう。
表示されている画面の内容はディレクトリで言うとsrc/nextjs/pages/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>
);
}
画面を見てみるとホットリロードなので、表示がすぐ変わったのが分かると思います。
JavaScript で簡単に編集ができるので、皆さんも是非触ってみてください。
まとめ
ここまでで、LIFF スターターアプリの導入が完了しました。
次回は、今回導入した LIFF スターターアプリを実際にデプロイしていきたいと思います。
残りは 21 日！
気になる方は是非フォローやカレンダー購読をお願いします