<HTML
lang="ja" lang="ja" xml:lang="ja"
xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META content="IE=11.0000"
http-equiv="X-UA-Compatible">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK
href="03_sample.files/03_sample.css" rel="stylesheet" type="text/css">
<SCRIPT src="03_sample.files/jquery-1.2.1.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
var searchCond = {};
var VIEW_COUNT = 9;
$(function() {
$("#frmSearch").submit(function() {
searchNew({
"keyword" : $("#keyword").val()
});
$("#keyword").select();
return false;
});
$("#sort > a").click(function() {
searchHistory({
"orderby" : this.id,
"page" : 1
});
});
$("#back").click(function() {
if (searchCond.page <= 1)
return;
searchHistory({
"page" : searchCond.page - 1
});
});
$("#next").click(function() {
if (searchCond.page * VIEW_COUNT + 1 > searchCond.total)
return;
searchHistory({
"page" : searchCond.page + 1
});
});
$("#clear").click(function() {
$("#history > ul").empty();
$("#videos").empty();
$("#result").empty();
});
$("#keyword").focus();
});
function searchNew(cond) {
search({
"keyword" : cond.keyword,
"page" : 1,
"orderby" : "relevance",
"fromHistory" : false
});
}
function searchHistory(cond) {
if ($("#history li").size() == 0)
return;
search($.extend({}, searchCond, cond, {
"fromHistory" : true
}));
}
function search(cond) {
if (cond == null)
return;
if (cond.keyword == null || cond.keyword.length == 0) {
alert("検索キーワードを入力してください。");
return;
}
var index = (cond.page - 1) * VIEW_COUNT + 1;
$.extend(searchCond, cond);
$("#videos").text("Loading...");
$.ajax({
dataType : "jsonp",
data : {
"vq" : cond.keyword,
"orderby" : cond.orderby,
"start-index" : index,
"max-results" : VIEW_COUNT,
"alt" : "json-in-script"
},
cache : true,
url : "http://gdata.youtube.com/feeds/api/videos",
success : function(data) {
$("#videos").empty();
searchCond.total = parseInt(data.feed.openSearch$totalResults.$t, 10);
showTotal(index, searchCond.total);
if (searchCond.total == 0) {
alert("検索キーワードにマッチするビデオはありませんでした。");
return;
}
$.each(data.feed.entry, function(i, item) {
var group = item.media$group;
$("<div/>").addClass("thumbnail").append($("<img/>").attr("src", group.media$thumbnail[0].url)).append("<br/>").append(item.title.$t).append("<br/>").append($("<span/>").addClass("info").text("再生回数:" + ((item.yt$statistics == null) ? "0" : item.yt$statistics.viewCount))).click(function() {
window.open(group.media$player[0].url, null)
}).appendTo("#videos");
});
if (!cond.fromHistory) {
addHistory($("#videos img:first").clone(), cond.keyword);
}
}
});
}
function showTotal(index, total) {
$("#result").text(((total == 0) ? 0 : index) + " - " + (index + VIEW_COUNT > total ? total : index + VIEW_COUNT - 1) + " / " + total + "件");
}
function addHistory(img, keyword) {
var exists = $.grep($("#history li"), function(item, index) {
return ($(item).children(".key").text() == keyword);
});
if (exists.length == 0) {
$("<li/>").append(img).append("<br/>").append($("<span/>").addClass("key").append(keyword)).append($("<a/>").addClass("del").append("[x]").click(function() {
$(this).parent().remove();
if (searchCond.keyword == keyword) {
$("#videos").empty();
$("#result").empty();
}
})).click(function() {
searchHistory({
"keyword" : keyword,
"page" : 1,
"orderby" : "relevance"
});
}).prependTo("#history > ul");
} else {
$(exists).prependTo($(exists).parent()).children("img").attr("src", img.attr("src"));
}
}
</SCRIPT>
<META name="GENERATOR" content="MSHTML 11.00.9600.16412">
</HEAD>
<BODY>
<H1>Youtube 検索</H1>
<FORM id="frmSearch">
<INPUT id="keyword" type="text" size="35">
<INPUT type="submit" value="検索">
</FORM>
<DIV id="history">
<DIV class="header">
<DIV class="submenu">
<A id="clear">クリア</A>
</DIV>
<DIV class="caption">
検索履歴
</DIV>
</DIV>
<UL></UL>
</DIV>
<DIV id="view">
<DIV class="header">
<DIV class="submenu" id="sort">
並び替え: <A
id="relevance">関連度</A>| <A id="updated">追加日</A>| <A id="viewCount">再生回数</A>| <A id="rating">評価</A>
</DIV>
<DIV class="caption">
ビデオ
</DIV>
</DIV>
<DIV id="videos"></DIV>
<DIV id="footer">
<DIV id="result"></DIV>
<DIV id="navi">
<A id="back">前へ</A> <A id="next">次へ</A>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>