Site icon Tips Note by TAM

【Google Feed API】フィードを読み込む（お手軽版）

chinen

Google Feed APIを使うことで、他のブログのフィードを表示させることができます。
PHPが使えない状況でも、JSだけで実装できるところが便利です。
現在は、APIキーの取得は必要無いようです。

今後も使い回しやすいように、
調べたものを自分なりに整理しました。

　
■サンプルHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST html5</title>
</head>
<body>

<h1>フィードの表示テスト</h1>

<div id="feed"></div>

<script src="//www.google.com/jsapi"></script>
<script src="js/feed.js"></script>
</body>
</html>

　
APIと表示用のJSを読み込みます。
id="feed"の中に結果を表示します。
　
　
■javascript
feed.jsの内容はこちらです。

google.load("feeds", "1");
function initialize() {
  var url = "https://www.tam-tam.co.jp/tipsnote/feed/"; //フィードURL
  var num = 3; //フィードを読み込む数
  var content = document.getElementById('feed');//フィード表示場所のID名

  //キャッシュ対策
  var d = new Date();
  var q = d.getMonth()+""+d.getDate()+""+d.getHours();
  var path = new Array(url + "?" + q); //フィードURL+キャッシュ対策

  var html =""; //表示用HTMLの準備

  var feed = new google.feeds.Feed(path);
  feed.setNumEntries(num);
  feed.load(function　(result) {
    if (!result.error) {

      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var title = entry.title; //タイトル取得
        var link = entry.link; //URL取得
        var day = new Date(entry.publishedDate); //日付取得
        //日付の整理
        var y = day.getYear();
          if (y < 2000) y += 1900;
        var m = day.getMonth() + 1;
          if (m < 10) {m = "0" + m;}
        var d = day.getDate();
          if (d < 10) {d = "0" + d;}
        var date = y + "."+ m +"."+ d;

        //記事表示用HTMLを格納
        html += '<p><a href="' + link + '">' + date + title + '</a></p>';
      }
      content.innerHTML = html;　//指定したID内に出力
    }　else　{
      alert(result.error.code + ":" + result.error.message);
    }
  });
}
google.setOnLoadCallback(initialize);

　
※編集箇所
3行目：読み込むフィードのurlを入れます。別ドメインの指定も可能です。
4行目：表示したい件数を指定します。
5行目：表示場所のIDを入れます。今回は　id="feed"　を指定しています。
　
記事タイトル＝title、公開日＝date、リンクURL＝linkという変数にしているので、
表示したいHTMLに合わせて、34行目を調整します。
　
今回のHTMLは以下を想定しています。

<p><a href="URL">日付タイトル</a></p>

　

■出力結果　
上記サンプルで id="feed" に表示されるHTMLがこちらです。

<div id="feed">
<p><a href="https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html">2014.05.28【jQuery】シングルページでナビゲーションに現在地を表示する</a></p>
<p><a href="https://www.tam-tam.co.jp/tipsnote/javascript/post4913.html">2014.05.22D3.jsの使い方とグラフを作成するサンプル</a></p>
<p><a href="https://www.tam-tam.co.jp/tipsnote/html_css/post4881.html">2014.05.14CSS3 Transitionsを使ってみました。</a></p>
</div>

　
お手軽に日付とタイトルのテキストリンクだけを表示するので良ければ
そのまま使い回せると思います。
　
　
他にも、記事の本文や概要なども取得することができ、
21行目に取得したい項目を追加して変数にしておくことで、
34行目の表示用HTML部分が編集しやすくなると思います。

プロパティの種類については、以下の記事でわかりやすくまとめられています。

　
【その他参考サイト】