YQL（Yahoo Query Language）を使うとJavaScriptで別ドメインにアクセスできる（livedoor天気APIのサンプル）

WebAPIなどにアクセスするためにJavaScriptを使うとき、通常、他のドメインへのアクセスはクロスドメインの制限によって出来ない（JSONPなどできる場合もあり）です。

このような場合、PHPなどサーバーサイドのプログラムを利用して他のドメインのサイトにアクセスして結果を得ることになります。

しかし、YQLを使うとJavaScript（jQuery）だけでYQLを介してWebAPIなど他のサイトにアクセスして結果を得ることできるようになります。

YQLとjQueryでlivedoor天気APIのデータを取得する例

YQLの使い方は、’select * from ○○ where ○○’というSQLと同じような構文を使用します。

実際にYQLを使いlivedoor天気APIにアクセスして結果が得られるか確かめます。YQL構文が間違いないか確かめるために、YQL Consoleページを開き下のYQL文をconsoleに入力します。

SELECT * FROM json WHERE url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=400040'

下のテキストエリアに上の構文を入力、［XML｜JSON］をJSONを選択して「Test」ボタンをクリックすると、テキストエリアの下にJSONデータが表示されます。

次にjQueryの$.getJSONを使い天気情報を取得します。下のコードでは、YahooAPIにアクセスしてYQL文で天気情報のデータを取得、それをjQueryで取得して単純な天気情報を表示しています。

$(function() {
	var ldWeather = {};
	var query = "SELECT * FROM json WHERE url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=400040'";
	$.getJSON("http://query.yahooapis.com/v1/public/yql?q="+query+"&format=json")
	.done(function(data) {
		IdWeather = data.query.results.json;
		IdWeatherNow = IdWeather.forecasts[0];
		$('.id-title').text(IdWeather.forecasts[0].dateLabel+"の天気 "+IdWeather.location.city);
		$('.id-img').append('<img src="'+IdWeatherNow.image.url+'" />');
	})
	.fail(function(data) {
		console.dir('data');
	});
});

下のHTMLで取得したデータを表示します。

<div class="id-title"></div>
<div class="id-img"></div>