はてなブログのfeedをjsonで取得してReactで表示してみる with YQL
前記事では、クロスドメインリクエストについて学びました。しかし、普通にCORSを行っても、No 'Access-Control-Allow-Origin' header is present on the requested resourceと返されるAPIがあります。セキュリティの問題からAPIが許可していないためです。
クライアントの操作のみで簡単に取得できないかな〜と探していると、こんなプラグインがありました。
これを用いると、クロスドメインのGETリクエストが可能になるみたいです。仕組みはどうなっているのかというと、YQLのAPIを使用しています。
YQL consoleを使用してfeedデータを確認する
まずはYQL consoleを開いて、data>feedからfeed取得のシンタックスを確認。SQLを学習したことがあるなら躓くことはなさそうですね。
YOUR YQL STATEMENTのフィールドにYQLを入力します。urlの値を取得先のfeed URLに変更。今回は全部(*)取得する必要もないので、titleのみ取得に。testボタンを押すと、結果がずらっと並びます。
jQuery.ajaxとYQLを合わせてみる
Tree Viewを見ながら、jQueryと組み合わせてみましょう。次のようなリクエストが記述できます。
$.ajax({ // Set YQL URL url: "http://query.yahooapis.com/v1/public/yql?callback=?", data: { // YQL statement q: "select title from feed where url = 'http://uraway.hatenablog.com/feed'", // XML or JSON format: "json" }, type: 'GET', dataType: 'json', success: function(res) { for (var i in res.query.results.entry) { console.log(res.query.results.entry[i].title); } }, error: function(xhr, status, err) { console.log(status, err.toString()); } }); }
React + ajax
上記のリクエストをReactのコンポーネントに入れてみました。とりあえずはタイトルを表示するだけですが。
参考: dynamic-children