強調表示されたコンテンツWEBパーツの使い方 – KQLやサムネイルのサイズ調整など

SharePoint でモダンサイトを作るならビジュアル的にもこだわりたいところ。
そんなとき重宝するのが「強調表示されたコンテンツ WEBパーツ」です。

アイテムのサムネイル表示や複数サイトを横断してのアイテム取得など、新着表示系のWEBパーツの中で群を抜いて高機能なため利用シーンも多く、モダンサイトでは欠かせない機能となっています。

そんな強調表示されたコンテンツWEBパーツですが、フィルター機能に少し難があります。
それは何かというと「否定条件が設定できない」ことです。
このアイテムのみ除外といったことが行えないんです。

これを補う機能としてカスタムクエリが実装されており、KQL（Keyword Query Language）を使ったフィルターが可能です。
KQLであれば否定条件も組むことができ、表示させたいアイテムを自在に指定させることが可能です。

ということで今回は強調表示されたコンテンツWEBパーツについて、KQLを使ったフィルター方法などについても細かく解説していこうと思います。

強調表示されたコンテンツWEBパーツの追加

WEBパーツの追加方法としては、セクション内の＋マークから「ドキュメント、リスト、ライブラリ」カテゴリの「強調表示されたコンテンツ」をクリックです。

挿入されたパーツはこのような表示となりました。

初期ではハブ内のすべてのドキュメントを表示する設定になっていますが、この「システムアカウントが投稿者のアイテム」は新着表示にはいらないですよね？

こういうアイテムをフィルターで削っていくことになります。

強調表示されたコンテンツWEBパーツの設定

続いては各種設定を見ていきます。
WEBパーツ上に表示されるえんぴつマークのクリックで設定画面を開きます。

コンテンツのソースや種類の選択、フィルターや並べ替えの設定、最後にアイテム表示のレイアウト設定などが並んでいます。
各項目の＋をクリックすることで条件を増やすことができます。

実際に設定してみるとこのような感じになります。

アイテムの種類とドキュメントの種類は「or」条件、フィルターに関しては「and」条件となります。
設定画面にはこの「and」や「or」の記述がないので混乱しますね。

上の画面の例でいくと「ハブ内のすべてのサイト」から「ドキュメント」もしくは「ニュース」を抽出し、さらに「作成者が”はち”」且つ「タイトルに”に”が含まれるもの」をフィルターするという結果になります。

以上のように条件は複数設定できるものの、演算子を設定できないのがこのインターフェースの残念な仕様です。

そこで登場するのが「カスタムクエリ」です。

カスタムクエリで自在にコンテンツを抽出する

カスタムクエリやらKQLやら言われると「難しそう」と敬遠されがちですが、KQLはテンプレさえあれば意外と簡単です。

以下がそのテンプレとなります。

(ListID:<ドキュメントライブラリ１のListID> OR <ドキュメントライブラリ２のListID> NOT (ContentType:"フォルダー") NOT (FileName:.aspx)) OR (ListID:<サイトのページライブラリのListID> AND (PromotedState=2) NOT (title="<除外タイトル1>" OR "<除外タイトル2>") NOT (AUTHOR:"<除外投稿者>"))

黄色部分がドキュメントライブラリに関するフィルターで、このテンプレでは2つのドキュメントライブラリを対象としています。
ListIDとはSharePointのリストやライブラリを示すIDで調べ方については後述します。
対象のライブラリがたくさんあるのであれば、ORで繋いでいけば増やせます。
他、ドキュメントライブラリ内のフォルダーやページファイルを除外し、純粋にファイルだけが抽出されるようにしています。

青色部分がニュースに関するフィルターで、タイトルや投稿者で除外しています。
ニュースはサイトのページライブラリに格納されるので同ライブラリのListIDを指定します。
PromotedState=2を指定することで、ページライブラリ内のニュースのみを抽出することができます。

これらをORで繋ぐことで特定のライブラリのファイルと特定のニュース記事を抽出するKQLの出来上がりです。

続いてListIDの確認方法です。

ListIDはライブラリの設定ページで確認できます。

ドキュメントライブラリを開き、右上の歯車マークから「ライブラリの設定」をクリックします。

さらに「その他のライブラリ設定」をクリックします。

ライブラリの設定ページが開くので、そのURLの「LIST=」以下がListIDとなります。

ListIDの頭の「%7B」と最後の「%7D」はURLとして指定できない文字 “{” と “}” をエンコードしたものなので、KQLに挿入する際は「{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}」のように置き換えましょう。

例：%7B5b22c895-a823-49c5-b9fc-375528baf9e9%7D →{5b22c895-a823-49c5-b9fc-375528baf9e9}

サイトのページライブラリについてもListIDの確認方法は同様です。

ListIDの確認ができましたらKQLを仕上げていきましょう。

以下、私のデモサイトにおけるサンプルKQLです。

(ListID:{6320861d-aa80-481d-b049-0cc68c3de631} OR {a537a202-3793-4c79-a0da-a3da1b3b787e} NOT (ContentType:"フォルダー") NOT (FileName:.aspx)) OR (ListID:{5b22c895-a823-49c5-b9fc-375528baf9e9} OR {5b22c895-a823-49c5-b9fc-375528baf9e9} AND (PromotedState=2) NOT (title="ホーム" OR "決算だにゃ！") NOT (AUTHOR:"システムアカウント"))

強調されたコンテンツの設定画面で「カスタム クエリ」を選択した上で「クエリ テキスト」に作成したKQLを貼り付けて、［適用］をクリックすると反映されます

2つのライブラリからドキュメントのみを抽出。サイトのトップページを更新するたびに新着表示されても困るので「ホーム」というタイトルのニュース記事は除外。システムアカウント作成のコンテンツを除外することでシステム側で自動生成されるページも表示されないようにしています。

フィルターとして使える管理属性はまだまだあります。
それらを組み合わせることで自在に表示すべきコンテンツを操ることが可能となります。

便利ですね！

表示のカスタマイズを行う

最後に表示のカスタマイズについてご紹介します。

設定可能なレイアウトは全部で5種類です。
すべてレスポンシブデザインのため、画面の大きさやセクションの分割数により表示サイズや内容が変化します。

とりあえず全レイアウトを見てみましょう。
セクションの設定は1カラムです。

使い勝手が良いのはサムネイル表示且つ多くのアイテムを一度に表示できる「グリッド」か「コンパクト」でしょうか。

この二つのレイアウトは非常に似ています。似ているどころかセクションを3分割にした場合は全く同じ表示となります。

狭い領域ですとタイトルが省略されて一見して記事の内容がわからないので困りますね。

続いて2分割です。

グリッドは表示領域が広くなった分、カードのサイズも大きくなり、水平方向に複数のアイテムが並びます。
コンパクトは垂直方向のサイズは変わらず、水平方向に表示領域が伸びます。

コンパクトは3分割では表示されていなかった長いタイトルが全て表示されるようになりました。
グリッドは2分割でも省略された状態です。

このようにセクションの領域により、表示内容がガラッと変わってきます。
特にタイトル省略問題にお悩みの方は2分割のコンパクト表示はお勧めできます。

ということで表示設定についてご紹介してきましたが、もっと細密な設定はできないのかと思いますよね。
サムネイルのサイズや表示項目などカスタマイズできれば、これ一本で良いサイトが作れそうなのですが…

MSさん、WordPressレベルのカスタマイズとまでは言いませんので、是非改善をお願いしたいところです。

まとめ

いかがでしたでしょうか。

今回は強調されたコンテンツWEBパーツについて、KQLや表示カスタマイズのお話をさせていただきました。

実はわたしは3分割グリッド表示のタイトル表示領域が極端に少なくなったことをきっかけに、このWEBパーツの使用は控えるようになりました。

タイトルの表示文字数は利用するシーンによっては非常に重要な設定項目です。
このことを理解しこのパーツを利用してほしく、今回はこの点にも触れてみました。