Create Liff Appを使って爆速でLIFFアプリ開発環境を構築する

## はじめに
今まではLIFFアプリの開発をする際にはnpmでLIFF SDKのパッケージをインストールしていました。

Create LIFF AppというCLIツールが用意されているようなので、試しに使ってみることにします。

### 前提
本記事は以下の3点を前提にしてすすめていきます。
* Node.jsの導入が終わっていること（本記事ではv22.2.0で実行）
* LIFFアプリをデプロイする環境を持っていること
→本記事では「Render」という無料で使えるサービスを利用しています。

* LINE関連の設定が終わっていること
→LIFFアプリ登録にはチャネルの作成が必要です。そしてチャネル作成のためには、LINE Developersコンソールでプロバイダー作成まで完了している必要があります。
手順がわからない方は[こちらの記事](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#line%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A)を参考にしてください。

## Create Liff Appの実行手順
### 事前準備
Create Liff Appの実行にあたってLIFF IDが必要なので、先にLIFFアプリの仮登録まで済ませておきます。

#### チャネルの作成
LINE Developersコンソールのプロバイダーページにあるチャネル設定タブから「新規チャネル作成」をクリックします。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/fa2a5f96-dda6-57d2-6f26-bce9d8b2f726.png'>

LINEログインを選択します。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/aaf22d66-dfde-36c8-1ff9-38aa6a7304ee.png'>

それぞれ必要事項を入力してください。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/9546bd12-2d53-599c-5b18-ea5c60dc6d9f.png'>

以下のようにチャネルが作成されます。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/f2440648-4060-cc4a-3472-04c386de822f.png'>

#### LIFFアプリの仮登録
作成したチャネルの「LIFF」タブを選択します。
ページ下部の「追加」を押下します。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/91669ca2-0699-2bd8-1772-7ea51b6ef135.png'>

以下の通り、必要事項を入力してください。
「エンドポイントURL」はあとから修正できるので`https://example.com`など適当なURLでよいです。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/9e10f86c-4544-3118-5f6a-eafa961e08e7.png'>

LIFFアプリの仮登録が完了しました。
「LIFF ID」をメモしておきます。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/cd125b46-559b-4f62-a493-dfb318fc61a9.png'>

ここまでで事前準備は完了です。

### Create Liff Appの使用

以下のコマンドを実行します。
```bash
npx @line/create-liff-app
```

進めてよいか聞かれるので「y」を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/54eeb59b-d16c-0564-3708-f2841e559df2.png)

任意のプロジェクト名を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/7ef29d68-bd5a-6810-ace4-f379c1ed8da1.png)

使用したいライブラリを選択します。
矢印キーで選択、エンターキーで確定となります。
ここではReactにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/abd435ce-de2e-7a48-25d8-c1c818346c09.png)

JavaScriptかTypeScrpitかを選びます。
TypeScriptにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/35b4e13a-1cee-0df4-972d-39fd067e7001.png)

ここで先ほどメモしたLIFF IDを入力します。
ここで設定せず、あとから設定することもできます。（設定方法は後述）
未入力でエンターを押した場合は`liffId`という文字列が設定されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/a1a99c04-ef36-15a6-2fe6-04b3c7650570.png)

パッケージ管理の方法を選びます。
npmにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/13c795bb-e6b4-e398-00ed-72038b16a3c5.png)

ここまでで設定は完了です。
少し待つと、インストールが完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/1a5fc15e-449e-0a65-e982-40267990cf7d.png)

これで設定は完了です。

### LIFF IDをあとから設定する
Create Liff Appを実行して生成したプロジェクトの直下にある、「.env」というファイルでLIFF IDを管理しています。
下記は、LIFF IDを未設定で実行したときの設定情報です。
`liffId`という文字列が設定されています。

この値を書き換えることで、LIFF IDの変更ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0b5f4134-02bd-5896-dfd3-251c9a8bb6a0.png)


## アプリの起動
### ローカルで起動する
生成したLIFFアプリをローカル環境で立ち上げてみましょう。
以下の通りコマンドを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/945eab46-a678-a8a4-0f55-5b8672044ef1.png)

指定されたローカルのアドレスにアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/1a6e2a95-f4e3-81d3-5f62-7dee269c8354.png)

LIFFアプリが立ち上がりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0612de2f-dc49-1ffb-ca14-bafdbb6a7e0c.png)

### Web上にデプロイして、LINEから確認する
#### アプリのデプロイ
LIFFアプリなので、せっかくなら実際にLINEから確認できるよう、Web上にデプロイします。
方法はお任せしますが、今回はRenderを使用してデプロイを行いました。

本記事のメインではないので、手順は割愛します。
（[こちらの記事](https://qiita.com/course_k/items/c7c2dc4eab679e249e06#render%E3%81%B8%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)で解説していますので、よければご覧ください。）

#### エンドポイントURLの変更
LIFFアプリ登録時、エンドポイントURLは仮のものを設定していたので修正します。
LINE Developersコンソールから、作成したLIFFアプリを編集し、デプロイしたアプリのURLに書き換えます。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/d146a66a-a303-50ae-3613-8f15dca33ed3.png'>

#### チャネルの公開
LINE DevelopersコンソールのチャネルページのLIFFタブを開きます。
上部にある「開発中」をクリックします。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/11f9a802-33fe-717c-e8ae-71a60ec53fd5.png'>

「公開」を押下してください。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/12d92d67-438c-7c93-677f-4e6c1cb0dc30.png'>

「公開済」になれば設定は完了です。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/7961ebcd-f0e9-be1d-14f3-b3805d03aaf7.png'>

#### LINEから確認
適当なLINEのトーク画面に、LIFFアプリのURLを送信します。
LIFFアプリのURLはLINE DevelopersコンソールのチャネルページのLIFFタブから確認できます。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/85c96375-e9fa-5450-4e1f-31fbbda25bd3.jpeg'>

LIFFブラウザで開いて確認することができました。
<img width='80%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/325f51f4-fc28-e17c-5213-e4223098f64d.png'>

## まとめ
Create Liff AppをつかってLIFFアプリを構築する方法を学びました。
ローカルで立ち上げるだけなら1分もかかりませんね。

ビルドツールにはviteが使われているようですし、ライブラリもReactやVue、Next、Nuxtなどから選べるので、かなり使い勝手は良さそうです。

今後簡単なLIFFアプリを作る際はCreate Liff Appを積極的に使っていきたいと思いました。

本記事が少しでも参考になったようであれば、いいねやアカウントのフォローをしていただけると、とても嬉しいです！！！