WEBデザイン アイデア スクリプト

ブログのタイトル一覧をリンク付きでリスト表示するJavaScript(jQueryは使う)

2018年11月27日

WordPressに限らず、アメブロでもライブドアブログでも、RSSフィードを出力するブログであれば大抵のブログのリストを取得して静的HTMLにもJavaScriptでインデックス表示させることができます。

サンプル

<div id="feed_block"></div>
<!--feed_block という名前の空要素を作っておく-->

<script>
//jquery使用しますので読み込んでおいてください
$.ajax({
  url: 'rss.php',//取得するRSSフィードのURLを記述①
  type: 'get',
  dataType: 'xml',
  timeout: 200000,
  success: function(xml, status) {
    if (status === 'success') {
      var row = 0;
      var data = [];
      var nodeName;
      $(xml).find('item').each(function() {
        data[row] = {};

        $(this).children().each(function() { // RSSから子要素を取得する
          nodeName = $(this)[0].nodeName; // 要素名を定義
          data[row][nodeName] = {}; // 配列のnodenameをキーににして初期化
          attributes = $(this)[0].attributes; // 属性を取得

          for (var i in attributes) {
            data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
          }
          data[row][nodeName]['text'] = $(this).text();//'text'という要素に値をセット
        });
        row++;
      });

      $('#feed_block').wrapInner('<dl></dl>');//feed_block内に dlタグをセット
      icount=0;
      for (i in data) {
        //日付を取得し年月日を整形
        var publishedDate = data[i].pubDate.text;
        var pubDD = new Date(publishedDate);
        yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
        mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
        var pubDate = yy +'.'+ mm +'.'+ dd;//日付を整形しpubDateにセット

        //feed_blockの dlタグ内に dt , ddタグで日付とタイトル・リンクを追加
        $('#feed_block').find('dl').append('<dt>' + pubDate + '</dt><dd><a href="' + data[i].link.text + '">' + data[i].title.text + '</a></dd>');
        icount++;
        if(icount >= 5){//表示するリストの数
          break;
        }
      }
    }
  }
});
</script>

解説

上記サンプルの7行目

url: 'rss.php',//取得するRSSフィードのURLを記述①

取得するRSSフィードのURLですが、同一ドメイン内であれば直接Ajaxで取得できますので、https://~で始まるRSSフィードを直接記入してください。
アメブロなどの外部ブログでは外部ドメインになるため取得できないので、同一ドメイン内にRSS取得用のPHPファイルを設置して、そのPHP内で外部ブログのRSSを取得します。
そのrss.phpの中身がこちら(アメブロの場合)

<?php
echo file_get_contents('http://rssblog.ameba.jp/ブログの名前/rss20.xml');
?>

このphpファイルを読み込むことで、外部ブログのRSSフィードを読み込めます。

RSSフィードはXML形式ですので、jQueryのXMLを扱う関数を用いて、JavaScript配列に取り込み、データ整形して先にセットした<div id="feed_block">にdlタグでHTMLセットするという仕組みです。
(各JavaScript関数等についてはリファレンスを参照してください)

RSSフィードのXMLタグについては各ブログのRSSによりタグネームが異なりますので、日付・タイトル・記事URLの取得タグはそれぞれで変更してください。

#feed_block と その仮想の dl dt dd を CSSで表示調整すれば完成です。

-WEBデザイン, アイデア, スクリプト

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.