早速AmebaVisionがJSONP形式のAPIを試してみる

動画投稿サイトで初、AmebaVisionがJSONP形式のAPIを公開
http://japan.cnet.com/news/media/story/0,2000056023,20346707,00.htm?ref=rss

JSONPを使う機会があまり無かったので早速使ってみることにしました。

http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.htmlのライブラリを取得。でも今回は使わず。

さて、最近投稿された動画は以下をrequestすると取得できます。format=jsonpをつけないとxmlで帰ってくるので注意。

http://vision.ameba.jp/api/get/recentMovie.do?format=jsonp

長いのではしょりますが以下のようなデータが帰ってきます。

handler({
"title":"AmebaVision 新着情報",
"link":"http://vision.ameba.jp/",
"description":"",
"totalCount":125394,
"todayCount":334,
"item":
[
{
"title":"最高速度574.8km/hを記録したフランスの高速鉄道ＴＧＶの映像",
"link":"http://vision.ameba.jp/watch.do?movie=199984",
"tagId":"199984",
"description":"【人気No.1動画 「超お宝動画」】 http://vision.ameba.jp/watch.do?movie=190051【グラビア・お宝動画 殿堂入り Blog】 http://ameblo.jp/festival-vision/",

このファイルをjavascriptでインポートしてやると、”hanlder”というfunctionが連想配列の引数を持ってcallされるようになります。そこでhanlderという関数をあらかじめ作っておいて連想配列を元に表示したりいろいろしてあげます。

とりあえず表示してみたのがこちらです。

<div id="output" style="position: static;"></div>
<script type="text/javascript">
<!--
function handler(data)
{
try {
var o = $('output');
if (o)
{
o.innerHTML += '<h1>'+data['title'] + '</h1>';
var items = data['item'];
for (var i=0; i<items.length; i++)
{
var item = items[i];
var rect = document.createElement('div');
rect.setAttribute('class', 'movieitem');
var title = document.createElement('h2');
title.setAttribute('class', 'title');
title.innerHTML += item['title'];
rect.appendChild(title);
var link = document.createElement('a');
link.setAttribute('class', 'thumbnail');
link.setAttribute('href',item['link']);
link.setAttribute('target','_blank');
link.innerHTML += '<img src="'+item['imageUrlSmall']+'" align="clear" class="thumbnail"/>';
rect.appendChild(link);
var disc = document.createElement('div');
disc.setAttribute('class', 'description');
disc.innerHTML += item['description'];
rect.appendChild(disc);
o.appendChild(rect);
}
}
} catch (e) {
alert(e);
return;
}
}
//-->
</script>
<script language="JavaScript" src="http://vision.ameba.jp/api/get/recentMovie.do?format=jsonp"></script>

JSONPの説明はこちらのサイトにわかりやすくまとまっているので参考まで
http://www.baldanders.info/spiegel/remark/archives/000222.shtml