テケオは眠くても頑張るぞ!

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

RSS配信のないサイトのRSSフィードが作れるFeed43の使い方

f:id:tektekeo:20170906192926j:plain

お気に入りのブログやサイトの更新情報をいち早くゲットするために使われたりする「RSS」。「Feedly」のようなRSSリーダーを使用している方も多いのではないでしょうか?

しかし、一部のサイトやブログではRSSフィードがない場合があります。

そんな時は「Feed43」でそのサイトのRSSフィードを作ってしまいましょう。

英語のサイトですが、詳しく使い方を解説しています。

 

Feed43とは

Feed43 : Convert any web page to news feed on the fly

f:id:tektekeo:20170810180040p:plain

一言で言うとRSSを自動生成してくれるサービスです。

日本語がなく全て英語で説明文が書かれているため、抵抗があるとは思いますが、HTMLの知識があれば比較的簡単に自作のRSSフィードが作れます。

このサービスをユーザー登録なしで使えるのも良いところ。登録ってなにか鬱陶しいですし...

無料版と有料版とありますが、無料版でもケースによっては十分使えます。

無料版の制限

  • 巡回間隔は6時間
  • 1サイトにつき最新20件まで
  • 取得するサイトのページサイズは100KBまで(それ以上の場合は最初の100KBのみが解析される)

即時性が必要な場合はかなり厳しい感じですが、そうでなければ十分に機能します。

その他参考になるサイト

「Feed43」というサービスは非常に便利で、いろんな方々が使い方や説明をされています。本記事で不明な点なども載っているかもしれません。

私自身もこれらの記事を参考にしてRSSフィードを作ったのですが、うまくいかない部分が少しだけありました。

そこで英語のドキュメントを読んでみると簡単に解決する項目でした。

そこで本記事ではRSSフィードをFeed43で作る上で「うまくいかない」時にどう対処すればいいかまで記載しています。

Feed43を使うのを挫折した人はぜひ読んでみてください。

Feed43の使い方

基本的なフローは上記参考記事を見ていただいても書いていますが、一応書いていきます。

今回RSSフィードを作るのは、はてなブログを例にあげていますが、はてなブログはRSS配信を行なっているので必要ないのですが...

 Feed43のサイトにアクセス

Feed43 : Convert any web page to news feed on the fly

英語のサイトに臆することなく頑張っていきましょうw

利用規約に同意します

「Create your own feed」をクリックします。

f:id:tektekeo:20170810233437p:plain

 

「I agree to the Terms of Service」にチェックを入れ(利用規約に同意にチェック)、「Continue」をクリックします。

f:id:tektekeo:20170810234147p:plain

フィードを作りたいサイトを登録

Address欄にサイトのURLを記入して「Reload」をクリックするとPage Sourceにそのページのソースコードが表示されます。

f:id:tektekeo:20170810234830p:plain

ここまでは順調に行くでしょう。

「Encoding」の欄は基本空欄でも大丈夫です。おそらくですがソースコード内のメタタグからutf-8であることを認識してエンコードしてくれているので、ほとんどのサイトでは大丈夫だと思います。

不具合があれば、「Encoding」の隣にある「?」を押すと、候補が見れます。

f:id:tektekeo:20170810235343p:plain

赤線が候補一覧です。それらでヒットしなければ、「full list」のリンクから他の候補を見てみましょう。

話は少しそれますが、たとえ英語のサイトであろうとヘルプをみるのは大事です。

文字は読めなくても直感的にわかる可能性は大いにあります。

 

でもここまではほとんどの人が大丈夫だと思います。

取得範囲を確認する

まず押さえておきたいポイントが、

RSSの作成に必要なのが、「取得したい記事のURLとタイトル」だということ。

初めて使う人は方法ばかり調べて、この目的を理解していないと結構迷ったりします。

 

「ページのソースコード内から投稿記事が繰り返されている部分を探し出す。」というステップを書いている参考サイトが多いけど、その理由は抽出したい記事のURLとタイトルがHTML上で同一タグなどで繰り返されている可能性が高い(ほぼ全て)だからです。

方法ばかり探してうまくいかない人は、この目的を理解せずに闇雲にやってる人だと思います。注意してください。

 

では、具体的にやっていきます。まずは繰り返し項目を探していきましょう(実際はしないけど、理解するのに確認しても良い)

はてなブログのメインページの場合ですが、「<div id="main-inner">~</div>」の間で繰り返しが発生しているのがわかります。

Feed43の「Page Source」で確認しても良いですが、Google Chromeなどの「デベロッパー・ツール」を使ってソースコードを見た方が、わかりやすいです。

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider

f:id:tektekeo:20170811082453p:plain

視覚的に繰り返し項目が見つかりやすいです。

当ブログの場合、「<div id="main-inner"> ... </div>」の間にある「<article ... </article>」が投稿記事として繰り返されているのがわかる。

この<article>タグで囲まれた中に、取得したい記事のURLやタイトルが繰り返し出現する可能性が高いので。

この意識が大事やで

ここまではHTMLを読むことができれば比較的簡単に進む。

次の抽出ルールが結構クセモノでした。

取得記事を指定

f:id:tektekeo:20170811084623p:plain

投稿記事の繰り返しをみると一目瞭然だけど、タイトルの部分にはURLの情報も含まれているので一番都合がいいですね。

ちなみに「取得範囲を確認する」のステップを飛ばしても問題ないのはこういう理由。タイトル部分が「タイトル」と「URL」の情報を含んで繰り返していることは、見てすぐにわかる。

f:id:tektekeo:20170811090143p:plain

具体的に言うと赤で囲ったところ

 

そして、抽出したい部分を「{%}」で置き換えて「Item Search Pattern」に記入。

「Global Search Pattern」は未記入でOK。

そして「Extract」をクリック!

その他サイトを参考にして、

こんな感じで上手くいくはず...

<a href="{%}" class="entry-title-link bookmark">{%}</a>

 そう思っていた時期が僕にもありました...

f:id:tektekeo:20170811095033p:plain

タイトルは上手く取得できていたけど、URLは意味不明。

しかし、程なくして理解した。最初に見つかるaタグから、最初の「class="entry-title-link"」までを{%1}として取ってきていたのだ!(だからめちゃくちゃ長い)

ということは、親要素まできっちり指定しないと...「<h1 class="entry-title">...</h1>」で挟めば確実に上手くいくだろう。

f:id:tektekeo:20170811100337p:plain

そんなバカな...

ちなみに抽出したい部分がこちら

f:id:tektekeo:20170811100458p:plain

いやいやいやwww完全に一致してるでしょ。

参考サイトだけでは完全に詰んでしまったので、めんどくせぇと思いながらヘルプを探すと「Pattern reference」なるものを発見。

f:id:tektekeo:20170811100958p:plain

どうやら「{%}」以外にも使えるPatternがあるらしい。読んでみると「%」で指定したところのみを出力することを初めて知ったw

「{*}-skip」の説明を見て、

これがあれば、離れた箇所にタイトルとURLがあっても上手く指定できるのね。

と納得した後、「{_}-'whites-pace'」とやらを見てハッとする。

f:id:tektekeo:20170811102211p:plain

結局ソースコードの改行部分が「空白」扱いになっていると言うことでしょうか?

見えない何かがそこにあったという訳。

多分だけど、今まで上手くできなかった人は「謎の空白」の存在に気づかなかったので、文字列が一致しなかったパターンだろう。

 

さらに「{*}」はマジで便利。指定した箇所をスキップしてくれるので指定がより簡単になる。ちなみに「{_}」と同じ働きもする(「空白」をスキップするので)

f:id:tektekeo:20170811103135p:plain

「Item Search Pattern」 の記述が短くなった。

ちなみに「{*}」で省略した部分は以下の通り

{_}<a 

② class="entry-title-link bookmark"

③</a>{_}

今回は短い文章だけれども、もっと長い不要な文章を省略することもできるので、離れた要素を指定することも比較的容易になる。

追記:後になって気づいたのですが、

RSSの配信をしていないサイトをRSSリーダーで読む方法 – 316

に改行の空白について書かれていたorz

出力するフォーマット

以下の画像を参考にしながら打ち込んでください。

f:id:tektekeo:20170811104939p:plain

完成したら「Preview」をクリックします。

確認して大丈夫ならRSSフィードの作成は完了です。

RSSリーダーに登録

f:id:tektekeo:20170811105741p:plain

「Feed URL is」をクリックするとXML形式のページが開くので、RSSリーダーに登録すれば使用できます。

「Edit URL is」は編集用のページになります。サイト変更などで登録したHTMLタグが変わってしまい、取得できない場合に必要になってくるので保存をオススメします。

削除の仕方

作成したRSSフィードは3ヶ月間使用しないと自動的に削除されます。

Feed43のアカウントを作らずにRSSフィードを作成した場合、RSSリーダーから登録を削除した後3ヶ月間放置すれば自動的に削除されます。

Feed43のアカウントを持っている場合はログインして削除しましょう。

まとめ

  • Feed43を使って、RSS配信のないサイトのRSSフィードを作った
  • 個人的に詰まった点や、コツを重点的に記述した

いろんなサイトで紹介されていますが、個人的に詰まったところの説明を比較的詳しく書いたかなと思います。

同じような方達の助けになればと思います。