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

前回、書いたとおり、Google,Yahoo!,Live Searchでの同時検索を JQueryを使って作ってみた。

Google検索は、Google Ajax Search APIを使っている。内容的には以下のページにあるように、JSONPのような感じで扱う事が出来る。

Google AJAX Search APIは、動的にGoogle検索結果を自分のページに挿入することができるAPI(あまり使っているサイトを見ないけど)。Ajaxっつっても内部はJSONP(みたいなもの)だったりするので、

[ hail2u.net - Weblog - Google AJAX Search APIのJSONPを利用したサイト内検索 ]

Yahoo!のAPIも日本語版では解説されていないが、JSONPで返す事が出来るのが確認している。

Live Searchは、「Live Search Box」で提供されている内容をみてみると、Json形式を取得できるようだったので、これを使ってみる事にした。ただし、これはマッシュアップサイトで使っていていいものなのかは怪しい。

今回、JQueryでJSONPを扱うのに際して、jQuery JSONP pluginを使用しました。

しかも本家のネームスペースは jquery.json.js だったので、図々しくもこちらは jquery.jsonp.js にしてみました

[ iandeth. - jQuery JSONP plugin ]

ただ、Google AJAX Search APIは、通常のJSONPと違い引数が4つになっているので、Pluginの内容をいじって、引数が増えても動くようにしています。

HTML自体はシンプル。3search.jquery.jsが実際にJQueryを使っているスクリプトです。

<?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 #result3  { 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 #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>
<title>Google、Yahoo!、Live Searchをいっしょに検索 (JQuery版)</title>
</head>
<body>
<div id="forms" style="text-align:center;">
<form method="get" action="">
検索語: 
<input type="text" name="query" size="60" value="" />
<input type="submit" name="submit" value="検索" /><br />
URL: <input type="text" name="url" size="80" value="" />
</form>
</div>
<div id="result">
</div>
</body>
</html>

こちらが3search.jquery.jsのソースです。

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"><h2>Google</h2></div>');
	$( '.result' ).append('<div id="result1"><h2>Yahoo!</h2></div>');
	$( '.result' ).append('<div id="result2"><h2>Live Search</h2></div>');
	
	for(var i = 0;i < 4; i++) {
		google_search(i);
		
		yahoo_search(i);
		
		live_search(i);
	}
}

function google_search(page) {

var no = page * count + 1;
	
	var api_key = "Your ID";

// リクエスト先 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 > input[@name=query]').val();
		
	if(page != 0) {
		url += '&start=' + (no - 1);
	}

var matchurl = $( 'form > 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=YourID&format=any&language=ja'
		+ '&results=' + count + '&query=' + $( 'form > input[@name=query]').val()
		+ '&output=json&callback={callback}'
		+  '&start=' + no;
	
	var matchurl = $( 'form > 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 > 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 > input[@name=url]' ).val();

if(!res) {
					return;
				}
				else if(res.total < no) {
					return;
				}
				if(page == 0) {
					$( '#result2' ).append( '<div id="count_2" style="text-align:right;">検索件数:&nbsp;'
						+ numberFormatCount(res.total) + '件</div>' );
					if( matchurl != "") {
						$( '<div id="match_2" />').appendTo('#result2');
					}
					$( '<ol id="live" />' ).appendTo('#result2' );
					$( '#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 makeResultHTML(url, title, desc)
{
	var list = '';
	list += '<li style="border: 1px solid #ffffff;">' 
		+ '<div class="result_title"><a href="' + url + '">' + title + '</a></div>';
		
	list += '<div class="result_summary">' + desc + '</div>';
	
	list += '</li>';
	
	return list;
}

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

なお、今回件数表示のカンマ区切り表示用に、JavaScript Number Format v1.5.4というスクリプトを使用しています。

今回作成した、JQuery版は以下から使用できます。なんか、しらないけれどエライ速いです。xajax版では、Googleの検索結果を解析したりとかしてたんでってのもあるんだけれど。取得件数が少ない事を差し引いても速い気がします。Google Ajax Search APIの制限で、最大32件までしか取得できないのが痛いです。