- ベストアンサー
検索フォームを自動で実行させたい
- 検索フォームを自動で実行させたい
- "prototype.jsでYouTubeをインクリメンタルサーチ"というタイトルのページにて、入力フォームにワードを打ち込むとそのワードのyoutube動画を検索表示させる、という内容の記事がありまして、そちらのサンプルソースを試してみました。
- 入力フォームにvalue="animal"として、検索ページが表示されると自動でanimalの検索結果を表示させたいと思ったです。
- atsuya192
- お礼率39% (29/74)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ちなみにご提示の参考URL http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe02/ajaxrecipe02_1.html ですが、FireFox3.5では現在動作（動画再生）しないみたいです。 理由は、「live_search_controller.js」の中で $('search_results').getElementsByClassName('video').each(function(element, index) { 33 element.observe("click", youtube.controller.select); 34 }); があり、prototype.jsのgetElementsByClassNameとFirefoxの getElementsByClassNameのバッティング問題が発生するからだと思う。 このサンプルに固執せず、インクリメンタルサーチとか、lightwindowはとりあえず、後回しにして、「Google YouTube Data API」 を直接使って作った方が．．．． http://code.google.com/intl/ja/apis/youtube/reference.html 又は「Google AJAX Search API」のgoogle.search.VideoSearch を使うとか http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GvideoSearch
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
//17歳のエッチなJKです。 まだ締め切ってなかったものでさらに追加 ※インクリメンタルサーチも実装しました。アニマルで初期検索した後、 追加のキーワード文字列が入力されるたびに自動検索されていき、 最初にヒットした動画が再生されます。 同じく「Google AJAX Search API」のgoogle.search.VideoSearch http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GvideoSearch を使ってますがユーザー定義のgoogle.search.SearchFormで制御するのでなく、google.search.SearchControlを使えばその機能がありました。 http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GSearchControl （サンプルURL） 参照URL (サンプルコード) <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Expires" content="0" /> <title>Google Video Search for YouTube</title> <style type="text/css"></style> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg"></script> <script type="text/javascript"> google.load("search", "1"); </script> <link rel="stylesheet" type="text/css" href="/jslib/shadowbox/shadowbox.css"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/jslib/shadowbox/shadowbox.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); //]]> </script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ //var searchControl; $(document).ready(function(){ $("#kensaku_key").val("アニマル"); var searchControl = new google.search.SearchControl(); searchControl.setTimeoutInterval(google.search.SearchControl.TIMEOUT_MEDIUM); searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET); var options = new google.search.SearcherOptions(); options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); var gVideoSearch = new google.search.VideoSearch(); searchControl.addSearcher(gVideoSearch,options); var drawOptions = new google.search.DrawOptions(); drawOptions.setInput(document.getElementById("kensaku_key")); searchControl.draw(document.getElementById("dummy"),drawOptions); searchControl.execute(); gVideoSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET); gVideoSearch.setResultOrder(google.search.Search.ORDER_BY_DATE); gVideoSearch.setSearchCompleteCallback(null, function(){ $('#GoogleResult > dl,span').empty(); if(gVideoSearch.cursor.pages && gVideoSearch.cursor.pages.length > 0){ var nextguide=$(document.createElement("span")); for(var i=0;i<gVideoSearch.cursor.pages.length;i++){ var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click", function(event){ event.preventDefault(); gVideoSearch.gotoPage($(this).text().substring(0,1)-1); }); nextguide.append(nexta); } nextguide.append($('<a href="'+gVideoSearch.cursor.moreResultsUrl+'" target="_blank">もっと検索</a>')); $('#GoogleResult').append(nextguide); } if(gVideoSearch.results && gVideoSearch.results.length > 0){ var result=$("<dl>"); for(var i=0;i<gVideoSearch.results.length;i++){ result.append('<dt style="clear: both;"><a href="' + gVideoSearch.results[i].url + '" target="_blank">' + gVideoSearch.results[i].title + '</a></dt>' + '<dd>' + '<img src="' + gVideoSearch.results[i].tbUrl + '" style="float:left" />' + '<div style="padding-left:130px;">' + gVideoSearch.results[i].content + '<br />' + 'VideoType:' + gVideoSearch.results[i].videoType + ' ' + gVideoSearch.results[i].tbWidth +'×'+gVideoSearch.results[i].tbHeight +'<br />' + 'Playurl:' + '<a rel="shadowbox;width=320;height=240;player=swf" '+ 'href="' + gVideoSearch.results[i].playUrl + '">' + gVideoSearch.results[i].playUrl + '</a><br />' + 'Published:' + gVideoSearch.results[i].published + ' By' + gVideoSearch.results[i].publisher +'<br />' + '</div>' + '</dd>'); } $('#GoogleResult').append(result); $('#GoogleResult > dl').css("margin-left","10px"); $('#GoogleResult > span > a').css({margin:"5px",color:"black",background:"#FFF"}); $('#GoogleResult > span > a:eq('+ gVideoSearch.cursor.currentPageIndex + ')').css("background","yellow"); $('#GoogleResult').append('<hr style="clear: both;">'); $('#GoogleResult').append(nextguide.clone(true)); // ShadowBox Setup and Play Shadowbox.clearCache(); Shadowbox.setup($("a[rel^='shadowbox']")); $("a[rel^='shadowbox']:first").click(); }else{ var result=$("<dl>無し</dl>"); $('#GoogleResult').append(result); return; } }); }); function set(key){ searchControl.execute(key); } //]]> </script> </head> <body> <div><h3>Google Video Search By Google AJAX Search API</h3> 検索キーワード：<input id="kensaku_key" type="text" size="50"> <hr style="clear:both;"/> <div id="GoogleResult">（検索結果）<br /> </div> </div> <div id="dummy" style="display:none"></div> </body> </html> さらに補足--- 「GSvideoSearchControl」 http://www.google.com/uds/solutions/videosearch/reference.html を使えば、自分でごちゃごちゃDOM操作しなくても、すんなり出来ます。
- yyr446
- ベストアンサー率65% (870/1330)
No2回答者です。 「Google AJAX Search API」のgoogle.search.VideoSearch http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GvideoSearch を使って、「アニマル」を自動検索し、結果をJQUERYで成型して 最初にヒットした画像を自動再生するサンプルを作ってみました。 ご参考になればと.. ※prototype.jsやめてJQUERYにしました（個人的な好み） http://docs.jquery.com/Main_Page ※動画の再生には「prototype.js」+「lightwindow」 の組み合わせでなく「Shadowbox」を使いました。 http://www.shadowbox-js.com/index.html こっちの方が汎用性が高くコンフリクトしにくいです。 ※インクリメンタルサーチにはなっていません。 （サンプルURL） 参照サイト (サンプルソース) <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Expires" content="0" /> <title>Google Video Search for YouTube</title> <style type="text/css"></style> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg"></script> <script type="text/javascript"> google.load("search", "1"); </script> <link rel="stylesheet" type="text/css" href="/jslib/shadowbox/shadowbox.css"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/jslib/shadowbox/shadowbox.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ Shadowbox.init({ language: 'ja', players: ['swf','flv'] }); //]]> </script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ $(document).ready(function(){ var searchform = new google.search.SearchForm(true,document.getElementById("GoogleSearchForm")); searchform.input.value ="アニマル"; searchform.setOnSubmitCallback(null, function(searchform){ gVideoSearch.execute(searchform.input.value); return false; }); var gVideoSearch = new google.search.VideoSearch(); gVideoSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET); gVideoSearch.setResultOrder(google.search.Search.ORDER_BY_DATE); gVideoSearch.setSearchCompleteCallback(null, function(){ $('#GoogleResult > dl,span').empty(); if(gVideoSearch.cursor.pages && gVideoSearch.cursor.pages.length > 0){ var nextguide=$(document.createElement("span")); for(var i=0;i<gVideoSearch.cursor.pages.length;i++){ var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click", function(event){ event.preventDefault(); gVideoSearch.gotoPage($(this).text().substring(0,1)-1); }); nextguide.append(nexta); } nextguide.append($('<a href="'+gVideoSearch.cursor.moreResultsUrl+'" target="_blank">もっと検索</a>')); $('#GoogleResult').append(nextguide); } if(gVideoSearch.results && gVideoSearch.results.length > 0){ var result=$("<dl>"); for(var i=0;i<gVideoSearch.results.length;i++){ result.append('<dt style="clear: both;"><a href="' + gVideoSearch.results[i].url + '" target="_blank">' + gVideoSearch.results[i].title + '</a></dt>' + '<dd>' + '<img src="' + gVideoSearch.results[i].tbUrl + '" style="float:left" />' + '<div style="padding-left:130px;">' + gVideoSearch.results[i].content + '<br />' + 'VideoType:' + gVideoSearch.results[i].videoType + ' ' + gVideoSearch.results[i].tbWidth +'×'+gVideoSearch.results[i].tbHeight +'<br />' + 'Playurl:' + '<a rel="shadowbox;width=320;height=240;player=swf" '+ 'href="' + gVideoSearch.results[i].playUrl + '">' + gVideoSearch.results[i].playUrl + '</a><br />' + 'Published:' + gVideoSearch.results[i].published + ' By' + gVideoSearch.results[i].publisher +'<br />' + '</div>' + '</dd>'); } $('#GoogleResult').append(result); $('#GoogleResult > dl').css("margin-left","10px"); $('#GoogleResult > span > a').css({margin:"5px",color:"black",background:"#FFF"}); $('#GoogleResult > span > a:eq('+ gVideoSearch.cursor.currentPageIndex + ')').css("background","yellow"); $('#GoogleResult').append('<hr style="clear: both;">'); $('#GoogleResult').append(nextguide.clone(true)); // ShadowBox Setup and Play Shadowbox.clearCache(); Shadowbox.setup($("a[rel^='shadowbox']")); $("a[rel^='shadowbox']:first").click(); }else{ var result=$("<dl>無し</dl>"); $('#GoogleResult').append(result); return; } }); }); //]]> </script> </head> <body> <div><h3>Google Video Search By Google AJAX Search API</h3> <div id="GoogleSearchForm" style="width:30%;"></div> <hr style="clear:both;"/> <div id="GoogleResult">（検索結果）<br /> </div> </div> </body> </html>
- DOUGLAS_
- ベストアンサー率74% (397/534)
お示しの「参考URL」を拝見すると、「MVCそれぞれの役割を確認」の図で「0.5秒が経過」すると「keyword」が変わったと判断する、というような記述があります。 従って、使用された８つの js ファイルの中から当該関数「○○○()」を見つけて、 window.onload = "document.getElementById('keyword').value='animal'; ○○○()"; とでも記述すればよさそうですが、その関数を見つけることはちょっと面倒です。 また、 ＞「keyword」が変わったと判断 させるためには、「animal」とは別の keyword を予め書き込む必要がありますが、その間のタイマー処理をすることも甚だ面倒ですし、そもそも、最初の keyword を書き込んでから「animal」を書き込むまでの間、自前関数の制御下に置かれたままになりますので、結果的に何も起こらないような気もいたします。 そこで、少々ダサいヤリカタですが、下記のようなことではいかがでしょうか？ <input type='text' name='keyword' id='keyword' onClick="value='animal'; this.select()"/> ＞入力フォームにvalue="animal"として、検索ページが表示されると ＞自動でanimalの検索結果を表示させたい とのことですが、上記の場合は、空白のページが開き、検索窓をクリックしたタイミングで、検索窓に「animal」が記入され、動画が表示されます。 ただし、検索窓をクリックするたびに「animal」が記入され、動画が表示されますが．．．。
お礼
サンプルや解説をご提示頂き、色々有難うございました。 Google YouTube Data APIについても色々と勉強してみました。 確かにAPIを使ったほうがスムーズかなと思いました。 ですがご提示頂いたサンプルも大変良いものですねぇ。 これから色々とさわってみながら動作や挙動を確認したいと思いますが、とりあえず一旦質問を締め切らせてお礼ポイントを付与いたします。 有難うございました。