マッシュアップページを作ってみるその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側はこんな感じです。

URLは前といっしょです。

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

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

←押すと一票入ります。

ホリデープログラミング, マッシュアップ

Posted on 2008/2/22 (金), 01:40 カテゴリー: マッシュアップ. | 購読 RSS 2.0. | コメントする | トラックバック URL

月	火	水	木	金	土	日
« 1月				3月 »
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29

Koichi Labs Blog