Webページの変更を監視する「監視フィード」機能を追加しました

いつもご利用ありがとうございます。Feedeen運営者の伊藤です。

本日Feedeenの新バージョンを公開し、「監視フィード」という機能を追加しました。Webページの指定箇所の内容を監視し、変更があれば通知するという機能です。開発に紆余曲折あって半年以上費やしましたが、以前から実現したかったものでもあり、なんとかリリースまで漕ぎ着けました。まだ荒削りな面も多いですが、お試しいただければ幸いです。

監視フィードの使い方

監視フィードを利用するには、まず監視したいWebページと監視したい箇所のCSSセレクタを登録します。例として、ヤフーの熱中症情報に掲載される明日の熱中症情報を監視してみましょう。

大田区の熱中症情報 - Yahoo!天気・災害
https://weather.yahoo.co.jp/weather/heatstroke/3/13/13111/

監視フィードを登録するには、フィードリストの歯車メニューから「監視フィードの管理」を選択します。

「監視フィードの管理」を選択

監視フィードの管理画面（ダイアログ）が表示されますので、「監視フィードを追加する」をクリックしてください。

「監視フィードを追加する」をクリック

監視対象の情報を入力する画面になります。多くの項目がありますが、ここでは以下のとおり入力してください。それぞれの項目の意味は、青い（？）アイコンでポップアップする説明をご参照ください。

監視対象URL
https://weather.yahoo.co.jp/weather/heatstroke/3/13/13111/

グループ名
li.heatstrokeForecast_day_item:last-child p.day

監視対象の要素・属性
名前: 警戒レベル
セレクタ: li.heatstrokeForecast_day_item:last-child dt.heatstrokeLevel_label

監視対象の要素・属性（「監視対象を追加する」で項目を増やす）
名前: コメント
セレクタ: li.heatstrokeForecast_day_item:last-child dd.heatstrokeLevel_detail p.comment

監視対象の情報を入力

すべて入力したら、「次へ」をクリックしてください。表示名やお知らせ投稿時に実行するアクションを指定する画面になります。右側に取得した情報が表示されるので、正しく取得できていることを確認してください（「ユニークキー」の右の▶︎をクリックすることで、監視対象のテキストが表示されます）。問題なければ「登録」をクリックしてください。

入力内容の確認と、その他のオプションの選択

これで熱中症情報が監視されるようになりました。警戒レベルかコメントが前日から変化すると、以下のようなお知らせが投稿され、変更内容が確認できます。

熱中症情報の更新のお知らせ

監視フィードは監視対象が変化した時に通知する機能なので、警戒レベル等が前日と同じならお知らせは投稿されません。毎日投稿されるようにしたいなら、日付も監視対象に含めるとよいでしょう。

監視フィードを使うと、ショッピングサイト等の価格情報も監視できます。例として、レトロゲームを多く扱っている駿河屋さんの検索結果を監視してみましょう。

ゲーム・古本・DVD・CD・トレカ・フィギュア 通販ショップの駿河屋
https://www.suruga-ya.jp

トップページを監視してもあまり意味がないので、メガドライブの「モンスターワールド」を検索した結果を監視します。さきほどと同様に監視フィードの管理画面を表示し、「監視フィードを追加する」をクリックしてください。そして、今度は以下の内容を入力してください。

監視対象URL
https://www.suruga-ya.jp/search?category=20013&search_word=モンスターワールド&adult_s=2&hardsoft=ソフト&rankBy=relavancy(int)&searchbox=1

比較対象のグルーピング
div.item

グループのユニークキー
p.title a@href

グループ名
p.title

リンク先URL
p.title a@href

サムネイル
div.photo_box img@src

監視対象の要素・属性
名前: 価格
セレクタ: div.item_price

監視対象の情報を入力

「比較対象のグルーピング」に各商品の親要素のCSSセレクタを入力することで、商品を個別に比較できます。その場合、グループ名などの他のCSSセレクタは親要素を起点とした相対的なセレクタになることに注意してください。

あとは、先ほどと同じように次の画面に進み、登録することで監視が開始されます。値段に変更があると以下のようにお知らせに通知されます。

価格の更新のお知らせ

蛇足ですが、モンスターワールドIVはメガドライブの名作アクションRPGです。Switch等でオリジナル版、リニューアル版ともプレイできますので、ハイラル王国で消耗したときの気分転換にぜひどうぞ（笑）

CSSセレクタについて

現在のところ、監視フィードの利用にはHTMLやCSSセレクタの知識が必須となっています。これらはFeedeenのフィードを生成する機能でも使っておりますが、Web全般を活用する上でも把握しているとなにかと便利です。もしこれから学んでみようという場合は、「とほほのWWW入門」がおすすめです。Webの黎明期から最新情報をキャッチアップし続けている素晴らしいサイトです。

Webページ作成入門 - とほほのWWW入門
https://www.tohoho-web.com/wwwbeg.htm

CSSリファレンス(CSS入門) - とほほのWWW入門
https://www.tohoho-web.com/css/basic.htm

少し楽ができる豆知識として、Chromeの開発ツールでは選択した要素のCSSセレクタをクリップボードにコピーする機能があります。監視フィード登録時の補助ツールとして活用できるかと思います。

開発ツールでCSSセレクタをコピーできる

ただ、こうしたツールを使っても少々難易度が高い点は否めません。まだ詳しいヘルプページも書けていないので、もし疑問点などがありましたら、お問い合わせフォームもしくは公式SNSアカウント（X（旧Twitter）, Facebook, Mastodon）までお気軽にお尋ねください。

まだ実現すると断言はできないのですが、次の更新で対話的に監視箇所の指定ができるようなUIの追加も検討しております。

監視フィードの制限

監視フィードは通常のフィードとはまったく異なる性質を持つ機能であるため、当面の間1ユーザーにつき最大10個までに制限させていただき、クロール頻度も1日数回程度としています。これはFeedeen側の負荷低減もありますが、情報元Webサイトへの過大なリクエストを避けるという目的もあります。厳しい制限と感じるかもしれませんが、なにとぞご了承ください。

また、現在のところ監視フィードの登録・編集等はデスクトップ版が必須となります（お知らせへの通知はモバイル版・タブレット版でも確認できます）。こちらは近いうちに解消する予定ですので、今しばらくお待ちください。

監視フィード、最初はとっつきにくいと思いますが、慣れると非常に便利です。皆様のフィードバックをもとに改善していきたいと考えておりますので、ぜひ使ってみてください。今後ともFeedeenをよろしくお願いいたします。