Japan SharePoint Group #15 大阪大会 奥田理恵 セッション資料

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

2. 奥田理恵(Rie Okuda)
› 株式会社クリエ・イルミネート所属
– http://www.crie-illuminate.jp
› SharePoint やOffice 365 等Microsoft 関連製品・
技術に関するトレーニング、技術サポート、構築・活用支援サービスを提
供している会社です。
› SharePoint 全般、Office (特にInfoPath、Excel
BI 系、アプリ開発)、.NET 開発が得意分野です。
› クリエ・イルミネートブログ書いてます。
– http://crieilluminate.wordpress.com/

3. 本セッションのテーマ
› 前提
– リスト(ライブラリ) のデータはWeb パーツを利用し、
トップページ等他のページに、一覧表示できます。
– 特にお知らせ表示でよく利用される
→ サイトをまたいだ表示、集約表示を行いたくなる
→ 表示形式をカスタマイズしたくなる
› リスト(ライブラリ) データをWeb パーツを利用して
表示する機能について考察、まとめてみたいと思います。
– 時間がいくらあっても足りなくなっちゃいそうなので、
設定方法の解説はしません。考察＆まとめです。
– 時間がもしあまれば、、
SPD Tips をいくつかご紹介します。

4. リストデータ表示に使えるWeb パーツ
① リストビューWeb パーツ
⁃ SharePoint Server / SharePoint Online
⁃ SharePoint 全バージョンで利用可能
② クエリ結果Web パーツ
(コンテンツクエリWeb パーツ)
– SharePoint Server / SharePoint Online
– SharePoint 全バージョンで利用可能
– [発行インフラストラクチャ] サイトコレクション機能が必要
③ コンテンツ検索Web パーツ
– SharePoint Server 2013/ SharePoint Online
– 2013 からの機能
– Enterprise 機能

5. ① リストビューWeb パーツ
› 同サイト内のリスト、ライブラリよりアイテムを表示
– ビューを作成する際と同様の設定
› 表示する列の指定、フィルター、並べ替え、グループ化、アイテムの制限等

6. リストビューWeb パーツの挿入
› そのサイト内の、リスト/ライブラリと同名のWeb パーツ
SharePoint 2010 SharePoint 2013

7. リストビューWeb パーツの設定
› 表示内容の設定について、基本はビューと同様
– 表示する列を指定
– フィルター、並べ替え、グループ化
– アイテムの制限など
既存のビューを
選択して表示
Web パーツの設定画面
表示内容を
編集
(設定画面もほぼ同様)
設定方法が簡単
表示形式も、ビューと同様なので、
比較的設定しやすい

8. 画面例: リストビューWeb パーツ
お知らせリスト
SharePoint 2010
概要ビューにて、新着1件を表示
ライブラリ
リンクリスト
概要ビュー
予定表
リスト

9. 画面例: リストビューWeb パーツ
9
SharePoint 2013
注目リンクリスト
(2013 からの機能)
お知らせリスト
ビューの編集により、
新着表示
リンク
リスト

10. リストビューWeb パーツ：考慮点
› 他サイトでは参照不可
– リストビューWeb パーツは、同じサイト内のリスト・ライブラリの
みをWeb パーツとして表示できます。
そのため、別サイト内に作成されたリストやライブラリのビューを
表示することはできません。
› 表示形式はビュー(表形式) がベース
– 表示形式は、ビューと同様、表形式が基本となります。
(お知らせやリンクの概要ビュー、予定表ビューなど一部例外は
あります)

11. ② クエリ結果Web パーツ
› サイトコレクション内のリスト、ライブラリを対象に、
クエリの実行結果を表示するWeb パーツ
› 設定はリストビューWeb パーツよりも難易度があがる
› 表示形式は複数用意されているものから選択

12. クエリ結果Web パーツ利用の前提
› サイトコレクション機能である[発行インフラストラクチャ]
がアクティブ化されていること
– トップレベルサイトにて、[サイトの設定] 画面– [サイトコレク
ションの管理] 内の[サイトコレクションの機能]
SharePoint 2010
SharePoint 2013

13. クエリ結果Web パーツの挿入
› 2010 では、コンテンツクエリWeb パーツ
– 名前がすこし違うだけで、機能は同等
SharePoint 2010 SharePoint 2013

14. クエリ結果Web パーツの設定① クエリ
› クエリ：どこから、どのタイプのデータを取得するか
“どこから”
サイトコレクション全体or 特定のサイト
以下or 特定のリスト
“どのタイプの”
リスト形式を選択
“どのタイプの”
コンテンツタイプを選択
“どのタイプの”
対象ユーザーを利用するかどうか
“どのタイプの”
データフィルター条件を指定

15. クエリ結果Web パーツの設定② 表示
› プレゼンテーション：表示形式
グループ化設定
並べ替え
アイテム数
表示スタイル
表示列
設定方法はやや難易度UP
リストビューと同様の表示形式
(表形式) は用意されていない
イメージ領域
(表示列を指定)
タイトル領域(表示列を指定)
説明(表示列を指定)

16. 画面例: クエリ結果Web パーツ
• 特定のお知らせリスト
をURL 指定
• [イメージを左に配置]
スタイルを利用
• 特定のライブラリをURL
指定
• [タイトル、説明、ドキュメ
ントアイコン] スタイルを
利用

17. クエリ結果Web パーツ: 考慮点
› 他サイトコレクションにはクエリ不可
– クエリ結果Web パーツは、同じサイトコレクション内のリストアイテムをクエリ
し、表示可能です。他のサイトコレクションよりアイテムを表示することは不可
能です。
› 表示形式が、リストビューWeb パーツとは大きく異なる
– クエリ結果の表示は、複数用意されている表示形式(アイテムのスタイル) よ
り、選択します。リストビューWeb パーツのような表示形式(表形式) は、
用意されていません。
› クエリ結果はキャッシュされるため、即時に反映しないことがある
– クエリ結果はキャッシュされます。そのため即時に反映しないことがあります。
› パフォーマンス面
– 画面アクセス時にDB にクエリを実行するため、FEW リソースを多く消費する。
オブジェクトキャッシュを利用しても、サーバーリソースを多く消費することは変
わらない。アイテム数やクエリの複雑さによる。

18. ③ コンテンツ検索Web パーツ
› 検索結果を表示するWeb パーツ
– 検索クエリ(Keyword Query) を組み立てる必要があるため、
難易度が高い
– 検索インデックスより、必要な情報を表示可能

19. コンテンツ検索Web パーツの挿入
› Enterprise 環境で利用可能(2013 からの機能)
SharePoint 2013

20. コンテンツ検索Web パーツの設定① クエリ
› クエリ：検索クエリ
検索クエリを組み立て
検索クエリを編集する
画面
クエリ

21. コンテンツ検索Web パーツの設定② 表示
› 表示テンプレート
– クエリ結果のアイテムスタイルと同様のもの

22. コンテンツ検索Web パーツの設定③ 列
› プロパティマッピング
– 表示テンプレート(アイテム) に表示する列を指定
表示テンプレートに
列を指定
検索管理プロパティのみ
行１(HyperLink：リンクのURL)
行２

23. 画面例: コンテンツ検索Web パーツ
• ライブラリ内ファイルを検索
• 2行表示テンプレート
• 特定の画像ライブラリから画像検索
• スライドショー表示テンプレート

24. 検索Web パーツ: 考慮点
› 設定が難易度↑ ↑ ↑
– 検索クエリの組み立てが必要となるため、リストビューWeb パーツや
クエリ結果Web パーツに比べて、ぐんと難易度があがる
› 表示形式が、リストビューWeb パーツとは大きく異なる
– クエリ結果の表示は、複数用意されている表示形式より、選択します。
リストビューWeb パーツのような表形式の表示形式は、用意されて
いません。
– すべてのリスト列を表示できるわけではない
› 即時に反映しない
– 検索を利用するため、クロールが終了するまでコンテンツは表示されま
せん。

25. ここまでの、まとめ
基本機能考慮点
リストビュー
Web パーツ
リストビューを表示
設定難易度: 低
他サイトでは利用不可
対象は１リスト
クエリ結果
Web パーツ
(コンテンツクエリ
Web パーツ)
サイトコレクション内のリスト
アイテムに対し、クエリ結果を表示
(コンテンツタイプをまたいだ集約は
不可)
設定難易度: 中
他サイトコレクションからの
クエリは不可
リストビューと同様の表示
形式ではない
コンテンツ検索
Web パーツ
(2013 のみ)
検索結果を表示可能
(サイトコレクションやコンテンツタイ
プをまたいだ集約も)
設定難易度： 高
クエリの組み立ては難易度
が高い
リストビューと同様の表示
形式ではない

26. 表示カスタマイズについて
› リストビューWeb パーツの表示形式も変えたい
– SPD (2010) /JavaScript (2013) で変更
› クエリ結果Web パーツの表示形式やコンテンツ検索
Web パーツの表示形式を変更したい
– クエリ結果Web パーツはXSLT でアイテムスタイルを作成
– コンテンツ検索Web パーツはHTML で表示テンプレートを作
成

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

28. [参考] SPD 2010 デザインビュー
28
たとえば、
列幅調整したいってときは

29. リストビューWP の表示形式(2013)
› SharePoint Designer 2013 ではデザインビューが廃
止＝ 2010 と同様に編集は不可(コードだと、XSLT
編集となる)
› JS リンク： SharePoint 2013 の新機能
– リストビューWeb パーツのプロパティ
– JS ファイル(SharePoint のお作法) を表示の際に実行

30. [参考] JS リンク例
30

31. クエリ結果、コンテンツ検索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

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

33. SPD Tips ① : 時間があまれば・・・
› サイトテンプレート保存のオプション変更
– [発行機能] をアクティブ化すると、[テンプレートとしてサイトを保
存] メニューが利用できなくなる
› [発行機能] を非アクティブ化しても、再度でてこない

34. SPD Tips ② : 時間があまれば・・・
› リスト、ライブラリ[サイトコンテンツ] に表示したくない
こういう
システムライブラリなもの

35. SPD Tips ③ : 時間があまれば・・・
› カスタムアクション: リストにカスタムメニュー追加できる
– クリック時の挙動として、URL やJavaScript をしこめる
– 例１：フォルダーをZIP ダウンロードできるメニュー
– 例２：別リストにアイテムコピーするメニュー
› たとえば、親サイトのお知らせリストに、アイテムコピーとか

36. 以上！
ありがとうございました
› クリエ・イルミネートブログにSharePoint Tips を
いろいろと投稿していますので、よろしければ参考に。
› トレーニングのご受講・ワークショップのご相談も
お待ちしております♪
– http://www.crie-illuminate.jp
– rie@crie-illuminate.jp