Open Site Navigation

Webサイトの変更があれば通知するサービスを作成する

更新日:9月21日

転職活動している時に自分のいきたい会社のポジションがなかったりした時にポジションがオープンになったら教えてほしいと思うことがあったので作ります。


多分PS5が入荷された時とか、そういうページが変更された時に教えてほしいみたいなニーズにも使えるはず。


追記: どうやって作るかーって考えて実装に取り掛かる段階でやりたいことができるサービスを見つけたので実際に作っていません。このサービスでやりたいことできます。 https://distill.io/


どうやって作るか

  • メインの処理になるページの変更を検知する仕組み

  • ページの変更をユーザーに伝える処理

  • 監視するURLを設定するWebサイト

が必要。具体的にどんな感じになるかみていく。

 

ページ変更を検知する仕組み


puppeteerでページのスクリーンショットを撮ってpixelmatchとpngjsで差分を検知するって感じでいけそう。これをFirebase Cloud functionsのcron jobで動かす。


ページ変更をユーザーに通知

上記の変更を検知したらnodemailerを使ってgmailアカウントでメールを飛ばせばいけそう。




上記の2つをFirebase Cloud functions 関数のスケジュール設定で動かす

あとは前回の実行結果の画像とか、設定しているURLとかでFirebaseのStorageとCloud Firestore使うはず。


 

Webサイト

とりあえず、ログインができて、URLが設定できればOKなので一ページでOK

だいたいこんな感じでOK URLとかもとりあえず自分と家族が使うくらいなので適当でいいかなと思う。ホスティングはどこでもいいんだけど、Firebaseいっぱい使っているしFirebase Hostingでいいかなと。


 

だいたいこんな感じでいけるかな?


実装時のメモ


  1. Githubのレポジトリを作る

  2. Firebaseのプロジェクトを作る


残念なお知らせ


"サイトの変更を検知"のキーワードから下記の記事を見つけた。

【Distill Web Monitor】指定したWEBページの更新を自動通知してくれるアドオンの使い方


そして、このサイトを使えばやりたいことができるということに気がついてしまった。

https://distill.io/


試しに自分で運用しているサービスを設定してみたが普通にいい感じに動きそう。


やはり欲しいものはすでに先人が作っていた...


なので一旦ここでストップして、他のことやります。ういす


head1

id

Table of contents