最近熱い感があるNoCodeサービスを使って、webサービス開発にトライしたいなぁと思っていました。こんなサービスあったらいいなと思っても、ガッツリ作るのは腰が重かったり、既存サービスは課金しないと十分に使えなかったり…。NoCodeでサクッと作って、もっと拡張したいと思ったら改めて0から真面目に作るなんてフローが取れたら絶対幸せになれる。俺が幸せにするって約束するよ…！！
というわけで僕が欲しいサービスがちゃちゃっと作れないか検証しようと思います。今回利用するNoCodeサービスは言わずと知れたZapier。
TL;DR
大いなる野望を達成するために、ツイートをFirestoreに突っ込む処理をZapierでサクッと作ります。 具体的には、Zapierの利用開始から、ツイートをフィルターにかけつつFirestoreに保存するまでを紹介します。
- Zapierにアカウント登録する
- Twitter連携の設定をする
- Firebaseとの連携
- ツイートしたらFirestoreに突っ込む
- フィルター設定
といった流れ。 普通に自前で実装したらだいぶ工数がかかる処理も、Zapierを利用すれば短時間で実現可能です。
Zapierとは
Connect your apps and automate workflows
(公式より引用)
自動化しようぜ的なことが書いてあります。
Zapierは色々なサービスやアプリケーションを連携させ、設定したタスクを自動で実行してくれるサービスです。特定の文面を含むメールがGmailに届いたらSlackに通知させる、とか。 自分好みのワークフローを設定し、業務効率化を助けてくれるサービスですね。
そして、ZapierにはFirebase Integrationが用意されています。これは無限の可能性がありますね…！
アカウント登録 ~ Twitterからデータ取得
登録する
登録は、Google / Facebook / Emailの三択ですね。今回はGoogleを選択しました。
Googleを選択して進むと、職業選択の画面(スキップ可能っぽい？)と、連携したいサービス選択画面になります。デフォルトでGoogleのサービスたちが選択されていますが、それに加えてTwitterとFirebase / Firestoreを選択しておきました。
完了するとDashboardに飛ばされます。さて、まずはTwitter連携しましょう。
Twitter連携
サイドメニューから、My Appsを選択します。
セレクトボックスからTwitterを選択しましょう。AutoFollowはなんとなくNoにしてContinue。すると連携許可の確認画面が出るので、認証しましょう。
完了すると、My Appsの画面にTwitter連携が表示されます。
ツイートの取得
次はタスクの登録ですね。サイドメニューから Zapsを選択 → 画面中央、Make a New Zapを選択します。
次の画面では、 - Choose App: Twitter - Chose Trigger Event: My Tweet
を選択し、CONTINUEです。
Choose Accountはさっき連携した自分のアカウントを選択すればOKです。
最後のFind Data画面では(スクショ撮り損ねました)、画面中央のボタンを押すと自分のツイートを3件ほど取得するテストをしてくれます。
ここまで完了したら、Twitterをごにょごにょするのは完了です。Firebase連携に進みましょう。
Firebaseとの統合 ツイートをFirestoreに突っ込むまで
※Firebaseのプロジェクトがない場合は適当に作っておきます。また、Cloud Firestoreの初期化もしておきましょう。
Firebase認証
さて、引き続きZapの設定画面です。1つめのタスク設定が完了し、2つめのタスクを設定できるようになっています。Firebase / Firestoreを選択しましょう。
Choose Action Eventは、Create Cloud Firestore Document in Firebase / Firestoreを選択します。
するとFirebaseへの認証を求めらるので、設定していきましょう。
プロジェクトIDを入れ、認証が完了したら Customize Record という画面が表示されます。
Firestore連携
まずは、Collectionの指定です。一点注意ですが、Firestoreを作りたてホヤホヤだとZapier側でエラーが表示されます。Firestoreに何かしらのCollectionがないといけないんですね。なので適当にデータを一件入れつつ、こんな具合にtweetsコレクションを作成しておきます。すると、Zapier側からそれを指定することができます。
Convert Numericsはどっちでもいいです。お好みで。Firestoreにデータを突っ込む際に、数値で入れるか文字列で入れるかが選べるみたいですね。
DocumentIDも、今回はFirestoreに自動生成させるので空欄でOKです。
最後、Data欄ですね。左のフィールドは、contentと書いておきましょう。右のフィールドはクリックすると、ツイートのうちどのフィールドをFirestoreに登録するのかが選べます。Textを選択しましょう。
ここまでできたら完了です。CONTINUEをクリックします。
動作確認
最後の画面です。動作確認ができるようになっています。TEST&REVIEWボタンを押すと実際に処理が走り、Firestoreにデータを入れてくれます。ちゃんとツイートのtextがFirestoreに保存されていたらOKです！
確認できたらDone Editingで終了します。これで、ツイートしたらFirestoreに内容が保存されるという自動処理の設定が完了しました。
最後の作業です。編集画面、もしくはZapsの画面で、今回作成したZapを稼働させましょう。offになっているスライドボタンをクリックして、onにすればTwitterの監視を始めてくれます。あと、お好みでZapに名前をつけてあげるのも良いと思います。
保存するツイートを絞り込む
ツイートをなんでもかんでもFirestoreに突っ込んでもいいんですが、例えば特定のワードを含むツイートだけを保存したいなんて気持ちになったとき。そんな気持ちにもZapierは応えてくれます。
さっき作ったZapを開き、TwitterとFirebaseのタスクの間にあるプラスボタンを押し、Filterを選択します。
したら条件を設定する画面が出てきます。今回は己の欲望のみを取得するようにしたいので、「したい」を含むツイートのみを取るような設定にします。
こんな具合ですね。試してみます。
https://twitter.com/yubachiri/status/1260762545419243522?s=20
https://twitter.com/yubachiri/status/1260762957438431235?s=20
完璧だ…。
まとめ
Zapierの利用開始から、ツイートをフィルターにかけつつFirestoreに保存するまでを紹介しました。 Zapierは扱えるアプリの選択肢がかなり豊富かつ、カスタマイズの自由度が非常に高いです。無限の可能性がありますね。ここまでの処理を自前で実装するとなると数倍の時間がかかると思いますが、慣れてしまえばこのくらいのワークフローはごく短時間で組めてしまいますね。すごい。 ゴリゴリと業務効率化やQOL向上に役立てていきましょう。
以上、Zapierを使ったTwitterとFirestoreの連携でした。
