RSSをjavaScriptで取得して表示したいんだよね～

なるほど。
まぁAjaxでデータ引っ張って来て
ゴニョゴニョすれば出来るっぽそう…
よし！一丁やってやるか！

ちなみに今回のRSSのフォーマットはrss2.0です。

AjaxでRSSを取得する。

AjaxでRSSのデータを取得するわけですが、注意点が一つ。

他のドメインのRSSは取得出来ない場合がある

ということです。
コレはクロス・オリジン・リソース・シェアリング(CORS)という通信をブラウザが許可しないためです。
CORSの禁止を回避する方法は色々あるので、ググって下さい。
同じドメインのRSSを取得するのは特に問題はありません！

let xhr=new XMLHttpRequest();

xhr.open(`GET`,rss_url);
xhr.responseType=`document`;
xhr.send();

xhr.onload=()=>{
  rss_data=xhr.response;
};

こんな感じでxhrを用いてajaxを書いていきます。
RSSのデータはdocument型なので注意！

RSSのdomを操作する。

まずはRSSのxmlの簡単な構造の説明をします。
RSSはのデータは<channel>というタグで囲まれています。
<channel>にはRSSの<title>タグや<link>タグなどのヘッダ的な情報と
<item>タグというRSSの項目データが格納されています。

取得したRSSのデータはdocument型なのでdom操作が可能です。
なので

let items=rss_data.getElementsByTagName(`item`);

と書けばRSS内のitemタグのdomを取得出来ます。
item内のタイトルや更新日を取得したい場合は更に

let title=items[0].getElementsByTagName(`title`).textContent;
let date=new Date(items[0].getElementsByTagName(`pubDate`).textContent);

と書けばそれぞれ取得出来ます。

RSSのサムネイルを取得してみる。

もしブログ一覧のRSSの場合、表示する際にサムネイルも欲しいですよね？
でもRSSの<item>の中にはサムネイルの情報の項目はありません。

では一体どうすれば良いのか、というと
<item>内の<content>の内容の<img>タグを引っ張って来れば良いのです。

でも一つ問題があります。
<content>の内容はdomではなくtextです。
これではdom操作が出来ないので、dom操作するためにバッファ的な要素を作って
その要素に<content>の内容でdomを構成し、そこから操作して<img>タグを探します。

let content_text=items[0].getElementsByTagName(`content`).textContent; //contentの内容を取得
let buffer_dom=document.createElement(`div`); //バッファ的な要素の作成
buffer_dom.innerHTML=content_text; //contentの内容を元にバッファ要素にdomを構築
let thumbnail=buffer_dom.getElementsByTagName(`img`)[0].src; //最初のimgタグのsrcを取得

という感じで書くとサムネイル画像のurlが取得出来るので
後はお好きに煮るなり焼くなりしてください。

でもサムネイルで取得した画像は、ただの「コンテンツ内の初めの画像」ってだけなのでサイズがバラバラだと思います。
そこでサイズ感を統一させるために
<img>でサムネイルを表現するのではなく
<div>の背景画として以下のようにstyleを書いて表現すると見栄えが良いと思います。

.thumbnail_class{
  background:url(サムネイルのurl);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

編集後記

入社16日目
RSSの処理を任されたので色々調べてみました。
まぁ結局はdom操作なので難しいことは無い気がします。
ただRSSのバージョンによってRSSのdomが結構変わるみたいなので
色々対応は大変そうだなと思ったり、思わなかったり。

JavaScriptでRSSを扱ってみよう！

RSSをjavaScriptで取得して表示したいんだよね～

AjaxでRSSを取得する。

RSSのdomを操作する。

RSSのサムネイルを取得してみる。

編集後記