【Feed43】RSS配信非対応のサイトでRSSフィードを取得する方法

2021年12月26日Webサービス

Feed43のアイコン

この記事では、RSS非対応のサイトでフィードの受信をできるようにするサイト「Feed43」について書きます。

「ブログの更新情報知りたいけど、RSS対応していない!」、そんな時におすすめです。

Feed43のスクリーンショット

RSSフィードの配信をしていないサイトで、強制的に独自のフィードを作成できるサイトです。

フィードを作成して購読することで、RSS対応サイトと同じようにフィードリーダーでお知らせの受信、内容の確認ができるようになります。

サイトを入力→HTMLが表示されるので、受け取りたい更新情報を抜粋して登録→RSSのリンクが作成されるので、購読登録するといった流れです。

フィードタイトル、どの部分を説明や日付に組み込むか等を細かく設定できます。

HTMLを手動で抜粋しないといけないので、初心者さんには少しだけハードルが高いですが、パターンがあるので、その通りにやれば問題なくできます。

本サービスを使うことで、サイト運営者に通知がいくとか、そのサイトに何か悪影響を及ぼすといったことは一切ありません。自分だけでこっそり通知を受け取るようにするだけです。

ブログの更新情報をお知らせするサービスです。

気になるサイトをRSSに登録(購読)すれば、自動的にチェックしてくれます。

新しい記事が公開された時に、「この記事が投稿されたよ~」と通知してくれます。

Vivaldi フィードリーダーのスクリーンショット

購読というと少し有料っぽいニュアンスになりますが、無料です。

LINE通知のブログバージョンといったイメージです。デフォルトでは通知オフになっているので、RSSで購読して通知オンにしてやろう~ってことです。

フィードリーダーと呼ばれるフィードを読み取るアプリ、更新情報を受け取りたいサイトがRSSに対応していることが条件です。一度購読すれば、永久的に情報を取得してくれます。

フィードを読み取るアプリは、僕が大好きなウェブブラウザVivaldiに標準内臓されています。リーダー内で記事を確認できる、プライバシーに配慮している点が特徴です。

YouTubeもフィードリーダー内でサクッと確認できます。

参考:【Vivaldi】フィードリーダーの使い方。RSSを登録してみよう!

リリース元:Plan43

アクセス方法

以下のサイトからアクセスできます。

使い方

大きく4ステップです。ステップ2が一番難しいです。

  1. サイトをFeed43に入力してみよう!
  2. HTMLを抽出してみよう!
  3. タイトルとかの設定をしよう!
  4. 購読してみよう!

Specify source page address(サイトの入力)

RSSフィードを作成したいサイトのURLをコピーします。

試しに、クラファンガジェットについて紹介されている「spark gadget 」のフィードを作成してみます。

購読したいサイトURLをコピー
本サイトの運営者ちむさんのTwitterはこちら

注意点ですが、トップページのアドレスをコピーするようにしましょう。記事のURLではなく、サイトのホームページです。上記サイトだと、以下の部分です。

https://plugin-blog.com

RSSに対応しているサイトは、普通に購読しましょう。

例えば、当サイトはRSSに対応しているので、フィードリーダーが使えるブラウザで開くと、アドレスバー横にフィードボタンが表示されます。

RSS対応しているサイト

コピーできたら、Feed43にアクセスします。赤色ボタンの「Create your first RSS feed」をクリックします。

「Create your first RSS feed」をクリック

初回アクセスだと、以下のように利用規約が表示されます。「I agree to the Terms of Service(サービス規約に同意する)」にチェックを入れて「Continue」をクリックします。

Feed43のTerms of Service

Addressの部分に、先ほどコピーしたサイトのURLを貼り付けます。

「Reload」をクリックします。

Specify source page address(URL)

「Encoding」には何も入力しなくても、OKです。自動的に正しい文字コード(一般的には、utf-8)を取得してくれます。

サイトのHTMLがずらっと表示されます。続いて、ステップ2で取得したいフィード部分を抽出していきます。

Define extraction rules(HTMLの抜粋)

「Page Source」の部分に、トップページのHTMLが表示されます。

記事タイトル、記事リンク、場合によって日付といったようなパターンが連続している部分を探します。見つけたらその部分だけをコピーして、「Item (repeatable) Search Pattern」に貼り付けます。

Define extraction rules

具体的に解説していきます。

以下のようなパターンを探してみましょう。<h2>は、赤文字で書かれているので見つけやすいかと思います。

<h2 class="〇〇〇"> <a href="〇〇〇">〇〇〇</a> </h2>

意味は以下の感じです。

<!-- 記事タイトル -->
<h2>〇〇〇</h2>

<!-- 記事リンク -->
a href=〇〇

<!-- サムネイル画像(アイキャッチ画像) -->
img src=〇〇

HTMLってサイトを構築している重要なものです。普段は目に見えないので、初めて見る人も多いかと思います。とりあえず、サイトの裏側で頑張ってくれてる文字って認識でOKです。

spark gadgetだと、以下の部分が該当します。

<h2 class="heading heading-secondary"> <a href="https://plugin-blog.com/2021/12/25/okami-review/">【iPadケースOkamiレビュー】ケースとスタンドが一つになったiPadケース</a> </h2>

上記のような塊が一定間隔ごとにあるはずです。<h2>の後には、日本語で記事タイトルが書かれています。

連続している「h2」を探す

そして、</h2>で終わっている部分までをマウスで範囲選択してコピー(CtrlC)します。

パターンをコピー

「Item (repeatable) Search Pattern(繰り返しパターン検索欄)」に貼り付けます。

Item (repeatable) Search Pattern

続いて、変換作業をします。以下の形式に従って、各項目を書き換えます。

<!-- 記事タイトルや記事リンクなどの記事ごとで変わるもの -->
{%}

<!-- 改行 -->
{*}

spark gadgetだと、以下のようになります。

<h2 class="heading heading-secondary"> <a href="{%}">{%}</a> </h2>
記事タイトルと記事リンクを{%}に置き換え

連続しているパターンを見つけて、コピペ→タイトルやリンクを{%}、改行されている部分を{*}にするって流れです。

変換できたら、「Extract(抽出)」をクリックします。

「Clipped Data」に、連続してそれぞれの記事タイトルが出力されれば成功です。「何も抽出されない」、「抽出されても1つだけ」といった場合は、失敗しているのでコードを見直してみましょう。

Clipped Data

サイトによって色々パターンが異なるので、いくつか例として複数のサイトを紹介しときます。変換後のコードも載せておくので、練習して答え合わせに使ってみてください。

色々なパターンを紹介するのが目的なので、元々RSSに対応しているサイトもあります。

ABlog | Ablazeメンバーによるブログ

サイト:https://blog.ablaze.one/

HTMLの抽出

<h2 class="archive__title"><a class="archive__link" href="https://blog.ablaze.one/910/2021-12-20/">Floorp ブラウザ 8.1.1 リリースのお知らせ</a></h2><p class="archive__excerpt">Floorpでは安定したリリースと機能更新をできるように、Firefoxの通常版のリリースである Firefox Stable releaseに追従して…</p> </div>

HTMLの変換

<h2 class="archive__title"><a class="archive__link" href="{%}">{%}</a></h2><p class="archive__excerpt">{%}</p> </div>

Tanweb.net

サイト:https://tanweb.net/

HTMLの抽出

<a class="cardtype__link" href="https://tanweb.net/2021/12/20/44441/" data-wpel-link="internal">
<p class="cardtype__img">
<img src="https://tanweb.net/wordpress/wp-content/uploads/2021/12/ec-amazon-benrikensaku-520x300.jpg" alt="Amazon商品検索を超便利にする裏技!「割引率・価格帯検索」など商品選びの便利ワザ">
</p>
<div class="cardtype__article-info">
<time class="updated entry-time dfont" datetime="2021-12-20">2021.12.20 Mon</time>
<h2>Amazon商品検索を超便利にする裏技!「割引率・価格帯検索」など商品選びの便利ワザ</h2>

HTMLの変換

<a class="cardtype__link" href="{%}" data-wpel-link="internal">{*}
<h2>{%}</h2>{*}

上記サイトのように、記事リンクと記事タイトルの間に他の文字がある場合は、ごっそり変換の時に削除しましょう。

重要なのは、記事タイトルと記事リンクの2つだけです。

更新ログ HD Video Converter Factory Pro

サイト:https://www.videoconverterfactory.com/jp/hd-video-converter/update-logs.html

HTMLの抽出

<details>
<summary>- v21.8 2021年3月10日</summary>
<ul>
<li>1、100以上の新しいデバイスを追加しました。</li>
<li>2、変換数の問題を修正しました。</li>
<li>3、ハードウェアアクセラレーションの問題を修正しました。</li>
<li>4、変換とマージ機能の最適化。</li>
<li>5、バッチ変換での変換数の問題を修正しました。</li>
<li>6、8K動画の変換問題を修正しました。</li>
<li>7、ダウンロード数制限の問題を修正しました。</li>
<li>8、一部の動画サイトのダウンロード問題を修正しました。</li>
<li>9、ダウンロードしたファイルの命名問題を修正しました。</li>
<li>10、字幕のダウンロードに100以上の言語を追加しました。</li>
</ul>
</details>

HTMLの変換

<details>{*}
<summary>{%}</summary>{*}
<ul>{*}
<li>{%}</li>{*}
</ul>{*}
</details>

新着記事一覧 フリーソフト100

サイト:https://freesoft-100.com/recent-posts.html

HTMLの抽出

<a href="https://freesoft-100.com/review/okoshimax.html"><div class="post_block alternate"><div class="post_thumbnail" style="background-image:url(/img/sc1/sc33/okoshimax-51s.png);background-size:cover"> </div><div class="post_title">0.5~4倍速の速度調整、時間ごとのしおり機能などを利用して音声文字起こしを支援するソフト「OkoshiMAX」</div>

HTMLの変換

<a href="{%}">{*}
<div class="post_title">{%}</div>{*}

上記サイト様もいい練習になります。

記事リンクと記事タイトルの間に、アイキャッチ画像などのフィードには不要なコンテンツがあるので、変換時に行を丸ごと削除しています。

間を削除する時は、改行して{*}を入れてあげるとうまくいきます。

REALFORCE アップデート情報

サイト:ダウンロード & アップデート情報 | REALFORCE | 日本製プレミアムキーボードの最高峰

HTMLの抽出

<h4 class="version">Ver.1.1.2</h4>
<ul>
<li><span class="uppercase">Realforce</span> TKL シリーズ2機種 追加対応しました。</li>
</ul>

HTMLの変換

<h4 class="version">{%}</h4>{*}
<ul>{*}
<li>{*}
{%}</li>{*}
</ul>{*}

Define output format(通知項目を設定)

うまく抽出されたら、続いてフィードの通知項目の設定です。

Define output format

RSS feed properties

「RSS feed properties」は、フィードの全体設定です。

既に抽出したサイトが登録されていると思うので、そのままでもいいですし、自分が分かりやすいように変換してもOKです。

RSS feed properties

僕は、サイトタイトルを「spark gadget | ガジェット好きのあなたに新鮮なクラファンガジェット情報をお届け」から、「spark gadget」にしました。

ここで設定した名前で通知(RSS)が来ます。

Vivaldiのフィードリーダーでいうところの「差出人」という項目です。

フィードの差出人設定

RSS item properties

「RSS item properties」は、記事ごとの設定です。

HTMLの抽出、変換の際に、パラメーターと呼ばれる値が作成されるので、それぞれの場所に入力します。

RSS item properties

パラメーターは、抽出した際に表示されている{%1}や{%2}のことです。

例えば、下記画像だと{%1}は記事リンクなので、「Item Link Template」に入力します。{%2}は、記事タイトルなので「Item Title Template」に入力します。

抽出したパラメーター

「Item Content Template(説明)」は、任意なので入力しなくてもOKです。例えば、記事の抜粋分を抽出していた場合は、こちらに記述しましょう。{%3}とかですかね。

サイト:Vivaldiのブラウザ専門ブログ – 最新ニュース、情報提供や Vivaldiの便利な使い方

本来は記事タイトルと記事リンクだけでいいのですが、以下のように抜粋分も抽出します。基本的には、「<p>~~</p>」で囲まれていると思います。

<h2 class="h4 entry-title"><a href="https://vivaldi.com/ja/blog/drop-big-tech-vivaldi-browser-and-lingvanex-bring-privacy-friendly-automatic-translations/">テキストを選択するだけでサイドパネルに翻訳を表示!言語学習にも便利なブラウザ内蔵の翻訳機能</a></h2><p class="date small">12月 2, 2021</p></header><div class="small"><p>デスクトップ版 Vivaldiに翻訳パネルが新登場。Vivaldi 5.0はデスクトップはもちろんノートパソコンでもご利用いただけます。</p>

抜粋分部分を削除せずに、{%}で置き換えます。

<h2 class="archive__title"><a class="archive__link" href="{%}">{%}</a></h2><p class="archive__excerpt">{%}</p> </div>

記事タイトル、記事リンク、抜粋分の3つ抽出するので、{%3}までのパラメーターが作成されます。

抜粋分を含めたClipped Data

それぞれの項目にパラメーターを割り当てます。上記サイトの場合、Item Content Templateは、{%3}になります。

「Preview」をクリックすると、抜粋分を含めたフィードが作成されます。

抜粋分を含めたフィードのプレビュー
2022年1月22日追記

コメント欄にて教えていただきました。

Item Content Templateに下記のようにHTMLタグで画像を表示すると、サムネイル画像を取得できます。

<img src="{%数字}">

ステップ2の「Define extraction rules」の時に、画像のリンクも取得しておく必要があります。

Item Content Templateに画像を表示するHTMLタグを記述する

実際にサムネイルを取得できているかどうかは、「Preview」で確認できます。

フィードのサムネイルを取得してくれる

spark gadgetだと、下記のようになります。

HTML変換前

data-layzr="https://i0.wp.com/plugin-blog.com/wp-content/uploads/2022/01/rakunew-サムネイル.png?fit=768%2C432&ssl=1" class="attachment-icatch768 size-icatch768 wp-post-image" alt="rakunew-サムネイル" /></a></div><div class="archive__contents"><ul class="dateList"> <li class="dateList__item icon-update">1月 16, 2022</li> </ul> <h2 class="heading heading-secondary"> <a href="https://plugin-blog.com/2022/01/13/rakunew-introduction/">海外クラウドファンディングが英語で困ってる方は海外通販「Rakunew」でガジェットを購入しよう!</a> </h2> <p class="phrase phrase-secondary">どうも、こんにちは、こんばんわ、最近、ネットで買ったガジェットの配達が鳴り止まない、ちむ(@timuuuuuu009)です。 そ […] </p> </div>

HTML変換後

data-layzr="{%}"{*}<li class="dateList__item icon-update">{%}</li> </ul> <h2 class="heading heading-secondary"> <a href="{%}">{%}</a> </h2> <p class="phrase phrase-secondary">{%}</p> </div>

Item Content Template

<img src="{%1}">

サムネイルサイズが大きい場合は、幅を指定して調整できます。

<img width=300px src="{%1}">

h2なども利用できます。

<img width=300px src="{%1}">
<h3>{%2}</h3>
{%5}
h2などのHTMLタグも利用できる

入力できたら、「Preview」をクリックします。フィードのプレビューが表示されます。ちゃんと記事タイトル、記事リンクごとになっていたら成功です。

Feed Preview

パラメーターの部分は、好きな固定文字と組み合わせることもできます。サイトタイトルを冒頭につけたり等できます。

アイテムパラメーターは文字とパラメーターを組み合わせれる

フィードの購読

プレビューを作成したら、ページ下に「Your feed is ready!」の項目が表示されます。「Feed URL」が実際のフィードURLです。

Your feed is ready! Feed URL

右クリック→リンクアドレスをコピーをクリックします。

フィードリーダーに登録します。「feedly」などで購読できます。

例として、Vivaldiに登録してみます。

アドレスの部分にコピーしたURLを貼り付けます。タイトルは、Feed43で設定したので空欄でOKです。

設定 フィード

Enterで登録すると、自動でタイトルが取得されます。

ニュースフィードアカウント

RSSの購読完了です。初回の購読時は、一気に過去記事が届きます。

Vivaldiのフィードリーダーには、サイトにアクセスしなくても記事内容を確認できる便利な機能が搭載されています。しかし、Feed43で作成した場合は、動作しないので気を付けてください。

あくまで記事タイトル、記事URLのみの取得です。

spark gadgetのフィード

感想

以上、RSS非対応サイトのフィードを作成できるサービスFeed43についてでした。

ブログやってると、ソフトの更新情報や、他の方のブログを通知してほしい時が結構あるので、非対応サイトでも購読できるのは便利です。

2021年12月26日Webサービス