SharePoint 2013 検索結果が 0 件の場合の表示をカスタマイズする

こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、検索結果 Web パーツで検索結果が 0 件の場合の表示をカスタマイズする方法をご紹介します。

検索結果 Web パーツでは、一致する検索結果が得られない場合に既定で以下のようなメッセージが表示されます。
この表示はコントロール表示テンプレートに定義されています。

参考) 本投稿を読み進める前に、下記の記事で表示テンプレートの概要を説明しておりますので、ご参照いただけますと幸いです。
SharePoint 2013 検索結果の表示を制御する表示テンプレート

検索結果 Web パーツに既定で設定されているコントロール表示テンプレートは Control_SearchResults です。Control_SearchResults 内の下記のコードにより、検索結果が 0 件の場合の表示が定義されています。これを編集することで、表示するメッセージやデザインを変更することができます。

<!--#_if(ctx.ClientControl.get_shouldShowNoResultMessage()){_#--><div id="NoResult"><!--#_var emptyMessage = ctx.ClientControl.get_emptyMessage();if ($isEmptyString(emptyMessage)){_#--><div class="ms-textLarge ms-srch-result-noResultsTitle">_#= $htmlEncode(Srch.Res.rs_NoResultsTitle) =#_</div><div>_#= $htmlEncode(Srch.Res.rs_NoResultsSuggestions) =#_</div><ul><li>_#= $htmlEncode(Srch.Res.rs_NoResultsSpelling) =#_</li><li>_#= $htmlEncode(Srch.Res.rs_NoResultsDifferentTerms) =#_</li><li>_#= $htmlEncode(Srch.Res.rs_NoResultsGeneralTerms) =#_</li><li>_#= $htmlEncode(Srch.Res.rs_NoResultsFewerTerms) =#_</li><!--#_if(ctx.DataProvider.get_currentQueryState().r){_#--><li>_#= $htmlEncode(Srch.Res.rs_NoResultsRefiners) =#_</li><!--#_}var searchTipsUrl = "javascript:HelpWindowKey(\"WSSEndUser_SearchTips\")";var searchTipsLink = "<a href=" + searchTipsUrl + ">" + $htmlEncode(Srch.Res.rs_NoResultsTips_Link) + "</a>";_#--><li>_#= String.format($htmlEncode(Srch.Res.rs_NoResultsTips), searchTipsLink) =#_</li></ul><!--#_}else{_#-->_#= $htmlEncode(emptyMessage) =#_<!--#_}_#--></div><!--#_}_#-->

実際に、コントロール表示テンプレートを編集して、一致する検索結果が得られない場合のメッセージを変更してみましょう。

例) 検索結果が 0 件の場合のメッセージを変更する
一致する検索結果が得られない場合のメッセージを、以下のように「<検索キーワード> の検索結果が見つかりませんでした。」という文言に変更してみましょう。

- 手順
1. [サイトの設定] – [Web デザイナー ギャラリー] – [マスター ページ] をクリックし、マスター ページ ギャラリーを開きます。
2. [Display Templates]、[Search] の順にフォルダを展開し、Control_SearchResults.html ファイルのコピーをダウンロードします。
3. ダウンロードした Control_SearchResults.html ファイルをメモ帳等のエディタで開き、以下のように変更します。(<div id="NoResult"> ～ </div> 内の既存のコードを削除し、紫で記述しているコードを追加します。)

<!--#_
                    if(ctx.ClientControl.get_shouldShowNoResultMessage()){
_#-->
<div id="NoResult">
<!--#_
                            var sq = Srch.U.getTableProperty(ctx.ClientControl.get_currentResultTableCollection(), "SerializedQuery");
                            var oParser = new DOMParser();
                            var oDocument = oParser.parseFromString(sq, "text/xml");
                            var nodes = oDocument.getElementsByTagName('Query');
                            var node = nodes[0];
                            var queryText = node.getAttribute("QueryText");
_#-->
_#= queryText =#_ の検索結果が見つかりませんでした
</div>
<!--#_
                    }
_#-->

4. 編集後、Control_SearchResults.html ファイルを保存します。
5. Control_SearchResults.html ファイルをマスター ページ ギャラリーの [Display Templates] – [Search] フォルダに上書きアップロードします。以上で完了です。

補足 :
検索結果 Web パーツは検索ボックスと組み合わせて使用することが多いですが、決まった検索条件を設定しておき、検索結果 Web パーツのみで使用するという方法もあります。例えば、検索結果 Web パーツを使用して、最新のアイテムを取得する検索条件を設定しておくことで、新着情報の表示を実現することができます。
その場合、該当のアイテムが得られない時に、検索結果 Web パーツでは「検索に一致するものがありません」というメッセージが表示されます。
新着情報に最適なメッセージとして、「新着情報はありません」という文言に変更する際は、既存のコントロール表示テンプレートを編集するか、または新しくコントロール表示テンプレートを作成して、検索結果 Web パーツに適用します。

このように、検索結果 Web パーツの使用目的に合わせて特別なメッセージを表示したい場合は、コントロール表示テンプレートをカスタマイズしてください。

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