ディレクトリ検索を行う

 ここではディレクトリ検索を行ってみます。ディレクトリ検索は他のWeb検索や画像検索と比べて、やや複雑になっています。リクエストパラメータは簡単ですが、返されるXMLデータのタグは少し多くなっています。

http://developer.yahoo.co.jp/category/browse/V1/browse.html

 ディレクトリ検索の場合、カテゴリのパスを送るかカテゴリIDをリクエストパラメータとして送ります。両方が同時に指定された場合にはIDが優先されます。パスはカテゴリのURLからdir.yahoo.co.jpを除いたものになります。以下のカテゴリURLの場合には赤字の部分をパスとしてリクエストします。

http://dir.yahoo.co.jp/Computers_and_Internet/Programming_and_Development/

リクエスト先はhttp://api.dir.yahoo.co.jp/Category/V1/Categoryとなります。他の検索と同様にYahooのアプリケーションIDを指定します。以下のサンプルはカテゴリのパスを入力しボタンをクリックすると結果をXMLのまま表示するものです。(サンプルを実行する

●yahoo.rb
#!/usr/local/bin/ruby
require "cgi-lib"
input = CGI.new
inputdata = input["query"]
print "Content-type: text/html\n\n"
fh = open("| curl 'http://api.dir.yahoo.co.jp/Category/V1/Category?appid=openspaceYS&path="+inputdata+"'")
while !fh.eof
print fh.gets
end
fh.close

●サンプルHTML
<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="prototype.js"></script>
<script type="text/javascript"><!--
function YahooSearch()
{
var srchStr = $("queryString").value;
if (srchStr == "") return;
var sURL = "yahoo.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
$("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="/Computers_and_Internet/Programming_and_Development/Programming_Languages/JavaScript/" id="queryString" size="120">
<input type="button" value="Yahooディレクトリ検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>

 返されたXMLを解析して表示してみましょう。ここでは、返された項目(カテゴリまたはページタイトル)を表示し、その横にパス(リンク先)を表示します。
 カテゴリおよびサイトはItemタグ内に情報が格納されています。Itemタグ内にあるTitleタグがカテゴリまたはサイトのタイトルになります。Itemタグ内にある内容が何なのかはTypeタグで知る事ができます。サンプルではカテゴリもサイトも同じように表示するため、特に読み込んで判別処理などは行っていません。
 カテゴリの場合はItemタグ内にあるPathタグの最初のノードにURLが記述されています。これは実際のパスからdir.yahoo.co.jpを除いたものになります。カテゴリでない場合にはPathタグがないため正しく読み込むことができません。typeタグで判別処理を行っていないのでtry...catch()を使って、Pathタグがない場合にはUrlタグを読み込んでサイトのURLとします。あとは、Itemタグの数だけ繰り返せばできあがりです。(サンプルを実行する

<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="prototype.js"></script>
<script type="text/javascript"><!--
function YahooSearch()
{
var srchStr = $("queryString").value;
if (srchStr == "") return;
var sURL = "yahoo.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var txt = "<ul>";
var yPath = "http://dir.yahoo.co.jp";
var XML = httpObj.responseXML;
var itemTag = XML.getElementsByTagName("Item");
for(var i=0; i<itemTag.length; i++)
{
try { var catTitle = itemTag[i].getElementsByTagName("Title")[0].firstChild.nodeValue; }
catch(e){ catTitle = ""; }
try { var catPath = itemTag[i].getElementsByTagName("Path")[0].firstChild.nodeValue; }
catch(e){
try { var catPath = itemTag[i].getElementsByTagName("Url")[0].firstChild.nodeValue; }
catch(e){ catPath = ""; }
}
txt += "<li>"+catTitle+"[<a href='"+yPath+catPath+"'>"+catPath+"</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="/Computers_and_Internet/Programming_and_Development/Programming_Languages/JavaScript/" id="queryString" size="120">
<input type="button" value="Yahooディレクトリ検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>


[目次へ]

(2006.3.1)