アドバンスド · ソリューション株式会社 及川紘旭
SharePoint 2013になって非常に使い勝手が向上した検索結果Webパーツ。
そんな検索結果Webパーツのちょっと便利な使い方をご紹介します。
検索結果Webパーツとは
検索結果Webパーツとは、基本検索センターやエンタープライズ検索センターのresults.aspxにデフォルトで配置されている、検索結果を表示するためのWebパーツです。(図中、赤枠内)
検索結果Webパーツは、他の一般的なWebパーツと同様、どのページにも配置できるWebパーツです。
検索結果Webパーツは、Webパーツ一覧(リボンメニューの[挿入]→[Webパーツ]をクリックし表示されるパネル)の[検索]カテゴリ内に、[検索結果]という名前で存在しています。(図中、赤枠内)
この検索結果Webパーツは、検索ボックスから入力されたキーワードをもとに検索するだけでなく、様々な条件で検索を実行することができます。
今回はその中でも特に色々な用途に使えそうな、URLクエリ文字列を検索条件に使用して検索を実行する方法をご紹介します。
例えばURLクエリ文字列で「title=SharePoint」といったキーと値が指定されていた場合に、検索結果Webパーツでこのキーと値を認識して、自動的に検索を実行するということができます。
検索結果Webパーツのクエリのカスタマイズ
検索結果Webパーツが何を検索条件にして検索を実行するかは、検索結果Webパーツのクエリの設定により決まります。
検索結果Webパーツを編集モードにし、[検索結果のプロパティ]の[クエリの変更]ボタンをクリックすると、クエリを変更するための[クエリの作成]ダイアログが表示されます。
[クエリの作成]ダイアログを開くと、 [クエリテキスト]に「{searchboxquery}」というクエリが記述されています。(図中、赤枠内)
このクエリが検索ボックスに入力されたキーワードを使って検索を実行することを表しています。
URLクエリ文字列を検索条件に使う場合も、[クエリテキスト]に決められたルールでクエリを記述することになります。
では、URLクエリ文字列を検索条件で使うように[クエリテキスト]にクエリを記述しましょう。
今回は「title=SharePoint」というURLクエリ文字列が指定された場合に、Title列に「SharePoint」というキーワードを含むアイテムを検索する想定で進めたいと思います。
※以下の手順を進める前に任意のページに検索結果Webパーツを配置しておいてください。
以下の手順で[クエリテキスト]を書き換えます。
① [クエリテキスト]に最初から記載されている「{searchboxquery}」は不要なので削除します。
② [プロパティの選択]と書いてあるセレクトボックスをクリックし、[Title]を選択します。
③ [値の選択]と書いてあるセレクトボックスをクリックし、[URLからパラメーターの値]を選択します。
④ [プロパティフィルターの追加]ボタンをクリックします。
すると、[クエリテキスト]に「Title:{QueryString.MyParameter1}」というクエリが追加されます。
⑤ 「MyParameter1」の部分を、URLクエリ文字列に含まれるキーと同じ値にします。
今回は「title=SharePoint」というURLクエリ文字列を想定しているので、「MyParameter1」の部分を「title」に変更し、「Title:{QueryString.title}」とします。
これにより、URLクエリ文字列から「title」パラメーターを読み込み、値として指定されている「SharePoint」という文字列を使って、Title列を検索するようになります。
⑥ クエリが作成できたので、[OK]ボタンをクリックし[クエリの作成]ダイアログを閉じた後、検索結果Webパーツの設定を保存してページ編集を終えます。
以上で設定が完了しました。
では、早速試してみたいと思います。
Webブラウザのアドレスバーに「http://servername/pagename.aspx?title=SharePoint」と入力して、検索結果Webパーツを配置したページを開いてください。
※斜体の箇所は、お使いの環境に合わせて変更してください。
ページが表示されると同時に、URLクエリ文字列で指定した値で検索された結果が表示されるかと思います。
独自の検索フォームから検索できるようにする
URLクエリ文字列を使った検索ができるようになったので、この仕組みを活用し、独自の検索フォームから検索ができるようにしてみたいと思います。
以下の手順にて、検索フォームを作成します。
① 以下のコードをテキストエディタに貼り付け、「searchform.js」など任意の名前で保存します。
タイトル: <input type="text" name="title" id="title" size="10" />
<input type="button" value="検索" onclick="onSearchButtonClick()"/>
<script type="text/javascript">
function onSearchButtonClick() {
// URLからクエリ文字列のうち、検索結果Webパーツが
// ページング処理などで自動的に追加するパラメーター("#"以降)を除いた部分を
// 取得する。
var url = location.href.replace(location.search, "");
var index = url.indexOf('#');
if (index != -1) {
url = url.substring(0, index);
}
// 検索フォームで入力された値をもとにクエリ文字列を組み立てる。
url += "?title=";
if (theForm.title.value == "") {
url += "*";
} else {
url += encodeURIComponent(theForm.title.value);
}
// URLの最後に"&"を付けることで、検索結果Webパーツがパラメーターを
// 自動的に追加した場合に、URLの形式が崩れないようにする。
location.href = url + "&";
}
</script>
② [サイトのリソースファイル]など任意のドキュメントライブラリに「searchform.js」をアップロードします。
③ 検索結果Webパーツの上にコンテンツエディターWebパーツを配置して、[コンテンツへのリンク]テキストボックスに「searchform.js」のURLを入力します。(図中、赤枠内)
[OK]ボタンをクリックした後、ページを保存します。
④ これで検索フォームが出来上がりです。
それでは、[タイトル]テキストボックスに検索キーワードを入力し、[検索]ボタンを押してみましょう。
[タイトル]テキストボックスに「SharePoint」と入力して[検索]ボタンをクリックします。
すると、検索結果Webパーツに検索結果が表示されました！
無事、独自の検索フォームと検索結果Webパーツを連携させることができました。
ただ、この検索フォームはまだ動作が不十分なところがあります。
それは、検索を実行した後、検索条件として入力した値が消えてしまい、どんな条件で検索したかが分からなくなってしまう点です。
この問題を解消するためには、URLクエリ文字列から検索条件部分を取り出し、検索フォームにセットするという処理が必要になります。
この処理については、今回の本題から外れてしまうためコードは割愛します。
まとめ
今回は検索結果Webパーツの活用例の一つをご紹介しました。
検索フォームと検索結果Webパーツを組み合わせることで、より便利な検索機能を作成できるようになることがご理解いただけたかと思います。
これは夢が広がりますね！
比較的手軽に試すことができ、オンプレでもオンラインでも使えるTipsなので、皆さんもぜひ試してみてください。