WordPressとCloudFunctionsを連携してアプリ内にブログ機能を実装する
PORT Firebase × PostCoffee #2 で登壇したときの内容です。
コーヒーのサブスクアプリ**「PostCofee」**の開発をしている中川です。
このPostCofeeのアプリはバックエンドがFirebaseのみで作られています。
コーヒーが好きな方はぜひダウンロードしてみてください！
さて、先日のアップデートでストーリーというタブが追加されました。
ストーリーはアプリ内でブログを閲覧できる機能です。
アプリ内でWebサイトを閲覧できるというのはごく普通の機能ですが、これをFirebaseで実現する場合どのようにするのかを紹介したいと思います。
WordPressとの連携の流れ
ストーリーで表示しているブログはWordPressで書かれていて、構成はこのようになっています。
- WordPressで記事を公開、更新する
- 上記のタイミングでWordPress側からCloudFunctionsで用意したfunctionを必要なparamを入れて叩いてもらう
- CloudFunctionsが叩かれたらparamを受け取ってFireStoreへ保存し、アプリ側へPush通知を送る
- アプリ側はCloudFireStoreへデータを取りに行く
CloudFunctionsでやること
まずはCloudFunctionsを実装します。
トリガーは functions.https を使用します。
詳細はこちら HTTP リクエスト経由で関数を呼び出す
また、Push通知もこのCloudFunctionsの中で送るようにします。
今回は全ユーザーを対象に送るためトピック配信を使いました。
トピックにメッセージを送信する
exports.wordPressCreated = functions.region('asia-northeast1').https.onRequest(async (req, res) => {
// ここでWordPressからのデータを受け取ってFireStoreへ保存します。
// WordPressからのデータはreq.bodyの中に入っくるので
// 例) const title = req.body.title
// このように取得します。
// FireStoreへの保存が完了したらPush通知を送る
})
Push通知について補足
記事によってPush通知を送る、送らないを分けたい場合、WordPress側から送るデータにBool値を入れると良いです。
Bool値といっても受け取る際にStringの '0', '1' に変換されてしまうようなので判定に注意が必要です。
例) WordPressからのparam
{
"title" : "ほげほげ",
"thumbnail" : "https://○○○.png",
"url" : "https://qiita.com/",
"isSnedPush" : "1" // Push通知を送るかどうか
}
// isSendPushが '1' のときにPushを送る
if (req.body.isSendPush === '1') {
// Push通知を送る
}
CloudFunctionsでの実装は以上です。
実装が完了したらデプロイしましょう。
WordPressでやること
WordPress側では記事の公開、更新をフックして上記で実装したCloudFunctionsを叩くようにします。
FireStoreに保存したいデータもここで送るようにします。
叩くURL(CloudFunctions)はFirebaseコンソールの
Functions → ダッシュボード → トリガー
に記載されています。
デバッグについて
最終的には実際にWordPressで記事を公開して確認するのが良いのですが、実装途中で確認したい場合や、WordPressを自分でいじれない場合、直接CloudFunctionsを叩いて確認することができます。
デプロイ済みのCloudFunctionsを叩く方法はいくつかあると思うのですが、今回はPostmanを使用しました。
使い方はURLを入力して `POST` でリクエストするだけです。
今回はWordPress側からparamを受け取るので実際に送るデータをjson形式で指定します。
CloudFunctionsが叩かれたかどうかは
Firebaseコンソールの Functions → ログ
で確認できます。
まとめ
今回はWordPressとCloud Functionsの連携について紹介しました。
WordPressに限らず、他のサービスとの連携もほぼ同じような構成でいけると思いますので、参考になれば幸いです。
ここもっと詳しく知りたいなどありましたら書ける範囲で追記しますのでお気軽にコメントください！