まず、ブラウザからのリクエストを中継するCGIを用意します。ここでは、以下のような感じのものを用意しています（サンプルによって内容は異なりますので参考程度ということで）。
#!/usr/local/bin/ruby
require "cgi-lib"
input = CGI.new
inputdata = input["query"]
print "Content-type: text/xml\n\n"
fh = open("| curl 'http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=openspaceYS&query="+inputdata+"'")
while !fh.eof
print fh.gets
end
fh.close
それでは、まずresponseTextでYahooから、どのようなXMLデータが送られてくるか見てみます（実際のサンプルを
実行する）。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo検索 (responseText)</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))
{
$("result").innerText = httpObj.responseText;
$("result").textContent = httpObj.responseText;
}
}
// --></script>
</head>
<body>
<h1>Yahoo検索 (responseText)</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>
サンプルを実行するとYahooから送られてきたXMLデータが表示されます（XMLサンプルを
表示する）。このXMLを解析して検索結果を表示してみます。最も簡単なところで、検索結果のタイトル文字だけリストアップして表示します。
検索結果はResultタグ内に格納されています。その中にTitleタグがあり、これが検索でひっかかったページのタイトルになります。Titleタグの最初のテキストノードを取り出し表示します。（実際のサンプルを
実行する）
<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>
検索結果のタイトル文字列は表示できましたが、やはりリンクをはって文字をクリックしたら該当ページを表示したいところです。Resultタグ内を見るとリンク先を示す場合にUrlとClickUrlの2種類のタグがあります。Yahooの開発者ページを見るとUrlでなくClickUrlタグで示されるURLをリンク先として指定するように記述されています。そこで、ClickUrlタグの最初のテキストノードを読み出し、<a>タグのhref属性に設定します。これで、検索結果にリンクがはられます。非常にシンプルなYahoo検索ページのできあがりです。（サンプルを実行する）
<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;
resultObj = xmlData.getElementsByTagName("Result");
titleList = xmlData.getElementsByTagName("Title");
for (i=0; i<titleList.length; i++)
{
str = titleList[i].childNodes[0].nodeValue;
sURL = resultObj[i].getElementsByTagName("ClickUrl")[0].childNodes[0].nodeValue;
txt += '<a href="'+sURL+'">'+str + "</a><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>
Yahooでは他にもいくつかの検索オプションを用意しています。次項では、それらのオプションを利用して検索を行ってみます。
[
第九章 3:検索オプションを指定するへ]
[
目次へ]
(2006.1.25)