はてなブログのfeedをjsonで取得してReactで表示してみる with YQL

前記事では、クロスドメインリクエストについて学びました。しかし、普通にCORSを行っても、No 'Access-Control-Allow-Origin' header is present on the requested resourceと返されるAPIがあります。セキュリティの問題からAPIが許可していないためです。

クライアントの操作のみで簡単に取得できないかな〜と探していると、こんなプラグインがありました。

jquery.xdomainajax

これを用いると、クロスドメインのGETリクエストが可能になるみたいです。仕組みはどうなっているのかというと、YQLのAPIを使用しています。

YQL consoleを使用してfeedデータを確認する

まずはYQL consoleを開いて、data>feedからfeed取得のシンタックスを確認。SQLを学習したことがあるなら躓くことはなさそうですね。

uraway.hatenablog.com

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

JSONデータもYQLを通せば取得できるはず。後でやっとこう。