Webサイトの変更があれば通知するサービスを作成する
更新日：2022年9月21日
転職活動している時に自分のいきたい会社のポジションがなかったりした時にポジションがオープンになったら教えてほしいと思うことがあったので作ります。
多分PS5が入荷された時とか、そういうページが変更された時に教えてほしいみたいなニーズにも使えるはず。
追記: どうやって作るかーって考えて実装に取り掛かる段階でやりたいことができるサービスを見つけたので実際に作っていません。このサービスでやりたいことできます。 https://distill.io/
どうやって作るか
メインの処理になるページの変更を検知する仕組み
ページの変更をユーザーに伝える処理
監視するURLを設定するWebサイト
が必要。具体的にどんな感じになるかみていく。
ページ変更を検知する仕組み
puppeteerでページのスクリーンショットを撮ってpixelmatchとpngjsで差分を検知するって感じでいけそう。これをFirebase Cloud functionsのcron jobで動かす。
puppeteer: https://github.com/puppeteer/puppeteer
pixelmatch: https://github.com/mapbox/pixelmatch
ページ変更をユーザーに通知
上記の変更を検知したらnodemailerを使ってgmailアカウントでメールを飛ばせばいけそう。
上記の2つをFirebase Cloud functions 関数のスケジュール設定で動かす
あとは前回の実行結果の画像とか、設定しているURLとかでFirebaseのStorageとCloud Firestore使うはず。
Webサイト
とりあえず、ログインができて、URLが設定できればOKなので一ページでOK
認証はFirebaseを使う: https://firebase.google.com/docs/auth/web/start?hl=ja
Viteを使って雛形を作る: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
TailwindUIでURLを設定するUIを作る: https://tailwindui.com/
静的サイトをデプロイする: https://vitejs.dev/guide/static-deploy.html#google-firebase
だいたいこんな感じでOK URLとかもとりあえず自分と家族が使うくらいなので適当でいいかなと思う。ホスティングはどこでもいいんだけど、Firebaseいっぱい使っているしFirebase Hostingでいいかなと。
だいたいこんな感じでいけるかな?
実装時のメモ
Githubのレポジトリを作る
Firebaseのプロジェクトを作る
残念なお知らせ
"サイトの変更を検知"のキーワードから下記の記事を見つけた。
【Distill Web Monitor】指定したWEBページの更新を自動通知してくれるアドオンの使い方
そして、このサイトを使えばやりたいことができるということに気がついてしまった。
試しに自分で運用しているサービスを設定してみたが普通にいい感じに動きそう。
やはり欲しいものはすでに先人が作っていた...
なので一旦ここでストップして、他のことやります。ういす