読者です 読者をやめる 読者になる 読者になる

jquery youtube 検索

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0070)http://gihyo.jp/assets/files/dev/feature/01/jquery/0003/03_sample.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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通信定義
                $.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);

                        // 検索結果が0件
                        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) {
                // (1) 履歴に検索キーワードが存在するか
                var exists = $.grep($("#history li"), function(item, index) {
                    return ($(item).children(".key").text() == keyword);
                });

                if (exists.length == 0) {// (2) 存在しない
                    $("<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 {// (3) 存在する
                    $(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>