コーヒーこぼした。

プログラミングとちょこっとハード

はてなブログのfeedをjson形式で取得した話

プログラミング json jQuery

どうも、ラーメンブロガーのid:imkitchenです。
今日はめずらしく技術系の記事書きます。

最近、就活に向けてポートフォリオサイトの制作にいそしんでいます。
Google+っぽいマテリアルデザインのカードスタイルで次の情報を載せることにしました。

作るのはただのポートフォリオなのでなのでgithub pagesを使います。

twitterとfacebookは貼り付けるだけでいいjavascriptコードを生成してくれるので全然苦労してないですが、githubのリポジトリとはてなブログのエントリー取得はjQueryを使って書きました。

で、ハマったのが はてなブログ のfeed取得。

クロスサイトスクリプティングという脆弱性を塞ぐため、多くのブラウザはXML形式のデータは同一ドメインからしかajaxで取得することができないようです。
はてなブログ ではfeed取得のためのjson APIがなくて、取得できるのはXML形式のみでした。

しばらく途方に暮れていましたが、Googleのfeed APIを使えばXMLのfeedをjson形式に変換して取得できるようです。
さすがグーグル先生！

https://developers.google.com/feed/v1/jsondevguide

使い方はとても簡単で

$.ajax
    type: 'GET'
    url: 'http://imkitchen.hatenablog.com/feed'
    dataType: 'xml'
    success: (res) ->
        # 取得成功時の処理
    error: (err) ->
        # 取得失敗時の処理

としていたところを

$.ajax
    type: 'GET'
    url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=' + encodeURIComponent 'http://imkitchen.hatenablog.com/feed'
    dataType: 'json'
    success: (res) ->
        # 取得成功時の処理
    error: (err) ->
        # 取得失敗時の処理

とするだけです(dataTypeはjson)。
encodeURIComponentはfeedのURLをAPIのパラメータとして渡せるように/(スラッシュ)や:(コロン)などの文字をエンコードしています。

ということで、まだ制作途中ですがなんとかできました。
https://imkitchen.github.io

スポンサーリンク