MDS の SharePoint コンポーネントを変更する

SharePoint プロジェクトのコンポーネントを変更し、SharePoint でダウンロード最小化戦略 (MDS) を活用する方法を説明します。 ダウンロード最小化戦略 (MDS) は、ブラウザーで適切に表示するために必要なページの一部のみをサーバーから返すことでユーザー エクスペリエンスを向上させます。 完全にレンダリングされたページはクライアントに返されないため、サーバーはページのレンダリングに必要な部分を正確に識別できる必要があります。 SHAREPoint プロジェクト内のコンポーネントが MDS 準拠として識別され、MDS エンジンと連携できるように変更する必要がある場合があります。 MDS の詳細については、「 最小ダウンロード戦略の概要」を参照してください。

SharePoint コンポーネントを変更する理由

「最小ダウンロード戦略の概要」で説明されているように、SharePoint コントロールは、MDS を最大限に活用するように変更するかどうかに関係なく機能します。 ただし、コンポーネントが MDS に準拠していない場合、MDS エンジンはフェールオーバーを発行します。 フェイルオーバーでは、新しいページの完全版にブラウザーをリダイレクトするために MDS エンジンが余分なラウンド トリップを必要とするので、時間がかかります。 ユーザー エクスペリエンスは、MDS で動作するようにコンポーネントを変更し、ユーザーが SharePoint で新しいページを閲覧するたびにフェイルオーバーが発生しないようにした場合に最適化されます。 通常、マスター ページ、ASP.NET ページ、コントロール、Web パーツを変更する必要があります。

マスター ページ

マスター ページでは、閲覧者が新しいページに移動するときに更新する必要がある可能性があるコンテンツ領域を MDS が特定できるようにするテンプレートを提供します。 マスター ページは更新されたコンテンツを必要とするセクションを識別するため、マスター ページの最適化はパフォーマンスを最適化する際に実行する最も重要な手順の 1 つです。 SharePoint に含まれる Seattle.master ページは、最適化されたマスター ページの良い例です。 図 1 は、(1) メイン コンテンツ領域、(2) 左ナビゲーション バー、(3) ページ タイトルなど、ページごとに変化する Seattle.master マスター ページのコンポーネントの例を示しています。

図 1。マスター ページで更新が必要なコンポーネント

マスター ページのコンポーネントを最適化するためにはさまざまなパターンがあります。 次のコンポーネントに対してパターンを使用できます。

• HTML 領域およびコントロール
• スタイル シート
• JavaScript ファイル
• ページ タイトル

HTML リージョンとコントロールは、 <SharePoint:AjaxDelta> タグでラップされている場合、MDS と互換性があります。 コンテンツを <SharePoint:AjaxDelta> タグにラップすることで、MDS エンジンが囲まれたコントロールと HTML を更新する必要があることを通知します。 コントロールまたは HTML セクションがページ間で変更されない場合は、クライアントに送信しないでください。 したがって、これらのコントロールは、 <AjaxDelta> タグの外部に保持する必要があります。 図 1 に示す Seattle.master マスター ページでは、(1) メイン コンテンツ領域が <AjaxDelta> タグでラップされています。これは、次に示すようにです。

<SharePoint:AjaxDelta
      id="DeltaPlaceHolderMain"
      BlockElement="true"
      IsMainContent="true"
      runat="server">
  <a id="mainContent" name="mainContent" tabindex="-1"></a>
  <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
</SharePoint:AjaxDelta>

<AjaxDelta> パターンのもう 1 つの例は、図 1 の (2) 左側のナビゲーション バーです。 次のコードは、コントロールが他の多くのコントロールや HTML と共に <AjaxDelta> タグでラップされる方法を示しています。

<SharePoint:AjaxDelta
      id="DeltaPlaceHolderLeftNavBar"
      BlockElement="true"
      CssClass="ms-core-navigation"
      role="navigation"
      runat="server">
  <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
    <a id="startNavigation" name="startNavigation" tabIndex="-1"></a>
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server" />
    <!-- There are more controls and HTML in this placeholder in the Seattle master page -->
  </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

<AjaxDelta>タグについて最後に覚えておく必要があるのは、タグを入れ子にできないことです。 <AjaxDelta>タグは、マスター ページ構造で最も高い必須レベルで指定する必要があります。

図 1 の最後の例は (3) ページ タイトルで、 <SharePoint:PageTitle> タグを使用する特別なパターンが必要です。 次のコードは、Seattle.master マスター ページで使用される <PageTitle> タグを示しています。

<SharePoint:PageTitle runat="server">
  <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
    <SharePoint:ProjectProperty Property="Title" runat="server" />
  </asp:ContentPlaceHolder>
</SharePoint:PageTitle>

また、マスター ページにはスタイルシートと JavaScript ファイルが含まれることもあります。 サーバー エンジンは必要に応じて CSS ファイルと JavaScript ファイルの両方を識別する必要があります。 必要に応じて CSS ファイル リソースを識別するには、次のパターンを使用します。

<SharePoint:CssLink runat="server" Version="15"/>
<SharePoint:CssRegistration Name="my_styles.css" runat="server" />

マスター ページごとに 1 つの <CssLink> タグのみを持つことができますが、多数の <CssRegistration> タグを持つことができるため、多数の CSS ファイルを追加できます。 JavaScript ファイルの場合は次のパターンを使用します。

<SharePoint:ScriptLink language="javascript" name="my_javascript.js" runat="server" />

HTML <style> と <script> タグを使用した CSS ファイルと JavaScript ファイルを含めることは、MDS ではサポートされていません。

ASP.NET ページ

プロジェクトに ASP.NET ページが含まれる場合は通常、CSS ファイルと JavaScript ファイルを参照する必要があります。 HTML <style> タグと <script> タグは MDS と互換性がありません。 代わりに、前のセクションで説明した <CssRegistration> パターンと <ScriptLink> パターンを使用します。

ASP.NET ページでは、 Response.Output メソッドを使用してページにコンテンツを書き込むこともできます。MDS では許可されていません。 代わりに、次に示す SPHttpUtility クラスの MDS に対応したメソッドを使用することができます。

• WriteNoEncode()
• WriteHtmlEncode()
• WriteEcmaScriptStringLiteralEncode()
• WriteHtmlEncodeAllowSimpleTextFormatting()
• WriteHtmlUrlAttributeEncode()
• WriteUrlKeyValueEncode()
• WriteUrlPathEncode()

JavaScript ファイルを参照するだけでなく、ASP.NET ページにインライン JavaScript コードを使用することもできます。 スクリプト ブロックを MDS 対応にするには次のパターンを使用します。

<SharePoint:ScriptBlock runat="server" >
  // Your JavaScript code here.
</SharePoint:ScriptBlock>

コントロールと Web パーツ

また、コントロールと Web パーツを MDS 準拠としてマークする必要もあります。 次のコードは、使用するパターンを示しています。

[assembly: Microsoft.SharePoint.WebControls.MdsCompliantAttribute(IsCompliant = true)]
namespace VisualWebPartProject2.VisualWebPart1
{
  // Rest of your control logic

また、コントロールと Web パーツは 、SPPageContentManager クラスのメソッドを使用してリソースを登録する必要があります。 最も一般的なリソースは JavaScript スニペットと隠しファイルで、それぞれ <RegisterClientScriptBlock> と <RegisterHiddenField>を使用して登録できます。

コントロールと Web パーツでは、XSLT ファイルを使用してレンダリング プロセスを制御することもできます。 XSLT ファイルには埋め込みの JavaScript コードまたはファイルがあることがあります。 MDS エンジンはこれらのリソースを認識する必要があります。 javaScript リソースは、 pcm という名前の XSLT 拡張オブジェクトを使用して登録できます。 pcm オブジェクトの使用方法の優れた例は、%ProgramFiles%\Common Files\Microsoft Shared\web サーバー拡張機能\15\TEMPLATE\LAYOUTS\XSL\fldtypes.xsl ファイルにあります。 次のコードは、 fldtypes.xsl ファイルが pcm オブジェクトを使用して JavaScript リソースを登録する方法を示しています。

<xsl:value-of select="pcm:RegisterScriptBlock(concat('block1',$ViewCounter), string($scriptbody1))"/>
<xsl:value-of select="pcm:RegisterScriptLink('/_layouts/15/wssactionmenu.js')"/>

関連項目

• ダウンロード最小化戦略の概要
• SharePoint サイトの構築