本エントリについての訂正記事
＜検索ワードの有効利用＞
例えばgoogleでhtml tag remover という複数のキーワードで検索すると現在（20070927）、検索結果TOPページにmojalogが表示されています。他のページ ※
例えば、html tag removerの３つのワードの内、removerだけで「サイト内を検索」すればユーザに必要なその情報があったとします。つまり、「site:mojalog.com removerという検索を行った場合」と言い換えられるのですが、ユーザはこういう検索を行うことはまずありません。あるとすれば、そのサイトに探している情報があると判っているときだけでしょう。１つ前のエントリ でもちょこっと紹介いたしました、ウェブサービスを作ってブログパーツとして紹介させて頂きました。ホームページを作る人のネタ帳さん(※SEOの記事を参考にさせていただきました) などのように、コンテンツの内容とその量が充実していればいるほど、その効果を発揮するのではないかと思います。
このブログパーツのオススメできる点は以下のとおりです。
サイト内の検索フォームに改めてタイプする必要が無い
非同期で検索結果を読み込むため、ページ全体のリロードの必要が無い
ウェブ検索・ブログ検索・ビデオ検索のほか、ローカルサーチ、ブックサーチ、イメージサーチ、ニュースサーチなどあらゆる検索結果が１度に得られる
＜リファラ分割ウェブサービス＞
リファラっていうのは、あるWebページのリンクをクリックして別のページに移動したときのリンク元のページのことで、リファラ分割ウェブサービスはこのリファラを判定して、検索ワードを抽出してxmlで返します。こんな感じ で、itemlist->elem下に、インデックス（何番目の検索ワードか？）を示すタグであるidxと実際の検索ワードを示すタグitemを持ちます。
＜分割したリファラを取得するajax＞
私はリファラ分割ウェブサービスをjavascriptで呼び出して、返ってきたxmlの要素をタグにマッピングしています。そして、このマッピングした結果をid="result"属性を持つdivタグオブジェクトのinnerHTMLにレンダリングします。
＜実装例＞
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>example</title>
<!--
http://code.google.com/apis/ajaxsearch/signup.html
上記URLよりAPI-KEYを取得して、以下のAPI-KEYに設定ください
//-->
<script src="http://www.google.com/jsapi?key=API-KEY" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load( "search", "1" );
function OnLoad() {
var searchControl = new google.search.SearchControl();
searchControl.addSearcher( new google.search.WebSearch() );
searchControl.addSearcher( new google.search.BlogSearch() );
searchControl.addSearcher( new google.search.VideoSearch() );
searchControl.draw( document.getElementById( "searchcontrol" ) );
// サイト内検索を行うため、site:ご自身のサイトトップレベルを検索条件に入れておきます。
// and検索を行うため、サイト名の末尾に半角スペースを最後に入力してあげるのを忘れないでください。
searchControl.execute( "site:mojalog.com " + form.sender.value );
}
//]]>
</script>
<script type="text/javascript">
<!--
function createXMLHttpRequest( funcPtr ){
var xmlHttpInst = null;
try{
xmlHttpInst = new XMLHttpRequest();
}
catch( e ){
try{
xmlHttpInst = new ActiveXObject( "Msxml2.XMLHTTP" );
}
catch( e ){
try{
xmlHttpInst = new ActiveXObject( "Microsoft.XMLHTTP" );
}
catch( e ){
return null;
}
}
}
if ( xmlHttpInst ) xmlHttpInst.onreadystatechange = funcPtr;
return xmlHttpInst;
}
// タグのid名をもらって、該当のタグオブジェクトを返却する
function $( tagId ){
return document.getElementById( tagId );
}
// XMLHttpRequest / ActiveXObjectインスタンスでウェブサービスを呼び出します。
function loadXMLFile( xmlPath )
{
reqInst = createXMLHttpRequest( displayData );
if ( reqInst ){
reqInst.open( "GET", xmlPath, true );
reqInst.send( null );
}
}
function displayData()
{
if ( ( reqInst.readyState == 4 ) && ( reqInst.status == 200 ) ){
xmlData = reqInst.responseXML;
elemTags = xmlData.getElementsByTagName( "elem" );
idxTags = xmlData.getElementsByTagName( "idx" );
itemTags = xmlData.getElementsByTagName( "item" );
elemSize = elemTags.length;
resultText = "<form action=\"\" method=\"post\" name=\"form\">\n<select name=\"sender\" onchange=\"OnLoad()\"><option value=\"\">サイト内検索</option>";
// 取得したxmlをパースします。
for( i = 0; i < elemSize; i++ ){
// idxは今回使用してません。
idx = idxTags[ i ].childNodes[ 0 ].nodeValue;
item = itemTags[ i ].childNodes[ 0 ].nodeValue;
resultText = resultText + "<option value=\"" + item + "\">" + item + "</option>";
}
resultText = resultText + "</select></form>";
// resultをid属性にもつタグオブジェクトにform～タグを設定しています。
$("result").innerHTML = resultText;
}
else {
$("result").innerHTML = "<form action=\"\" method=\"post\" name=\"form\"><select name=\"sender\" onchange=\"OnLoad()\"><option value=\"\">サイト内検索</option></select></form>";
}
}
// -->
</script>
<style type="text/css">
/* google search ajax apiのサーチボックスを非表示にしています。*/
#searchcontrol form.gsc-search-box { display : none; }
/* 検索結果のスタイルです。 */
.gsc-control { width : 400px; }
</style>
</head>
<!--
onload時にリファラ分割ウェブサービスを呼んでからgoogle search ajaxのOnLoadメソッドを呼び出します。
ウェブサービスを呼び出す際に渡すリファラはescapeしないと正しい結果が得られません。
//-->
<body onload="loadXMLFile( 'http://mojalog.com/mojascript/gsajax/refrxml.php?refr=' + escape( document.referrer ) );google.setOnLoadCallback( OnLoad );">
<!-- プルダウンフォームを表示します //-->
<div id="result"></div>
<!-- 検索結果を表示します //-->
<div id="searchcontrol"></div>
</body>
</html>
