RSSフィードをJSONとして受け取る方法~Google Feed APIの応用

JAVASCRIPT

最近富にAPIやらJSONやらに興味持ち出したゴロドクさんです、どうも。以前

RSSフィード指定するだけ!たった10分でアンテナサイトを作る方法

と言う記事でGoogle Feed Ajax APIの使い方紹介しましてRSSを取得してウェブに表示させるなんてことをやってみたんですが、実はこのAPIでJSONデータとしてRSSの内容を受け取れるってことをつい最近知りました、皆さんご存知でした?と言うわけでまた備忘録記事です。

httpリクエストで直接JSONを取得

まず結論を先に書いときます。Google Feed Ajax APIを通じてRSSをJSONデータに変換したものを取得するには



Error 404 (Not Found)!!1
フィードのURL&num=取得したい記事数

このような記述で呼び出すことが出来ます。numオプションで取得したい記事数を指定します。これはデフォルトでは4で現在のところ最大100記事分までとなっている様です。

ちなみにnumオプションに-1を指定すると取得可能な最大記事数となるので今後最大記事数が100記事分から増えたり減ったりしたときのために、最初から-1を指定しておくとラクかもしれません。

当ブログのRSSフィードのURLは「https://blog.56doc.net/RSS/」です。例としてこれをJSONデータとして取得してみましょう。numオプションは-1にとりあえずしときます。



Error 404 (Not Found)!!1

これをブラウザのURL入力欄にコピペするかこのリンクをクリックしてみてください。そこに表示されたのがJSONで出力されたデータです。JSON整形サービスを使って整形するとこんな感じになります。


{
"responseData": {
"feed": {
"author": "",
"description": "デザイン・アート・哲学・ニュース・ネタそして全然関係ないアレとかアレについて、ゴロドクさんが思いのままに書きつづるブログ。",
"entries": [
{
"author": "gorodoku",
"categories": [
"日々のゴロドク"
],
"content": "<p>PCキーボードのキーの中でもっとも愛されているキー、それがEnterキー(オレ調べ)。</p>
<p>今日はそんなEnterキーさんと戯れてみたいと思います。</p>
<img alt="" src="https://bfile.56doc.net/eyecatch109.png">",
"contentSnippet": "PCキーボードのキーの中でもっとも愛されているキー、それがEnterキー(オレ調べ)。
今日はそんなEnterキーさんと戯れてみたいと思います。
...",
"link": "https://blog.56doc.net/Entry/471/",
"publishedDate": "Fri, 30 Nov 2012 16:54:54 -0800",
"title": "Enterキー"
},
{
"author": "gorodoku",
"categories": [
"PHP/MySQL/javascript"
],
"content": "<p>ちょっとお勉強したことの備忘録。はてなブックマークに登録されたページの情報(タイトル、URL、ブックマーク数、コメントなど)をはてぶのAPIを利用してjavasciptで取得する方法を調べました。</p>",
"contentSnippet": "ちょっとお勉強したことの備忘録。はてなブックマークに登録されたページの情報(タイトル、URL、ブックマーク数、コメントなど)をはてぶのAPIを利用してjavasciptで取得する方法を調べました。...",
"link": "https://blog.56doc.net/Entry/470/",
"publishedDate": "Thu, 29 Nov 2012 22:51:02 -0800",
"title": "JSではてブのデータを取得してWebに表示させてみよう!"
},
{
"author": "gorodoku",
"categories": [
"日々のゴロドク"
],
"content": "<p>皆さんご存知の通り次回、第46回衆議院総選挙は2012年12月4日公示、同12月16日に投開票予定です。</p>
<p>選挙前ってことなんで各政党(国会で政党要件を満たしているもの)の公式Webページと、現在公開されている範囲での公約・政策のリストを挙げておきます。投票の(または投票しないことの)参考に。</p>",
"contentSnippet": "皆さんご存知の通り次回、第46回衆議院総選挙は2012年12月4日公示、同12月16日に投開票予定です。
選挙前ってことなんで各政党(国会で政党要件を満たしているもの)の公式Webページと、現在公開されている範囲での公約・政策のリストを挙げておきます。投票",
"link": "https://blog.56doc.net/Entry/469/",
"publishedDate": "Wed, 28 Nov 2012 23:18:51 -0800",
"title": "2012年衆議院総選挙前に~各政党公式Webページと公約・政策のまとめ"
},
{
"author": "gorodoku",
"categories": [
"サーバー関連"
],
"content": "<p>需要があるかどうかわかりませんが、個人的にちょっと困ったことがあって調べものをしまして、ウェブ上のファイルに拡張子のないURLでアクセスする方法を知ったので備忘録残しておきます。</p>",
"contentSnippet": "需要があるかどうかわかりませんが、個人的にちょっと困ったことがあって調べものをしまして、ウェブ上のファイルに拡張子のないURLでアクセスする方法を知ったので備忘録残しておきます。...",
"link": "https://blog.56doc.net/Entry/468/",
"publishedDate": "Wed, 28 Nov 2012 16:49:15 -0800",
"title": "拡張子のないURLでページにアクセスさせる.htaccessのTips"
},
{
"author": "gorodoku",
"categories": [
"ネタ:動画"
],
"content": "<p>音楽ネタ動画。演奏や歌唱を多重録音したムービーとか結構あるんですがこれは久しぶりのヒットだと思います。</p>",
"contentSnippet": "音楽ネタ動画。演奏や歌唱を多重録音したムービーとか結構あるんですがこれは久しぶりのヒットだと思います。...",
"link": "https://blog.56doc.net/Entry/467/",
"publishedDate": "Tue, 27 Nov 2012 22:28:42 -0800",
"title": "1人でボヘミアン・ラプソディのカバーをしちゃった動画 クオリティ高し"
},
{
"author": "gorodoku",
"categories": [
"ブログの書き方・運営"
],
"content": "<p>無料ブログ大手<a href="http://blog.fc2.com/">FC2</a>がGoogle八分(記事がインデックスされず検索結果に表示されない)で大変なことになっている、という話題が昨日(2012年11月27日)あたりからチラホラ聞こえてきています。</p>
<p><a href="http://e0166.blog89.fc2.com/">ホームページを作る人のネタ帳</a>さんみたいに全然影響受けてない(「ネタ帳」でググると相変わらず1位に表示されます)ところもあるようですが、この辺のことを受けて無料ブログの利点欠点などを再確認してみましょうかと。</p>
<img alt="" src="https://bfile.56doc.net/eyecatch108.png">",
"contentSnippet": "無料ブログ大手FC2がGoogle八分(記事がインデックスされず検索結果に表示されない)で大変なことになっている、という話題が昨日(2012年11月27日)あたりからチラホラ聞こえてきています。
ホームページを作る人のネタ帳さんみたいに全然影響受けてない(",
"link": "https://blog.56doc.net/Entry/466/",
"publishedDate": "Tue, 27 Nov 2012 17:30:16 -0800",
"title": "使う?使わない?無料ブログサービスのメリット・デメリット"
},
{
"author": "gorodoku",
"categories": [
"ネタ:ウェブサイト"
],
"content": "<p>こないだたまたまTVつけてたら酒井法子の芸能界復帰会見やってました。</p>
<p>会見自体は内容はともあれごく普通の会見…のように見えたのですがしかし。</p>",
"contentSnippet": "こないだたまたまTVつけてたら酒井法子の芸能界復帰会見やってました。
会見自体は内容はともあれごく普通の会見…のように見えたのですがしかし。...",
"link": "https://blog.56doc.net/Entry/465/",
"publishedDate": "Mon, 26 Nov 2012 20:33:30 -0800",
"title": "【酒井法子】光の点滅にご注意ください【芸能界復帰会見】"
},
{
"author": "gorodoku",
"categories": [
"ソーシャルネットワーク"
],
"content": "<p><a href="https://blog.56doc.net/Entry/462/">ちょっと前の記事</a>でツイートの検索結果をRSSで取得できるよ、なんていいましたがAPI制限の変更でツイッターから直接RSS取得できるのはなんと2013年3月まで…と</p>
<p><a href="http://gigazine.net/news/20120907-twitter-api-rss/">TwitterからのRSS取得が2013年3月5日で打ち切りへ - GIGAZINE</a></p>
<p>という記事を読んで今さら気付きまして。いやもうすみません、本当にすみません確認不足で。で代替案の模索などをしてみたのですが。</p>",
"contentSnippet": "ちょっと前の記事でツイートの検索結果をRSSで取得できるよ、なんていいましたがAPI制限の変更でツイッターから直接RSS取得できるのはなんと2013年3月まで…と
TwitterからのRSS取得が2013年3月5日で打ち切りへ - ...",
"link": "https://blog.56doc.net/Entry/464/",
"publishedDate": "Sun, 25 Nov 2012 23:10:33 -0800",
"title": "ツイートのRSS取得、再び【TOPSY編】"
},
{
"author": "gorodoku",
"categories": [
"日々のゴロドク"
],
"content": "<p>ちょっとネガな話っていうか「これどうなのよ?」って気になったので一言だけ書き残しておく。ウェブサイトを公開する意味とかなんとか。</p>",
"contentSnippet": "ちょっとネガな話っていうか「これどうなのよ?」って気になったので一言だけ書き残しておく。ウェブサイトを公開する意味とかなんとか。...",
"link": "https://blog.56doc.net/Entry/463/",
"publishedDate": "Sun, 25 Nov 2012 18:12:07 -0800",
"title": "何のためにウェブサイトを公開してるんだろうね"
},
{
"author": "gorodoku",
"categories": [
"ソーシャルネットワーク"
],
"content": "<p>ツイッターの検索オペレーターで色んな検索方法があるってのは<a href="https://blog.56doc.net/Entry/221/">以前の記事</a>の記事にもかきました。で、毎度毎度ツイッターウェブ(またはクライアント)で検索条件指定して調べるのも大変なんですよね。</p>
<p>毎回同じ検索結果について取得したいならばツイッターの検索結果をRSSで取得するなんてのはどうでしょうか。一つの情報に関して定点観測するには便利だと思いますので。</p>",
"contentSnippet": "ツイッターの検索オペレーターで色んな検索方法があるってのは以前の記事の記事にもかきました。で、毎度毎度ツイッターウェブ(またはクライアント)で検索条件指定して調べるのも大変なんですよね。
毎回同じ検索結果について取得したいならばツイッターの検索結果をRSS",
"link": "https://blog.56doc.net/Entry/462/",
"publishedDate": "Thu, 22 Nov 2012 22:05:48 -0800",
"title": "ツイッターでの情報収集、検索結果をRSSで取得することもできるのょ"
}
],
"feedUrl": "https://blog.56doc.net/RSS/",
"link": "https://blog.56doc.net/",
"title": "56docブログ",
"type": "rss10"
}
},
"responseDetails": null,
"responseStatus": 200
}

長くてゴメン。contentやcontentSnippetは全部タグ付で拾われるんですな。

ちょっとしたサンプルなど

JSONで得たデータをjavascriptでアレコレする方法については我流ながら

JSではてブのデータを取得してWebに表示させてみよう!

こちらの記事で紹介してますのであわせて参考にしていただくとして。参考記事と同じような要領でコールバックで関数に渡してデータ加工~ウェブページに表示できるのかどうか試してみたのが以下のサンプルページ。はてぶほってんとりRSSをGoogle Feed Ajax APIを通じでJSONデータで取得しjavascriptで加工、ページに表示と言う流れです。

はてぶJSONデータ取得テスト

このページのソースはこれ。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="author" content="gorodoku">
<meta name="copyright" content="Copyright gorodoku">
<meta name="description" content="はてぶJSONデータ取得テストその2">
<meta name="keywords" content="はてぶ、JSON">
<script type="text/javascript">
function displayResult(data){
var feeds = data.responseData.feed;
var list = document.getElementById('list');
var container ='<h1>' + feeds.title + '</h1>';
for (var i = 0; i < feeds.entries.length; i++) {
container += '<div><p>' + feeds.entries[i].title + '【' + feeds.entries[i].categories + '】' + feeds.entries[i].publishedDate + '</p><p>' + feeds.entries[i].content + '</p></div>';
}
list.innerHTML=container;
}
</script>
<title>はてぶJSONデータ取得テスト</title>
</head>
<body>
   <div id="list"></div>
</div>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/hatena/b/hotentry&num=-1&callback=displayResult"></script>
</body>
</html>

いかがでしょうか。流れは参考記事と似てると思うので既読の方はだいたい理解できるんじゃないでしょうか。テキトーに書いてるんで色々指摘は有るかと思いますが…

まとめ

というわけでRSSをJSONオブジェクトとして扱う方法のご紹介でした。今回はGoogle Feed AJAX APIでってことでしたがYahoo!Pipesでももしかしたら同じようなことが出来るかもしれない。未確認ですけど。

JSONだAPIだってのも私もごく最近いじり始めたんで分からんことだらけですが、調べるといろんなことができて楽しそうです。この流れでWebサービスの習作の一つでも作れると良いんですけど。

んじゃまた。

コメント

タイトルとURLをコピーしました