goo検索結果を表示する

　Yahoo以外の検索サイトの検索結果も表示できます。そこで、次にgooの検索結果を表示させてみます。基本的にはYahooと同じです。CGI部分に与えるURLが異なります。（サンプルを実行する）


#!/usr/local/bin/ruby
require "kconv"
require "cgi-lib"
input = CGI.new
inputdata = input["query"]
bom = "\xef\xbb\xbf"
print "Content-type: text/html\n\n"
print bom
fh = open("| curl http://search.goo.ne.jp/web.jsp?MT="+inputdata)
 while !fh.eof
str = fh.gets
print Kconv::toutf8(str)
end
fh.close

　実際に使うには一部問題もありますが、そこは勉強用ということでパスします。
検索していくと、どんどんウィンドウが多くなっていきますが、このウィンドウを閉じる方法が用意されていません。そこで、ウィンドウのタイトルバーをダブルクリックしたら、ウィンドウを閉じる処理を付け加えてみます。ダブルクリックはdblclickというイベント名になっています。ダブルクリックされたらウィンドウを閉じる処理を行います。サンプルではcloseWindow()関数部分になります。ウィンドウはdivタグのID名contentsの子要素として追加されていますので、この要素（divタグ）の中からダブルクリックされたウィンドウと同じID名を持つものを削除します。名前を調べるには、for()命令を使って繰り返し調べます。ウィンドウを削除するにはremoveChild()を使います。これでウィンドウが画面から消えます。しかし、画面から消しただけでなく、どのウィンドウが存在するかを格納しているウィンドウリスト（配列）からも削除する必要があります。このウィンドウリスト（dragObj.window）はドラッグ時にドラッグ可能なオブジェクト名を格納しています。この中からID名を検索し削除するものを探します。しかし、配列から削除する方法以外に、削除するもの以外を新規配列に追加していく方法もあります。今回はこの新規配列に追加していく方法を使っています。これでウィンドウをドラッグして移動でき、タイトルバーをダブルクリックするとウィンドウが閉じられます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>goo検索結果をマルチウィンドウで表示する</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 gooSearch()
{
srchStr = document.getElementById("query").value;
if (srchStr == "") return;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","curl.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
newWindow();
$("result"+ winNum).innerHTML = httpObj.responseText;
winNum++;
}
}
function newWindow()
{
var dObj = document.getElementById("window0").cloneNode(true);
var winObj = document.getElementById("contents").appendChild(dObj);
winObj.id = "window"+winNum;
winObj.childNodes[0].id = "result"+winNum;
addEvent("window"+winNum,"mousedown",dragObj.dragStart,false);
addEvent("window"+winNum,"dblclick",closeWindow,false);
winObj.style.left = 10+Math.floor(Math.random()*400)+"px";
winObj.style.top = 150+Math.floor(Math.random()*200)+"px";
winObj.style.visibility ="visible";
winObj.style.zIndex = dragObj.zIndex + 1;
winObj.childNodes[0].style.visibility = "visible";
dragObj.window.push("window"+winNum);
dragObj.maxLayer = dragObj.window.length;
}
// ウィンドウを閉じる処理
function closeWindow(e)
{
wObj = getEventTarget(e);
contObj = $("contents");
// ウィンドウをノードから削除
for (var i=0; i<contObj.childNodes.length; i++)
{
if(contObj.childNodes[i].id == wObj.id)
{
contObj.removeChild(contObj.childNodes[i]);
}
}
// ウィンドウリストから削除
var temp = new Array();
for (i=0; i<dragObj.window.length; i++)
{
if (dragObj.window[i] != wObj.id)
{
temp.push(dragObj.window[i]);
}
}
dragObj.window = temp;
}
 function initObj()
{
window.document.onmousemove = dragObj.dragProc;
window.document.onmouseup = dragObj.dragEnd;
winNum = 1;
dragObj.window = [];
dragObj.maxLayer = 1; // 最大レイヤー枚数
}
// --></script>
</head>
<body onload="initObj()" oncontextmenu="return false">
<h1>goo検索結果をマルチウィンドウで表示する</h1>
<p>ダブルクリックでウィンドウを閉じる事ができます</p>
<form method="get" name="ajaxForm" onsubmit="gooSearch();return false;">
<input type="text" value="" id="query">
<input type="button" value="goo検索" onClick="gooSearch()">
</form>
<div id="contents"></div>
<div id="window0" class="windowBorder"><div id="result0" class="windowContents"></div>
</div>
</body>
</html>

　ところが、Safari 2では上記スクリプトではダブルクリックしても反応しません。つまりSafari 2ではウィンドウを閉じることができないことになります。これでは困るので、古い時代のMacOS 9のようにタイトルバーの左側にクローズボックスを用意し、そこがクリックされたらウィンドウを閉じるようにします。オブジェクトを用意しクローズボックスとするのが一般的ですが、ここではマウス座標を調べてウィンドウを閉じる処理を行っています。ちなみに、このような方法では修正時に手間がかかったり改良するのが難しいという面があります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>goo検索結果をマルチウィンドウで表示する</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 gooSearch()
{
srchStr = document.getElementById("query").value;
if (srchStr == "") return;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","curl.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
newWindow();
$("result"+ winNum).innerHTML = httpObj.responseText;
winNum++;
}
}
function newWindow()
{
var dObj = document.getElementById("window0").cloneNode(true);
var winObj = document.getElementById("contents").appendChild(dObj);
winObj.id = "window"+winNum;
winObj.childNodes[0].id = "result"+winNum;
addEvent("window"+winNum,"click",closeWindow,false);
addEvent("window"+winNum,"mousedown",dragObj.dragStart,false);
winObj.style.left = 10+Math.floor(Math.random()*400)+"px";
winObj.style.top = 150+Math.floor(Math.random()*200)+"px";
winObj.style.visibility ="visible";
winObj.style.zIndex = dragObj.zIndex + 1;
winObj.childNodes[0].style.visibility = "visible";
dragObj.window.push("window"+winNum);
dragObj.maxLayer = dragObj.window.length;
}
// ウィンドウを閉じる処理
function closeWindow(e)
{
// クローズボックス上でマウスボタンが押されたか？
if ((dragObj.offsetX < 2) || (dragObj.offsetX >14) || (dragObj.offsetY < 4) || (dragObj.offsetY > 16)) return;
 wObj = getEventTarget(e);
contObj = $("contents");
// ウィンドウをノードから削除
for (var i=0; i<contObj.childNodes.length; i++)
{
if(contObj.childNodes[i].id == wObj.id)
{
contObj.removeChild(contObj.childNodes[i]);
}
}
// ウィンドウリストから削除
var temp = new Array();
for (i=0; i<dragObj.window.length; i++)
{
if (dragObj.window[i] != wObj.id)
{
temp.push(dragObj.window[i]);
}
}
dragObj.window = temp;
}
function initObj()
{
window.document.onmousemove = dragObj.dragProc;
window.document.onmouseup = dragObj.dragEnd;
winNum = 1;
dragObj.window = [];
dragObj.maxLayer = 1; // 最大レイヤー枚数
}
// --></script>
</head>
<body onload="initObj()" oncontextmenu="return false">
<h1>goo検索結果をマルチウィンドウで表示する</h1>
<p>クローズボックスのクリックでウィンドウを閉じる事ができます</p>
<form method="get" name="ajaxForm" onsubmit="gooSearch();return false;">
<input type="text" value="" id="query">
<input type="button" value="goo検索" onClick="gooSearch()">
</form>
<div id="contents"></div>
<div id="window0" class="windowBorder"><div id="result0" class="windowContents"></div>
</div>
</body>
</html>

　これで全てのブラウザでウィンドウを閉じることができるようになりました。
(補足説明：ここではウィンドウをノードから削除するためにfor()を使ってインクリメント（カウンタを増やしながら）しチェックしていますが、ノードが削除されると要素数（と位置）が変わってしまいます。このため、インクリメントで処理するのではなくデクリメント（カウンタを減らしながら）処理する方が良いでしょう。ノードの状態がどのようになっているかはFirefoxではツールメニューのDOM Inspectorを選択して表示されるウィンドウで確認することができます。[2006.1.20追記]）
次項ではInfoseekの検索結果を表示させてみます。

[第六章　3:Infoseek検索結果を表示するへ]
[目次へ]

(2006.1.18, 2006.1.20)