マッシュアップページを作ってみるその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 />
</form>
</div>
<div id="result">
</div>
</body>
</html>

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

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

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

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

今回のJQuery版が思いのほか軽快なんで、xajax版といいとこ取り出来ないものかと思ってます。そういう方向でいろいろいじってみる予定です。

←押すと一票入ります。

Koichi Labs Blog

MT, XOOPS, Flex, Ajaxなんかのあれこれ

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

関連エントリー:

One Comment

コメントを残すコメントをキャンセル

関連エントリー:

One Comment

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル