ホーム > フォーラム > 開発 > デザイン開発 > Google Custom SearchをXoopsで使う方法

Google Custom SearchをXoopsで使う方法
投稿者: wf9a5m75 | 投稿日時: 2008/1/23 16:21 | 閲覧: 11672回
wf9a5m75

皆さん、こんにちは。wf9a5m75です。
今回は質問ではなく、チップスの投稿です。

私は以前からXoops Cube(以後、Xoopsと略)の標準検索機能は「使いにくいな〜」と思っているので
Googleが提供している「Google Custom Search」というサービスを利用しています。
今回はそのGoogle Custom SearchをXoopsテーマで使う方法を紹介します。

そもそもなぜこのような方法を取らないとならないのかというと
Xoopsは基本的に『EUC-JP』であり、Google Custom Searchを使うためには『UTF-8』で
クエリをPOSTしてあげなければならないからです。
もちろんXoopsをUTF-8で動作できるようにしてあげれば問題ありませんが、ちょっと面倒。
そこで、Javascriptでコレを解決しようというのが今回のチップスです。

前置きはこのくらいにして、設置手順は以下の通りです。
----------------------------------------------------------------
 【Google Custom Search を Xoopsテーマで使えるようにする方法】
----------------------------------------------------------------
手順1:Google Custom Searchで設置用のコードを取得する
    http://www.google.com/coop/cse/

----------------------------------------------------------------
手順2:「ヌルコムアーカイブス・デジタル制作室」さんから
     ecl.jsをダウンロードする
http://nurucom-archives.hp.infoseek.co.jp/digital/escape-codec-library.html

----------------------------------------------------------------
手順3:「izumo」さんからutf.jsをダウンロードする
http://www.onicos.com/staff/iz/amuse/javascript/expert/

----------------------------------------------------------------
手順4:手順1で取得したコードから、IDを取り出し、次のコードに置き換える
    置き換えるのは【FormID】と【SearchID】の部分。

<!-- Google CSE Search Box Begins  -->
<script type="text/javascript" src="<{$xoops_imageurl}>ecl.js"></script>
<script type="text/javascript" src="<{$xoops_imageurl}>utf.js"></script>
<script type="text/javascript">
<!--
    function convertUTF8(){
        var formObj=document.getElementById("【FormID】");
        str=formObj.q.value;
        var utf8_array=utf.unpackUTF8(UnescapeAutoDetect(str));
        var utf8="";
        for(i=0;i<utf8_array.length;i++){
            utf8+="%"+utf8_array[i].toString(16);
        }
        action="<{$xoops_url}>/g-search.php?q="+utf8
              +"&cx="+formObj.cx.value
              +"&cof="+formObj.cof.value
              +"&sa=Search";
        location.href=action;
        return false;
    };
    UnescapeAutoDetect=function(str){
        return window["Unescape"+GetEscapeCodeType(str)](str)
    };
//-->
</script>

<form action="java script:convertUTF8();"
 id="【FormID】" style="margin-bottom:0;">
  <input type="text" name="q"  id="q" size="28" />
  <input type="hidden" name="cx" value="【SearchID】" />
  <input type="hidden" name="cof" value="FORID:11" />
  <input type="button" value="サイト内を検索"
 onclick="return convertUTF8();" />
</form>
<script type="text/javascript"
 src="http://www.google.com/coop/cse/brand?form=【FormID】"></script>
<!-- Google CSE Search Box Ends -->

----------------------------------------------------------------
手順5:手順4のコードをthemes.htmlに挿入し、アップロード。
    当然ながらEUC-JPで保存する。

----------------------------------------------------------------
手順6:ecl.jsとutf.jsをthemes.htmlと同じ位置にアップロード。

----------------------------------------------------------------
手順7:「単にechoでテーマ内に表示する方法は?」を参考に
    OutModuleHelper.class.php を/preloadに設置する。
http://www.xugj.org/modules/QandA/index.php?topic_id=228

----------------------------------------------------------------
手順8:「g-search.php」というファイルに次のコードを保存。
【ResultID】と【FormID】は手順1から取得して置き換える

<?php
include_once "./mainfile.php";
include_once XOOPS_ROOT_PATH."/header.php";

begin_special_page();

?>
<h3>サイト内の検索結果</h3>
<!-- Google Search Result Snippet Begins -->
<div id="【ResultID】"></div>
<script type="text/javascript">
  var googleSearchIframeName = "【ResultID】";
  var googleSearchFormName = "【FormID】";
  var googleSearchFrameWidth = 600;
  var googleSearchFrameborder = 0;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript"
 src="http://www.google.com/afsonline/show_afs_search.js"></script>
<!-- Google Search Result Snippet Ends -->

          
<?php
include_once XOOPS_ROOT_PATH."/footer.php";
?>

----------------------------------------------------------------
手順9:アクセスしてみて結果を確認する
----------------------------------------------------------------

ちょっと手順が複雑ですが、これでGoogle Custom Searchを使って
日本語検索をすることが出来ます。

興味があったら試してみてください


=============================================================
設置例:http://iai.ejan.org/
(画面右上に設置してあります。適当に「居合」とか検索してみてください)

コメント(0)

新しいものから | 古いものから | ネスト表示 | RSS feed

投票(1)

新しいものから | 古いものから | RSS feed
 
    To Top