次の方法で共有

チュートリアル: カスタマイズされたホーム ページとコンテンツ クエリ Web パーツ XSL を作成する

  • [アーティクル]

最終更新日: 2010年4月19日

適用対象: SharePoint Server 2010

この記事の内容
ビデオの表示を Float に変更
サムネイル イメージを持たないビデオの既定イメージの作成
ItemStyle.xsl への Description 要素の追加
ItemStyle.xsl への評価の表示の追加

このトピックは、ビデオ共有サイトを作成しカスタマイズする方法を学ぶための、5 部構成のチュートリアルの第 4 部です。

「チュートリアル: ビデオ サイトを作成する」と「チュートリアル: ビデオをアップロードするエクスペリエンスのカスタマイズ」に説明されているタスクを完了したら、カスタマイズしたホーム ページおよびカスタマイズしたコンテンツ クエリ Web パーツ (CQWP) XSL を作成できます。これらはそれぞれ、ビデオの共有、表示、管理用に設計されています。

ホームページと CQWP XSL の作成では、4 つのタスクを実行します。

  1. CSS オーバーライド定義を使用して、ContentByQueryWebPart オブジェクトによって表示されるアイテムを float にします。

  2. ContentByQueryWebPart オブジェクトの新しいアイテム スタイルを作成します。

  3. サムネイル イメージを持たないビデオの既定のイメージを作成します。

  4. 評価の表示をアイテム スタイルに追加します。

ビデオのソートと表示に利用できるオプションを最大限にするサイトを設計するためには、1 つ以上のコンテンツ クエリ Web パーツ (CQWP) をホーム ページに追加することが重要になります。CQWP は、ビデオの動的なリストを表示します。たとえば、ごく最近アップロードされたビデオや、人気のあるビデオを強調表示したい場合があります。このチュートリアルでは、大きなサムネイル イメージを表示する、フローティング レイアウトで 1 行に複数のビデオを配置する、評価を表示するなど、視覚的な要素を強調する形式でビデオを表示するように最適化された、CQWP のカスタム スタイルを作成する方法を示します。

サイトの外観をカスタマイズする他に、ビデオの結果がクリックされたときに、ユーザーを (「チュートリアル: ビデオ サイトを作成する」で作成された) カスタマイズされた表示フォームに移動させることができます。MediaWebPart オブジェクトをレンダリングする代わりに、カスタマイズされた表示フォームを使用して、ビデオ ファイルを直接再生します。これは、ビデオの結果がクリックされたときに起動する既定のアクションです。

前提条件

「チュートリアル: ビデオ サイトを作成する」と「チュートリアル: ビデオをアップロードするエクスペリエンスのカスタマイズ」に記載されているタスクを完了します。

CQWP の新しいスタイルを作成するには

  1. Microsoft SharePoint Designer 2010 を開始します。[ファイル] メニューで、[開く] をクリックします。

  2. /Style Library/XSL Style Sheets フォルダーに移動して、ItemStyle.xsl ファイルを開きます。

  3. ファイルをチェックアウトして編集し、必要に応じて変更をロールバックできるようにします。

  4. XSL:Template 要素と ImageTopCentered コンテンツのすべてを、新しいテンプレートとしてファイルにコピーします。この操作は、ItemStyle が既存の ImageTopCentered スタイルに類似しているため必要になります。

  5. 新しいスタイル名の値と一致するように、name 属性と match 属性の値を変更します。たとえば、name 属性を ContosoWithRatings に変更する場合は、以下のように XSL:Template タグを更新します。

    <xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">

  6. 更新した ItemStyle.xsl ファイルを保存します。

  7. CQWP の [Web パーツのプロパティ] ウィンドウを表示して、スタイルが利用できることを確認します。

  8. 以下のスタイル属性を、スタイルの最初の <div> タグに追加します。

    <div class="item centered" style="float:left;padding-left:20px;padding-right:20px; width:160px; height:240px; margin-left:auto; margin-right:auto">

float 属性とそのパラメーターを [アイテム中央揃え] スタイルに追加すると、各アイテムのすべてのデータが中央揃えでレンダリングされます。目的のピクセル数になるように、コードのピクセル値を正確に変更します。

ビデオの表示を Float に変更

カスタムの CSS オーバーライド定義を使用して、ContentByQueryWebPart オブジェクトから返されるアイテムを float にすることができます。コードを作成したら、そのコードを、XSL 自体ではなく、CQWP が使用されているすべてのページ レイアウトに適用します。つまり、XSL の変更は、ビデオ用に設計された CQWP が使用される場合にコードを適用するページ レイアウトのみならず、すべての CQWP スタイルに影響します。

この定義では、float 属性を、表示される各アイテムに CQWP が適用される dfwp-item スタイルに追加します。

<style type=”text/css”>
.dfwp-item
{ 
float:left;
}
</style>

サムネイル イメージを持たないビデオの既定イメージの作成

既定では、CQWP 用に作成されたスタイルが機能し、有効なプレビュー イメージ URL がイメージごとに定義されるようにします。有効なプレビュー イメージ URL を持たないイメージは、正しくレンダリングされません。プレビュー イメージ URL が存在しない場合、SharePoint Server 2010 で既定で利用できる既定のビデオ イメージがページに表示されるように、ロジックを新しいスタイルに追加します。

注意

既定のビデオ イメージの既定の場所は、http://<server>/_layouts/images/VideoPreview.png です。

スタイルシートでは、既存の <img> タグを <xsl:choose> ステートメントでラップします。<xsl:choose> ステートメントは、プレビュー イメージ URL が存在する場合は SharePoint Server 2010 の既定の動作に従いますが、それ以外の場合は既定のイメージを使用します。

<xsl:choose>
   <xsl:when test="string-length($SafeImageUrl) != 0">
      <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}"height="120" width="160"/>
      </xsl:when>
      <xsl:otherwise>
      <img class="image" src="http://<server>/_layouts/images/VideoPreview.png" alt="{@ImageUrlAltText}"  height="120" width="160"/>
   </xsl:otherwise>
</xsl:choose>

ItemStyle.xsl への Description 要素の追加

link-item <div> タグ下のスタイルにマークアップを追加することによって、description 要素をスタイルに追加します。ItemStyle.xsl ファイルにある既定のスタイルの link-item <div> タグと description <div> タグは、ほぼ同じように動作します。description <div> は画面の狭いスペースに表示されるため、120 文字以降の文字列は削除されます。文字列を削除することにより、長い説明がインラインでレンダリングされるのを防ぎます。

<div class="description">
        <xsl:if test="string-length(@Description) &gt; 128">
           <xsl:value-of select="concat(substring(@Description,1,128),'…')" />
        </xsl:if>
        <xsl:if test="string-length(@Description) &lt; 128">
           <xsl:value-of select="@Description"/>
        </xsl:if>
     </div>

ItemStyle.xsl への評価の表示の追加

評価のカスタマイズをビデオ サイトに追加すると、評価の表示でビデオごとに評価を表示できるようになります。rating 要素を ItemStyle.xsl ファイルに追加することは、description スタイルを追加することと似ています。0 個から 5 個の星で評価を表示するには、値ごとにイメージ ファイル (合計 6 ファイル) をアップロードします。各ファイルには、異なる数の星が表示されます。イメージをアップロードしたら rating フィールドの値に基づいて適切なイメージを表示するロジックを追加します。このために、サイトの [スタイル ライブラリ] に新しいフォルダーを作成することをお勧めします。このコード例は、すべてのイメージが /Style Library/Rating CBQ Images という名前のフォルダーにアップロードされていること、ファイルに 0Stars.png、1Stars.png、2Stars.png などの名前が付けられていることを前提としています。異なる名前を使用する場合は、適宜マークアップを更新してください。URL の <server> をサーバー名と置き換えます。

<div> 
         <span id = "rating" style = "vertical-align:top">
<xsl:choose>
                    <xsl:when test = "@Rating &gt;= 5">
                    <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/5stars.png"></img>
                    </xsl:when>
                        <xsl:when test = "@Rating &gt;= 4">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/4stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 3">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/3stars.png"></img>
                        </xsl:when>
<xsl:when test = "@Rating &gt;= 2">
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/2stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 1">
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/1stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 0">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
                        </xsl:when>
                        <xsl:otherwise>
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
                        </xsl:otherwise>
                   </xsl:choose>
                </span>
            </div>

次の手順

「チュートリアル: チャンネル ページを作成してカスタマイズする」を完了します。

関連項目

概念

デジタル資産の管理

チュートリアル: ビデオ共有サイトの作成とカスタマイズ

[方法] スタイルをカスタマイズする

デジタル資産管理プログラミング モデル