Fess Site Searchについて

Fess Site Search(FSS)は検索サーバFessを既存のWebサイトに導入できる機能です。
FSSが提供するタグとJavaScriptファイルを利用して、運用しているWebサイトに検索ボックスおよび検索結果を表示することができます。
簡単に導入することができるので、Google Site SearchやGoogleカスタム検索などからもスムーズに移行することができます。

ダウンロード

FSS JS Generatorの[Generate]ボタンをクリックすると、FSSのJavaScriptファイルが生成されます。
Download JSボタンをクリックしてダウンロードしてください。

導入手順

FSSは以下の数ステップの手順だけで導入することができます。
FSSを利用するには事前にFessサーバを構築しておく必要があります。
構築済みのFessサーバを安価なN2 Search ASP Super Liteとして提供もしていますのでご検討ください。

新規にFSSを導入する場合

  1. FSSのJavaScriptファイルをダウンロードし、ファイル名をfess-ss.min.jsにしてWebサイトに配置する
  2. Webサイトに検索結果を表示するHTMLファイルを作成する (たとえばresult.html等)
  3. 以下のコードを作成したHTMLファイルの<body>要素以下で検索ボックスを表示したい位置に追加する (fess-urlの値は検索サーバのURLに変更してください)
  4. Webサイトの各ページに検索フォームを配置したい場合は、result.html?q=検索語 のように遷移するフォームを配置する
<script>
  (function() {
    var fess = document.createElement('script');
    fess.type = 'text/javascript';
    fess.async = true;
    // FSS JSのURLをsrcに設定します
    fess.src = 'fess-ss.min.js';
    fess.charset = 'utf-8';
    fess.setAttribute('id', 'fess-ss');
    // Fessの検索APIのURLをfess-urlに設定します
    fess.setAttribute('fess-url', 'http://search.n2sm.co.jp/json');
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(fess, s);
  })();
</script>

<fess:search></fess:search>

Google Site Search(GSS)等から移行する場合

  1. FSSのJavaScriptファイルをダウンロードし、ファイル名をfess-ss.min.jsにしてWebサイトに配置する
  2. 以下のコードをGSSなどの検索結果を表示しているタグと置き換える (fess-urlの値は検索サーバのURLに変更してください)
<script>
  (function() {
    var fess = document.createElement('script');
    fess.type = 'text/javascript';
    fess.async = true;
    // FSS JSのURLをsrcに設定します
    fess.src = 'fess-ss.min.js';
    fess.charset = 'utf-8';
    fess.setAttribute('id', 'fess-ss');
    // Fessの検索APIのURLをfess-urlに設定します
    fess.setAttribute('fess-url', 'http://search.n2sm.co.jp/json');
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(fess, s);
  })();
</script>

<fess:search></fess:search>

検索結果の表示種類

検索結果の表示方法は利用するタグにより変更できます。
次の3パターンでの表示が可能です。

検索フォームと検索結果を表示

<fess:search></fess:search>

検索フォームだけを表示

<fess:search-form-only></fess:search-form-only>

検索結果だけを表示

<fess:search-result-only></fess:search-result-only>

オプション

script中の fess.setAttribute('fess-url', '{fess url}'); の下に以下のコードを追加することで、FSSの検索オプションを利用できます。

ラベル絞り込み検索を行うフォームを表示する場合

fess.setAttribute('enable-labels', 'true');

検索結果をポップアップで表示する場合

fess.setAttribute('popup-result', 'true');

検索結果に関連クエリー/関連コンテンツを表示する場合

fess.setAttribute('enable-related', 'true');

サジェストを利用する場合

fess.setAttribute('enable-suggest', 'true');

検索結果のソートを非表示にする場合

fess.setAttribute('enable-order', 'false');

検索結果のサムネイルを非表示にする場合

fess.setAttribute('enable-thumbnail', 'false');

検索結果ページへ遷移させたい場合

検索を実行した際に、指定したURLへページ遷移します。
fess:search-form-onlyで検索フォームだけを表示して、検索結果は別のページで表示する場合に利用します。

fess.setAttribute('fess-search-page-path', 'result.html');

デザインのカスタマイズ

FSS JS Generatorを利用して、デザインを修正することができます。

サムネイルのサイズ変更

検索結果に表示するサムネイルサイズを変更したい場合はCSSで以下を指定して変更してください。
デフォルトのサイズは100pxです。

.fessWrapper .thumbnail {
  width: 100px !important;
}

.fessWrapper .thumbnailBox {
  width: 100px !important;
}

Google Analytics連携

Google Analyticsで検索キーワードを集計するためには、サイト内検索を設定するを参照して、サイト内検索の設定を有効にしてください。
クエリパラメータはqを指定してください。
また、検索結果ページ内で入力された検索キーワードを集計するためには、以下のようなコードをFSSのJavaScriptの上部あたりに追加してイベントの集計を有効にする必要があります。

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-1', 'auto');
</script>

商用サポート

商用サポートではFessの構築支援やFessサーバを低価格で提供しています。
商用サポートについてを参照してください。