📘

Next.js+FirebaseでLine Botを開発した際の覚書

2022/01/02に公開

Firebase

LINE

Next.js

tech

はじめに

今回、Bookmark-Boardという個人開発しているブックマーク管理アプリに対して、Lineからブックマーク登録が行えるようLine Botの開発を行いました。
ここでは簡単ではありますが、Line Bot開発にあたり使用した技術の紹介と、Lineの各API及びNext.jsやFirebaseと組み合わせ時の注意点や工夫点などをまとめたいとおもいます。

作成したものについて

Botについては、入力されたURLからサイト情報を取得し、Firestoreに保存するシンプルなBotになっています。また登録したブックマークをLine上から確認・編集できるように、LIFFを用いてWEBUIも設けています。

Bot画面	ブックマーク一覧(LIFF)	ブックマーク編集(LIFF)

※利用にあたっては事前にBookmark-Boardへの登録が必要となります。

全体構成

全体構成としては、Line Bot関連はNext.jsおよびFirebaseのFirestore/Cloud Functionsで構成されており、LIFFについては本体アプリと同じNext.js上で実装する形となっています。

主に利用したLineの技術

Bot全般・・・Messaging API(with Firebase Function)
ブックマーク一覧・管理画面・・・LIFF(with React/Next.js)
認証・・・Line Login

今回の構成における工夫点・注意点について

1. Firebase × LINEのアカウント連携

Firebaseを使ったアプリの場合、認証はFirebase Authenticationによって行われることが多いかと思います。本アプリでもAuthentication(Google認証)を用いており、この認証ユーザとLineのUserIDの紐付けをFirestoreを用いて行いました。

ちなみに、Firebaseのカスタム認証でLineログインを実現することもできますが、Google認証など他の認証方式と併用して運用するような場合、色々と考慮すべき事項が必要なため、現在は検討中としています。詳細についてはこちらの記事が大変詳しくて参考になりました🙇‍♂️

2. Firebase × Messaging API

Messaging APIはFirebase Cloud Functionsを用いて実現しています。例えばユーザがBotアカウントにチャットメッセージを送ると、WEB HOOKを通じてFirebaseのFunctionが呼び出されます。

バックエンドの選定については、もともとFirebaseを用いていたので、Functionsで良いかなー程度で決めたのですが、今思うとNext.jsのAPIに寄せてもよかったかなと思っています。
Cloud Functionsはデプロイに時間がかかるので、開発効率的にも結構苦戦しました。 Messaging APIを使う場合は、ngrokなどを用いてローカル開発環境を整えるなど、開発体験観点での準備もしっかりと行うべきだったと反省しています😓

Flex Messageの活用

Botから送信するメッセージはテキストベースが大半を占めますが、URLやOGP画像など含めたい場合もあったため、Flex Messageの活用を積極的に行いました。
Flex Messageはシミュレータを用いることで、視覚的にメッセージのデザインを仕上げていくことができ、比較的容易にリッチなデザインのメッセージが作成できるようになります。

3. Next.js × LIFF

編集ページのように複数の入力項目に対して更新したい場合、Botとの対話のみでは実現が難しいため、Line Front-end Framework (LIFF)を用いて専用のWEB画面を設けました。
LIFFについてはここでは深くは触れませんが、Line上で動作するウェブアプリとなっており、LIFF SDKを用いて比較的容易にLINEの機能にアクセスすることができるようになります。

LIFFページはNext.jsを用いて実装しており、LIFF SDKを用いてLineユーザに紐づくのIDトークンを取得後、API Routeにてユーザ情報の取得及び、Firestoreの操作（ブックマークの取得など）を行います。

Next.jsではAPI Routeがいい感じに痒いところに手が届いてくれるので、Firebase Functionsに頼らずとも簡単なサーバーサイドの処理が行えるのがメリットかと思います。
API Routeからfirestoreの制御を行う上では、こちらの記事が非常に参考になりました🙇‍♂️

LIFF × 外部ブラウザ

LIFFのv2では外部ブラウザでの動作も可能なため、Lineブラウザでわざわざ開かなくても、ある程度のローカル動作確認が可能になります。ユーザデータへのアクセスが必要な箇所については、以下の通り外部ブラウザとの差異に気をつける必要がありますが、概ねローカル環境においても滞りなく開発を進めることができます。

LIFFブラウザ	外部ブラウザ
Line内で動作するため、ユーザーにログインを促すことなくユーザーデータにアクセスすることが可能	ユーザーデータにアクセスするために一度ログインする必要がある。LIFFの外部ブラウザでのログイン手順については公式ページが非常に詳しいです

最後に

Line Bot連携によって、共有(WEB SHARE)からの転送や、Lineメッセージによる通知など、スマホでの使い勝手が非常に良くなり、有用性を実感しました。かなりざっくりとした内容にはなりましたが、今後Line BotやLIFFなどを使用する際の、参考になれば幸いです。