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

前回やった、Google,Yahoo!,Live Searchの同時検索をAjaxを使って実装しなおしてみました。
今回は特にUIに凝る気もないので、PHPで簡単にAjaxを書ける、xajaxを使ってみました。
xajaxを使うにあたって、以下のサイトを参考にしています。

PHP+xajaxでお気軽Ajaxアプリケーション作成(1)　～インストール／Hello World 【ver 0.5対応版】 : 地方で活動するweb制作者の日々を綴るblog
【ハウツー】PHPでAjax! JavaScript不要のxajax (1) PHP Ajaxクラスライブラリ - xajax | エンタープライズ | マイコミジャーナル

その他、ググるといろいろ出てきます。

まず、検索クラスのベースクラス(WebSearch.php)に多少の変更を加えてます。キャッシュのディレクトリをコンストラクタで渡すようにしたりといった対応です。

<?php
require_once 'IWebSearch.php';
require_once 'Cache/Lite.php';
/**
* 検索を行なうクラス
*/
class WebSearch implements IWebSearch {
/**
* キャッシュを使用するかどうか。
*/
protected $useCache = true;
/**
* キャッシュを使用するかどうかを設定する。
*/
public function setUseCache($flag) {
$this->useCache = $flag;
}
/**
* キャッシュ用Prefix
*/
protected $cachePrefix = "";
/**
* キャッシュ用Prefixを設定する。
*/
public function setCachePrefix($prefix) {
$this->cachePrefix = $prefix;
}
public function getCachePrefix() {
return $this->cachePrefix;
}
/**
* キャッシュのディレクトリ
*/
protected $cacheDir = "/tmp/cache";
/**
* 検索エンジン名
*/
protected $name;
/**
* 検索エンジン名
*/
public function getName()
{
return $this->name;
}
// キャッシュキー
protected $cacheKey;
// キャッシュオブジェクト
protected $cache;
// キャッシュされたデータ
protected $data;
/**
* コンストラクタ
*/
function __construct($cacheDir = NULL)
{
if($cacheDir) {
$this->cacheDir = $cacheDir;
}
}
/**
* 検索を行なう。
*/
public function search($query, $offset, $count) {
// キャッシュを使用するかどうか
if($this->useCache) {
// キャッシュの設定
$options = array(
'cacheDir' => $this->cacheDir,
'lifeTime' => 600
);
// キャッシュオブジェクト生成
$this->cache = new Cache_Lite($options);
if(!$this->cache) {
print ("キャッシュが生成できていない\n");
return null;
}
// キャッシュ用のキーを生成
$keyword = urlencode($query);
$this->cacheKey = $keyword . "_" . get_class($this) . "_" . $offset . "_" . $this->cachePrefix;
$this->data = $this->cache->get($this->cacheKey);
//var_dump($this->data);
}
if(!$this->data) {
// キャッシュされてなかったら、検索する。
$this->data = $this->searchCore($query, $offset, $count);
// キャッシュを行なう場合は、キャッシュに結果を収納する。
if($this->useCache && $this->cache) {
$this->cacheData();
}
}
// 検索結果を整形して返す。
$webResultSet = $this->getResult($this->data);
$webResultSet->setName($this->name);
$webResultSet->setId($this->cachePrefix);
return $webResultSet;
}
/**
* 検索処理
*/
protected function searchCore($query, $offset, $count)
{
}
/**
* 検索結果をキャッシュに設定する。
*/
protected function cacheData()
{
$this->cache->save($this->data, $this->cacheKey);
}
/**
* 検索結果を整形して返す
*/
protected function getResult($data)
{
}
}
?>

前回の、3search.class.phpに相当するものが以下のコード。xajaxで使用するにあたってHTMLの生成部分をstatic化したりといった対応をしています。

<?php
/**
* Google, Yahoo, Live Searchを検索するクラス
*
*/
class MashupSearch
{
public $offset = 0;
public $num = 10;
private $googleSearch;
private $liveSearch;
private $yahooSearch;
private $query = "";
protected $results;
protected $resultHtml;
/**
* コンストラクタ
*/
function __construct()
{
require_once 'WebSearch/LiveSearch.php';
require_once 'WebSearch/YahooSearch.php';
require_once 'WebSearch/GoogleSearch.php';
$cacheDir = '/tmp/cache';
$this->googleSearch = new GoogleSearch($cacheDir);
$this->yahooSearch = new YahooSearch($cacheDir);
$this->liveSearch = new LiveSearch($cacheDir);
}
/**
* Google, Yahoo, Live Searchをまとめて検索
*/
public function search($query, $offset)
{
$this->query = $query;
$this->offset = $offset * $this->num;
$this->results = array();
array_push($this->results, $this->googleSearch->search($this->query, $this->offset, $this->num));
array_push($this->results, $this->yahooSearch->search($this->query, $this->offset, $this->num));
array_push($this->results, $this->liveSearch->search($this->query, $this->offset, $this->num));
}
/**
* 結果をHTMLで返します
*/
public function getResult()
{
return $this->results;
}
/**
* 検索結果からHTMLを作成します
*/
public static function makeResultHTML(WebResultSet $result)
{
$html = "";
$name = $result->getName();
foreach($result->result as $res) {
$html .= "\t". '<li style="border: 1px solid #ffffff;">' . "\n";
$html .= "\t\t" . '<div class="result_title">';
$html .= '<a href="' . $res->url . '">';
$html .= $res->title . "</a></div>\n";
$html .= "\t\t" . '<div class="result_summary">';
$html .= MashupSearch::moji_cut($res->description, 120) . "</div>\n";
$html .= "\t\t". '<div class="result_url">';
$html .= MashupSearch::moji_cut($res->url, 50) . "</div>\n";
$html .= "\t</li>\n";
}
return $html;
}
private static function moji_cut($str, $maxlen){
//末尾の空白＆改行コード除去
$new_str=trim($str);
//エンティティ変換
$new_str = htmlspecialchars($new_str);
//指定文字数でカットし、省略マークを挿入
if(strlen($new_str) > $maxlen){
$new_str=mb_substr($new_str, 0, $maxlen);
$new_str.="...";
}
return $new_str;
}
}
?>

実際に、xajaxを使ったコードです。一応、MVCっぽい耕造になっています。xajaxに含まれているサンプルと同じ名前の付け方になってますが、コントローラーに相当するのが、xxxx.common.phpです。

search.common.php

ビジネスロジック部分に相当する部分です。サンプルでいうところの、xxxx.server.phpになります。

search.server.php

<?php
require_once('MashupSearch.class.php');
require_once("search.common.php");
function search($query, $offset)
{
// クラス作成
$searcher = new MashupSearch();
// 検索します
$searcher->search($query, $offset);
// xajaxのレスポンスクラス作成
$objResponse = new xajaxResponse();
// 検索結果取得
$result = $searcher->getResult();
$html = '<div class="result">' . "\n";
$i = 0;
foreach ($result as $res) {
if($offset == 0) {
// 最初だけ
$html .= '<div id="result' . $i . '">';
$html .= '<h2>';
$html .= $res->getName();
$html .= "</h2>\n";
$html .= "<ul id=\"". $res->getId() . "\">\n";
$html .= MashupSearch::makeResultHTML($res);
$html .= "</ul>\n";
$html .= "</div>\n";
if($i == 2) {
$html .= "</div>\n";
// 検索結果を表示する
$objResponse->assign("result", "innerHTML", $html);
}
}
else {
// 後は、それぞれの検索結果に追記していく
$objResponse->append($res->getId(), "innerHTML", MashupSearch::makeResultHTML($res));
}
$i++;
}
if($offset == 4) {
// 50件検索し終わったら、ボタンを使用可能にする
$objResponse->assign("submit","value","検索");
$objResponse->assign("submit","disabled",false);
}
else {
// 続けて検索を行なう
$objResponse->script('xajax_search("' .$query.'", '.($offset + 1).');');
}
return $objResponse;
}
$xajax->processRequest();
?>

そして、ビュー部分です。これが実際に、ブラウザから直接アクセスするファイルになります。

search.php

<?php
require("search.common.php");
echo '<?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">
.result #result0  { float:left; width: 33%; }
.result #result1  { float:left; width: 33%; }
.result #result2  { float:left; width: 33%; }
.result h2 {
text-align: center;
font-size: 16px;
margin:10px 30px;
border-bottom:1px solid #3399cc;
}
.result li{
padding: 5px;
margin: 5px;
line-height:120%;
border: 1px solid #fff;
list-style-type: none;
}
.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>
<title>3search</title>
<?php $xajax->printJavascript('../../'); ?>
<script type="text/javascript">
function submitSearch()
{
xajax.$('submit').disabled=true;
xajax.$('submit').value="検索中...";
xajax_search(xajax.$('query').value, 0);
}
</script>
</head>
<body>
<div id="form" style="text-align:center;">
<form  action="javascript:void(null);" onsubmit="submitSearch();">
検索語: <input type="text" name="query" id="query" value="" /> <input type="submit" name="submit" id="submit" value="検索" />
</form>
</div>
<div id="result">
</div>
</body>
</html>

ソースを見てもらえばわかるとおり、JavaScriptでの実装部分がかなり少なくて済みます。このくらいのレベルなら、簡単にAjaxの実装が出来てしまいます。
なお、xajaxは、ソースをみてもらうとわかりますが、二つ上のディレクトリ階層に置いているという想定です。
ソース一式は以下から取得できます。今回も予告なく、消したり内容を改変する可能性があります。

[3search_xajax.zip]

実際に動作は以下で確認できます。

http://labs.s-koichi.info/mashup/3search/search.php

で、作ってみて思ったが、それほどAjaxを使った効果が出てないかなぁという印象がある。最初の10件はそこそこ早くはでるんだけれど、それでもうちの環境でも1～2秒はかかります。
次回は、URLを入力して、それぞれの検索エンジンで何位になってるのかを表示させるところまでを実装しようと思っています。

←押すと一票入ります。

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

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

月	火	水	木	金	土	日
« 12月				2月 »
	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	30	31

Koichi Labs Blog