プロが教えるわが家の防犯対策術！

検索フォームを自動で実行させたい

解決済

  • 質問者：atsuya192
  • 質問日時：
  • 回答数：4件

お世話になります。
"prototype.jsでYouTubeをインクリメンタルサーチ"というタイトルのページにて、入力フォームにワードを打ち込むとそのワードのyoutube動画を検索表示させる、という内容の記事がありまして、そちらのサンプルソースを試してみました。

参考URL
http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe …

上記のプログラムを試してみると、HTMLページに検索フォームが設けられており、そこにワードを打ちこんでみると、該当javascriptが１文字打ち込むごとにYoutubeから検索結果を拾って、検索フォームの下スペースに動画リストとして表示してくれました。無事に動いてくれたのでこのサンプルコードに少しカスタマイズをしてみたのですが、ここで躓いてしまいました。。

入力フォームにvalue="animal"として、検索ページが表示されると自動でanimalの検索結果を表示させたいと思ったです。

ですが、実際にはフォームエリアにはanimalと表示されていますが、検索アクションがされない状態です。

私はjavascriptなど勉強中の初心者なので調べてみているのですが、これを自動で表示させるには、form部分にonChange="○○○"、javascript側にwindow.onload = function(){ ○○○();}というものを使えばできるような感じでしたが、どうにもうまく動きません。

もしご教授頂けるという方がいらっしゃったら是非お願いしたいです。宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1

  • 回答者： DOUGLAS_
  • 回答日時：

　お示しの「参考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」が記入され、動画が表示されますが．．．。
    • good
    • 0
    • 件
通報する

No.2ベストアンサー

  • 回答者： yyr446
  • 回答日時：

ちなみにご提示の参考URL


http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe …
ですが、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/refe …

又は「Google AJAX Search API」のgoogle.search.VideoSearch
を使うとか
http://code.google.com/intl/ja/apis/ajaxsearch/d …
    • good
    • 0
    • 件
通報する
この回答へのお礼

サンプルや解説をご提示頂き、色々有難うございました。
Google YouTube Data APIについても色々と勉強してみました。

確かにAPIを使ったほうがスムーズかなと思いました。
ですがご提示頂いたサンプルも大変良いものですねぇ。

これから色々とさわってみながら動作や挙動を確認したいと思いますが、とりあえず一旦質問を締め切らせてお礼ポイントを付与いたします。

有難うございました。

通報する
お礼日時：2009/12/01 18:22

No.3

  • 回答者： yyr446
  • 回答日時：

No2回答者です。


「Google AJAX Search API」のgoogle.search.VideoSearch
http://code.google.com/intl/ja/apis/ajaxsearch/d …
を使って、「アニマル」を自動検索し、結果を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-transitio …
<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=ABQIAAAAG93o66s6 …
<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>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

//17歳のエッチなJKです。


まだ締め切ってなかったものでさらに追加
※インクリメンタルサーチも実装しました。アニマルで初期検索した後、
追加のキーワード文字列が入力されるたびに自動検索されていき、
最初にヒットした動画が再生されます。
同じく「Google AJAX Search API」のgoogle.search.VideoSearch
http://code.google.com/intl/ja/apis/ajaxsearch/d …
を使ってますがユーザー定義のgoogle.search.SearchFormで制御するのでなく、google.search.SearchControlを使えばその機能がありました。
http://code.google.com/intl/ja/apis/ajaxsearch/d …

（サンプル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-transitio …
<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=ABQIAAAAG93o66s6 …
<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/ …
を使えば、自分でごちゃごちゃDOM操作しなくても、すんなり出来ます。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報