Wikipedia APIで遊んでみた

使い方

http://ja.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=10
にアクセスすればXML

http://ja.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=10&format=jsonfm
formatにjsonfmを指定すれば読みやすいpretty JSONで表示してくれる。デバッグ時によい。

http://ja.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=10&format=json&callback=callback
JSONPで使う場合はformatをjsonにして、callbackが必要なら付けられる。

Demo

Wikipedia APIを使ってランダムに記事を表示させるサンプル。

<html>
<head>
<meta charset="utf-8" />
<title>ja.infinipedia.org</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {

var titles = [];

function stock() {
  $.ajax({
    type: "get",
    dataType: "jsonp",
    url: "http://ja.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=10&format=json",
    success: function(json) {
      $.each(json.query.random, function(i, e) {
        titles.push(e.title);
      });
      $(document.body).trigger('wikijump');
      console.log(titles)
    }
  });
}

$(document.body).bind('wikijump', function() {
  if (titles.length > 1) {
    var title = titles.shift();
    setTimeout(function() {
      $('#wikiframe').attr('src', 'http://ja.wikipedia.org/wiki/' + encodeURIComponent(title));
      $(document.body).trigger('wikijump');
      console.log(titles)
    }, 8000);
  } else {
    stock();
  }
});

stock();


});
</script>
</head>
<body>
<iframe id="wikiframe" src="http://ja.wikipedia.org/wiki/%E7%89%B9%E5%88%A5:%E3%81%8A%E3%81%BE%E3%81%8B%E3%81%9B%E8%A1%A8%E7%A4%BA" width="100%" height="100%"></iframe>
</body>
</html>

まとめ

JSONPでクロスドメインの楽しさがやっと理解できた。MacBook Air 11インチ欲しい!