APIは異なるものです。固有の機能を利用できることが挙げられます。利用して多くの開発コストを削減できます。APIを利用したサイトを構築する方法を説明します。サーバーとのやりとりにはJSON応答を利用します。サーバーを利用しています。10.0.0以降のバージョンをインストールしてください。JSONとCORS¶JSONでアクセスする際にはSame-Originポリシーに注意する必要があります。Sharing)を利用する必要があります。サーバーが異なるドメインにある場合で話を進めます。FessはCORSに対応しており、設定値はapp/WEB-INF/classes/fess_config.propertiesで設定可能です。デフォルトでは以下が設定されています。X-Requested-Withapi.cors.allow.credentials=true今回はデフォルトの設定を利用しますが、設定を変更した場合はFessを再起動をしてください。今回はHTML上でJavaScriptを利用して検索処理を実装します。JavaScriptのライブラリとしてjQueryを利用しています。作成するファイルは以下のものになります。今回の構築例では以下の機能を実装しています。検索結果のページング処理HTMLファイルの作成¶まず、検索フォームと検索結果を表示するHTMLを作成します。今回は理解しやすいようにCSSでデザインを調整などせずにシンプルなタグ構成にしてあります。利用するHTMLファイルは以下のものになります。src="fess.js"></script></body></html>bodyタグ以下を見ていくと、まずはid属性がheaderのdivタグの箇所で、検索入力欄と検索ボタンが配置しています。hiddenフォームで表示開始位置(start)と表示件数(num)を保持しています。検索リクエスト送信後にJavaScriptでstartとnumの値は更新されます。表示件数は1ページあたりの表示件数であり、今回のサンプルコードでは表示件数を変更する機能はないので、numの値は変更されていません。次のsubheaderのdivタグの箇所で検索にヒットした件数などの情報が表示されます。resultのdivタグでは検索結果およびページングリンクが表示されます。最後にjQueryのJSファイルと今回作成した「fess.js」のJavaScriptを読み込みます。jQueryのJSファイルを「index.html」と同じディレクトリに保存しても構いませんが、今回はGoogleのCDN経由で取得するようにしています。サーバーと通信し、検索結果を表示するJSファイル「fess.js」を作成します。以下の内容で「fess.js」を作成して、「index.html」と同じディレクトリに配置します。alert("検索中に問題が発生しました。管理者にご相談ください。"</b>に一致する情報は見つかりませんでした。});「fess.js」の処理はHTMLファイルのDOMが構築された後に実行されます。サーバーのURLを指定しています。2は検索ボタンのjQueryオブジェクトを保存しておきます。何度か検索ボタンのjQueryオブジェクトを利用するため、変数に保持して再利用します。3では検索処理関数を定義しています。この関数の内容は次の節で説明します。20は検索フォームがサブミットされたときのイベントを登録します。検索ボタンが押下されたときや検索入力欄でEnterキーが押下されたときに20で登録された処理が実行されます。イベントが発生したときに検索処理関数doSearchを呼び出します。naviの値は検索処理関数を呼び出す際に渡され、その値はページング処理をするために利用されます。21と22でページング処理で追加されるリンクがクリックされたときのイベントを登録します。これらのリンクは動的に追加されるのでdelegateによりイベントを登録する必要があります。これらのイベントにおいても20と同様に検索処理関数を呼び出します。検索処理関数doSearch¶3の検索処理関数doSearchについて説明します。4で表示開始位置と表示件数を取得します。これらの値はheader領域の検索フォームでhiddenの値として保存されています。表示開始位置は0以上、表示件数は1から100までの値を想定しているので、それ以外の値が取得される場合はデフォルト値を設定します。5ではdoSearchがイベント登録されたときに渡されたパラメータnaviの値を判定して、表示開始位置を修正します。ここでは、-1が前のページヘの移動、1が次のページの移動、それ以外は先頭ページへの移動に変更されます。6は検索入力欄の値が入力されていれば検索を実行し、空であれば何もせずに処理を終了するための判定をします。サーバーへ問い合わせ中の間は検索ボタンを無効にします。8ではAjaxのリクエストを送るためのURLを組み立てます。9でAjaxのリクエストを送信します。リクエストが正常に返ってくると、successの関数が実行されます。サーバーから返却された検索結果のオブジェクトが渡されます。10でレスポンスのステータスの内容を確認しています。正常に検索リクエストが処理された場合は0が設定されています。サイトを確認してください。検索リクエストが正常に処理され、検索結果がヒットしなかった場合は11の条件文内でsubheader領域の内容を空にして、result領域で検索結果がヒットしなかった旨のメッセージを表示します。検索結果がヒットした場合、12の条件文内では検索結果の処理を行います。13ではsubheader領域に表示件数や実行時間のメッセージを設定します。14は検索結果をresult領域に追加していきます。検索結果はdata.response.resultに配列として格納されています。results[i].〜でアクセスすることで検索結果ドキュメントのフィールド値を取得することができます。15で現在表示しているページ番号と、前のページと次のページへのリンクをresult領域に追加します。16では検索フォームのhiddenに現在の表示開始位置と表示件数を保存します。表示開始位置と表示件数は次回の検索リクエスト時に再度利用されます。次に17でページの表示位置を変更します。次のページヘのリンクをクリックされたときに、ページ自体は更新されないため、scrollTopによりページ先頭に移動します。18では検索処理が完了後に検索ボタンを有効にします。リクエストが成功しても失敗しても実行されるようにcompleteで呼ばれるようにします。19は検索処理関数が呼ばれたあとに、フォームやリンクが送信されないようにfalseを返しています。これによりページ遷移が発生するのを防ぎます。「index.html」にブラウザでアクセスします。次のように検索フォームが表示されます。検索フォーム適当な検索語を入力して、検索ボタンを押下すると検索結果が表示されます。デフォルトの表示件数は20件ですが、ヒットした検索件数が多い場合には検索結果一覧の下に次のページへのリンクが表示されます。APIを利用してjQueryベースのクライアント検索サイトを構築してみました。利用するシステムも構築できます。