備忘録：Google AJAX Search API
Movabletype ヴァージョンアップして、テンプレート等の構成も落ち着いてきたので、備忘録代わりにソースコードなどをアップしておきます。
<style type="text/css">
@import url(http://www.google.com/uds/css/gsearch.css);
.gsc-tabHeader {
display: block;
cursor: pointer;
padding-left: 6px;
padding-right: 6px;
margin-right: 0px;
width:100px;
border-color:#999999;
border-top-width:0px;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
}
.gsc-tabHeader.gsc-tabhActive {
margin-left:30px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
border-top: 2px solid #ff9900;
border-bottom: 1px solid #e9e9e9;
color: black;
}
.gsc-tabHeader.gsc-tabhInactive {
margin-left:80px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
border-top: 2px solid #e9e9e9;
border-bottom: 1px solid #999999;
background: #e9e9e9;
color: #676767;
}
.gsc-control { width : 98%;}
#branding {display:none;}
#searchResults form.gsc-search-box {
background-color:#eeeeee;
border-style:solid;
border-color:#999999;
border-top-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
background-color : #eeeeee;
padding-top : 4px;
width : 100%;
}
/* to right align branding, do this
#branding table.gsc-branding { width : auto; }
#branding td.gsc-branding-text div.gsc-branding-text { text-align : left; }
*/
.gsc-results {
clear: both;
padding-bottom: 2px;
font-size:10px;
}
.gsc-result {
margin-bottom: 10px;
font-size:10px;
}
.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
font-size:11px;
}
.gsc-videoResult .gs-videoResult .gs-title {
line-height: 1.3em;
height: 1.3em;
overflow: hidden;
font-size:10px;
}
.gsc-videoResult .gs-videoResult .gs-snippet {
line-height: 1.3em;
max-height: 2.6em;
overflow: hidden;
font-size:10px;
}
</style>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=[API Key]" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
var searchControl;
function OnLoad() {
GSearch.getBranding(document.getElementById("branding"));
// site restricted blog search
var bs = new GblogSearch();
bs.setUserDefinedLabel("blog");
var ns = new GnewsSearch();
ns.setUserDefinedLabel("news");
var vs = new GvideoSearch();
vs.setUserDefinedLabel("video");
var wikip = new GwebSearch();
wikip.setUserDefinedLabel("favorites");
wikip.setSiteRestriction("006893364966473782181:q66nh0vgwj8");
var amazon = new GwebSearch();
amazon.setUserDefinedLabel("shop");
amazon.setSiteRestriction("006893364966473782181:ubis-vmduc8");
var osan = new GwebSearch();
osan.setUserDefinedLabel("My Blog");
osan.setSiteRestriction("006893364966473782181:_aev4gx47qi");
var music = new GwebSearch();
music.setUserDefinedLabel("music");
music.setSiteRestriction("006893364966473782181:pj2bun72qkq");
var it = new GwebSearch();
it.setUserDefinedLabel("IT");
it.setSiteRestriction("006893364966473782181:c7nxqxxg_hg");
var fc = new GwebSearch();
fc.setUserDefinedLabel("finance");
fc.setSiteRestriction("006893364966473782181:sita0ruerqq");
var ws = new GwebSearch();
ws.setUserDefinedLabel("web");
searchControl = new GSearchControl();
searchControl.addSearcher(ws);
searchControl.addSearcher(bs);
searchControl.addSearcher(ns);
searchControl.addSearcher(vs);
searchControl.addSearcher(fc);
searchControl.addSearcher(it);
searchControl.addSearcher(music);
searchControl.addSearcher(amazon);
searchControl.addSearcher(wikip);
searchControl.addSearcher(osan);
var options = new GdrawOptions();
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchResults"), options);
// Execute an inital search
searchControl.execute("<MTEntryKeywords replace=","," OR ">");
}
GSearch.setOnLoadCallback(OnLoad);
registerLoadHandler(onLoad);
function registerLoadHandler(handler)
{
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
//]]>
</script>
<div id="branding"><img src="http://www.ystyle.biz/weblog/mt-static/images/ajax-loader.gif"></div>
<div id="searchResults"><img src="http://www.ystyle.biz/weblog/mt-static/images/ajax-loader.gif"></div>
Google AJAX Search APIを使った関連しそうなWEB・ブログなどの検索 タブ表示版。
ほとんどGoogleのサンプルどおりですが、タブ部分を
.gsc-tabHeader {
display: block;
インラインからブロック要素にしてます。
また、検索対象を Google謹製の WebSearch,BlogSearch,VideoSearchにプラスして、GoogleCoopであらかじめ用意しておいたいくつかのカスタムサーチにしています、ここには自分のブログのみ対象も入れてますので、ブログナイサーチも、激重な Movabletypeの検索を外部委託してるわけです、っていっても Googleにクロールされないとだめなわけですけどね。
searchControl.execute("<MTEntryKeywords replace=","," OR ">");
また初期の検索語は 、当初は エントリータイトルにしていたんですが、今は キーワードにし、MTEntryKeyworsで、単語の区切りになる , を ORに変換してGoogleに渡しています。
Loading...
Trackback(0)
- このブログ記事を参照しているブログ一覧
- 備忘録：Google AJAX Search API
- このブログ記事に対するトラックバックURL
- http://www.ystyle.biz/weblog/mt-tb.cgi/1966
コメントする