ここでは動画検索を行ってみます。
動画検索もWeb検索、画像検索と同じですが、動画の場合クエリーを送るURLが異なり以下の場所になります。
http://api.search.yahoo.co.jp/VideoSearchService/V1/videoSearch
あとは画像検索と同じようにXMLデータが返されます（responseXMLで返される
結果を見る。実際の
XMLを見る）。動画検索も画像検索も、ほぼ同じスクリプトで対応することができます。以下のサンプルは検索された動画のタイトルを表示するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo画像検索 (タイトル一覧)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function YahooSearch()
{
srchStr = $("queryString").value;
if (srchStr == "") return;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","yahoo.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
txt = "";
xmlData = httpObj.responseXML;
titleList = xmlData.getElementsByTagName("Title");
for (i=0; i<titleList.length; i++)
{
str = titleList[i].childNodes[0].nodeValue;
txt += str + "<br>";
}
$("result").innerHTML = txt;
}
}
// --></script>
</head>
<body>
<h1>Yahoo画像検索 (タイトル一覧)</h1>
<p><a href="http://developer.yahoo.co.jp/">Web Services by Yahoo! JAPAN</a></p>
<form method="get" name="ajaxForm" onsubmit="YahooSearch();return false;">
<input type="text" value="ラピュタ" id="queryString">
<input type="button" value="Yahoo画像検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>
動画にもやはりサムネール画像が用意されており、画像検索と同様にThumbnailタグ内の情報を元にして表示させることができます。以下のサンプルは動画のサムネールを表示し、クリックすると実際の動画があるURLに移動するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo動画検索 (サムネール画像＆リンク)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function YahooSearch()
{
srchStr = $("queryString").value;
if (srchStr == "") return;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","yahoo.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
txt = "";
xmlData = httpObj.responseXML;
tagThumbnail = xmlData.getElementsByTagName("Thumbnail");
sURL = xmlData.getElementsByTagName("ClickUrl");
for (i=0; i<tagThumbnail.length; i++)
{
urlList = tagThumbnail[i].getElementsByTagName("Url")[0];
imgLink = urlList.childNodes[0].nodeValue;
linkURL = sURL[i].childNodes[0].nodeValue;
txt += '<a href="'+linkURL+'"><img src="'+imgLink+'" border="1"></a>';
}
$("result").innerHTML = txt;
}
}
// --></script>
</head>
<body>
<h1>Yahoo動画検索 (サムネール画像＆リンク)</h1>
<p><a href="http://developer.yahoo.co.jp/">Web Services by Yahoo! JAPAN</a></p>
<form method="get" name="ajaxForm" onsubmit="YahooSearch();return false;">
<input type="text" value="ラピュタ" id="queryString">
<input type="button" value="Yahoo動画検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>
動画の場合にも形式を指定することができます。クエリーで「format=形式」を送信しますが、以下の形式を指定することができます。
| msmedia | Windows Media |
| quicktime | QuickTime |
| flash | Flash |
| avi | AVI |
| mpeg | MPEG |
| realmedia | Realmedia |
実際のサンプルは以下のようになります。ただし、形式によっては全く該当しない場合もあります。その場合には何も表示されません。検索結果数を表示するようにして検索結果が0の場合には、それなりのメッセージを表示する方がよいでしょう。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo動画検索 (条件指定)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function YahooSearch()
{
srchStr = $("queryString").value;
if (srchStr == "") return;
res = $("number").value;
fmt = $("format").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","yahoo.rb?query="+encodeURI(srchStr)+"&result="+res+"&format="+fmt+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
txt = "";
xmlData = httpObj.responseXML;
tagThumbnail = xmlData.getElementsByTagName("Thumbnail");
sURL = xmlData.getElementsByTagName("ClickUrl");
for (i=0; i<tagThumbnail.length; i++)
{
urlList = tagThumbnail[i].getElementsByTagName("Url")[0];
imgLink = urlList.childNodes[0].nodeValue;
linkURL = sURL[i].childNodes[0].nodeValue;
txt += '<a href="'+linkURL+'"><img src="'+imgLink+'" border="1"></a>';
}
$("result").innerHTML = txt;
}
}
// --></script>
</head>
<body>
<h1>Yahoo動画検索 (条件指定)</h1>
<p><a href="http://developer.yahoo.co.jp/">Web Services by Yahoo! JAPAN</a></p>
<form method="get" name="ajaxForm" onsubmit="YahooSearch();return false;">
<input type="text" value="ラピュタ" id="queryString">
<select id="format">
<option value="msmedia">Windows Media</option>
<option value="quicktime">QuickTime</option>
<option value="flash">Flash</option>
<option value="avi">AVI</option>
<option value="mpeg">MPEG</option>
<option value="realmedia">Realmedia</option>
</select>
<input type="text" value="10" id="number" size=3">枚
<input type="button" value="Yahoo動画検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>
他にも検索結果数を指定するresultなどのオプションが用意されています。オプションなどについてはYahooの開発者用のページに公開されているので、参考にしてみてください。
[
第九章 ディレクトリ検索を行うへ]
[
目次へ]
(2006.1.26)