Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

アイカサ(i-kasa)|日本No.1の傘シェアリングサービス

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

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

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

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

今回使ったもの

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

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

デモ

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

ダウンロード (3).gif

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

1.LINEアカウント作る

LINE Developers

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

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

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

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

2.リッチメニューの表示

LINE Business ID

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

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

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

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

3.LIFFの設定

いよいよLIFFを設定していきます。

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

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

詳しくは下記リンクにまとめてくれています
LINE Front-end Framework (LIFF) を触ってみた - Qiita

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

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

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

4.アプリケーション部分の開発

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

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

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

一例として

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

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

詳細は下記参照

LIFF v2 APIリファレンス

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

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

ソースは下記参考

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away