WEB APIを初めて使ってみた（クロスドメインの解決ってこーやるんや・・）

web api マッシュアップ json html javascript

なぜか今までWebAPIを使ったことがなかった

パストラック*1のAPIを利用して過去24時間（1時間区切り）にGoogle訪れた人数を出すだけのものを作ってみた。

HTML

<html>
  <head>
    <script type="text/javascript" 
      src="http://www.prototypejs.org/assets/2007/11/6/prototype.js"></script>
    <script type="text/javascript">
      function result(data) {
        data.start.match(/(\d{2}):\d{2}:\d{2}/);
        var h = (RegExp.$1 + 9) % 24;
        document.write("<h1>過去24時間に[" + data.url + "]へ訪れた人数</h1><br>");
        //alert(data.plots);
        data.plots.each(function(n){
          document.write(h + "時:" + n + "人<br>");
          h = (h + 1) % 24;
        });
      }
    </script>
  </head>
  <body>
    <script type="text/javascript" 
      src="http://api.pathtraq.com/page_chart?api=json&scale=24h&url=http%3A//www.google.co.jp/&callback=result"></script>
  </body>
</html>

結果サンプル

過去24時間にhttp://www.google.co.jp/へ訪れた人数

17時:138人
18時:140人
19時:112人
20時:132人
21時:133人
22時:148人
23時:129人
0時:115人
1時:75人
2時:39人
3時:43人
4時:24人
5時:33人
6時:47人
7時:48人
8時:99人
9時:110人
10時:136人
11時:143人
12時:121人
13時:135人
14時:136人
15時:119人
16時:133人
17時:10人

感想

今までクロスドメインどうやって解決するんやろって思ってたけど、JSONの抜け道を使うらしいですね。
callbackを使ってとか初めて知ったし・・・

*1:http://pathtraq.com/