<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>YQL &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/yql/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Tue, 24 Dec 2013 01:33:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>&#034;YQL&#034; &#8211; Alphabetical Advent Calendar 2013</title>
		<link>https://blog.mach3.jp/2013/12/24/jaac2013-y-yql.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 24 Dec 2013 01:33:27 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[Advent Calendar 2013]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Yahoo]]></category>
		<category><![CDATA[YQL]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=3791</guid>

					<description><![CDATA[&#8220;Y&#8221; は YQL の &#8220;Y&#8221;。 YQL (Yahoo Query Language) YQL（Yahoo Query Language） は Yahoo が提供する開発者 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>&#8220;Y&#8221; は YQL の &#8220;Y&#8221;。</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh4.googleusercontent.com/-wXGTXbO5yNs/UqR4nPMXEdI/AAAAAAAACYg/yIffyPI1E1k/s400/ac2013-y.png" alt="Y"/></figure>



<p></p>



<span id="more-3791"></span>



<h2 class="wp-block-heading">YQL (Yahoo Query Language)</h2>



<p><a href="http://developer.yahoo.com/yql/">YQL（Yahoo Query Language）</a> は Yahoo が提供する開発者向けのAPIで、 SQLライクなクエリを送ると様々な情報を取得する事が出来るサービスです。 受け取るデータは XML か JSON かを選択可能で、 JSONPにも対応しているのでクライアントJavaScriptからも簡単に利用できます。</p>



<p>例えば場所情報や地域の天気情報を取得したり、 Flickr から写真を検索したり、Webページのフィードを取得したりする事等が出来ます。</p>



<h3 class="wp-block-heading">利用方法</h3>



<p>パブリックAPIのエンドポイントは <strong>http://query.yahooapis.com/v1/public/yql</strong> です。 パラメータは、形式を指定する <strong>format</strong> 、クエリを送る <strong>q</strong>、JSONPのコールバック用の <strong>callback</strong> を渡す事ができます。 次のようなリクエストを送る事になりますね。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">http:<span class="hljs-comment">//query.yahooapis.com/v1/public/yql?format=json&amp;q=&#91;YQLクエリ]&amp;callback=&#91;コールバック関数]</span>
</code></span></pre>


<p>YQL の書き方については、公式の Yahoo Developper Network でテスト出来るコンソールを用意しているので、 どんな書式でどんな情報が得られるかを試してみると良いですね。</p>



<ul class="wp-block-list">
<li><a href="http://developer.yahoo.com/yql/console/">YQL Console: show tables</a></li>
</ul>



<p>テーブルによっては別途アプリケーションIDが必要です。 また、Flickr 関連のテーブルは flickr で登録したアプリケーションIDが必要な様です。</p>



<h3 class="wp-block-heading">位置情報から天気情報を取得してみる</h3>



<p>天気情報は <strong>weather.forecast</strong> から取得できますが、位置情報の指定に <strong>woeid</strong> という者が必要になります。 <a href="http://developer.yahoo.com/geo/geoplanet/guide/concepts.html">woeid</a> というのは &#8220;Where On Earth Identifier&#8221; の事で、 全世界の地域ごとに ID を振って管理をしています。</p>



<p>woeid は、<strong>geo.places</strong> テーブルから都市名で引く事が出来ます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">SELECT woeid FROM geo.places WHERE text = <span class="hljs-string">'神奈川県横浜市'</span>
</code></span></pre>


<p>そこで得られた woeid を使って、天気情報を引きます。ちなみに神奈川県横浜市の woeid は 1118550 です。</p>


<pre class="wp-block-code"><span><code class="hljs">SELECT * FROM weather.forecast WHERE woeid = 1118550
</code></span></pre>


<p>一通りの処理を jQuery で書いてみましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> rest = <span class="hljs-string">"http://query.yahooapis.com/v1/public/yql"</span>;

$.ajax({
    <span class="hljs-attr">dataType</span>: <span class="hljs-string">"jsonp"</span>,
    <span class="hljs-attr">url</span>: rest,
    <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">format</span>: <span class="hljs-string">"json"</span>,
        <span class="hljs-attr">q</span>: <span class="hljs-string">"SELECT woeid FROM geo.places WHERE text = '神奈川県横浜市'"</span>
    }
})
.then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
    <span class="hljs-keyword">var</span> woeid = data.query.results.place.woeid;
    <span class="hljs-keyword">return</span> $.ajax({
        <span class="hljs-attr">dataType</span>: <span class="hljs-string">"jsonp"</span>,
        <span class="hljs-attr">url</span>: rest,
        <span class="hljs-attr">data</span>: {
            <span class="hljs-attr">format</span>: <span class="hljs-string">"json"</span>,
            <span class="hljs-attr">q</span>: <span class="hljs-string">"SELECT * FROM weather.forecast WHERE woeid = "</span> + woeid
        }
    });
})
.then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
    $(<span class="hljs-string">"#widget-weather"</span>).html(data.query.results.channel.item.description);
});
</code></span></pre>


<p>結果のデータを辿って得られる <strong>description</strong> には出力用のHTMLが格納されているので、 それをそのままコンテナに表示しています。 ただ、内容は全て英語で温度の単位も華氏なので、実際に使う時は翻訳や換算をしてあげないといけません。</p>



<h3 class="wp-block-heading">RSSフィードを利用する</h3>



<p>YQL の <strong>feed</strong> テーブルでは、Web上にあるRSSフィードをJSONに変換して返す事が出来ます。 試しにJSONPで Mach3.laBlog のフィードを取得してみようと思います。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> query = <span class="hljs-string">"SELECT * FROM feed WHERE url = 'https://blog.mach3.jp/feed'"</span>;
<span class="hljs-keyword">var</span> rest = <span class="hljs-string">"http://query.yahooapis.com/v1/public/yql"</span>;

$.ajax({
    <span class="hljs-attr">dataType</span>: <span class="hljs-string">"jsonp"</span>,
    <span class="hljs-attr">url</span>: rest,
    <span class="hljs-attr">data</span>: { <span class="hljs-attr">format</span>: <span class="hljs-string">"json"</span>, <span class="hljs-attr">q</span>: query }
})
.then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
    <span class="hljs-built_in">console</span>.log(data); <span class="hljs-comment">// フィードのデータ出力</span>
});
</code></span></pre>


<p>自サイトのフィードを読む分には特に必要ないですが、クロスドメインでRSSを引っ張りたい時や、 サービスのAPIがXMLしか対応していない場合などに使えます。 勿論、利用規約はそのソースを提供しているコンテンツプロバイダの物に従う事になるので、 それに則って正しく利用しましょう。</p>



<h2 class="wp-block-heading">爆速YQL</h2>



<p>Yahoo! Japan デベロッパーネットワークのブログで <strong>「爆速YQL」</strong> なる物が紹介されていました。 これは何かというと、YQLの結果取得と出力をブログパーツのような感覚で出来てしまうコンポーネントです。</p>



<ul class="wp-block-list">
<li><a href="http://techblog.yahoo.co.jp/programming/bakusoku-yql/">XMLのWebAPIを爆速で使いこなせるフレームワーク &#8211; Yahoo! JAPAN Tech Blog</a></li>
</ul>



<p>上で挙げたフィードの取得を試してみましょう。なるほどこれは爆速です。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"</span>
    <span class="hljs-attr">data-yql</span>=<span class="hljs-string">"SELECT * FROM feed WHERE url='https://blog.mach3.jp/feed'"</span>&gt;</span><span class="handlebars"><span class="xml">
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
    </span><span class="hljs-template-tag">{{#<span class="hljs-name">query</span>.results.item}}</span><span class="xml">
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{link}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span></span><span class="hljs-template-variable">{{title}}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    </span><span class="hljs-template-tag">{{/<span class="hljs-name">query</span>.results.item}}</span><span class="xml">
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></span></pre>


<p>script 要素の <strong>data-yql</strong> 属性に YQL のクエリを入力すると、 要素内のビューを使ってコンテンツを表示します。 ビュー部分には <a href="http://mustache.github.io/">Mustache</a> を採用しており、ループや条件分岐等もする事ができます。</p>



<p>こういう形でのウィジェットの公開も良いですね。</p>



<h2 class="wp-block-heading">参考資料</h2>



<ul class="wp-block-list">
<li><a href="http://developer.yahoo.com/yql/">Yahoo! Query Language &#8211; YDN</a></li>



<li><a href="http://developer.yahoo.com/yql/console/">YQL Console: show tables</a></li>



<li><a href="http://techblog.yahoo.co.jp/programming/bakusoku-yql/">XMLのWebAPIを爆速で使いこなせるフレームワーク &#8211; Yahoo! JAPAN Tech Blog</a></li>
</ul>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
