demo

YQLコンソールでデータを確認してみる。

まずはYQLコンソールにアクセスしてどんなデータになるのか見てみましょう。

YQL Console

URLにアクセスするとこんな画面が表示されるはずです。

YQLコンソール画面

上部の「show tables」と書いてあるフィールドにYQLを入力します。
入力するコードはSQLのようにselect文を使用します。URLを指定してRSSを取得するにはこんな感じでいけます。

select * from rss where url='[feed url]’

[feed url]のところは当然ですが取得したいURLに置き換えてください。
Wordpressの場合「blogurl/feed」がRSSのURLになっています。このBlogを例にすると。「https://www.webopixel.net/feed」ですね。
入力したら「json」にチェックして「TEST」ボタンを押します。

YQL実行

問題がなければその下の「FORMATTED VIEW」にだだーっと取得した情報が表示されます。
見にくかったらその隣の「TREE VIEW」タブを選択すればツリー表示にして見やすく表示してくれます。

YQL取得結果

RSS情報を全部使いたいって場合はこれでいいんですが、たとえばタイトルとリンクURLだけ使いたいって場合は取得したいものだけを指定した方がスマートです。
「select *」を「select title,link」に変えます。

select title,link from rss where url='[feed url]’

jQueryで取得した情報を表示

ではYQLで変換してくれた情報を取得してみましょう。
まずhtmlで適当にマークアップしておきます。

html

		<div id="container">
			<h1>YQLでRSSをjsonで取得してjQueryで扱う。</h1>
			<div id="article"></div>
		</div>

「article」に取得したRSSを追加していきます。

javascript

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
		$(document).ready(function () {
			$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
			  q: "select title,link from rss where url='https://www.webopixel.net/feed'",
			  format: "json"
			}, function (json) {
				for(var i in json.query.results.item){
					$("#article").append("<p><a href='"+ json.query.results.item[i].link +"'>" + json.query.results.item[i].title + "</a></p>");
				}
			});
		});
		</script>

「q」というパラメートにコンソールで入力したYQL文を入力します。
これで表示できるはずです。
この方法なら例えばhtmlのトップページにブログの情報を表示することとかもできそうですね。（そのくらいならもっと良い方法があると思いますが……）

jsonの扱い方はこちらの記事も参考にしてみてください。

jQueryでjsonデータを扱ってみる【入門編】