Road To Nowhere

主にWebまわりのエンジニア的なお仕事に関するようなことのあれこれ。

AmebaVision API（JSONP）で動画をキーワード検索してみる

技術メモ

JSONPをもうちょっといじくってみたいなと思っていたら、
AmebaVisionのAPIを見つけました。


AmebaVision APIドキュメント
http://ameblo.jp/amebavisionapi/entry-10030099439.html


以下のコードをutf8で保存してブラウザでひらいたら動きます。
JSONPはいいですね。簡単に動画検索できちゃうね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<script type="text/javascript">
function searchMovies(){
  var keyword = document.getElementById("keyword").value;
  if(keyword){
    var url = '';
    if(document.getElementById("new").checked){
      url = 'http://vision.ameba.jp/api/get/search/keyword/new.do?';
    }
    else if(document.getElementById("popular").checked){
      url = 'http://vision.ameba.jp/api/get/search/keyword/popular.do?';
    }
    else if(document.getElementById("good").checked){
      url = 'http://vision.ameba.jp/api/get/search/keyword/rating.do?rating=ggod&';
    }
    else if(document.getElementById("bad").checked){
      url = 'http://vision.ameba.jp/api/get/search/keyword/rating.do?rating=bad&';
    }
    else if(document.getElementById("comment").checked){
      url = 'http://vision.ameba.jp/api/get/search/keyword/comment.do?';
    }
    else if(document.getElementById("favorite").checked){
      url = 'http://vision.ameba.jp/api/get/search/keyword/favorite.do?';
    }
    var url = url + 'keyword=' + keyword + '&format=jsonp&callback=callback';
    var script     = document.createElement( 'script' );
    script.type    = 'text/javascript';
    script.src     = url;
    document.getElementsByTagName("head")[0].appendChild( script );
  }
}
function callback(res){
  var count = res["item"].length;
  var divObj = document.getElementById("result");
  divObj.innerHTML = '';
  for(i=0;i<count;i++){
    
    var pObj = document.createElement("p");
    var textObj = document.createTextNode(res["item"][i]["title"]);
    pObj.appendChild(textObj);
    divObj.appendChild(pObj);
    
    var aObj = document.createElement('a');
    aObj.setAttribute('href',res["item"][i]["link"]);
    aObj.innerHTML = '<img src="' + res["item"][i]["imageUrlMedium"] + '">';
    divObj.appendChild(aObj);
    
  }
  
  //alert(res);
}
</script>
</head>
<body>
<input type="text" id="keyword" value="thai">
<input type="button" value="view" onclick="searchMovies();">
<input type="radio" name="sort" id="new" value="new" onclick="searchMovies();" checked>新着順
<input type="radio" name="sort" id="popular" value="popular" onclick="searchMovies();">視聴回数順
<input type="radio" name="sort" id="good" value="good" onclick="searchMovies();">ユーザ評価（good）数順
<input type="radio" name="sort" id="bad" value="bad" onclick="searchMovies();">ユーザ評価（bad）数順
<input type="radio" name="sort" id="comment" value="comment" onclick="searchMovies();">コメント数順
<input type="radio" name="sort" id="favorite" value="favorite" onclick="searchMovies();">お気に入り数順
<div id="result"></div>
</body>
</html>