CSSセレクタでつくるRSSフィード

いろんなサイトをRSS化しちゃおう、という野心的なプロジェクト「RSS-Bridge」。今回はそのプロジェクトの一部である「CssSelectorBridge」をご紹介。RSSフィードを提供していないサイトでも、CSSセレクタを使って投稿タイトルと投稿本文を指定するだけでRSSできちゃうプログラムだ。

https://github.com/RSS-Bridge/rss-bridge/

自分でインスタンスを立ち上げて使う前提ではあるが、今回は手軽に試したかったので公式インスタンスを利用させていただく。

ここでは漫画家panpanyaさんのウェブサイト(https://www.panpanya.com)をRSS化させていただいた。RSSリーダーはFeedlyを利用。

CSS Selector Bridgeのフォームに入力した場面

RSS Bridge公式インスタンスのCSS Selector Bridgeを開いて次の項目を入力した。

• Site URL: https://www.panpanya.com
• Selector for article links or their parent elements: .post-title a
• Selector to expand each article content: .post-body
• Text to remove from expanded article title: SURMICLUSSER: 

項目ごとの解説

・Site URL: 投稿一覧のURL

・Selector for article links or their parent elements: 各投稿へのリンク要素。CSSセレクタで指定。投稿を含む親要素を指定しても良いがその場合最初に見つけたリンクがフィードの投稿となる。なお入力されたセレクタはSimple HTML DOMのfindメソッドに渡される。

・[Optional] Pattern for site URLs to keep in feed: URLの正規表現(PHPのpreg_match())。このパターンにマッチしないURLはフィードに表示されない。/は\/へ置換される。

・[Optional] Selector to expand each article content: 投稿ページの本文要素をCSSセレクタで指定。指定するとフィード生成が遅くなるらしい。

・[Optional] Content cleanup: List of items to remove: 投稿内から取り除く要素。CSSセレクタで指定。例えば投稿内にある広告やコメントなど。

・[Optional] Text to remove from expanded article title: 投稿タイトルから取り除く文字列。各投稿ページのタイトルにブログタイトルが付与されているサイトなどに便利。

・Limit: フィードの取得上限数。デフォルトは10件。

panpanyaさんのウェブサイトでWeb Inspectorを開いたところは次のとおり。

Web Inspectorで投稿タイトルと本文のCSSセレクタを調べる

見ると「.post-title内のaタグ」が各投稿へのリンクになっていることが分かった。また各投稿ページでも投稿本文は「.post-body」に内包されていたのでこれを指定。さらに各投稿ページのtitleタグは「SURMICLUSSER: 投稿タイトル」のようにウェブサイトタイトルが付与されていたので、これを取り除く文字列として指定。最後に「Generate feed」ボタンを押下した。

CSS Selector Bridgeの生成したフィード結果

見事にタイトル、本文、投稿リンクなどがRSSフィードとして表示されている！早速「Atom」形式としてFeedlyに登録しよう。生成されたフィードのAtomボタンのURLをコピーし、FeedlyのURLバーへ貼り付けた

Feedlyが生成されたフィードを認識

きちんとFeedlyに表示されたのでプラスで登録。これでpanpanyaさんの投稿をFeedlyでもRSSフィードが見られることを確認した！

Feedlyに各投稿が表示されている

Happy RSS Life！

8566892716945897703 https://www.storange.jp/2023/08/rss-css-selector-bridge.html https://www.storange.jp/2023/08/rss-css-selector-bridge.html CSSセレクタでつくるRSSフィード 2023-08-12T16:28:00+09:00 https://www.storange.jp/2023/08/rss-css-selector-bridge.html Hideyuki Tabata Hideyuki Tabata 200 200 72 72