[方法] コンテンツ クエリ Web パーツ用に XSL をカスタマイズする
最終更新日: 2010年9月27日
適用対象: SharePoint Server 2010
コンテンツ クエリ Web パーツを使用して、Web サイトの複数のデータ ソースのコンテンツを集めた後、そのすべてを 1 か所に表示できます。コンテンツ クエリ Web パーツを構成してカスタマイズする前に、実現するブランドとサイトのデザインを考慮します。Microsoft SharePoint Server 2010 には、3 つの XSL (Extensible Style Language) ファイルがあり、これらのファイルを変更して、コンテンツ クエリ Web パーツが集めたコンテンツを表示するスタイルでフィールドをレンダリングできます。
このトピックでは、コンテンツ クエリ Web パーツで使用する 3 つの XSL ファイルと各ファイルの機能、変更可能なテンプレートと変数、指定した外観のデータをコンテンツ クエリ Web パーツでレンダリングするためにこれらのファイルを変更する方法について説明します。
次の表に、コンテンツ クエリ Web パーツを記述する 3 つの XSL ファイルの一覧と説明を示します。
ファイル |
場所 |
説明 |
|---|---|---|
ContentQueryMain.xsl |
\Style Library\XSL Style Sheets\ContentQueryMain.xsl |
|
ItemStyle.xsl |
\Style Library\XSL Style Sheets\ItemStyle.xsl |
アイテムの表示方法を定義するテンプレートを含みます。これらのテンプレートは、一度に 1 行のデータを受信して処理することで、アイテムの行のスタイルとデータの整合性を保証します。 @Property ディレクティブを使用して、行に関するデータを取得できます。 |
Header.xsl |
\Style Library\XSL Style Sheets\Header.xsl |
ヘッダーの表示方法を定義し、グループ ヘッダーの整合性を保証するテンプレートを含みます。 Header.xsl に指定されたテンプレートは、処理する次のアイテム行を受信します。これは複数の列が存在しない限り、通常はグループの 1 行目です。複数の列がある場合は、列の 1 行目を受信します。 @Property ディレクティブを使用して、次のアイテム行についてのデータを取得できます。groupby 列名と groupby 列の列の種類を表す $GroupType を格納する $Group パラメータを使用できます。 |
既定では、ItemStyle.xsl ファイルと Header.xsl ファイルには次のテンプレートが含まれます。Header.xsl ファイルは、グループ スタイルの定義を含み、ItemStyle.xsl ファイルは、コンテンツ クエリ Web パーツの行アイテムに適用する定義を含みます。これらのスタイルは、スタイル ライブラリのスタイルを選択するときに表示される、[グループ] ドロップダウン リストと [アイテムのスタイル] ドロップダウン リストで使用できるオプションに対応します。
注意
次の表に、ファイル内の順序で並べたテンプレートの一覧を示します。
ファイル名 |
テンプレート |
コンテンツ クエリ Web パーツのアクション |
|---|---|---|
ItemStyle.xsl |
Default |
LinkImage を左側に配置します。 LinkTitle を上部に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
NoImage |
LinkTitle を上部に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
TitleOnly |
アイテムには LinkTitle だけが含まれます。 |
ItemStyle.xsl |
Bullets |
アイテムには、行頭文字が追加された LinkTitle を含みます。 |
ItemStyle.xsl |
ImageRight |
LinkImage を右側に配置します。 LinkTitle を上部に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
ImageTop |
LinkImage を上部に配置します。 LinkTitle を中央に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
ImageTopCentered |
LinkImage を上部の中央に配置します。 LinkTitle を中央に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
LargeTitle |
LinkImage を左側に配置します。 LargeLinkTitle を上部に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
ClickableImage |
LinkImage だけを含みます。 |
ItemStyle.xsl |
NotClickableImage |
リンクなしの Image だけを含みます。 |
ItemStyle.xsl |
FixedImageSize |
サイズ制限のある LinkImage を左側に配置します。 LinkTitle を上部に配置します。 説明を下部に配置します。 |
ItemStyle.xsl |
TitleWithBackground |
背景色付きの LinkTitle を含みます。 |
ファイル名 |
テンプレート |
コンテンツ クエリ Web パーツのアクション |
|---|---|---|
Header.xsl |
DefaultHeader |
グループ ヘッダーを中程度のフォント サイズで表示します。 |
Header.xsl |
LargeText |
グループ ヘッダーを大きなフォント サイズで表示します。 |
Header.xsl |
SmallText |
グループ ヘッダーを小さなフォント サイズで表示します。 |
Header.xsl |
Band |
グループ ヘッダーを四角形の背景色付きで表示します。 |
Header.xsl |
Centered |
グループ ヘッダーを中央に配置します。 |
Header.xsl |
Separator |
グループ ヘッダーとその下のコンテンツの間に線を挿入します。 |
Header.xsl |
Whitespace |
グループ ヘッダーとその下のコンテンツの間に空白を挿入します。 |
各テンプレートは、命令を処理する以下の 2 つのセクションを含みます。
.データを処理して正しい書式設定を保証する <xsl:variable> セクション。
HTML をレンダリングしてデータを含める <div> セクション。
ImageRight テンプレートのコメント付きのテンプレート コードを次に示します。
///Declares an XSL template named ImageRight that
///processes row style elements defined as ImageRight.
- <xsl:template name="ImageRight" match="Row[@Style='ImageRight']"
mode="itemstyle">
///The <xsl:variable> sections process and ensure correct formatting of the data.
///This section declares the variable named SafeLinkUrl, includes instructions to call the OuterTemplate.GetSafeLink function, and includes the LinkUrl expression to scope the call to the UrlColumnName parameter.
- <xsl:variable name="SafeLinkUrl">
/// The OuterTemplate.GetSafeLink variable passes in the UrlColumnName that represents the column name containing the ItemUrl.
- <xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'" />
</xsl:call-template>
</xsl:variable>
///This section declares the variable named SafeImageUrl and calls the OuterTemplate.GetSafeStaticUrl function.
- <xsl:variable name="SafeImageUrl">
- <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
<xsl:with-param name="UrlColumnName" select="'ImageUrl'" />
</xsl:call-template>
</xsl:variable>
///This section declares the variable named SafeImageHtml and calls the OuterTemplate.GetColumnDataForUnescapedOutput function, and passes the 'PublishingRollupImage' and 'Image' parameter values to the template rule.
- <xsl:variable name="SafeImageHtml">
- <xsl:call-template name="OuterTemplate.GetColumnDataForUnescapedOutput">
<xsl:with-param name="Name" select="'PublishingRollupImage'" />
<xsl:with-param name="MustBeOfType" select="'Image'" />
</xsl:call-template>
</xsl:variable>
///This section declares the variable named DisplayTitle, includes calls to the OuterTemplate.GetTitle function, and passes the @Title and 'LinkUrl' parameter values to the template rule.
- <xsl:variable name="DisplayTitle">
- <xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title" />
<xsl:with-param name="UrlColumnName" select="'LinkUrl'" />
</xsl:call-template>
</xsl:variable>
///This section declares the variable named LinkTarget and tests whether it should open the target URL in a new window. If the test returns True, then the template rule processes the instruction to open the target URL in a new window.
- <xsl:variable name="LinkTarget">
<xsl:if test="@OpenInNewWindow = 'True'">_blank</xsl:if>
</xsl:variable>
///The <div> sections define the data to render and provide instructions on how to render it. This code block defines item data, and uses the OuterTemplate.CallPresenceStatusIconTemplate function to verify whether it should create an icon.
- <div class="item">
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate" />
///The <xsl:if test> instruction supplies a condition for the XSLT engine to evaluate. If the test evaluates to True after converting it to a Boolean value, the ItemStyle renders the content.
- <xsl:if test="string-length($SafeImageUrl) = 0 and string-length($SafeImageHtml) != 0">
- <div class="image-area-right">
<xsl:value-of disable-output-escaping="yes" select="$SafeImageHtml" />
</div>
</xsl:if>
- <xsl:if test="string-length($SafeImageUrl) != 0">
- <div class="image-area-right">
- <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
<img class="image" align="left" border="0" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
</a>
</div>
</xsl:if>
- <div class="link-item">
- <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
<xsl:value-of select="$DisplayTitle" />
</a>
- <div class="description">
<xsl:value-of select="@Description" />
</div>
</div>
</div>
</xsl:template>
SharePoint Server 2010 XSL ファイルの <xsl:variables> セクションでは、次の表に示すさまざまな関数を使用できます。
関数 |
説明 |
|---|---|
OuterTemplate.GetSafeLink |
ユーザーが UrlColumnName (ItemUrl 値を含む列名) を渡した場合、この関数は、アイテムに安全に表示される URL を返します。 URL の表示が安全でない場合、この関数は空白の URL を返します。 項目がストリームされない場合、この関数は CopyUtil URL を返します。 |
OuterTemplate.GetSafeStaticUrl |
ユーザーが UrlColumnName (URL が格納されている列の名前) を渡したとき、その URL が安全に表示される場合、この関数は URL を返します。 URL の表示が安全でない場合、この関数は白紙の URL を返します。 |
OuterTemplate.GetColumnDataForUnescapedOutput |
ユーザーが Name (データの取得先の列名) を渡した場合、この関数は、エスケープのない出力の列データを取得します。 ユーザーが MustBeOfType (予想される列の種類) を渡したときに、列の種類が正しい場合、この関数は、列の内容を返します。それ以外の場合は、何のデータも返しません。 |
OuterTemplate.GetTitle |
ユーザーが Title (Title 列のデータ) を渡した場合、この関数は、タイトルを返します。 Title が空白の場合は、ページ名が空白またはタイトルとして表示されます。 |
OuterTemplate.FormatColumnIntoUrl |
ユーザーが UrlColumnName (URL を含む列名) を渡した場合、この関数は、列に含まれる URL を返します。 |
OuterTemplate.FormatValueIntoUrl |
ユーザーが Windows SharePoint Services 3.0 URL 列の種類で見つかったデータを表す Value を渡した場合、Windows SharePoint Services 3.0 の URL 列は URL と代替テキストを返します。 列に含まれる URL を返します。 |
OuterTemplate.Replace |
ユーザーが、次のいずれかを行った場合 :
この関数は、適切な検索テキストと置換テキストを返します。 |
OuterTemplate.GetPageNameFromUrl |
ユーザーが UrlColumnName (アイテムの URL の列名) を渡した場合、この関数は、URL のページ名を返します。 |
OuterTemplate.GetPageNameFromUrlRecursive |
GetPageNameFromUrl のヘルパー メソッドです。 |
OuterTemplate.GetGroupName |
ユーザーが GroupName 列の値を渡した場合、この関数は、グループ名を適切な書式で返します。 値が空の場合は空白のグループ名を返します。 ユーザーが GroupType 列の値 (グループの列の種類) を渡したときに、その種類が URL の場合、この関数は、ページ名を返します。 |
OuterTemplate.CallPresenceStatusIconTemplate |
現在の行に @SipAddress 属性が存在する場合は、Microsoft Office Outlook 2007 または Microsoft Office Communicator 2007 の存在を表すアイコンを作成する適切なマークアップを生成します。 |
コンテンツ クエリ Web パートの追加とコンテンツ クエリ Web パーツの XSL を追加するには
サイトのホーム ページに移動し、[サイトの操作] をクリックし、[ページの編集] をクリックしてページをチェック アウトして編集モードにします。
いずれかの [Web パーツ領域] で、[Web パーツの追加] をクリックし、コンテンツ クエリ Web パーツを選択して追加します。
[編集] をクリックし、[共有 Web パーツの変更] をクリックします。
必要に応じて、コンテンツ クエリ Web パーツのプロパティを変更し、フィールドを追加します。詳細については、「[方法] カスタム プロパティを使用してコンテンツ クエリ Web パーツをカスタマイズする」を参照してください。
注意
コンテンツ クエリ Web パーツを変更するとき、2 つのドロップダウン リストが [スタイル] セクションに表示されます。1 つはグループ スタイルであり、もう 1 つはアイテム スタイルです。これらのリスト アイテムは、ItemStyle.xsl ファイルと Header.xsl ファイルのテンプレートによって定義されます。
このトピックの情報を参考にして XSL を編集することで、select ステートメント、変数、および式の値を変更します。たとえば、<div> セクションの select ステートメントの値を変更して、式に別の変数を解決するように命令できます。
アイテムのスタイルを作成するには
作成するスタイルに近いスタイルを識別します。
スタイルをコピーし、name プロパティと match プロパティの値を変更します。
<xsl:template name="ImageRight" match="Row[@Style='ImageRight']" mode="itemstyle"> <xsl:template name="ImageRight2" match="Row[@Style='ImageRight2']" mode="itemstyle">
関連項目
タスク
[方法] カスタム プロパティを使用してコンテンツ クエリ Web パーツをカスタマイズする