コマネタ帳(旧) by iyoupapa

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

Creative Commons Licenseiyoupapaが書いたコマネタ帳の文章は「Creative Commons 表示-継承 2.1 日本」ライセンスです。写真については私のFlickrで配布しています。新しい「コマネタ帳」に移転しました。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

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

手順

  1. XML.com: JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript の「1.My JSONscriptRequest class」アンカーから jsr_class.zip をダウンロードする。
  2. zip から js を取り出し、FC2へアップロードする。
  3. Google AJAX Search API - Sign Up で API Key を取得する。
  4. テンプレートで、検索窓にidをつける。この辺は手抜きです。
    <form id="searchform" name="searchform" action="./" method="get">
      <input id="q" maxlength="maxlength" size="size" name="q" /> 
      <input type="submit" /> 
    </form>
  5. テンプレートで、Google検索結果の表示領域を確保する。
    <div id="gsearchresult"> </div>
  6. テンプレートで、.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> 
  7. 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様。

コメント

ありがとうございます

こんにちはmojalogのひげもじゃです。サービスをご利用いただいてありがとうございます。負荷などもご考慮いただき本当にありがとうございました。

こちらこそありがとうございます

便利なサービスをありがとうございます。
もっとエレガントな利用法が思いつけば良かったんですが、力不足ですみません。

また、面白そうなサービスを作ってくださいね。

コメントの投稿















管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://iyouneta.blog49.fc2.com/tb.php/244-d5b522cb

-

管理人の承認後に表示されます

skin presented by myhurt : BLOG | SKIN

FC2Ad

  
copyright © 2005 コマネタ帳(旧) some rights reserved. Powered by FC2ブログ