<<	2024 / 10	>>
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

【jQuery】RSS（XML）の中身を表示してみよう

2015.05.29 14:00 | コメント(0) | 技術

この記事は最終更新日から1年以上が経過しています。

へい！パース！パース！

どうも、フットサルしてもパスをいただけないさつきさんです。
よく走るよ！

はい、今回はjQueryでXMLファイルを取得して、中身を取り出し見ようという企画。
XPath使えればいいのになあ、と思ってたら案の定ライブラリがありました。
興味のある方は公式ページへどうぞ。

今回私がやった方法はXPathを使用していません。
使ったほうがスマートに書けるなあ。

書いてるうちに誰向けの記事かわからなくなりました。
たぶん初級～中級くらいかな。
※PCでの閲覧推奨です。

最後にFC2ブログの「最新記事」プラグイン用のサンプルコードも記述しています。
よろしければ参考にしてください。

XMLファイルを読み込む

XMLファイルの読込にはAjaxを使用します。

$.ajax({

  url: 'https://megasatsuki.blog.fc2.com/?xml',

  type: 'get',

  dataType: 'xml',

  timeout: 5000,

  success: function(xml, status) {

    /* ここに取得したXMLを加工する処理を記述 */

  }

最低限のオプションしかつけてません。.ajaxのオプションについては、このへんを参考にしてください。

XMLファイルから必要な情報を取得する

上の方法でXMLが取得出来たら、あとは欲しい情報を探すだけですね。
当ブログのRSSはこんな感じです。
※なっがいので今回欲しい部分だけ抜き取って表示してます。

<?xml version="1.0" encoding="utf-8" ?>

<rdf:RDF xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="https://purl.org/rss/1.0/" 

			xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" 

			xmlns:cc="https://web.resource.org/cc/" xml:lang="ja">

<channel rdf:about="https://www.satsukisan.net/rss.xml">

（略）

</channel>

<item rdf:about="https://www.satsukisan.net/articles/159">

  <link>https://www.satsukisan.net/articles/159</link>

  <title>【DQMSL】プレイ37日目　新みんぼうイベント＆闘技炊き出し開始</title>

  <description> ひとぼうやることなしどうもエンペランさつきです。まおたまください。月曜にタマゴロンの隠れ家が終わり、ようやく何かイベントが来る・・・かと思いきやひとりでぼうけんには限定クエスト追加無し！今週も究極回すしかないのか・・・。さて、そんななか昨日らいなまが開催されましたね。今回はその内容のまとめと、みんなで冒険新イベントについて書いていきます。

  </description>

  <content:encoded>

    <![CDATA[ <strong style="font-size:150%;">ひとぼうやることなし</strong><br /><br />どうもエンペランさつきです。<br />まおたまください。<br /><br />月曜に<strong>タマゴロンの隠れ家</strong>が終わり、ようやく何かイベントが来る・・・<br />かと思いきやひとりでぼうけんには限定クエスト追加無し！<br />今週も究極回すしかないのか・・・。<br /><br />さて、そんななか昨日<strong>らいなま</strong>が開催されましたね。<br />今回はその内容のまとめと、みんなで冒険新イベントについて書いていきます。 ]]>

  </content:encoded>

  <dc:subject>DQMSL</dc:subject>

  <dc:date>2015-05-27T12:00:00+09:00</dc:date>

  <dc:creator>さつきさん</dc:creator>

  <dc:publisher>FC2-BLOG</dc:publisher>

</item>

（略）

</rdf:RDF>

ちょっとわかりづらいかなｗ
HTMLのお勉強をした方なら、少し違和感を持ち、少し親近感を覚えると思います。
XMLも結局はマークアップ言語なので、記述方法は似てますね。
上記方法で取得すると、パースされた状態で内容が返ってくるので、jQueryでのDOM操作も容易です。
んで、例えばこの中の<item>を取得したい！
という場合。

$.ajax({

  url: 'https://megasatsuki.blog.fc2.com/?xml',

  type: 'get',

  dataType: 'xml',

  timeout: 5000,

  success: function(xml, status) {

    if ( status != 'success' ) return;

    $(xml).find('item').each(function() {

       /* 例えばリンクを取得する場合 */

       var link = $(this).find('link').first();

    })

  }

})

通常のHTMLを操作する時と同様に扱うことができます。

ちなみに

Googleさんがこんな便利なプラグインを作ってくれてたりします。
単純にRSSフィードの取得だけが目的ならこっちのほうがお手軽ですねー。

RSSから最新記事一覧を作ってみた

FC2ブログ用の「最新記事」プラグインを作ってみました。
今PC版で左側に表示している「最新記事」みたいな形で出てきます。
使う人はいないだろうけど、ご自由にどうぞ。

こんな仕様

カテゴリごとに分けて表示
カテゴリ表示順は投稿日付降順
カテゴリ内記事の表示順は投稿日付降順
最新の記事のみ、投稿日時から24時間の間「New!」マークがつく

作った理由

もともとFC2公式から提供されている「最新記事」プラグインは
最新5件の記事タイトルとリンク先のみを取得し、
登録しているカテゴリ情報などは一切取得できなかった。
さらに、別のFC2が提供する変数で最新記事を取得しようとすると、
記事詳細ページでは所属しているカテゴリ内の最新記事が表示されてしまうため。

サンプルソース

長いので畳んでおきますね。
ソースを見る

<dl id="recent_entries" style="width:100%;margin:0;"></dl>

<script type="text/javascript">

var base = $('dl#recent_entries');

var base_date  = new Date();

base_date.setDate(base_date.getDate() - 1);



$.ajax({

  url: 'https://megasatsuki.blog.fc2.com/?xml',

  type: 'get',

  dataType: 'xml',

  timeout: 5000,

  success: function(xml, status) {

    if ( status != 'success' ) return;

    var i = 0;

    $(xml).find('item').each(function(){

      var link; var title; var category; var pre_date; var date;

      $(this).children().each(function(){

        var elem = $(this)[0];

        switch ( elem.tagName ) {

          case 'link':

            link = elem.innerHTML.replace('https://megasatsuki.blog.fc2.com', '');

            break;

          case 'title':

            title = elem.innerHTML.replace(/【.*】/, '');

            break;

          case 'dc:subject':

            category = elem.innerHTML;

            break;

          case 'dc:date':

            pre_date = new Date(elem.innerHTML);

            var month = ('0' + (pre_date.getMonth() + 1) ).slice(-2);

            var day   = pre_date.getDate();

            update    = new Date(pre_date.toLocaleString());

            date = month + '/' + day

            break;

        }

      })



      var target_category = base.find('dt[title="' + category + '"]').first();

      if ( target_category.length == 0 ) {

        base.append($('<dt>').addClass('recent_category').attr('title', category).append(category));

        var target_category = base.find('dt[title="' + category + '"]').first();

      }



      var parent = $('<dd>').attr('id', 'recent_' + i);

      if ( i == 0 && base_date <= update ) {

        parent.append($('<strong>').append('【' + date + '】'));

        parent.append($('<span>').append($('<a>').attr('href', link).append(title)));

        parent.append($('<strong>').css('color', '#f00').append(' New!'));

      } else {

        parent.append($('<strong>').append('【' + date + '】'));

        parent.append($('<span>').append($('<a>').attr('href', link).append(title)));

      }



      var categories = $('.recent_category');

      var node_set   = false;

      $.each(categories, function(idx, category) {

        var title = category.getAttribute('title')

        if ( node_set ) {

          var t = $('.recent_category[title="' + title + '"]');

          t.before(parent);

          node_set = false;

        }

        if ( title == target_category.attr('title') ) {

          if ( idx == categories.length - 1 ) {

            base.append(parent)

          } else {

            node_set = true;

          }

        }

      })

      i += 1;

    });

  }

})

</script>

今回は以上となりむぁす！
むんむん！

0いいね！

(´・ω・｀)何度も押してくれて嬉しいけど、一回きりなんだ。
(´・ω・｀)ごめんね？

関連タグ：jQuery FC2 最新記事 XML パース parse Ajax

技術の記事