Firebase HostingでLIFFクイックスタート

## LIFF(LINE Front-end Framework)とは？

> LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。
>
> LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

ざっくりいうと、LINEアプリからLINEのユーザー情報などのデータを受け渡して色々できるようにしたウェブアプリってイメージ。

【参考】
https://developers.line.biz/ja/docs/liff/overview/

## 作業の手順

1. プロバイダーとチャンネルの追加(LINE Developersコンソール)
1. ソースコードの取得(LIFFスターターアプリ)
1. サーバーへのデプロイ
1. LIFF IDの取得・設定


基本的にLINE Developersのドキュメントに書かれている内容に沿って進めていく。ドキュメントでは[Netlify](https://www.netlify.com/ "Netlify")を用いてサーバーにLIFFアプリをログインしているが、今回は[Firebase Hosting](https://firebase.google.com/docs/hosting?hl=ja "Firebase Hosting")を代わりに用いてデプロイする。

【参考】
https://developers.line.biz/ja/docs/liff/getting-started/
https://developers.line.biz/ja/docs/liff/trying-liff-app/

## 1.プロバイダーとチャンネルの追加

### 1.1.プロバイダーの追加

[LINE Developersコンソール](https://developers.line.biz/console/ "LINE Developersコンソール") > プロバイダーからプロバイダーを作成

![スクリーンショット 2023-08-05 16.46.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/722c9502-839d-8ee8-f770-26cc64ef5764.png)

![スクリーンショット 2023-08-05 16.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/a0a38adc-2071-104d-3c14-190fd142f1e6.png)

### 1.2.チャンネルの追加

先ほど作成したプロバイダーを選択し、必要情報を入力してチャンネルの作成を行う。

![スクリーンショット 2023-08-05 16.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/e94a33af-dc85-bfe6-b28e-8dfc392c0e09.png)

チャンネルの種類は[LINEログイン]を選択。

![スクリーンショット 2023-08-05 16.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/1f85d9d9-cc25-6d2b-e64d-7018b5dc1a40.png)

![スクリーンショット 2023-08-05 16.57.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/4def2b33-da06-263d-8570-2d03ab6db062.png)

![スクリーンショット 2023-08-05 16.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/8a7856b7-bb3a-0d68-38ff-dd54a14054aa.png)

※アプリタイプは[ウェブアプリ]を選択。

![スクリーンショット 2023-08-05 17.00.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/022eeada-d6fe-1448-a1a6-9c8dbf5ca758.png)

必須項目の入力が完了したら[作成]を実行する。

![スクリーンショット 2023-08-05 17.04.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/fc18a4c9-2c2a-a1d6-f67b-9b8e5adf6607.png)

作成が完了するとチャンネルが表示される。

## 2.ソースコードの取得

LIFFアプリはゼロから作ることも可能だが、今回は[LIFFスターターアプリ](https://github.com/line/line-liff-v2-starter "LIFFスターターアプリ")というLIFFアプリのテンプレート

LIFFスターターアプリは以下の言語・フレームワークで実装可能になっている。

- [vanilla JavaScript](https://github.com/line/line-liff-v2-starter/tree/master/src/vanilla "vanilla JavaScript")
- [Next.js](https://github.com/line/line-liff-v2-starter/tree/master/src/nextjs "Next.js")
- [Nuxt](https://github.com/line/line-liff-v2-starter/tree/master/src/nuxtjs "Nuxt")

### 2.1.LIFFスターターアプリのソースコードをダウンロード

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

### 2.2.使いたい実装のディレクトリに移動

```
$ cd line-liff-v2-starter/src/nuxtjs 
```
今回はNuxtを用いる。

### 2.3.パッケージのインストール、LIFFアプリの起動

```
$ yarn install
$ yarn dev
```
ターミナルに表示されたURL（Nuxtの場合は`http://localhost:9000`）にブラウザでアクセスすると、以下のような画面が表示される。

![スクリーンショット 2023-08-05 17.22.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/f37cb009-bd41-c56b-7e35-0dc9dcc355d9.png)

## 3.サーバーへのデプロイ

### 3.1.プロジェクトの作成

![スクリーンショット 2023-08-05 17.29.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/ce444386-d117-73b5-af49-b0a025189b05.png)

![スクリーンショット 2023-08-05 17.30.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/86150da0-549c-1e53-e026-0adc13a1d3c8.png)

![スクリーンショット 2023-08-05 17.30.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/cfd68ac2-3696-e6ca-6c2a-fbc31e681b07.png)

![スクリーンショット 2023-08-05 17.31.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/a5850faf-370e-c1ea-4d41-d7381af565f6.png)

### 3.2.Firebase CLIの追加

```
$ npm install -g firebase-tools
$ firebase -V
```

![スクリーンショット 2023-08-05 17.33.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/f859ab64-44e8-62b6-49a2-2941f2f3b5dd.png)

インストール後にバージョンを確認できたら成功。

### 3.3.Firebaseにログイン

```
$ firebase login
```

### 3.4.Firebaseプロジェクトの初期設定

```
$ firebase init
```

![スクリーンショット 2023-08-05 17.39.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/98d3f772-39dc-8b76-7ba5-4f632e8b5524.png)

スペースキーで[Hosting]を選択。

![スクリーンショット 2023-08-05 17.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/87456232-0c43-d174-bcd5-c1b4f8c58bf3.png)

先ほど作成したプロジェクトを選択。

![スクリーンショット 2023-08-05 17.57.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/29b1363b-3226-6f19-f99b-465e4f2fe3f2.png)

`$ yarn run generate`で事前に静的ファイルを出力している場合はpublicディレクトリを`dist`にして、`dist/index.html`の書き換えを`No`にして実行完了。

### 3.5.デプロイを実行

```
$ firebase deploy --only hosting
```

![スクリーンショット 2023-08-05 18.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/ee2a213e-aa73-e51e-f9bc-5f7dbccb778d.png)

デプロイに成功して表示されたURL(今回は`https://liff-stater-project.web.app`)をブラウザで確認するとローカルで確認していた画面が出てくる。

## 4.LIFF IDの取得・設定

LIFFスターターアプリをLIFFアプリとして開くためには、LIFF IDの取得が必要なので設定する。

### 4.1.LIFFアプリの追加

![スクリーンショット 2023-08-05 19.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/90fad7b2-2f25-69b0-f84d-4759aebb56b0.png)

`1.2.`で作成したチャンネルにはLIFFアプリが登録されていないので基本情報を入力して追加する。

### 4.2.LIFFアプリの基本情報を入力

![スクリーンショット 2023-08-05 19.33.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/5ad9f6ca-7a8b-a0c4-cf10-65a06589df12.png)


[エンドポイントURL]には`3.5.`の実行で作成されたURL(今回は`https://liff-stater-project.web.app`)を入力する。

![スクリーンショット 2023-08-05 19.35.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/720e2297-f681-35e2-bc2e-65d75f1d9cbf.png)

入力が完了したら[追加]を実行する。

### 4.3.LIFF IDの発行

![スクリーンショット 2023-08-05 19.37.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/904c094d-924d-ad28-6ef3-7e3f5b08aac9.png)

LIFFアプリの追加が完了したらLIFF ID(`2000317249-n0W7q58y`)が発行される。

### 4.4.LINEブラウザで確認

![スクリーンショット 2023-08-05 19.44.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/3a3244b3-97e5-3e80-3434-76e2bfedd269.png)

LINEのブラウザでも表示されていることがわかる。

### 4.5.LIFFスターターアプリにLINE IDを設定


既に`LIFF_ID`が設定されているので、`4.3.`で発行したLINE IDをenvファイルに追加する。


```nuxt.config.js
...
env: {
  LIFF_ID: process.env.LIFF_ID,
},
...
```

```.env
LIFF_ID="2000317249-n0W7q58y"
```

これでファイルの編集後にデプロイを実行するとLINEアプリの更新が確認できる。

```
$ firebase deploy --only hosting
```

![スクリーンショット 2023-08-05 20.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681937/c2232f6b-3e53-bd96-3f32-d533d5631f59.png)

## 参考

- [LIFFドキュメント](https://developers.line.biz/ja/docs/liff/overview/ "LIFFドキュメント")
- [Firebaseドキュメント](https://firebase.google.com/docs?hl=ja "Firebaseドキュメント")