• HOME
    • >
  • タグ: html

    • RSSフィードから更新タイトルと日付を取得して更新情報を表示する

    2014年8月1日 コメントをどうぞ

    htmlページなどに、ブログの更新情報を表示する方法をメモしておきます。

    当サイトでは、トップページ（htm）に、ブログやギャラリーの新規投稿記事のタイトルと日付が自動更新されるように設定しています（下図の赤線枠部分）。
    これはGoogleの提供するGoogle AJAX Feed APIを利用して、RSSフィードを読み込むというものです。

    toppage

    私が表示したい更新情報のスタイルは、

    日付 ..記事のタイトル

    とシンプルなものですが、取得したいRSSフィードは6個。数が多いので、スクリプトコードはhtmに直接記述せず、外部ファイルとして読み込むことにしました。

    私なりの手順は以下の通り。

    1. Feedを取得するコードを記述したJavaScriptファイルを6個作成し、一つのフォルダに入れる。
    2. 更新情報を表示したいhtmlページの<head>～</head>にGoogle AJAX Feed APIと6個のjsファイルを読み込むコードを記述する。
    3. 更新情報を表示したいページの<body>～</body>にＦｅｅｄのIDを記述。
    4. cssでレイアウトを整える。

    1.JavaScriptファイルのコード

    
// Feed1のコード
google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("表示させるRSSフィードのURL");
feed.setNumEntries(表示させたい件数);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed1");
for (var i = 0; i &amp;lt; result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum &amp;lt; 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m &amp;lt; 10) {m = "0" + m;}
var d = dd.getDate();
if (d &amp;lt; 10) {d = "0" + d;}
var date = yearNum + "." + m + "." + d + " ";
container.innerHTML += "&amp;lt;li&amp;gt;&amp;lt;span&amp;gt;" + date +" &amp;lt;/span&amp;gt;" +"...&amp;lt;a href='" + entry.link + "' target='_blank'&amp;gt;" + entry.title + "&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;";
}
}
});
}
google.setOnLoadCallback(initialize);

    

    上記のコードの「表示させるRSSフィードのURL」とｆｅｅｄのIDナンバー部分を2,3,4・・・と書き換えて、6個のJavaScriptファイルを作成。
    

    　　　　IDナンバーは、ここを書き換える。↓
    
google.load(“feeds”, “2“);
    
var container = document.getElementById(“feed2“);
    

    それぞれfeed1.js、feed2.js・・・と名前を付けてフォルダに保存する。フォルダ名はjsとした。
    

    2.<head>～</head>
    

    &amp;lt;script type="text/javascript" src="http://www.google.com/jsapi"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type="text/javascript" src="feed1.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type="text/javascript" src="feed2.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type="text/javascript" src="feed3.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type="text/javascript" src="feed4.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type="text/javascript" src="feed5.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type="text/javascript" src="feed6.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;

    

    ｈｔｍの<head>部分に、外部ファイルを読み込むコードを記述します。
    

    3.<body>～</body>
    

    <body>部分の更新情報を表示したい箇所にFeedのIDを記述します。
    

    &amp;lt;ul id="feed1"&amp;gt;&amp;lt;/ul&amp;gt;
&amp;lt;ul id="feed2"&amp;gt;&amp;lt;/ul&amp;gt;
・・・・以下略

    

    4.cssでレイアウトを整える。
    

    必要に応じて、cssでレイアウトを整えます。
    

     下記のサイトを参照させていただきました。
    

    参照したサイト：「サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。」（http://webimemo.com/web/3873）
    

    日付やタイトルだけでなく、 記事内容や概要、画像なども表示したい場合は下記サイトを参考にされるといいと思います。
    

    「ブログのRSSを読み込んで新着記事を表示！Google AJAX APIを使ってみました」（http://kana-lier.com/javascript/google_ajax_rssfeed/）