changedetection.ioとDockerでウェブサイトの更新チェックを自動化する – ITFROMZERO

Table of Contents

F5キーの奴隷になるのはもうやめましょう

私の監視システムは現在、PrometheusとGrafanaを通じて15台のサーバーを管理しています。しかし、これらのインフラツールでは手の届かない領域があります。それは、サードパーティ製ウェブサイトの内部コンテンツです。

セール品を狙ったり、憧れの企業からの求人通知を待つために、一週間ずっと画面に張り付いていたことはありませんか？毎朝30分かけて10個のブラウザタブをチェックする代わりに、私はBotに任せることにしました。以前、あるオープンソースライブラリにメーリングリストがなかったために、重要なセキュリティアップデートを見逃してしまったことがあります。その時、手動でのチェックは手間がかかるだけでなく、ミスも起きやすいと痛感しました。

なぜZabbixやUptime Kumaでは不十分なのか？

システム監視ツールは通常、CPUやRAMなどの技術的な指標にのみ焦点を当てています。表示内容を監視しようとすると、主に3つの大きな壁にぶつかります。

動的コンテンツ: ReactやVueを使用したウェブサイトは、単純なcurlを使用すると空のJavaScriptコードしか返しません。
アンチBot機能: 同じパターンでリクエストを繰り返すと、Cloudflareなどによって即座にIPがブロックされます。
UIの変更: 自作のPythonスクリプトは、サイト管理者がCSSのclass名を変更しただけで動作しなくなることがあります。

現在、最も最適な解決策は？

通常、この課題を解決するには主に3つの選択肢があります。

Pythonスクリプト（BeautifulSoup/Selenium）の作成: 柔軟性は高いですが、コードのメンテナンスやcronジョブの管理に非常に手間がかかります。
SaaSサービス（VisualPing, Distill.io）の利用: 素早く綺麗に使えます。しかし、50ページを5分おきにチェックしたい場合、コストが非常に高くなります。
セルフホスト: これが私のイチオシです。データを完全に制御でき、ページ数の制限もなく、完全に無料です。

多くのツールを試した結果、私はchangedetection.ioに決めました。重いJSを処理するためのPlaywrightをサポートしており、Appriseを通じて数十種類の通知チャネルと連携できます。

Docker Composeを使って5分でデプロイ

Dockerを使用することで環境を分離し、アップグレードも非常に迅速に行えます。モダンなウェブサイトを処理するために、playwright-chromeコンテナも併用します。

1. docker-compose.ymlファイルの設定

新しいディレクトリを作成し、以下の内容を設定ファイルに貼り付けます。負荷の高いページをレンダリングする際のChromeのクラッシュを防ぐため、shm_sizeの設定に注意してください。

version: '3.2'
services:
  changedetection:
    image: dgtlmoon/changedetection.io
    container_name: changedetection
    volumes:
      - ./data:/datastore
    ports:
      - 5000:5000
    environment:
      - BASE_URL=http://localhost:5000
      - PLAYWRIGHT_DRIVER_URL=ws://playwright-chrome:3000/?stealth=1
    restart: unless-stopped

  playwright-chrome:
    image: browserless/chrome:latest
    restart: unless-stopped
    shm_size: '2gb'
    environment:
      - MAX_CONCURRENT_SESSIONS=10

ヒント：上記の?stealth=1パラメータは非常に有用です。これはブラウザが実際のユーザーの挙動をシミュレートし、基本的なBotフィルタリングを回避するのに役立ちます。

2. システムの起動

以下のコマンドを入力して起動します。

docker-compose up -d

ブラウザを開き、http://サーバーのIP:5000にアクセスしてください。

監視と通知の最適化

ページ全体を監視すると通知の嵐になるため、**CSS Selector**を使用して重要なデータ範囲を絞り込みましょう。

例：ECサイトでノートPCの価格を監視する場合、F12キーを押して価格が表示されているタグを探します。そのセレクター（例：.product-price-current）をコピーし、ツールの**Filters > CSS Filter Selector**セクションに貼り付けます。

Telegramで通知を受け取る

**Settings > Notifications**に移動し、Appriseの構文に従ってURLを入力します。Telegramの場合、形式は以下の通りです。

tgram://bot_token/chat_id/

メッセージ内容に{{diff}}変数を使用することで、価格がいくら下がったか、あるいはどのような内容が新しく追加されたかを正確に把握できます。

実践的なヒント：誤報を防ぐ

あるウェブサイトに「オンライン人数」を表示するウィジェットがあったため、Telegramに連続してスパム通知が届いたことがあります。スキャンするたびにこの数字が変わり、ツールがコンテンツの変更と見なしてしまったのです。

解決策は**Ignore Text**機能を使用することです。頻繁に変動するフレーズをここに入力します（例：/\d+ 回視聴/ や /更新日時:.*/）。また、制限の厳しいサイトでは、IPブロックを避けるために**Time Between Checks**を1時間程度に設定しましょう。

おわりに

ウェブサイト監視の自動化により、より重要な作業に集中できるようになります。ガジェットのセール情報のチェックから新しいCVE（脆弱性情報）の監視まで、すべてが低スペックのVPS上で24時間365日稼働します。もしCSS Selectorの書き方で困ったことがあれば、下のコメント欄で教えてください！