REST APIを利用した検索サイトの構築
今回はFessのREST APIを利用したサイトを構築する方法を説明します。FessサーバーとのやりとりにはJSON応答を利用します。今回利用するFessサーバーはFessプロジェクトでデモ用として公開しているFessサーバーを利用しています。もし、独自のFessサーバーを利用したい場合はFess 4.0.0をインストールしてください。Fess 4.0.0以降でJSONPがサポートされています。
JSONとJSONP
Ajaxの利用時に注意すべきセキュリティモデルとしてSame-Originポリシーがあります。これにより、ブラウザで表示するHTMLを出力するサーバーとFessサーバーが同じドメインに存在する場合はJSONを利用することができますが、異なる場合はJSONPを利用する必要があります。FessのREST APIでは、JSON応答でリクエストパラメータにcallbackキーで値を渡すことでJSONPを利用することができます。
今回はHTMLが置いてあるサーバーとFessサーバーが異なるドメインにある場合で話を進めます。そのため、JSONPを利用した例になりますが、同じドメインで良い場合はリクエストパラメータからcallbackを取り除いてください。
作成するファイル
今回はHTML上でJavaScriptを利用して検索処理を実装します。JavaScriptのライブラリとしてjQueryを利用しています。Ajaxなどの処理などもjQueryで簡単に実装することができます。作成するファイルは以下のものになります。
- 検索フォームと検索結果を表示するHTMLファイル「index.html」
- Fessサーバーと通信するJSファイル「fess.js」
今回の構築例では以下の機能を実装しています。
- 検索ボタンで検索リクエストの送信
- 検索結果の一覧
- 検索結果のページング処理
HTMLファイルの作成
まず、検索フォームと検索結果を表示するHTMLを作成します。今回は理解しやすいようにCSSでデザインを調整などせずにシンプルなタグ構成にしてあります。利用するHTMLファイルは以下のものになります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>検索サイト</title>
</head>
<body>
<div id="header">
<form id="searchForm">
<input id="searchQuery" type="text" name="query" size="30"/>
<input id="searchButton" type="submit" value="検索"/>
<input id="searchStart" type="hidden" name="start" value="0"/>
<input id="searchNum" type="hidden" name="num" value="20"/>
</form>
</div>
<div id="subheader"></div>
<div id="result"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="fess.js"></script>
</body>
</html>
bodyタグ以下を見ていくと、まずはid属性がheaderのdivタグの箇所で、検索入力欄と検索ボタンが配置しています。また、hiddenフォームで表示開始位置（start）と表示件数（num）を保持しています。検索リクエスト送信後にJavaScriptでstartとnumの値は更新されます。ただし、表示件数は1ページあたりの表示件数であり、今回のサンプルコードでは表示件数を変更する機能はないので、numの値は変更されていません。また、検索フォームのサブミットについては、検索リクエストはAjaxで通信されるため、JavaScriptが有効になっている場合はこのフォームがページ遷移が発生する送信はされません。
次のsubheaderのdivタグの箇所で検索にヒットした件数などの情報が表示されます。resultのdivタグでは検索結果およびページングリンクが表示されます。
最後にjQueryのJSファイルと今回作成した「fess.js」のJavaScriptを読み込みます。jQueryのJSファイルを「index.html」と同じディレクトリに保存しても構いませんが、今回はGoogleのCDN経由で取得するようにしています。
