Google AJAX Feed APIでRSSフィードの日付も表示

以前「Google AJAX Feed APIでRSSフィードを表示」とうことでRSSフィードを表示する方法を紹介しましたが、今回は日付を付けて表示する方法です。「FC2ブログでその記事が属するカテゴリの最新記事一覧を表示」にも応用できますのでぜひご活用ください。
どうなるかというと下のように日付が表示されます。
上のサンプルのソースはこんな感じです。
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI キー"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("フィードのアドレス");
    feed.setNumEntries(10);
    feed.load(function(result) {
      if (!result.error) {
        var container = document.getElementById("feed");
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var div = document.createElement("li");
          var a = document.createElement("a");
          a.href = entry.link;
          a.target = "_blank" ;
          var date = new Date(entry.publishedDate);
          a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")"  ));
          div.appendChild(a);
          container.appendChild(div);
        }
      }
    });
  }
  google.setOnLoadCallback(initialize);

</script>
<div id="feed"></div>
まずvar date = new Date(entry.publishedDate);で日付を取得し変数dateに挿入します。しかし、このままだとdateは以下のようになってしまいます。
Sat Apr 11 2009 22:12:24 GMT+0900
非常に分かりにくいですね。ってことで表示したい形に変更します。今回のサンプルでは以下のようにして上のdateから年月日を取得しています。
date.toLocaleDateString() 例: 2009年4月12日
赤の部分のtoLocaleDateString()を変更するとこで様々な形で表示することができます。例として使えそうなものを紹介します。
  • getFullYear() : 西暦を返します。
  • getMonth() : 月を返す。返される値は0~11なので実際より1少ない。
  • getDate() : 日付(1~31)を取得する。
  • getDay() : 曜日を取得する。
  • getHours() : 時間(0~23)を取得する。
  • getMinutes() : 分(0~59)を取得する。
  • getSeconds() : 秒(0~59)を取得する。
  • これらを組み合わせると自由に表示することができます。ただ、月数が実際より1つ少なく表示されるなど面倒だという場合は次を使うと便利です。
  • toDateString() 例:Sun Mar 1 2009
  • toLocaleString() 例:2009年3月1日 13:39:03
  • toLocaleDateString() 例:2009年3月1日
  • やはりこちらの方が便利ですね。
    フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント
    getSeconds() getMinutes() 逆では?
    【2014/01/09 15:00】 | 通りすがり #- | [edit]
    通りすがり さん

    ご指摘ありがとうございます。

    修正させていただきました。
    【2014/01/17 05:38】 | 管理人 #E2ywrYdA | [edit]









    ※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

    Recent Entry
    Popular Entry
    • このエントリーをはてなブックマークに追加