6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでRSSを扱ってみよう!

Posted at

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

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?