More than 5 years have passed since last update.

Google Feed API から YQL API へ移行したお話

Last updated at2019-01-09Posted at 2016-11-07

〈追記 2019年1月〉残念ながらYQL終了のアナウンスがありました。

On Jan. 3, 2019, YQL service athttp://query.yahooapis.com will be retired. YQL based services that usehttp://query.yahooapis.com, including users ofhttp://datatables.org, will no longer operate. Yahoo Weather API users see the tweet below for info about continuing your service.
— Y! Developer Network (@ydn)December 31, 2018

とっても便利だった Google Feed API ですが、復活劇（猶予期間の延長）を経て2016年12月15日以降は動かなくなるとのアナウンスがありました。

外部ブログのフィードを埋め込んでいるサイトをどうしようかと「google feed api alternative」でググると「Use Yahoo's YQL API」とのアドバイスをみつけたので、YQL API について調べてみました。

ちなみに、「google feed api 代替」でググると

有志が作成されたライブラリを使う
Googleスプレッドシートを使う
PHPでがんばる

などの選択肢があがっていました。

流れ

YQL (Yahoo Query Language) とは
YQL API について調べる
Google Feed API から YQL API へ
表示の調整とか

1. YQL (Yahoo Query Language) とは

YQL - Yahoo Developer Network

YQLとは米Yahoo! Developer Networkが提供している、ありとあらゆるWeb上のリソースにアクセスすることができる開発者向けのサービスです。
文法はSQLのようで独特ですが、要約すると
XML、HTML、RSS、CSVなどをJSONPに変換
WebAPIレスポンスの加工
キャッシュ機能つき
登録などをしなくても使える(利用制限等についてはYQL公式サイトをご参照ください)
こういった機能を持つ、汎用的なプロキシサービスです。

簡単に言うと

「YQLというものを使うと、XMLをJSONPに変換して扱えるようになる」

ということらしいです。便利っぽい！

参考）XMLのWebAPIを爆速で使いこなせるフレームワーク - Yahoo! JAPAN Tech Blog

なぜJSONP？

異なるドメインのデータを引っ張ってくるのに、XMLHttpRequest ではブラウザやサーバのクロスドメイン制約に引っ掛かるため、JSONP を使いましょう、ということらしいです（ざっくり

2. YQL API について調べる

YQL、日本ではあまりメジャーではないみたいですね（日本語のドキュメントがないから？
わたしは先人の知恵（参考サイト）に肖りながら進めてゆきます！

YQL Console を見てみる

まずYQL Console を開きます。

「show tables」と表示されているところがYQLのSELECTステートメントを記述する場所です。
今回はブログのRSSフィードのデータが欲しいので、左のdata からrss を選びます。

ステートメントが自動で置き換わりました。

select*fromrsswhereurl='フィードのURL'

が基本形です。
URLをフィードを取得したいものに書き換え、JSON形式が選択されていることを確認して「Test」ボタンを押します。

selectの後の「*」はワイルドカードです。次のようにデータを指定して取得することもできます。

selecttitle,link,descriptionfromrsswhereurl='フィードのURL'

取得データを見てみる

「Formatted View」の中身を見ると、どんなデータが取得できるか確認できます。

データは階層（ドットシンタックス）になっています。「Tree View」タブに切り替えると階層がわかりやすいです。

itemの中身がブログの1記事にあたります。

例えば：ブログのタイトルはこんな感じ。

query.results.item.title

3. Google Feed API から YQL API へ

では、なんとなく解ったところでAPIを移行してみます！

表示用HTML

<divid="feed"></div>

Google Feed API

<scripttype="text/javascript"src="https://www.google.com/jsapi"></script><scripttype="text/javascript">google.load('feeds','1');functioninitialize(){varfeed=newgoogle.feeds.Feed('<!-- BEGIN_MODULE Blog_Field -->{blogRssFeedUrl}<!-- END_MODULE Blog_Field -->');feed.setNumEntries(1);// feed.includeHistoricalEntries();feed.load(function(result){if(!result.error){varcontainer=document.getElementById('feed');for(vari=0;i<result.feed.entries.length;i++){varentry=result.feed.entries[i];vardd=newDate(entry.publishedDate);// nowvaryearNum=dd.getYear();if(yearNum<2000)yearNum+=1900;varm=dd.getMonth()+1;if(m<10){m='0'+m;}vard=dd.getDate();if(d<10){d='0'+d;}vardate=yearNum+'.'+m+'.'+d;imgsrc=entry.content.match(/src="(.*?)"/igm);container.innerHTML+='<article>'+'<img'+imgsrc+' alt="" />'+'<h2><span>Blog</span>'+entry.title+'</h2>'+'<p>'+date+'</p>'+'<p>'+entry.contentSnippet.substring(0,100)+'...</p>'+'<p><a href="'+entry.link+'">View details <i></i></a></p>'+'</article>';}}});}google.setOnLoadCallback(initialize);</script>

こんな感じのスクリプトでした。
＊フィードのURLにはCMSの変数が入っています

置き換えてみます。

YQL API

<scripttype="text/javascript">$(function(){$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?",{q:"select * from rss where url = '<!-- BEGIN_MODULE Blog_Field -->{blogRssFeedUrl}<!-- END_MODULE Blog_Field -->'",format:"json"},function(json){varcontainer=document.getElementById('feed');for(vari=0;i<json.query.results.item.length;i++){varentry=json.query.results.item[i];vardd=newDate(entry.date);// nowvaryearNum=dd.getYear();if(yearNum<2000)yearNum+=1900;varm=dd.getMonth()+1;if(m<10){m='0'+m;}vard=dd.getDate();if(d<10){d='0'+d;}vardate=yearNum+'.'+m+'.'+d;imgsrc=entry.encoded.match(/src="(.*?)"/igm);container.innerHTML+='<article>'+'<img'+imgsrc+' alt="" />'+'<h2><span>Blog</span>'+entry.title+'</h2>'+'<p>'+date+'</p>'+'<p>'+entry.description.substring(0,100)+'...</p>'+'<p><a href="'+entry.link+'">View details <i></i></a></p>'+'</article>';}});});</script>

わたしが取得したいのはライブドアブログだったのですが、デフォルトで5件表示されました。

4. 表示の調整とか

今回は最新の1件だけ を表示したいので、少し書き換えます。
取得するデータの件数を設定するときはステートメントに記述します。

select*fromrss(オフセット数,アイテム数)whereurl='フィードのURL'

Remote Limits | SELECT Statement - Yahoo Developer Network

例えば、最初の3件を取得したい場合は

select*fromrss(0,3)whereurl='フィードのURL'

もしくは、

select*fromrss(3)whereurl='フィードのURL'

オフセットのデフォルトが0なので、省略することができます。

修正するとこんな感じに。

<scripttype="text/javascript">$(function(){$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?",{q:"select * from rss(1) where url = '<!-- BEGIN_MODULE Blog_Field -->{blogRssFeedUrl}<!-- END_MODULE Blog_Field -->'",format:"json"},function(json){varcontainer=document.getElementById('feed');varentry=json.query.results.item;vardd=newDate(entry.date);// nowvaryearNum=dd.getYear();if(yearNum<2000)yearNum+=1900;varm=dd.getMonth()+1;if(m<10){m='0'+m;}vard=dd.getDate();if(d<10){d='0'+d;}vardate=yearNum+'.'+m+'.'+d;imgsrc=entry.encoded.match(/src="(.*?)"/igm);container.innerHTML+='<article>'+'<img'+imgsrc+' alt="" />'+'<h2><span>Blog</span>'+entry.title+'</h2>'+'<p>'+date+'</p>'+'<p>'+entry.description+'</p>'+'<p><a href="'+entry.link+'">View details <i></i></a></p>'+'</article>';});});</script>

無事に1件だけ表示することができました。
これで、2016年12月15日が来ても慌てなくて大丈夫なはず！

〈追記〉YQL API の利用制限について

YQLの利用制限についてメモしておきます。

Usage Information and Limits | Overview - Yahoo Developer Network

APIのコール数が1時間あたり2,000まで の場合、APIキーは必要ないようです。Public Endpoint ( /v1/public/* ) が使えます。

それ以上の場合は、APIキーを取得することで1時間あたり20,000まで 使えるようになるとのこと（1日あたり100,000まで）。OAuth Endpoint ( /v1/yql/* ) を使います。

【教訓】サイトを常時SSL化した場合、YQL Endpoint が http だとブロックされるのでhttps を使う。

参考サイト

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Movatterモバイル変換