SharePoint 2013 お知らせアイテムを新着順に表示するコンテンツ検索 Web パーツを作成する

  • Article

こんにちは、SharePoint サポートの佐伯です。
本投稿では、SharePoint サイトのお知らせアイテムを新着順に表示する Web パーツを作成する方法をご紹介します。
今回はコンテンツ検索 Web パーツを使用しますが、コンテンツ検索は検索インデックスに配置されているものを表示できるので、複数のサイト コレクションにまたがるコンテンツや SharePoint の外部コンテンツもクロールされて検索インデックスに配置されていれば表示することができます。
複数のサイト コレクションのお知らせアイテムを表示させたい場合はコンテンツ検索 Web パーツが便利です。

それでは以下のような表示を目指して作成していきましょう！
ページにコンテンツ検索 Web パーツを配置後、以下の手順を実施していきます。
1) コンテンツ検索 Web パーツのタイトルを設定する
2) 表示するアイテム数を設定する
3) クエリを設定する
4) アイテム表示テンプレートを設定する
5) 管理プロパティのマッピングを設定する

1) コンテンツ検索 Web パーツのタイトルを設定する
1. [歯車] – [ページの編集] をクリックし、ページを編集モードにします。
2. コンテンツ検索 Web パーツの [Web パーツの編集] をクリックします。

3. “外観” を展開し、タイトルを設定します。今回は 新着情報 を設定します。

4. 枠の種類を タイトルのみ に設定します。

2) 表示するアイテム数を設定する
1. 表示するアイテム数を設定します。今回は 5 を設定します。

3) クエリを設定する
1. [クエリの変更] をクリックします。

2. [クエリの作成] ダイアログで、[詳細モードへの切り替え] をクリックします。

3. クエリ テキストにアイテムを取得する条件を設定します。今回はコンテンツ タイプがお知らせのアイテムを取得するよう、ContentTypeId:"0x0104*" を設定します。
※設定後は対象のアイテムが取得できるかを、[テスト クエリ] をクリックして検索結果のプレビューをご確認ください。

(補足) コンテンツ タイプ ID の詳細については以下のサイトをご参照ください。
タイトル : コンテンツ タイプ ID
アドレス : https://msdn.microsoft.com/ja-jp/library/aa543822(v=office.14).aspx

4. [並べ替え] タブをクリックし、並べ替えの設定を行います。最終更新日順で取得するよう LastModifiedTime の 降順を設定します。

5. [OK] をクリックして [クエリの作成] ダイアログを閉じます。
6. ここで一旦 [OK] をクリックして Web パーツを保存し、ページを保存します。

4) アイテム表示テンプレートを設定する
アイテム表示テンプレートには、コンテンツ検索 Web パーツで表示するアイテムのデザインやレイアウト、表示する情報が定義されています。
コンテンツ検索 Web パーツに使用するアイテム表示テンプレートを作成していきましょう。
なお、今回の投稿では表示テンプレートの説明は省略させていただきますが、詳細については以下の投稿をご参照ください。
SharePoint 2013 検索結果の表示を制御する表示テンプレート

SharePoint に既定で用意されているアイテム表示テンプレートをコピーして、新しくアイテム表示テンプレートを作成します。
1. [サイトの設定] – [Web デザイナー ギャラリー] - [マスター ページ] にアクセスします。
2. [Display Templates]、[Content Web Parts] の順にフォルダを展開し、Item_TwoLines.html ファイルをダウンロードします。
3. ダウンロードした Item_TwoLines.html ファイルのファイル名を変更します。ここでは、Item_NewItems.html に変更します。
4. Item_NewItems.html ファイルを開き、<div id="TwoLines"> の Id をこの *.html ファイルのファイル名に変更します。
<div id="Item_NewItems">
5. <title> には表示テンプレートのタイトルを入力します。
<title>新着情報</title>
6. <mso:ManagedPropertyMapping> には、結果アイテムで表示する管理プロパティのマッピングを設定します。以下のように変更します。
<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{リンクの URL}:'Path','Line 1'{行 1}:'Title','Line 2l'{行 2 (左)}:'','Line 2r'{行 2 (右)}:'','Line 3'{行 3}:''</mso:ManagedPropertyMapping>

(補足) 管理プロパティのマッピングを追加する際は、 'Link URL'{リンクの URL}:'Path' のような形式で記述します。
Path は取得する管理プロパティです。この管理プロパティは表示テンプレートに記述していなくても問題ありません。[Web パーツの編集] でも設定が可能です。
Link URL は結果アイテムの管理プロパティ (ここでは Path) を取得する際に指定するプロパティ名です。Javascript で $getItemValue(ctx, "Link URL") と記述することで管理プロパティ Path を取得することができます。
リンクの URL は [Web パーツの編集] で表示されるプロパティ名です。
(参考)

7. <body> 内に結果アイテムを表示するコードを記述し、保存します。
(サンプル コード)
<body>
<!--
            Warning: Do not try to add HTML to this section. Only the contents of the first <div>
            inside the <body> tag will be used while executing Display Template code. Any HTML that
            you add to this section will NOT become part of your Display Template.
    -->
<script>
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>
<!--
        Use the div below to author your Display Template. Here are some things to keep in mind:
        * Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token
        inside a comment.

        * Use the values assigned to your variables using an "underscore pound equals"
        (_#= ... =#_) token.
    -->
<div id="Item_NewItems">
<!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");

var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);

var line1 = $getItemValue(ctx, "Line 1");
var line2l = $getItemValue(ctx, "Line 2l");
var line2r = $getItemValue(ctx, "Line 2r");
var line3 = $getItemValue(ctx, "Line 3");
line1.overrideValueRenderer($contentLineText);
line2l.overrideValueRenderer($contentLineText);
line2r.overrideValueRenderer($contentLineText);
line3.overrideValueRenderer($contentLineText);

var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureId = encodedId + "picture";
var dataContainerId = encodedId + "dataContainer";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
var line2lId = encodedId + "line2l";
var line2rId = encodedId + "line2r";
var line3Id = encodedId + "line3";
_#-->
<div id="_#= containerId =#_" data-displaytemplate="ItemNewItems" style='padding-bottom:5px;'>
            <div class="cbs-Detail" id="_#= dataContainerId =#_">
                <a class="ms-noWrap ms-displayBlock ms-rteFontSize-2" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">
                    _#= line1 =#_
                </a>
<!--#_
if(!line2l.isEmpty)
{
_#-->
<span class="ms-metadata ms-noWrap" title="_#= $htmlEncode(line2l.defaultValueRenderer(line2l)) =#_" id="_#= line2lId =#_">_#= line2l =#_</span>
<!--#_
}
_#-->
<!--#_
if(!line2r.isEmpty)
{
_#-->
<span class="ms-metadata ms-noWrap" title="_#= $htmlEncode(line2r.defaultValueRenderer(line2r)) =#_" id="_#= line2rId =#_">_#= line2r =#_</span>
<!--#_
}
_#-->
<!--#_
if(!line3.isEmpty)
{
_#-->
<div class="ms-srch-item-path ms-noWrap" title="_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_" id="_#= line3Id =#_">_#= line3 =#_</div>
<!--#_
}
_#-->
</div>
        </div>
    </div>
</body>

これでアイテム表示テンプレートの作成は完了です。
8. 編集した Item_NewItems.html をマスター ページ ギャラリーの [Display Templates] - [Content Web Parts] フォルダにアップロードします。
9. Web パーツの編集に戻りましょう。ページを編集モードにして、コンテンツ検索 Web パーツの [Web パーツの編集] をクリックします。
10. 上記で作成したアイテム表示テンプレートを設定します。

5) 管理プロパティのマッピングを設定する
上記のアイテム表示テンプレートで定義したフィールドに表示する管理プロパティをマッピングしていきましょう。
1. “プロパティのマッピング” を展開し、アイテム表示テンプレートのフィールドに対し、管理プロパティのマッピングを変更します。 にチェックを入れます。
2. 以下のように、それぞれの項目に管理プロパティ (Path, Title, LastModifiedTime, EditorOWSUSER, Path) を設定します。

3. Web パーツを保存し、ページを保存します。
以上でカスタマイズは完了です。

上記の手順は参考例ですので必要に合わせて変更してください。

検索のカスタマイズや設定に関する過去の投稿もご参考にしていただけますと幸いです。
SharePoint 2013 検索の設定やカスタマイズに関する投稿まとめ