最近増えてきているLINE上で動くアプリケーションの作り方を公開していきます。
記事を読みながら順調にいけば、１時間くらいでLINE上で画面を作れて、Firestoreと簡単なデータをやり取りすることができるようになります。
以下はLINEを使ったアプリケーションの一例
アイカサ（i-kasa）｜日本No.1の傘シェアリングサービス
個人的にLINE上のアプリケーションはサービスのMVPをサクっと作る時とかに威力を発揮すると思っています。
- ユーザーはLINEという日常使っているプラットフォームで、友達登録をするだけで利用可能
- チャットベースのUI使うのであれば、Frontの開発が超楽
- さらに横のサービスのLINE Official Account Mangerとかも使うと 広告の配信や、サービスに必要なサポートセンターとかも低コストで用意できる。
これだけ周辺サービスが整っていて、数万件のメッセージとか配信しない限り、 コストは無料〜３万円で使える。神か
突き詰めるとNativeアプリやPWAの方がええやんとなるんですが、サービス開発初期は複数言語使うの大変、かといって普通のWebアプリだとFront作りこんだり、導線や周辺機能用意するのちょっとな、、、と思うので、開発を「まず始めてみる」ということを強力にサポートしてくれるサービスだと思います。
今回使ったもの
- LIFF（LINE Front-end Framework）
- 静的ファイル（netlifyでホスティング）
- Fireabase Firestore（データ永続化で利用）
それでは一連の開発の流れを見ていきましょう
デモ
LINE上のページで入力した内容がチャットに送られる。
またFirestoreで永続化され、別ページで見ることができます。
それでは始めていきましょう
１．LINEアカウント作る
LINE Developer > プロバイダーリスト > 新規チャネル作成
でアプリケーションを提供するLINEアカウントを作っていきます
画面に沿って入力していくとチャネルが完成する
この時点でQRコードを読み取るとLINEアカウントとして友達登録できます
（この時点ではまだデフォルトのメッセージが出てくるだけ）
次にメニューを追加して、LIFFと紐付けて画面を開くようにしていきます
２．リッチメニューの表示
LINE Official Account Manager > リッチメニュー
でメニューを作っていきます。
メニューのデザインは今回は適当で、テンプレートをそのままアップロードします
リッチメニューが表示されて、ブラウザで設定したURLが開くようになりました。
３．LIFFの設定
いよいよLIFFを設定していきます。
いわゆるURLを外部ブラウザで開く形式に比べたLIFFのメリットは
- 画面遷移がなく、LINE内で完結する
- LINEのIDなどのコンテキストを扱うことができる
詳しくは下記リンクにまとめてくれています
LINE Front-end Framework (LIFF) を触ってみた - Qiita
下記でエンドポイントやUIをどのように表示するか設定していく
設定が完了すると、このようにline:〜のURLが発行される
これを先程のリッチメニューのURLに指定すると、このように画面を遷移なしでLINE内で開くことができるようになる、、！！！
４．アプリケーション部分の開発
いよいよLIFFで開くアプリケーションを作っていく、サンプルなので簡単なものを
LINEのIDなどのコンテキストを扱うことができる
上記で説明したように、LIFF内でLINE用の関数を利用することができる
一例として
liff.getProfile().then(function (profile) {
document.getElementById('sample').textContent = profile.userId;
document.getElementById('sample').textContent = profile.displayName;
こんな感じで、ユーザーID、表示名称が取得できたりする。
詳細は下記参照
サクっとFirestoreにデータを入れて、取得するfront部分を実装して
githubにあげて、netlifyでdeployする
この辺りは本当に便利になったなと、、
最後にNetlifyで発行されたURLをリッチメニューのURLに設定すればデモみたいな挙動になる
ソースは下記参考
もし403エラーが出たときは
メッセージを送ろうとすると、こういうエラーが出る時がある
そういう時はLIFFの権限でメッセージの送信権限を付与することで解決できます。
