

現在[こちらのページ](http://qiita.com/tag1216/items/ad406625dc654d3c0982)のtag1216様のプログラムを参考にはてなブックマークの新着記事のタグを収集し、同じようにForceレイアウトで表示し、ノードに記事へのリンクをつけたいと考えています。

しかしはてな[ブックマークのAPI](http://developer.hatena.ne.jp/ja/documents/bookmark/apis/getinfo)を利用しようとするとクロスオリジン要求をブロックされqiitaのAPIと同じようにすることができません。

これはqiitaのAPIがJSONPとしてレスポンスを返すためクロスドメインにひっかからないのでしょうか？  
仮にJSONPの場合制約にかからないのでしょうか？  
その場合はてなブックマークのAPIでJSONPで返すにはどのようにすればよいでしょうか？  
無知の質問が多く申し訳ありません。お力添えよろしくお願いします。


CC BY-SA 3.0
2015-11-18T15:54:26.653
19002
2015-11-19T08:28:26.887
2015-11-18T23:10:16.817
13172
question
javascript ajax cors
d3.jsを利用してはてなブックマークの新着記事を表示したい


JSONP は外部スクリプトとして読み込める形にした JSON のことで、通常の JSON とは形式が異なります。そのため API
提供側での対応が必要ですが、 Qiita も ~~はてなブックマークも~~ 対応していません。

追記:はてなブックマークの当該APIは callback パラメータを付加することで JSONP
で取得できるようです（[mjyさんの回答](https://ja.stackoverflow.com/a/19007/8000)参照）。

前述のデモサイトでの Qiita からのレスポンスには以下のヘッダが存在します。

[code]

    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Methods: GET, POST, PUT, DELETE
    Access-Control-Allow-Origin: http://bl.ocks.org
    Access-Control-Expose-Headers:
    Access-Control-Max-Age: 1728000
    
[/code]

これは [CORS (Cross-Origin Resource
Sharing)](https://developer.mozilla.org/ja/docs/HTTP_access_control#Simple_requests)
で定められた、アクセス制御のために用いられるヘッダ群です。d3.js を含め Ajax 通信に用いられる XMLHttpRequest には [Same-
Origin
Policy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)
というルールが適用され、基本的に異なるオリジン間での通信は行えないのですが、これらのヘッダ群で許可されていた場合に限り通信が許可されます。ちゃんと
`http://bl.ocks.org` が許可されていますね。

一方はてなブックマークのAPIではこれらのヘッダが出力されないため、「別オリジンからの要求を全て拒否した」ものとしてブラウザが解釈し、通信をブロックします。

その他参考記事など

  * [HTTP access control (CORS) | MDN](https://developer.mozilla.org/ja/docs/HTTP_access_control)
  * [CORS(Cross-Origin Resource Sharing)について整理してみた ｜ Developers.IO](http://dev.classmethod.jp/etc/about-cors/)
  * [JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて（CORS）】](http://hakuhin.jp/js/resource_sharing.html)


CC BY-SA 3.0
2015-11-18T23:11:15.153
19005
2015-11-19T01:05:47.407
2017-04-13T12:52:39.113
-1
8000
19002
answer


### はてなブックマークエントリー情報取得APIのJSONP対応

[質問に挙げられているAPI](http://developer.hatena.ne.jp/ja/documents/bookmark/apis/getinfo)に関してはJSONPでの取得方法が説明されています。

> また`http://b.hatena.ne.jp/entry/json/`に対し、以下のクエリーパラメータを GET  
>  リクエストで送信することで、JSONP によるコールバック関数で囲まれたJSONデータを取得することができます。  
>  (以下略)

JSONPの使い方が分からない場合はトライしてつまずいた所に絞って、また質問するとよいと思います。  
下記は高速版(`/entry/jsonlite/`)でこのサイトのブックマークを取得する例です。

[code]

    <div><p>はてなブックマーク:</p>
        <pre id="hatena_bkm"></pre>
    </div>
    
    <script>
    "use strict";
    
    function my_hatena_bkm_callback(bkm_json){
        document.getElementById("hatena_bkm").textContent =
        JSON.stringify(bkm_json, undefined, 2);
    }
    </script>
    
    <script src="http://b.hatena.ne.jp/entry/jsonlite/?url=http%3A%2F%2Fja.stackoverflow.com%2F&callback=my_hatena_bkm_callback"></script>
[/code]

### 「新着記事」取得のAPIがあるか

ただ、やりたいのは「新着記事のタグを収集」する事のようですね。  
[はてなブックマークドキュメント一覧](http://developer.hatena.ne.jp/ja/documents/bookmark)をざっと見た限りでは、これを取得するAPIは無さそうですが、いかがでしょうか。  
はてなが提供しているRSS(あるいはスクレイピングなど)と、APIを使い、自分でAPIを作るという手はあると思いますが、これは別の話になりますね。


CC BY-SA 3.0
2015-11-19T00:52:57.403
19007
2015-11-19T01:11:16.123
2015-11-19T01:11:16.123
3054
3054
19002
answer


[JSONProxy](https://jsonp.afeld.me/) や [allow-any-
origin.appspot.com](http://allow-any-origin.appspot.com/)
のようなクロスドメイン通信を可能にするサイトを一枚噛ませる方法があります。

[code]

    var url = "http://b.hatena.ne.jp/entry/json/http://www.hatena.ne.jp/";
    var proxy_url = "http://allow-any-origin.appspot.com/" + encodeURIComponent(url);
    
    d3.json(proxy_url, function(error, json) {
      if (error) {
        return console.warn(error);
      }
      $("#data").text(JSON.stringify({
        title: json.title,
        url:   json.url,
        count: json.count
      }));
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    
    <h1>はてなブックマーク</h1>
    <pre id="data"></pre>
[/code]

これらのサイトは基本的に無保証ですが、とりあえず動くものを作りたい場合には便利です。

必要に応じてAPIを返すページを自前で作って、あとから差し替えることもできます。


CC BY-SA 3.0
2015-11-19T06:59:23.117
19027
2015-11-19T08:28:26.887
2015-11-19T08:28:26.887
2391
2391
19002
answer