LINE+Firestoreを使って超簡単にアプリ開発してみた

最近増えてきているLINE上で動くアプリケーションの作り方を公開していきます。

記事を読みながら順調にいけば、１時間くらいでLINE上で画面を作れて、Firestoreと簡単なデータをやり取りすることができるようになります。

以下はLINEを使ったアプリケーションの一例

[アイカサ（i-kasa）｜日本No.1の傘シェアリングサービス](https://i-kasa.com/)



個人的にLINE上のアプリケーションはサービスのMVPをサクっと作る時とかに威力を発揮すると思っています。

- ユーザーはLINEという日常使っているプラットフォームで、友達登録をするだけで利用可能
- チャットベースのUI使うのであれば、Frontの開発が超楽
- さらに横のサービスのLINE Official Account Mangerとかも使うと **広告の配信や、サービスに必要なサポートセンターとかも低コストで用意できる。**

これだけ周辺サービスが整っていて、数万件のメッセージとか配信しない限り、 **コストは無料〜３万円で使える。神か**

突き詰めるとNativeアプリやPWAの方がええやんとなるんですが、サービス開発初期は複数言語使うの大変、かといって普通のWebアプリだとFront作りこんだり、導線や周辺機能用意するのちょっとな、、、と思うので、開発を「まず始めてみる」ということを強力にサポートしてくれるサービスだと思います。

# 今回使ったもの

- LIFF（LINE Front-end Framework）
- 静的ファイル（netlifyでホスティング）
- Fireabase Firestore（データ永続化で利用）

それでは一連の開発の流れを見ていきましょう


# デモ
LINE上のページで入力した内容がチャットに送られる。
またFirestoreで永続化され、別ページで見ることができます。

![ダウンロード (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/a182018a-cca6-4f8f-9c32-7280911a1fd8.gif)




それでは始めていきましょう


# １．LINEアカウント作る
[LINE Developers](https://developers.line.biz/ja/)

LINE Developer > プロバイダーリスト > 新規チャネル作成

でアプリケーションを提供するLINEアカウントを作っていきます

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/5159f014-3bb5-63af-a347-f4daff5248f1.png width=50%>


画面に沿って入力していくとチャネルが完成する
この時点でQRコードを読み取るとLINEアカウントとして友達登録できます
（この時点ではまだデフォルトのメッセージが出てくるだけ）

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/5d8550f9-6f80-7c09-87e7-d4b827f322ce.png width=50%>

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/2cc60ce7-4c79-4f0a-ef01-c2bccca63f1f.png width=20%>


次にメニューを追加して、LIFFと紐付けて画面を開くようにしていきます

# ２．リッチメニューの表示
[LINE Business ID](https://account.line.biz/login?redirectUri=https%3A%2F%2Fmanager.line.biz%2F)

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/e6c20240-61e1-2d59-f5a5-c1b7f7fa1ccc.png width=50%>


LINE Official Account Manager > リッチメニュー

でメニューを作っていきます。

メニューのデザインは今回は適当で、テンプレートをそのままアップロードします

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/4525476f-a87e-7ce5-8dee-2c462780b16f.png width=50%>


<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/ee626ddb-38e8-a573-5f27-6e0884905dc3.png width=50%>

リッチメニューが表示されて、ブラウザで設定したURLが開くようになりました。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/f152ce80-6d90-65e6-00cc-11992f836311.png width=50%>



# ３．LIFFの設定
いよいよLIFFを設定していきます。

いわゆるURLを外部ブラウザで開く形式に比べたLIFFのメリットは

- 画面遷移がなく、LINE内で完結する
- LINEのIDなどのコンテキストを扱うことができる

詳しくは下記リンクにまとめてくれています
[LINE Front-end Framework (LIFF) を触ってみた - Qiita](https://qiita.com/teramotodaiki/items/a8955840aa23ec68e6fe)

下記でエンドポイントやUIをどのように表示するか設定していく

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/d02e149b-a846-c742-2371-19c35074edb9.png width=50%>



設定が完了すると、このようにline:〜のURLが発行される

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/233abc2d-f3b5-b7bc-a8b4-4760c3a619bb.png width=50%>


これを先程のリッチメニューのURLに指定すると、このように画面を遷移なしでLINE内で開くことができるようになる、、！！！

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/f561868e-af82-fe03-2172-9807e21fca5d.png width=50%>



# ４．アプリケーション部分の開発
いよいよLIFFで開くアプリケーションを作っていく、サンプルなので簡単なものを

>LINEのIDなどのコンテキストを扱うことができる

上記で説明したように、LIFF内でLINE用の関数を利用することができる

一例として

```js
    liff.getProfile().then(function (profile) {
        document.getElementById('sample').textContent = profile.userId;
        document.getElementById('sample').textContent = profile.displayName;
```

こんな感じで、ユーザーID、表示名称が取得できたりする。

詳細は下記参照

[LIFF v2 APIリファレンス](https://developers.line.biz/ja/reference/liff/)

サクっとFirestoreにデータを入れて、取得するfront部分を実装して
githubにあげて、netlifyでdeployする
この辺りは本当に便利になったなと、、

最後にNetlifyで発行されたURLをリッチメニューのURLに設定すればデモみたいな挙動になる

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/b59d10b3-9af3-ab68-a1b9-a0f37ce4a24b.png width=50%>

ソースは下記参考

https://github.com/haruhiko-tano/liff-firestore


# もし403エラーが出たときは

メッセージを送ろうとすると、こういうエラーが出る時がある

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/1478413a-4b74-4858-5bf9-e53746ff14ab.png width=50%>


そういう時はLIFFの権限でメッセージの送信権限を付与することで解決できます。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235232/78bce6da-1b04-2972-531d-1c7fa7b3fef9.png width=50%>