マッシュアップページを作ってみるその8

前に作った、xajaxバージョンのGoogle, Yahoo!, Live Searchをマッシュアップしたページを少しいじって、チューンナップしてみました。

JQueryを使ったバージョンより、かなり遅い感じがしたので、どこがネックになってるのかなと思ったんだが、せっかくAjaxを使ってるのに非同期処理になってなくて、逐次検索してるのと変わらない状態だったことに気付いた。サーバー側のphpで、javascriptの実行をさせてるのだが、1回づつやってたんで遅かった。javascript内でループして連続して検索すれば非同期検索と同じになるってことに気付いた。

、今回書き換えてみた、server側のphpファイルです。検索ボタン押された時に、showcountが呼ばれます。ここで、検索件数のみ表示して残りは searchをループで連続して呼ぶようなjavascriptのコードを書いて連続検索させています。10件程度の検索だとレスポンスが速いんで、体感的にはかなり早くなった感じがします。

<?php
require_once("search.common.php");

function showcount($engineindex, $query, $url = NULL)
{
	global $searchEngine;
	global $countonce;
	global $maxcount;
	
	// xajaxのレスポンスクラス作成
	$objResponse = new xajaxResponse();

// クラス作成
	$searcher = new MashupSearch(array($searchEngine[$engineindex]['name']));

// 検索します
	$searcher->setNum(1);
	$res = $searcher->searchByEngine($query, 0, $searchEngine[$engineindex]['name']);
	
	$objResponse->append("count_".$engineindex, 'innerHTML', "検索件数:&nbsp;". number_format($res->count). "件");
	
	$query = str_replace('"', '\"', $query);
	$max = $maxcount / $countonce;
	
	$script = "for(var i = 0; i < " . $max . "; i++) { ";
	$script .= 'xajax_search('.$engineindex.' , "' .$query.'", i';
	if($url) {
		$script .= ", '" . $url ."');";
	}
	else {
		$script .= '); ';
	}
	$script .= '} ';
	$objResponse->script($script);

return $objResponse;
}

function search($engineindex, $query, $offset, $url = NULL)
{
	global $searchEngine;
	global $countonce;
	global $maxcount;
	
	// xajaxのレスポンスクラス作成
	$objResponse = new xajaxResponse();

// クラス作成
	$searcher = new MashupSearch(array($searchEngine[$engineindex]['name']));
	
	$searcher->setNum($countonce);
	// 検索します
	$res = $searcher->searchByEngine($query, $offset, $searchEngine[$engineindex]['name']);

if($url) {
		$match = "";
		$num = $offset * $countonce + 1;
		foreach($res->result as $r) {
			if(!(strpos($r->url, $url) == false)) {
				$match .= '&nbsp;<a href="#' . $res->getId() . $num . '">' . $num . '</a>';
			}
			$num++;
		}
		
		$objResponse->append('match_' . $engineindex, 'innerHTML', $match);
	}
	
	$html = '';
	// 後は、それぞれの検索結果に追記していく
	$objResponse->assign('block_'.$res->getId() . $offset, "innerHTML", $searcher->makeResultHTML($res));

return $objResponse;
}

$xajax->processRequest();	
?>

Forefoxのアドオン、Firebugで速度を比べてみました。旧バージョンではこんなもんでした。

今回のバージョンでは、このくらいです。

数字で見ると大した事なさそうだけど、体感的には結構違う感じです。

以前のバージョンと同じURLです。

Google、Yahoo!、Live Searchを同時検索

今回のソースコード一式です。HTML_ParserとPEARのCache_Liteが必要です。
[3search_xajax20080220.zip]

続いて、前回作ったJQuery版を改良しています。今回はBaiduの検索も同時に行なうようにしています。さらに、4カラムにするのが嫌だったんで、Live SearchとBaiduの検索結果をタブで切り替えて表示するようにしました。タブは、JQueryのui.tabsを使っています。
HTMLは以下のような感じ。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<style type="text/css" media="screen">
* {
	font-family: verdana ,arial ,san-serif;
    font-weight: normal;
}

.result #result0  { float:left; width: 33%; }
.result #result1  { float:left; width: 33%; }
.result #result2  { float:left; width: 33%; }

.result .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin:10px 30px;
    border-bottom:1px solid #3399cc;
    width: 90%;
    padding-left: 7px;
}

.result li.result_item {
    padding: 5px;
    margin: 5px;
    line-height:120%;
    border: 1px solid #fff;
    _list-style-type: none;
}

.result #match_0, .result #match_1, .result #match_2 {
	margin: 2px 30px;
}

.result .result_title   { font-size: 14px; }
.result .result_title  a{ text-decoration: underline; }
.result .result_meta    { font-size: 12px; color:#777; }
.result .result_summary { font-size: 12px; }
.result .result_url     { font-size: 12px; color:#080; }
.result .result_rank    { visibility:hidden; text-align: right; }

</style>
<script type="text/javascript" src="../../js/jquery.js" ></script>
<script type="text/javascript" src="../../js/jquery.jsonp.js"></script>
<script type="text/javascript" src="../../js/NumberFormat154.js"></script>
<script type="text/javascript" src="../../js/3search.jquery.js"></script>
<script type="text/javascript" src="../../js/ui.tabs.js"></script>
<link href="./3search.tabs.css" rel="stylesheet" type="text/css">
<title>Google、Yahoo!、Live Search,Baiduをいっしょに検索 (JQuery版)</title>
</head>
<body>
<div id="forms" style="text-align:center;">
<form method="get" action="">
<p>検索語: 
<input type="text" name="query" size="60" value="" />
<input type="submit" name="submit" value="検索" /></p>
<p>URL: <input type="text" name="url" size="80" value="" /></p>
</form>
</div>
<div id="result">
</div>
</body>
</html>

JavaScript側はこんな感じです。

var count = 8;

$( document ).ready( function(){
	$( 'form' ).submit( function(){
		jsonp_request();
		return false;
	});
});

function jsonp_request (mode){
	$( '#result' ).empty();
	$( '<div class="result"></div>' ).appendTo( '#result' );
	$( '.result' ).append('<div id="result0"><div class="title">Google</div></div>');
	$( '.result' ).append('<div id="result1"><div class="title">Yahoo!</div></div>');
	$( '.result' ).append('<div id="result2" class="search" />');
	
	$( '#result2' ).append('<ul><li><a href="#result21"><span>Live Search</span></a></li><li><a href="#result22"><span>百度</span></a></li></ul>');
	$( '#result2' ).append('<div id="result21" /><div id="result22" />');
			
	$('#result2 > ul').tabs();    
	
	for(var i = 0;i < 4; i++) {
		google_search(i);
		
		yahoo_search(i);
		
		live_search(i);
		
		baidu_search(i);
	}
}

function google_search(page) {

var no = page * count + 1;
	
	var api_key = "ABQIAAAAGfLMLVwLHaT9wDD8xINERRTBwPtB2uGSO5G1KlCCZmFGGhUZfhSMRCnk7fz29dbkmo6bSeKuCJ7a7A";

// リクエスト先 API URL 生成
	var url = 'http://www.google.com/uds/GwebSearch?context=0&lstkp=0&rsz=large&hl=ja&gss=.co.jp&v=1.0'
		+ '&callback={callback}' 
		+ '&key=' + api_key 
		+ '&q=' + $( 'form > p >input[@name=query]').val();
		
	if(page != 0) {
		url += '&start=' + (no - 1);
	}

var matchurl = $( 'form > p >input[@name=url]' ).val();
	
	// リクエスト実施
	$.getJSONP( url, function (i, r, n, m) {
			var res = r.results;

if(!r.cursor.estimatedResultCount) {
				return;
			}
			if(r.cursor.estimatedResultCount < no) {
				return;
			}
			if(page == 0) {
				$( '#result0' ).append( '<div id="count_0" style="text-align:right;">検索件数:&nbsp;'
					+ numberFormatCount(r.cursor.estimatedResultCount) + '件' );
				
				if( matchurl != "") {
					$( '<div id="match_0" />').appendTo('#result0');
				}
				$( '<ol id="google" />' ).appendTo('#result0' );
				$( '#google' ).text("Loading...");
			}
			
			var list = '';
			var i = no;
			$( res ).each( function () {
				list += makeResultHTML(this.url, this.title, this.content);
				if(this.url.indexOf(matchurl) >= 0) {
					$( '#match_0' ).append('&nbsp;' + i);
				}
				i++;
			});

if(page == 0) { $( '#google' ).empty(); }
			$( list ).appendTo('#google');
		
	});
}

function yahoo_search(page)
{
	var no = page * count + 1;

var url = 'http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=s_koichi&format=any&language=ja'
		+ '&results=' + count + '&query=' + $( 'form > p > input[@name=query]').val()
		+ '&output=json&callback={callback}'
		+  '&start=' + no;
	
	var matchurl = $( 'form > p >input[@name=url]' ).val();

// リクエスト実施
	$.getJSONP( url, function (tree) {
		var res = tree.ResultSet;
		
		if(res.totalResultsAvailable < no) {
			return;
		}
		if(page == 0) {
			$( '#result1' ).append( '<div id="count_1" style="text-align:right;">検索件数:&nbsp;'
				+ numberFormatCount(res.totalResultsAvailable) + '件</div>' );
				
			if( matchurl != "") {
				$( '<div id="match_1" />').appendTo('#result1');
			}
			$( '<ol id="yahoo" />' ).appendTo('#result1' );
			$( '#yahoo' ).text("Loading...");
		}

var list = '';
		var i = no;
		$( res.Result ).each( function () {
			list += makeResultHTML(this.Url, this.Title, this.Summary);

if(this.Url.indexOf(matchurl) >= 0) {
				$( '#match_1' ).append('&nbsp;' + i);
			}
			i++;
		});
		
		if(page == 0) { $( '#yahoo' ).empty(); }
		
		$( list ).appendTo( '#yahoo' );
	});
}

function live_search(page)
{
	var no = page * count + 1;
	var url = 'http://search.live.com/json.aspx?sourcetype=spell&sourcetype=web&sourcetype=ads&q1=&adscount=2&locale=ja-JP&charset=utf-8&FORM=LSBSOW&ver=1201886803796'
		+ '&count=' + count 
		+ '&q=' + $( 'form > p >input[@name=query]').val()
		+ '&first=' + (page * count + 1);

$.ajax({
		dataType: "script",
		url: url,
		success: function () {
			var callback = function (tree) {
				var res = tree.web;
				var matchurl = $( 'form > p >input[@name=url]' ).val();

if(!res) {
					return;
				}
				else if(res.total < no) {
					return;
				}
				if(page == 0) {
					$( '#result21' ).append( '<div id="count_2" style="text-align:right;">検索件数:&nbsp;'
						+ numberFormatCount(res.total) + '件</div>' );
					if( matchurl != "") {
						$( '<div id="match_2" />').appendTo('#result21');
					}
					$( '<ol id="live" />' ).appendTo('#result21' );
					$( '#live' ).text("Loading...");
				}
				
				var list = '';
				var i = no;
				$( res.results ).each( function () {
					list += makeResultHTML(this.url, this.title, this.description);

if(this.url.indexOf(matchurl) >= 0) {
						$( '#match_2' ).append('&nbsp;' + i);
					}
					i++;
				});

if(page == 0) { $( '#live' ).empty(); }
				$( list ).appendTo( '#live' );
			};
			
			callback(LiveSearchGetResponse());
		}
	});
}

function baidu_search(page)
{
	var no = page * count + 1;
	var url = 'http://pipes.yahoo.com/s_koichi/baidujpsearch?_render=json'
		+ '&_callback={callback}'
		+ '&num=' + count + '&q=' + $( 'form > p > input[@name=query]').val()
		+ '&start=' + no;
	
	var matchurl = $( 'form > p >input[@name=url]' ).val();

// リクエスト実施
	$.getJSONP( url, function (tree) {
		var res = tree.value;

if(this.url.indexOf(matchurl) >= 0) {
				$( '#match_3' ).append('&nbsp;' + i);
			}
			i++;
		});
		
		if(page == 0) { $( '#baidu' ).empty(); }
		
		$( list ).appendTo( '#baidu' );
	});
}

function makeResultHTML(url, title, desc)
{
	var list = '';
	list += '<li style="border: 1px solid #ffffff;" class="result_item">' 
		+ '<div class="result_title"><a href="' + url + '">' + title + '</a></div>';
		
	list += '<div class="result_summary">' + desc + '</div>';
	list += '<div class="result_url">' + url.substr(0,50) + '</div>';
	
	list += '</li>';
	
	return list;
}

function numberFormatCount(count)
{
	// カンマ区切りで件数を返す
	var n = new NumberFormat(count);
	n.setPlaces('0', false);
	return n.toFormatted();
}

URLは前といっしょです。

Google、Yahoo!、Live Search、Baiduを同時検索(JQuery版)

とりあえず、今回はこんなところです。

←押すと一票入ります。

はじめまして
検索エンジン＋ajaxを勉強させてもらっております。
ajax(JQuery)版は速いですねー

ところで、googleの検索結果の表示順位が、Webで検索した結果と
かなり順位が異なるのですが、何か原因はご存知ですか？
Yahooはいいみたいですね。

例えば「英会話」で検索すると、１位は同じですが、２位以降が
もう違っちゃってます。

とも | 2008年03月22日 05:12

はじめまして、ともさん。

Google Ajax Web Search APIでの検索結果は、Webで検索したときと違う事があるようです。
原因は、当初は Google.comとGoogle.co.jpの違いかなと思ってたんですが、「英会話」での検索結果をみると、それとも違ってたので、別の原因のようです。
とりあえず、今のところは、わかってませんm(__)m。

Koichi | 2008年03月23日 20:39

コメントする