コマネタ帳

PCや土いじりやゲームやオモチャ、思いつくまま細切れネタを書き散らかす日記

[プログラミング]リファラのスライサで遊んでみる

コマネタ帳のネタ帳でmojalogさんの「リファラをスライスするウェブサービスとajaxでサイト内再検索ウェブパーツ (mojalog)」へリンクしたところ、「検索ワードの有効利用エントリのお詫びと訂正 (mojalog)」にて「クロスドメインでも使えるように直したよ!」とお知らせいただきました。ありがたや～。

さっそく、リファラの検索ワードを左上の検索窓に入れるのと、検索ワードの最初の1つでのサイト内検索結果をエントリの下に表示するようにしてみました。mojalogさんがやっていることを追いかけているだけで、なんの新しさもないわけですが、「mojalog.com以外のドメインでも動きます」サンプルとしてご覧ください。

手順

XML.com: JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript の「1.My JSONscriptRequest class」アンカーから jsr_class.zip をダウンロードする。
zip から js を取り出し、FC2へアップロードする。
Google AJAX Search API - Sign Up で API Key を取得する。

テンプレートで、検索窓にidをつける。この辺は手抜きです。

<form id="searchform" name="searchform" action="./" method="get">
  <input id="q" maxlength="maxlength" size="size" name="q" /> 
  <input type="submit" /> 
</form>

テンプレートで、Google検索結果の表示領域を確保する。
<div id="gsearchresult"> </div>

テンプレートで、.cssと.jsを取り込む。 APIKeyの部分に 3. で取得したAPI Keyを入れてください。

<style type="text/css">
@import "http://www.google.com/uds/css/gsearch.css";
.gsc-control { width: auto; }
</style> 
<script type="text/javascript" src="http://www.google.com/jsapi?key=APIKey"></script> 
<script type="text/javascript" src="http://blog-imgs-17.fc2.com/i/y/o/iyouneta/jsr_class.js"></script> 
<script type="text/javascript" src="http://blog-imgs-17.fc2.com/i/y/o/iyouneta/search.js"></script>

search.js を用意する。 mojalogさんのスクリプトを調整したものです。

window.onload = onLoadFunc; 
google.load("search", "1", {"nocss" : true}); 

var jsrInst; 

// リファラを分解 
function onLoadFunc() {
  var refs = document.referrer;
  if (refs == parent.document.URL) refs = top.document.refferrer;
  if (refs && refs.indexOf("?") != -1 && refs.indexOf("=") != -1) {
    jsrInst = new JSONscriptRequest('http://mojalog.com/mojascript/gsajax/refrxml.php?refr=' + escape(refs) + '&fmt=json');
    jsrInst.buildScriptTag();
    jsrInst.addScriptTag();
  } else {
    g_search(null);
  }
}

// リファラ分解のコールバック。JSONPのメソッド名がjsonなのでjsonというメソッド。
function json(data) {
  var html = "";
  for (idx = 0; idx < data.length; idx++) { 
    html = html + data[idx].item + " "; 
  } 
  document.searchform.q.value = html; 
  jsrInst.removeScriptTag(); 

  if (data.length > 0) { 
    g_search(data[0].item); 
  } else { 
    g_search(null); 
  } 
} 

// Google検索 
function g_search(str) { 
  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($("gsearchresult")); 
  // サイト内検索を行うため、site:ご自身のサイトトップレベルを検索条件に入れておきます。 
  // and検索を行うため、サイト名の末尾に半角スペースを最後に入力してあげるのを忘れないでください。 
  if (str) { 
    searchControl.execute("site:iyouneta.blog49.fc2.com " + str); 
  } 
} 

// タグのid名をもらって、該当のタグオブジェクトを返却する 
function $(tagId) { 
  return document.getElementById(tagId); 
}

`メモ`

google.load("search", "1"); とすると、gsearch.cssを読み込んでくれますが、この状態でCSSを修正するのはちょっと面倒なので、google.load("search", "1", {"nocss" : true}); としてCSSの読み込みをキャンセルしています。

できるだけmojalogさんのサーバに負担をかけないように、リファラにクエリがあるときだけ問い合わせをしています。一日50～60PVなんで、当面は大目に見てもらえるかなと思っていますが、そのうち中止するかも。

mojalogさんは電光石火でクロスドメインを修正しちゃうのに、俺の仕事の遅さと言ったら…。しかもやっつけ仕事なんで、検索窓が2つになっています。それでもありがたく使わせていただいていますエントリでした。APIの提供と迅速な修正情報の提供に感謝いたします、mojalog様。