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

    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>にFeedの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 < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var dd = new Date(entry.publishedDate); // now
    var yearNum = dd.getYear();
    if (yearNum < 2000) yearNum += 1900;
    var m = dd.getMonth() + 1;
    if (m < 10) {m = "0" + m;}
    var d = dd.getDate();
    if (d < 10) {d = "0" + d;}
    var date = yearNum + "." + m + "." + d + " ";
    container.innerHTML += "<li><span>" + date +" </span>" +"...<a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></li>";
    }
    }
    });
    }
    google.setOnLoadCallback(initialize);
    

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

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

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

    2.<head>~</head>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="feed1.jsまでのパス"></script>
    <script type="text/javascript" src="feed2.jsまでのパス"></script>
    <script type="text/javascript" src="feed3.jsまでのパス"></script>
    <script type="text/javascript" src="feed4.jsまでのパス"></script>
    <script type="text/javascript" src="feed5.jsまでのパス"></script>
    <script type="text/javascript" src="feed6.jsまでのパス"></script>
    

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

    3.<body>~</body>

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

    <ul id="feed1"></ul>
    <ul id="feed2"></ul>
    ・・・・以下略
    

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

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

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

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

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

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

    コメントはこちらから

    お名前は必須項目です。

    CAPTCHA


    画像を添付できます(JPEGだけ)

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください