画像検索を行う

　ここでは画像の検索を行ってみます。
画像の検索結果を取得する場合には以下のようにWeb検索とは要求するURLが異なっています。

http://api.search.yahoo.co.jp/ImageSearchService/V1/imageSearch

　また、返されるXMLデータもWeb検索のものと若干異なり、画像のサイズや各種情報も含まれます（reponsetTextでXMLデータを取得して確認する。実際のサンプルを見る）。
返されるXMLデータから画像のタイトルを表示してみます。画像のタイトルはTitleタグの次のテキストノードです。getElemensByTagName("Title")でタグ情報を求めます。結果は配列になるので、そこから最初のノードをたどり、nodeValueで画像のタイトルを取得します。（サンプルを実行する）

<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="Ajax" id="queryString">
<input type="button" value="Yahoo画像検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>

　画像検索なのに画像のタイトルだけでは寂しいので実際の画像を表示させてみます。返されたXMLデータ内には画像のURLを示すタグがあります。画像のURLはResultタグ内にあるUrlタグの最初のテキストノードになります。注意しないといけないのはgetElementsTagName("Url")でUrlタグの情報を取得し処理してしまうと正しい結果にはなりません。というのも画像検索で返されるXMLの場合には他の場所にもUrlタグが存在しているためです。このため、各Resultタグ内にある最初の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;
tagResult = xmlData.getElementsByTagName("Result");
for (i=0; i<tagResult.length; i++)
{
urlList = tagResult[i].getElementsByTagName("Url")[0];
imgLink = urlList.childNodes[0].nodeValue;
txt += '<img src="'+imgLink+'">';
}
 $("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="Ajax" id="queryString">
<input type="button" value="Yahoo画像検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>

　さすがに、実際の画像を表示させると表示までに時間がかかったり、サイズが大きかったり不便なこともあります。画像検索でどのような画像があるか、確認するような場合にはサムネール画像を表示させるのが一般的です。サムネール画像はThumbnailタグ内に情報があります。サムネール画像のURLはThumbnailタグ内にあるUrlタグの最初のテキストノードに書かれていますので、これを取得して表示します。Thumbnailタグ内にはサムネール画像のサイズを示すWidth, Heightタグもあるので、状況に応じて、これらの値も読み出して利用できます。（サンプルを実行する）

<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");
for (i=0; i<tagThumbnail.length; i++)
{
urlList = tagThumbnail[i].getElementsByTagName("Url")[0];
imgLink = urlList.childNodes[0].nodeValue;
txt += '<img src="'+imgLink+'">';
}
 $("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="Ajax" id="queryString">
<input type="button" value="Yahoo画像検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>

　サムネール画像をクリックしたら実際の画像を表示するには、画像へのリンクを指定します。このリンク先はWeb検索と同じようにClickUrlタグの最初のテキストノードを読み出しaタグのhref属性に設定します。（サンプルを実行する）

<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="Ajax" id="queryString">
<input type="button" value="Yahoo画像検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>

　画像の検索ではWeb検索同様にいくつかのオプションを指定することができます。例えば画像の形式を指定することができます。クエリーで「format=形式」を指定します。以下の画像の形式を指定することができます。

any全ての形式
jpgJPEG形式
gifGIF形式
pngPNG形式
bmpBMP形式

　画像形式を指定して検索するサンプルは以下のようになります。（サンプルを実行する）

<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="Ajax" id="queryString">
<select id="format">
<option value="any">全ての形式</option>
<option value="jpg">JPEG形式</option>
<option value="gif">GIF形式</option>
<option value="png">PNG形式</option>
<option value="bmp">BMP形式</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>

　次項では動画検索を行ってみます。

[第九章　5:動画検索を行うへ]
[目次へ]

(2006.1.26)