Google Feed APIの代替手段と設定方法

Google Feed APIがもうすぐ終了します。

私のサイトには、Google Feed APIを使用してRSSから更新情報を取得し、表示しているページがありました。 Google Feed APIの代わりとなるサービスを調べ、乗り換えました。

乗り換え先として選んだサービスと、その設定方法を紹介します。

乗り換え先の条件

乗り換え先は次の条件を満たすものを探しました。

  • 無料で使用できること。
  • ブラウザだけで動作すること。サーバーサイドのプログラムは不要であること。
  • 一昔前のブラウザでも動作すること。最新技術に依存していないこと。

Yahoo!Japanの爆速YQL

選んだのが「Yahoo!Japanの爆速YQL」というサービスです。 上記の条件をすべて満たしており、使い方も簡単でした。

爆速YQLについては、次のページをご覧ください。

爆速YQLの使い方

基本となるひな形は次のようになります。

<html>
<body>

<script
  src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
  data-url="[RSSのURL]"
  data-p-[パラメータ名]="[値]">
  [HTMLのテンプレート]
</script>

</body>
</html>

scriptタグは、更新情報を表示したい場所に置きます。

URLを設定する

[RSSのURL]の部分には、実際のRSSのURLを設定します。

RSSのURLにパラメータが含まれている場合は、scriptタグの属性に「data-p-[パラメータ名]=”[値]”」を追加します。
パラメータがない場合は「data-p-[パラメータ名]」は不要です。

たとえば「山本隆の開発日誌」のRSSは、URLが「http://www.gesource.jp/weblog/?feed=rss2」です。
この場合、パラメータ名が「feed」、値が「rss2」となり、scriptタグは次のようになります。

<script
  src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
  data-url="http://www.gesource.jp/weblog/"
  data-p-feed="rss2">
  [HTMLのテンプレート]
</script>

デバッグモードで受信したデータを表示する

URLを正しく設定できたか確認します。

HTMLのテンプレートが空の時は、デバッグモードで動作し、取得されたデータが表示されます。

<script
  src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
  data-url="http://www.gesource.jp/weblog/"
  data-p-feed="rss2"></script>

scriptタグの位置に取得したデータが表示されると成功です。

{
"query": {
    "count": 1,
    …
  }
}

HTMLのテンプレートを設定する

次に、HTMLのテンプレートを設定します。

HTMLのテンプレートには「mustache」というライブラリが使用されているようです。
ですが、mustacheライブラリの詳細を知る必要はありません。
テンプレートで使用する機能は簡単なものです。

デバッグモードで確認したデータで表示したいデータを確認します。
「query.results.rss.channel.item」が記事の情報になっていました。
この部分を繰り返し表示します。

<script
  src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
  data-url="http://www.gesource.jp/weblog/"
  data-p-feed="rss2">
  <ul>
  {{#query.results.rss.channel.item}}
    <li>
      {{pubDate}}<br>
      <a href="{{link}}">{{title}}</a>
    </li>
  {{/query.results.rss.channel.item}}
  </ul>
</script>

テンプレートの中のHTMLタグはそのまま表示されます。
「{{」と「}}で囲んだ部分がjavaScriptで処理されるコードになります。

  {{#query.results.rss.channel.item}}
  …
  {{/query.results.rss.channel.item}}

と書くと、「query.results.rss.channel.item」のデータが繰り返し表示されます。

繰り返しの部分の中で「{{title}}」と書くと、「query.results.rss.channel.item」の「title」の値が表示されます。

「{{#~}}」「{{/~}}」で繰り返し、「{{~}}」で値の表示、これだけわかっていれば使えます。

テンプレートについて詳しく知りたい方は、次のページをご覧ください。

日付の書式を変更する

日付(pubDate)の値が「Thu, 15 Sep 2016 23:47:18 +0000」という形式になっています。
この形式を「2016年9月16日」と表示するように修正します。

scriptタグの属性に「data-filter=”filterRSS”」を追加します。
「data-filter=”関数名”」属性を追加すると、JavaScriptの関数が呼ばれようになります。
関数で受け取ったデータを修正できます。

<script
  src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
  data-url="http://www.gesource.jp/weblog/"
  data-p-feed="rss2"
  data-filter="filterRSS">
  <ul>
  {{#query.results.rss.channel.item}}
    <li>
      {{pubDate}}<br>
      <a href="{{link}}">{{title}}</a>
    </li>
  {{/query.results.rss.channel.item}}
  </ul>
</script>

「filterRSS」関数を作成します。

<script>
function filterRSS(data) {
    for (var i = 0; i < data.query.results.rss.channel.item.length; ++i) {
        var date = new Date(data.query.results.rss.channel.item[i].pubDate);
        data.query.results.rss.channel.item[i].pubDate = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
    }
    return data;
}
</script>

JavaScriptの「var date = new Date(文字列)」で日付の文字列からオブジェクトを作成し、puDateの値を上書きしています。

テンプレートの機能を活用すれば、もっと簡単にできるかもしれませんが、今回はこのような方法で実現しました。

最後に

サイトのトップページでは、この方法でブログの更新情報を表示しています。

参考になれば幸いです。

コメント

  1. Google Feed APIが終了し途方に暮れていたところ、このページを見つけ参考にさせていただきました。

    質問なのですが、rssのurlがfeedで終わる場合には教えていただいた方法で表示されるのですが、rdfで終わる場合には表示されません。
    http://○○/feed (表示される)
    http://☓☓/index.rdf (表示されない)
    といった具合です。

    何かまた別の操作が必要なのでしょうか?
    よろしければお教え下さい。

  2. お世話になります。大変助かりました。ありがとうございます。
    無事表示できたのですが、表示件数を指定することは可能でしょうか。

  3. 爆速YQLはテンプレートにmustache.jsを使っているので、テンプレートを編集して対応できるかもしれません。
    YQLを直接記述する方法もあるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です