SharePoint 2013 検索の結果ブロックの表示をカスタマイズする

  • Article

こんにちは、SharePoint サポートの佐伯です。
先日の投稿では、検索結果ページにカスタムの結果ブロック (関連のある検索結果の特定のグループ) を追加するためのクエリ ルールの作成方法についてとりあげました。今回の投稿ではさらに、これらの結果ブロックの表示をカスタマイズする方法についてご紹介します。

例) 検索結果ページに画像の検索結果をサムネイルで表示する結果ブロックを追加する
検索ボックスに「画像」というキーワードを含んで検索した場合に、画像ファイルを対象とした検索結果を取得するような結果ブロックを追加し、検索結果をサムネイルで表示するようカスタマイズしてみましょう。

それでは、以下の手順を実施していきます。

手順1) 画像ファイルの結果ブロックを表示するクエリ ルールを作成する (先日の投稿で類似例を紹介しております)手順2) サムネイルを表示するための表示テンプレートを作成する (本投稿のテーマ)手順3) 結果ブロックに表示テンプレートを設定する (本投稿のテーマ)

手順1) 画像ファイルの結果ブロックを表示するクエリ ルールを作成する
1-1. サイトにアクセスし、[サイトの設定] 画面で [サイト コレクションの管理] – [検索クエリ ルール] をクリックします。
補足 : クエリ ルールは Search Service Application、サイト コレクション、サイト単位で設定することが可能です。今回はサイト コレクション単位で設定します。
1-2. [クエリ ルールの管理] 画面でコンテキストを選択します。ここでは、[ローカル SharePoint の結果 (システム)] を選択します。
コンテキストを選択後、[新しいクエリ ルール] をクリックします。
1-3. ルール名を入力します。ここでは、画像の検索 とします。
1-4. [クエリ条件] 項目を設定します。プルダウンで [クエリにアクション用語を含める] を選択します 。[アクション用語はこれらの語句の 1 つです] を選択し、画像;イメージ;Image と入力します。これにより、「画像」「イメージ」「Image」という単語が検索ボックスの先頭または末尾に入力された場合に、このクエリ ルールを実行します。
1-5. 画像の検索結果を表示する結果ブロックを追加します。[アクション] 項目内の [結果のブロックを追加] をクリックします。
1-6. [結果のブロックを追加] ダイアログが表示されます。これから、ブロックのタイトル、クエリ、設定の項目をそれぞれ設定していきます。
1-7. [ブロックのタイトル] 項目にタイトルを入力します。ここでは、 "{subjectTerms}" の画像検索結果 とします。
1-8. [クエリ] 項目を編集します。[クエリ ビルダーを起動します] をクリックします。
1-9. 画像を対象とした検索を行うため、以下をクエリ テキストに入力します。その後、[OK] をクリックします。
{subjectTerms} (ContentTypeId:0x0101009148F5A04DDD49cbA7127AADA5FB792B00AADE34325A8B49cdA8BB4DB53328F214* OR ContentTypeId:0x010102*)
1-10. [アイテム] で 8 を選択します。
1-11. [OK] をクリックし、[結果のブロックを追加] ダイアログを閉じます。
1-12. [保存] をクリックします。

この時点では、「sample」「画像」というキーワードで検索すると、以下のような表示になります。(SharePoint 既定の表示テンプレートが適用されます。)

次に、画像ファイルの検索結果をサムネイルで表形式に表示させるようカスタマイズしていきます。

手順2) サムネイルを表示するための表示テンプレートを作成する
アイテム表示テンプレート、コントロール表示テンプレートを作成します。表示テンプレートの概要につきましては、下記の投稿をご確認ください。
SharePoint 2013 検索結果の表示を制御する表示テンプレート

- アイテム表示テンプレートを作成する
ファイル名を Item_ImageTest.html とし、以下のようなコードを記述します。ファイルは UTF-8 で保存します。

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><title>画像アイテム (結果ブロック用)</title><!--[if gte mso 9]><xml><mso:CustomDocumentProperties><mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden><mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription><mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId><mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType><mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated><mso:ManagedPropertyMapping msdt:dt="string">'Title':'Title','PictureThumbnailURL':'PictureThumbnailURL'</mso:ManagedPropertyMapping></mso:CustomDocumentProperties></xml><![endif]--></head><body><div id="Item_ImageTest"><!--#_var url = ctx.CurrentItem.csr_Path;var pictureThumbnailURL = ctx.CurrentItem.PictureThumbnailURL;if (!$isEmptyString(pictureThumbnailURL)){var altText = ctx.CurrentItem.Title;var pictureHtml = String.format('<a href="{0}" class="ms-srch-item-previewLink"><img src="{1}" alt="{2}" onload="SP.ScriptHelpers.resizeImageToSquareLength(this, 100)"/></a>', url, pictureThumbnailURL, altText);_#--><div style='float:left;margin-right:12px;margin-bottom:12px;background-color:#f1f1f1;border:1px solid #d1d1d1;width:100px;height:100px;overflow:hidden;'>_#= pictureHtml =#_</div><!--#_}_#--></div></body></html>

マスター ページ ギャラリーの [Display Templates] - [Search] に、Item_ImageTest.html をアップロードします。

- コントロール表示テンプレートを作成する
ファイル名を Group_ImageTest.html とし、以下のようなコードを記述します。ファイルは UTF-8 で保存します。

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><title>画像グループ (結果ブロック用)</title><!--[if gte mso 9]><xml><mso:CustomDocumentProperties><mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden><mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription><mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106602</mso:ContentTypeId><mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType><mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated></mso:CustomDocumentProperties></xml><![endif]--></head><body><div id="Group_ImageTest"><!--#_if(!$isNull(ctx.ClientControl)&& ctx.ClientControl.shouldShowTable(ctx.CurrentGroup)&& !Srch.U.isTableTypeof(ctx.CurrentGroup, Microsoft.SharePoint.Client.Search.Query.KnownTableTypes.personalFavoriteResults)){var queryRuleId = ctx.CurrentGroup["QueryRuleId"];var markerCSS = "";if (!Srch.U.isSubstrateTable(ctx.CurrentGroup) && !Srch.U.isTableTypeof(ctx.CurrentGroup, Microsoft.SharePoint.Client.Search.Query.KnownTableTypes.specialTermResults)){markerCSS = "ms-srch-group-border";}var id = ctx.ClientControl.get_nextUniqueId();var groupId = id + Srch.U.Ids.group;$setResultObject(groupId, ctx.CurrentGroup);_#--><div id="_#= $htmlEncode(groupId) =#_" name="Group" class="ms-srch-group _#= markerCSS =#_" data-queryruleid="_#= $htmlEncode(queryRuleId) =#_"><div id="GroupBorderTop"></div><!--#_var groupTitle = ctx.CurrentGroup["ResultTitle"];var groupUrl = (Srch.U.isDefaultSiteSearchPage()) ? null : Srch.U.replaceUrlTokens(ctx.CurrentGroup["ResultTitleUrl"]);var totalRows = ctx.CurrentGroup[Srch.U.PropNames.totalRows];var rowCount = ctx.CurrentGroup[Srch.U.PropNames.rowCount];var showMore = true;var countDisplayString = Srch.Res.rs_ApproximateResultCount;if ((!Srch.U.n(totalRows)) && (!Srch.U.n(rowCount)) && (rowCount >= totalRows)) showMore = false;if (!$isEmptyString(groupTitle)){_#--><div id="_#= $htmlEncode(id + Srch.U.Ids.groupTitle) =#_" class="ms-srch-group-title ms-textLarge"><!--#_if (!$isEmptyString(groupUrl)){_#--><a clicktype="More" href="_#= $urlHtmlEncode(groupUrl) =#_" >_#= $htmlEncode(groupTitle) =#_</a><!--#_}else{_#-->_#= $htmlEncode(groupTitle) =#_<!--#_}_#--></div><!--#_}ctx.ListDataJSONItemsKey = "ResultRows";_#--><div id="_#= $htmlEncode(id + Srch.U.Ids.groupContent) =#_" class="ms-srch-group-content" style='width: 460px;'>_#= ctx.RenderItems(ctx) =#_<div class='ms-srch-group-clear'></div></div><!--#_if (!$isEmptyString(groupUrl) && showMore){_#--><div class="ms-srch-group-link ms-commandLink ms-uppercase"><a id="_#= $htmlEncode(id + Srch.U.Ids.groupLink) =#_" clicktype="More" href="_#= $urlHtmlEncode(groupUrl) =#_" title="_#= $htmlEncode(Srch.Res.rf_ShowMoreResults_Tooltip) =#_">_#= $htmlEncode(Srch.Res.rf_RefinementLabel_More) =#_</a></div><div class="ms-srch-group-count ms-metadata">_#= String.format($htmlEncode(countDisplayString), $htmlEncode(totalRows.localeFormat("N0"))) =#_</div><!--#_}_#--><div id="GroupBorderBottom"></div></div><!--#_}_#--></div></body></html>

マスター ページ ギャラリーの [Display Templates] - [Search] に、Group_ImageTest.html をアップロードします。

手順3) 結果ブロックに表示テンプレートを設定する
3-1. [クエリ ルールの管理] 画面に戻り、手順1 で作成したクエリ ルールの編集画面を開きます。
3-2. 結果ブロックの [編集] をクリックし、[結果のブロックを編集] ダイアログを表示します。
3-3. [設定] 項目を展開し、手順2 で作成した表示テンプレートを設定します。グループ表示テンプレートには 画像グループ (結果ブロック用) を、アイテム表示テンプレートには 画像アイテム (結果ブロック用) を設定します。

3-4. [OK] をクリックして [結果のブロックを編集] ダイアログを閉じます。
3-5. [保存] をクリックします。

以上で完了です。上記でご紹介している設定やサンプル コードは、結果ブロックの表示がカスタマイズできることを説明するための参考例になりますので、実際のカスタマイズの際はご要件に合わせて実装いただき、十分なテストをご実施ください。

今回の投稿は以上です。
検索の設定やカスタマイズに関して、下記の投稿もご参考にしていただけますと幸いです。
SharePoint 2013 検索の設定やカスタマイズに関する投稿まとめ