#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が結構変わるみたいなので
色々対応は大変そうだなと思ったり、思わなかったり。