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の値を上書きしています。
テンプレートの機能を活用すれば、もっと簡単にできるかもしれませんが、今回はこのような方法で実現しました。
最後に
サイトのトップページでは、この方法でブログの更新情報を表示しています。
参考になれば幸いです。
Google Feed APIが終了し途方に暮れていたところ、このページを見つけ参考にさせていただきました。
質問なのですが、rssのurlがfeedで終わる場合には教えていただいた方法で表示されるのですが、rdfで終わる場合には表示されません。
http://○○/feed （表示される）
http://☓☓/index.rdf （表示されない）
といった具合です。
何かまた別の操作が必要なのでしょうか？
よろしければお教え下さい。
RDFから更新情報を表示するサンプルコードを掲載しました。
http://www.gesource.jp/weblog/?p=7641
お世話になります。大変助かりました。ありがとうございます。
無事表示できたのですが、表示件数を指定することは可能でしょうか。
爆速YQLはテンプレートにmustache.jsを使っているので、テンプレートを編集して対応できるかもしれません。
YQLを直接記述する方法もあるかと思います。