LINE Bot のカルーセルテンプレートを Firebase Functions で実装する方法について

概要

3~4年も前に公式のスタートガイドぐらいしか使ったことがなかったため、Firebase Functionsをちゃんと触るのは今回が初めてで、LINE Botも簡単なメッセージ返答ぐらいまでしか触ったことがなかったことと、FirebaseとLINE Botの組み合わせも初めてだったので色々とハマったことをまとめようかと。

やったこと

　　　

最初は、FirebaseとLINE Botの組み合わせで定期的に何かをつぶやくBotを作りたいなと思い、つぶやく内容をスクレイピングで取得するために参考記事をもとに Puppeteer を使っていたところFirebase Functionsとの相性が悪く、 Puppeteer slow execution on Cloud Functions · Issue #3120 · puppeteer/puppeteerで議論されている内容が手元でも起きて解決できませんでした。

　　　

最終的にはFirebaseとLINE Botの組み合わせてカルーセルテンプレートを使えるようになるところを目指しました。

セットアップ

Firebase FunctionsのセットアップおよびLINE Botのセットアップはそれぞれ他の記事を参考にしてもらえたらなと。
@line/bot-sdkをFirebase Functionsで使う設定は特別何かすることはなく、他のライブラリ同様に$npm install @line/bot-sdkで取り込んで$firebase deploy --only functionsでアップできたらローカル同様にFirebase Functions上でも動いてくれます。

もし、本記事をきっかけにFirebase FunctionsもLINE Botも初めて触る人は、Firebase Functions関連でNodeのバージョンや有料プラン設定とGCPのCloud Functions設定などでハマる可能性が高いと思います。
そこは、LINE Botとの組み合わせだからといって「Firebase Function LINE Bot 【エラー内容】」みたいにググるとややこしくLINE Botは一旦関係なかったりするので、Firebase Functionsを軸にググるように。

参考記事をまとめておくのでググる前に参考にして、もう少し詳細知りたい場合は各自ググってくださいmm

補足

LINE Botのシークレットキーとアクセストークンをハードコーディングするのは、セキュリティ的に危ないので$firebase functions:config:setで設定して、コード上ではfunctions.config()で呼び出すようにすることでセキュアなアプリが作れます。

• 環境の構成 | Firebase Documentation

参考記事

• 【Firebase+Node.js+LINE SDK】230行でコロナ通知サービスを開発した話 (ソース付) #27
• Firebase FunctionsとPuppeteerでスクレイピングの定期実行するのを作ってみた
• LINE botの返事をカルーセル形式にしてみました
• Node.js + HerokuでLINE Messaging APIを叩いてみる
• Promiseについて0から勉強してみた
• FirebaseでNode.jsを動かしてLINE BOTを作る
• 超絶簡単！LINE bot開発
• jirawatee/CarouselTemplate.js | GitHub Gist
• （チュートリアル）Node.jsを使ってサンプル応答ボットを作る | LINE Developers
• Webhook | line-bot-sdk-nodejs

できたもの

　　　

準備

カルーセルテンプレートは、LCL Engineers' Blogさんの参考をモロパクリしたので、まずYoutubeAPIのAPIキーを取得しておく必要があります。
今回、YouTube APIキーの取得 (2020/03/25時点)の記事を参考にセットアップしたFirebaseプロジェクトを指定したGCPコンソールのライブラリー画面に入ってAPIキーを取得しました。

取得したAPIキーは、LINE Botのシークレットキーとアクセストークンの同様に$firebase functions:config:setからYouTubeAPIキーも設定しておきましょう！

$ firebase functions:config:set gcp:api_key="取得したYouTubeAPIキー"

$ firebase functions:config:get 
{
  "line": {
    "secret": "LINE Botのシークレットキー",
    "accesstoken": "LINE Botのアクセストークン"
  },
  "gcp": {
    "api_key": "YouTubeAPIキー"
  }
}

ソースコード

GitHub Gistにアップしています。
gremito/line_webhook.js

ファイル名は、line_webhook.jsではなく実際に配置しているパスはfirebase/functions/line/webhook.jsで次のようにFirebase Functionsを設定しています。

• 複数の関数を整理する | Firebase Documentation

firebase/functions/index.js

exports.line = require('./line/webhook')

まとめ

とりあえず動くところまでできたわけですが、まだFirebase FunctionsとLINE Botが理解できているわけでもなく、最初はPromiseを使ってasync functionで非同期関数にしてたんですが、カルーセルテンプレートの実装で上手いやり方がわからず、通常のやり方でrequestライブラリ実装でなんとか動くところまでできた現状です笑汗

当初の目的としてFirebase FunctionsとLINE Botの組み合わせでどこまでできるのか実際触って知見を得られたので、次にPuppeteerを再挑戦するのか一旦Node.jsのキャッチアップをやってからFirebase Functionsの理解を深めるかどうするかはまた改めて。

注意

Firebase Functionsは有料プランの設定でないと使えないサービスなので、もし悪意あるハッカーが攻撃してきて知らぬ間に請求額がすごいことになっているという可能性もあるので作ったまま放置するのは危険です。

幸いなことにLINE Botの方は、公開設定にしていなければID検索したとしても作ったボットは見つからないと思うので、LINE Botの方でこのような危険はほぼないと思います。

使わない場合は、Firebase Functionsのダッシュボードからデプロイした関数を削除しておくことをお勧めします。
また、何か問題が起きたとしても自己責任でご対応のほどよろしくお願いいたしますmm