Web パーツを利用した リストデータの表示

奥田 理恵 (Rie Okuda)

› 株式会社クリエ・イルミネート 所属– http://www.crie-illuminate.jp

› SharePoint や Office 365 等 Microsoft 関連製品・技術に関するトレーニング、技術サポート、構築・活用支援サービスを提供している会社です。

› SharePoint 全般、 Office ( 特に InfoPath 、 Excel BI 系、アプリ開発 ) 、 .NET 開発が得意分野です。

› クリエ・イルミネート ブログ書いてます。– http://crieilluminate.wordpress.com/

本セッションのテーマ

› 前提– リスト ( ライブラリ ) のデータは Web パーツを利用し、

トップページ等他のページに、一覧表示できます。– 特にお知らせ表示でよく利用される → サイトをまたいだ表示、集約表示を行いたくなる → 表示形式をカスタマイズしたくなる

› リスト ( ライブラリ ) データを Web パーツを利用して表示する機能について考察、まとめてみたいと思います。– 時間がいくらあっても足りなくなっちゃいそうなので、

設定方法の解説はしません。考察＆まとめです。– 時間がもしあまれば、、

SPD Tips をいくつかご紹介します。

リスト データ表示に使える Web パーツ

① リスト ビュー Web パーツ⁃ SharePoint Server / SharePoint Online ⁃ SharePoint 全バージョンで利用可能

② クエリ結果 Web パーツ ( コンテンツ クエリ Web パーツ )

– SharePoint Server / SharePoint Online– SharePoint 全バージョンで利用可能– [ 発行インフラストラクチャ ] サイト コレクション機

能が必要

③ コンテンツ検索 Web パーツ– SharePoint Server 2013/ SharePoint Online– 2013 からの機能– Enterprise 機能

① リスト ビュー Web パーツ

› 同サイト内のリスト、ライブラリよりアイテムを表示– ビューを作成する際と同様の設定

› 表示する列の指定、フィルター、並べ替え、グループ化、アイテムの制限等

リスト ビュー Web パーツの挿入

› そのサイト内の、リスト / ライブラリと同名の Web パーツ

SharePoint 2013

SharePoint 2010

リスト ビュー Web パーツの設定

› 表示内容の設定について、基本はビューと同様– 表示する列を指定– フィルター、並べ替え、グループ化– アイテムの制限 など

Web パーツの設定画面

既存のビューを選択して表示

表示内容を編集

設定方法が簡単表示形式も、ビューと同様なの

で、比較的設定しやすい

( 設定画面もほぼ同様 )

画面例 : リスト ビュー Web パーツ

お知らせ リスト 概要ビューにて、新着 1 件を表

示

ライブラリ

リンク リスト概要ビュー

予定表リスト

SharePoint 2010

9

画面例 : リスト ビュー Web パーツ

SharePoint 2013

注目 リンクリスト(2013 からの機能 )

お知らせ リストビューの編集により、

新着表示

リンク

リスト

リスト ビュー Web パーツ：考慮点

› 他サイトでは参照不可– リスト ビュー Web パーツは、同じサイト内のリス

ト・ライブラリのみを Web パーツとして表示できます。そのため、別サイト内に作成されたリストやライブラリのビューを表示することはできません。

› 表示形式はビュー ( 表形式 ) がベース– 表示形式は、ビューと同様、表形式が基本となります。

( お知らせやリンクの概要ビュー、予定表ビューなど一部例外はあります )

② クエリ結果 Web パーツ

› サイト コレクション内のリスト、ライブラリを対象に、 クエリの実行結果を表示する Web パーツ

› 設定はリスト ビュー Web パーツよりも難易度があがる› 表示形式は複数用意されているものから選択

クエリ結果 Web パーツ 利用の前提

› サイト コレクション機能である [ 発行インフラストラクチャ ] がアクティブ化されていること– トップ レベル サイトにて、 [ サイトの設定 ] 画面 –

[ サイト コレクションの管理 ] 内の [ サイト コレクションの機能 ]SharePoint

2010

SharePoint 2013

クエリ結果 Web パーツの挿入

› 2010 では、コンテンツクエリ Web パーツ– 名前がすこし違うだけで、機能は同等

SharePoint 2013

SharePoint 2010

クエリ結果 Web パーツの設定 ① クエリ

› クエリ：どこから、どのタイプのデータを取得するか “ どこから”

サイト コレクション全体 or 特定のサイト以下 or 特定のリスト

“ どのタイプの”リスト形式を選択

“ どのタイプの”コンテンツ タイプを選択

“ どのタイプの”対象ユーザーを利用するかどうか

“ どのタイプの”データ フィルター条件を指定

クエリ結果 Web パーツの設定 ② 表示

› プレゼンテーション：表示形式グループ化設

定

並べ替え

アイテム数

表示スタイル

表示列

設定方法はやや難易度 UPリスト ビューと同様の表示形式( 表形式 ) は用意されていない

イメージ領域( 表示列を指定 )

タイトル領域 ( 表示列を指定 )

説明 ( 表示列を指定 )

画面例 : クエリ結果 Web パーツ

• 特定のお知らせリストを URL 指定

• [ イメージを左に配置 ] スタイルを利用

• 特定のライブラリを URL 指定

• [ タイトル、説明、ドキュメント アイコン ] スタイルを利用

クエリ結果 Web パーツ : 考慮点› 他サイト コレクションにはクエリ不可

– クエリ結果 Web パーツは、同じサイト コレクション内のリスト アイテムをクエリし、表示可能です。他のサイト コレクションよりアイテムを表示することは不可能です。

› 表示形式が、リストビュー Web パーツとは大きく異なる– クエリ結果の表示は、複数用意されている表示形式 ( アイテムのスタイル )

より、選択します。リスト ビュー Web パーツのような表示形式 ( 表形式 ) は、用意されていません。

› クエリ結果はキャッシュされるため、即時に反映しないことがある– クエリ結果はキャッシュされます。そのため即時に反映しないことがあり

ます。

› パフォーマンス面– 画面アクセス時に DB にクエリを実行するため、 FEW リソースを多く消費する。オブジェクト キャッシュを利用しても、サーバーリソースを多く消費することは変わらない。アイテム数やクエリの複雑さによる。

③ コンテンツ検索 Web パーツ

› 検索結果を表示する Web パーツ– 検索クエリ (Keyword Query) を組み立てる必要があ

るため、難易度が高い– 検索インデックスより、必要な情報を表示可能

コンテンツ検索 Web パーツの挿入

› Enterprise 環境で利用可能 (2013 からの機能 )

SharePoint 2013

コンテンツ検索 Web パーツの設定 ① クエリ

› クエリ：検索クエリ検索クエリを組み立て

検索クエリを編集する

画面

クエリ

コンテンツ検索 Web パーツの設定 ② 表示

› 表示テンプレート– クエリ結果のアイテム スタイルと同様のもの

コンテンツ検索 Web パーツの設定 ③ 列

› プロパティ マッピング– 表示テンプレート ( アイテム ) に表示する列を指定

表示テンプレートに 列を指定検索 管理プロパティのみ

行１ (HyperLink ：リンクの URL)

行２

画面例 : コンテンツ検索 Web パーツ

• ライブラリ内ファイルを検索

• 2 行 表示テンプレート

• 特定の画像ライブラリから画像検索

• スライドショー 表示テンプレート

検索 Web パーツ : 考慮点

› 設定が難易度 ↑ ↑ ↑ – 検索クエリの組み立てが必要となるため、リスト ビュー Web

パーツやクエリ結果 Web パーツに比べて、ぐんと難易度があがる

› 表示形式が、リストビュー Web パーツとは大きく異なる– クエリ結果の表示は、複数用意されている表示形式より、選択

します。リスト ビュー Web パーツのような表形式の表示形式は、用意されていません。

– すべてのリスト列を表示できるわけではない

› 即時に反映しない– 検索を利用するため、クロールが終了するまでコンテンツは表

示されません。

ここまでの、まとめ基本機能 考慮点

リスト ビュー Web パーツ

リスト ビューを表示

設定難易度 : 低

他サイトでは利用不可

対象は１リスト

クエリ結果 Web パーツ( コンテンツ クエリ Web パーツ )

サイト コレクション内のリスト アイテムに対し、クエリ結果を表示 ( コンテンツ タイプをまたいだ集約は不可 )

設定難易度 : 中

他サイト コレクションからのクエリは不可

リスト ビューと同様の表示形式ではない

コンテンツ検索 Web パーツ(2013 のみ )

検索結果を表示可能( サイト コレクションやコンテンツ タイプをまたいだ集約も )

設定難易度 ： 高

クエリの組み立ては難易度が高い

リスト ビューと同様の表示形式ではない

表示カスタマイズについて

› リスト ビュー Web パーツの表示形式も変えたい– SPD (2010) /JavaScript (2013) で変更

› クエリ結果 Web パーツの表示形式やコンテンツ検索 Web パーツの表示形式を変更したい– クエリ結果 Web パーツは XSLT でアイテム スタイ

ルを作成– コンテンツ検索 Web パーツは HTML で表示テンプ

レートを作成

リスト ビュー WP の表示形式 (2010)

› SharePoint Designer 2010 のデザイン ビューで以外と簡単に– 列幅を変えたい– 列ヘッダーを非表示に– グループヘッダーの編集– 罫線

28

[ 参考 ] SPD 2010 デザイン ビュー

たとえば、列幅 調整したいってときは

リスト ビュー WP の表示形式 (2013)

› SharePoint Designer 2013 ではデザイン ビューが廃止 ＝ 2010 と同様に編集は不可 ( コードだと、 XSLT 編集となる )

› JS リンク ： SharePoint 2013 の新機能– リスト ビュー Web パーツのプロパティ– JS ファイル (SharePoint のお作法 ) を表示の際に実

行

30

[ 参考 ] JS リンク 例

クエリ結果、コンテンツ検索 Web パーツ

› 表示形式をそれぞれ作成できる– クエリ結果：アイテム スタイル (XSLT)

› 参考http://msdn.microsoft.com/ja-jp/library/bb447557.aspx

– コンテンツ検索：表示テンプレート (HTML 、 JS)› 参考

http://msdn.microsoft.com/ja-jp/library/office/jj945138(v=office.15).aspx

カスタマイズ例 ( クエリ結果、コンテンツ検索 )

SPD Tips ① : 時間があまれば・・・

› サイト テンプレート保存のオプション変更– [ 発行機能 ] をアクティブ化すると、 [ テンプレート

としてサイトを保存 ] メニューが利用できなくなる› [ 発行機能 ] を非アクティブ化しても、再度でてこない

SPD Tips ② : 時間があまれば・・・

› リスト、ライブラリ [ サイト コンテンツ ] に表示したくない

こういうシステム ライブラリなもの

SPD Tips ③ : 時間があまれば・・・

› カスタム アクション : リストにカスタム メニュー追加できる– クリック時の挙動として、 URL や JavaScript をし

こめる– 例１：フォルダーを ZIP ダウンロードできるメ

ニュー– 例２：別リストにアイテムコピーするメニュー

› たとえば、親サイトのお知らせリストに、アイテム コピーとか

以上！

ありがとうございました

› クリエ・イルミネート ブログに SharePoint Tips をいろいろと投稿していますので、よろしければ参考に。

› トレーニングのご受講・ワークショップのご相談もお待ちしております♪– http://www.crie-illuminate.jp– rie@crie-illuminate.jp