fetchでxml(rss2.0)をパースする

WordPress Blogのfeedをjavascriptで扱いたい。

feedをjsonで返すプラグインなんてのもあったんですが、今後のことも考えて使う側でどうにかしたいと思います。

jQueryの$.parseXML()を使うとかなり楽ですが、できればもうjQueryにはかかわらないようにしたい。

fetch APIを使ってXMLを処理してみます。

パース処理

const parser = new DOMParser();
fetch("https://blog.narumium.net/feed")
  .then(res => res.text())
  .then(txt => parser.parseFromString(txt, "text/xml"))
  .then(doc => doc.querySelectorAll("item"))
  .then(items => {
    ... //後処理
  });

const parser = new DOMParser();

fetch("https://blog.narumium.net/feed")

.then(res => res.text())

.then(txt => parser.parseFromString(txt, "text/xml"))

.then(doc => doc.querySelectorAll("item"))

.then(items => {

... //後処理

});

res => res.text() ← fetchで得られるResponseでxml()みたいなものがあればよかったんですが、そんなものはないのでtext()で文字列にします。

txt => parser.parseFromString(txt, "text/xml") ← DOMParserでxmlにパース。

doc => doc.querySelectorAll("item") ← XMLからitemをすべて抜き出す。

（ところでこういう処理だとasync / awaitよりもthenチェーンの方が見やすい気がする。）

パース後の抽出処理

後処理はXMLの中身次第ですがワードプレスのフィードを例に書いてみます。

まずはNodeListをArrayにしてmap()処理します。

(list.forEachでもいいんですがArray処理に慣れた今いちいち書くのがめんどい)

  .then(items =>
    Array.from(items).map(item => {
      ...
    })
  );

.then(items =>

Array.from(items).map(item => {

...

})

);

このitemのitem.innerHTMLから必要な情報を取ってまわるわけですが結構面倒。

//外にテキスト取得用関数を作っておく（別になくてもいい）
const text = node => node.textContent || node.innerText;
...

const title = text(item.querySelector("title"));
const date = new Date(
  text(item.querySelector("pubDate"))
).toLocaleString();
const link = text(item.querySelector("link"));
const _c = parser
  .parseFromString(item.querySelector("encoded").innerHTML, "text/html")
  .querySelector("body");
let thumb = null;
let _t = _c.querySelector("url");
if (_t) {
  thumb = _t.innerText;
  _c.removeChild(_t);
}
const content = text(_c).slice(0, 100);
return {
  title,
  date,
  link,
  content,
  thumb
};

//外にテキスト取得用関数を作っておく（別になくてもいい）

const text = node => node.textContent || node.innerText;

...

const title = text(item.querySelector("title"));

const date = new Date(

text(item.querySelector("pubDate"))

).toLocaleString();

const link = text(item.querySelector("link"));

const _c = parser

.parseFromString(item.querySelector("encoded").innerHTML, "text/html")

.querySelector("body");

let thumb = null;

let _t = _c.querySelector("url");

if (_t) {

thumb = _t.innerText;

_c.removeChild(_t);

}

const content = text(_c).slice(0, 100);

return {

title,

date,

link,

content,

thumb

};

特に本文<content:encoded>はhtmlだとquerySelector("content\\:encoded")で取れるのにxmlだとquerySelector("encoded")でないといけないのはハマった。

中身もよくわからないことになっていたので追加でパースしないといけないし。

また本文中にサムネイルURLが含まれるため<url>があれば別途保存してノードから取り除くみたいな泥臭い処理になってしまいました。

Array.map内の処理なので上処理の返値の配列が返ってきます。

色々不格好ではありますがとりあえず必要な情報をjsonで取得できました。

追記：サムネイルについて

なんかほかでサムネイル取得できないなと思ったら、通常のフィードにサムネイルURLがないため自分のブログでは追加してました。

function post_thumbnail_in_feeds($content) {
global $post;
$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
if(has_post_thumbnail($post->ID)) {
  $content = '<image><url>' . $image_url[0] . '</url></image>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'post_thumbnail_in_feeds');
add_filter('the_content_feed', 'post_thumbnail_in_feeds');

function post_thumbnail_in_feeds($content) {

global $post;

$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');

if(has_post_thumbnail($post->ID)) {

$content = '<image><url>' . $image_url[0] . '</url></image>' . $content;

}

return $content;

}

add_filter('the_excerpt_rss', 'post_thumbnail_in_feeds');

add_filter('the_content_feed', 'post_thumbnail_in_feeds');

ノーマルなフィードの場合はthumbの部分は除いてください。

パース処理

パース後の抽出処理

追記：サムネイルについて

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル