ダウンロード最小化戦略の概要Minimal Download Strategy overview

SharePoint の新機能であるダウンロード最小化戦略 (MDS) について説明します。MDS では、ユーザーが新しいページに移動したときに、差異のみを送信することでページのロード時間を短縮します。 ダウンロード最小化戦略 (MDS) は SharePoint の新しいテクノロジーで、ユーザーが SharePoint サイト内のあるページから別のページに移動したときにブラウザーがダウンロードする必要のあるデータの量を削減します。MDS が有効化されているサイトをユーザーが閲覧すると、クライアントによって現在のページと要求されたページの差異 (差分) のみが処理されます。図 1 には、ページによって変更されるため、更新が必要なセクションを示しています。通常、差分には (1) のコンテンツ領域と、(2) のナビゲーション コントロールなど、その他のコンポーネントが含まれます。Learn about Minimal Download Strategy (MDS), a new feature in SharePoint that reduces page load time by sending only the differences when users navigate to a new page. Minimal Download Strategy (MDS) is a new technology in SharePoint that reduces the amount of data that the browser has to download when users navigate from one page to another in a SharePoint site. When users browse an MDS-enabled site, the client processes only the differences (or delta) between the current page and the requested page. Figure 1 shows the sections that change from page to page and therefore require an update. The delta usually includes the data in the (1) content areas, as well as other components such as (2) navigation controls.

図 1. MDS で処理されるページFigure 1. Page processed with MDS

MDS で処理されるページ

MDS が有効化されているサイトを識別するには、URL を確認します。MDS が有効化されているサイトの場合は、図 1 に示すように、URL に (3) の _layouts/15/start.aspx ページが含まれ、その後にハッシュ記号 (#) と要求されたリソースの相対 URL が続きます。たとえば、newpage.aspx ページの MDS 用にフォーマットされた URL は、https://sp_site/_layouts/15/start.aspx#/SitePages/newpage.aspx となります。これは、以下の MDS 用にフォーマットされていない URL https://sp_site/SitePages/newpage.aspx と同等です。開発者が作成した SharePoint コンポーネントには、MDS とシームレスに対応するためにいくつかの更新が必要になる場合があります。You can identify a site that has MDS enabled by looking at the URL. An MDS-enabled site has the (3) _layouts/15/start.aspx page in the URL followed by a hash mark ( ) and the relative URL of the requested resource, as shown in Figure 1. For example, the following is the MDS-formatted URL for the page newpage.aspx: https://sp_site/_layouts/15/start.aspx#/SitePages/newpage.aspxIt is equivalent to the following non-MDS-formatted URL: https://sp_site/SitePages/newpage.aspxAs a developer, you might have created SharePoint components that need some updates before they can work seamlessly with MDS.

MDS の有効化Enable MDS

サイトで MDS を有効にするには、サイト管理ページまたは SharePoint クライアント オブジェクト モデルを使用します。You can enable MDS in your site by using either the site administration pages or the SharePoint client object models.

管理ページの機能をアクティブ化して MDS を有効にするには、[サイトの設定] > [サイト機能の管理] を選択し、[ダウンロード最小化戦略] 機能をアクティブ化します。To enable MDS by activating the feature in the administration pages, choose Site settings > Manage site features, and activate the Minimal Download Strategy feature.

この機能は EnableMinimalDownload プロパティを編集してアクティブ化するため、クライアント API を使用することもできます。以下のコードは、JavaScript オブジェクト モデル (JSOM) を使用して MDS を有効にする方法を示します。Because the feature is activated by modifying the EnableMinimalDownload property, you can also use the client APIs. The following code shows how to enable MDS using the JavaScript object model (JSOM).


var clientContext;

clientContext = new SP.ClientContext.get_current();
this.oWebsite = clientContext.get_web();

this.oWebsite.set_enableMinimalDownload(true);
this.oWebsite.update();

clientContext.load(this.oWebsite);

clientContext.executeQueryAsync(
    Function.createDelegate(this, successHandler),
    Function.createDelegate(this, errorHandler)
);

function successHandler() {
    alert("MDS is enabled in this site.");
}

function errorHandler() {
    alert("Request failed: " + arguments[1].get_message());
}

MDS を使用するメリットBenefits of using MDS

MDS を使用することで、以下のような複数のメリットを得ることができます。Using MDS provides several benefits, including:

  • 速度: MDS の主要な目的は速度です。MDS を使用する場合、ブラウザーによってクロム ユーザー インターフェイス (UI) を再処理する必要がありません。また、完全なページのロードと比べて、MDS ではペイロードが削減されます。Speed: This is the main objective of MDS. When you are using MDS, the browser doesn't have to reprocess the chrome user interface (UI). MDS also reduces the payload compared to a full page load.

  • スムーズな切り替え: 変更された領域のみを更新することで、完全なページのロードのようにページ全体が 「フラッシュ」 するのではなく、ユーザーの目を変更された領域に引き付けることができます。ページ全体が更新される場合、ユーザーは全体を解析して新しくなった部分を検出する必要があります。前のページから変更された領域のみを更新するサイトの方が、ユーザーにとって移動が簡単になります。Smooth transitions: By updating only the areas that change, you draw the user's eye toward these areas, as opposed to a full page load where the whole page "flashes." When the whole page is updated, the user must parse it in its entirety to detect what is new. Users have an easier time navigating a site that only updates the areas that changed from the previous page.

  • ブラウザーのナビゲーション コントロール: 他の AJAX ベースのシステムでは、ブラウザーの [ 前へ] ボタンと [ 次へ] ボタンとを混同しています。MDS ではブラウザー ウィンドウの URL が更新されるため、[前へ] ボタンと [次へ] ボタンが想定したとおりに動作します。Browser navigation controls: Other AJAX-based systems confuse the previous and next buttons in browsers. Because MDS updates the URL in the browser window, the previous and next buttons work just as they are supposed to.

  • 下位互換性: MDS エンジンでは、MDS ナビゲーションを即座に提供するか、不可能な場合はそれを検出します。MDS ナビゲーションが不可能な場合、代わりに完全なページのロードが行われます。このプロセスは フェイルオーバー と呼ばれ、すべてのページが、MDS 準拠のコンポーネントを含むかどうかに関係なく、適切にレンダリングされるようにします。また、アンカー タグの href 属性では通常の MDS 用にフォーマットされていない URL を使用するため、MDS は検索エンジンとも適切に連動します。クライアントの MDS エンジンでは代わりに onclick イベントをキャプチャして、サーバーとの通信に使用します。Backward compatibility: The MDS engine either provides MDS navigation immediately or detects when it isn't possible. In the case where MDS navigation isn't possible, a full page load occurs instead. This process is called failover, and it ensures that all pages render properly regardless of whether they contain MDS-compliant components. MDS also works nicely with search engines because the href attribute of anchor tags uses the regular, non MDS-formatted URLs. Instead, the MDS engine in the client captures the onclick event and uses it to communicate with the server.

MDS のアーキテクチャMDS architecture

MDS の基本的な仕組みはごく単純です。MDS の主要なコンポーネントは 2 つのエンジンで、1 つはサーバー内に、もう 1 つはクライアント内に存在します。この 2 つのエンジンが連動して、ユーザーがサイト内のページ間を移動したときに、変更点を計算し、ブラウザーのページをレンダリングします。図 2 に、ユーザーが MDS が有効化されているサイトを移動するときの MDS フローを示します。The basic mechanics of MDS are pretty simple. The main components of MDS are two engines, one in the server and another in the client, that work together to calculate the changes and render the pages in the browser when the user navigates from page to page in the site. Figure 2 shows the MDS flow when a user navigates through an MDS-enabled site.

図 2. ユーザーがサイト内を移動するときの MDS フローFigure 2. MDS flow when a user navigates the site

ユーザーがサイト内を移動するときの MDS フロー

  1. ブラウザーが SharePoint サイト内の現在のページと新しいページの変更点を要求します。The browser requests the changes between the current page and a new one in the SharePoint site.

  2. サーバー内の MDS エンジンが現在のページと新しいページの差分を計算します。The MDS engine in the server calculates the delta between the current and the new pages.

  3. サーバー内の MDS エンジンが差分をクライアント内の MDS エンジンに送信します。The MDS engine in the server sends the delta to the MDS engine in the client.

  4. クライアント内の MDS エンジンが現在のページから変更された領域を新しいページのコンテンツに置き換えます。The MDS engine in the client replaces the changed areas on the current page with the new page content.

結果として表示されるページは、MDS を使用しないでページをダウンロードした場合と全く同じになります。The resulting page is exactly as it would have been if the page had been downloaded without MDS.

クライアント内の MDS エンジンには、ダウンロード マネージャーが含まれます。ページ内のすべての要求はダウンロード マネージャー経由でルーティングされます。ページ内のすべてのコントロールは、URL が変更されたタイミングを知るためにダウンロード マネージャーにサブスクライブする必要があります。ダウンロード マネージャーでは、すべての新しいコントロール データに対して 1 つの要求が実行されます。検索エンジンと連動できるように、MDS エンジンでは、MDS 用にフォーマットされた URL を格納するためにアンカー タグの href 属性を直接使用するのではなく、 SPUpdatePage 関数で onclick イベントを処理して、サーバーとの通信に使用します。 SPUpdatePage 関数は _layouts/15/start.js ファイル内で宣言されています。The MDS engine in the client includes a download manager. All requests in the page are routed through the download manager. All controls in the page must subscribe to the download manager to learn when a URL has changed. The download manager makes one request for all the new control data. To be able to work with search engines, the MDS engine doesn't directly use the href attribute of anchor tags to store MDS-formatted URLs. Instead, the SPUpdatePage function handles the onclick event and uses it to communicate with the server. The SPUpdatePage function is declared in the _layouts/15/start.js file.

サーバー内の MDS エンジンによって、クライアントに情報が返送されます。この情報には、埋め込みスクリプトおよびスタイルを含む HTML、XML または JavaScript Object Notation (JSON) を含めることができます。The MDS engine in the server sends the information back to the client. This information can contain HTML with embedded scripts and styles, XML, or JavaScript Object Notation (JSON).

MDS では URL が重要な役割を果たします。MDS の URL は、https://sp_site/_layouts/15/start.aspx#/SitePages/newpage.aspx のような形式です。Start.aspx には、ページの変更点をロードするための最小限の共有 UI と指示が含まれます。MDS では、ハッシュ記号 (#) の後続の部分がターゲット ページであると認識します。ターゲット ページはスラッシュ (/) から始まり、その後に SharePoint Web サイトに相対する URL が続きます。ブラウザーで URL を受信すると、ハッシュ記号の左側の部分が変更されていないことが確認され、ローカル ナビゲーション イベントが発生します。クライアント内の MDS エンジンによってローカル ナビゲーション イベントがキャプチャされ、MDS の更新の実行に使用されます。The URL plays an important role in MDS. An MDS URL looks like the following: https://sp_site/_layouts/15/start.aspx#/SitePages/newpage.aspx. Start.aspx contains minimal shared UI and instructions for loading page changes. MDS considers the part following the hash mark (#) as the target page. The target page starts with a slash (/) followed by a URL relative to the SharePoint website. When the browser receives the URL, it sees that the part to the left of the hash mark hasn't changed, so it fires a local navigation event. The MDS engine in the client captures the local navigation event and uses it to perform an MDS update.

この記事で前述したように、場合によっては、ページを適切に更新できるかどうかを判断できないことがあります。こういった場合には、MDS エンジンによって フェイルオーバー が発行されます。フェイルオーバーでは、余分なラウンド トリップを実行し、新しいページの完全なバージョンにブラウザーをリダイレクトします。以下に、フェイルオーバーが発生する理由として最も一般的な要因を示します。As mentioned previously in this article, in some situations it's not possible to determine whether the page can be updated properly. In these situations, the MDS engine issues a failover, which consists of an extra round trip to redirect the browser to the full version of the new page. These are the most common reasons why failover occurs:

  • 新しいページのマスター ページが異なる。The new page has a different master page.

  • 現在のマスター ページが変更された。The current master page has changed.

  • MDS エンジンによって、以下のような非準拠の HTML が検出された。The MDS engine detects non-compliant HTML, for example:

    • ASP.NET 2.0 を使用するページPages using ASP.NET 2.0

    • MDS エンジンに登録されていない CSS またはスクリプトCSS or scripts not registered in the MDS engine

    • 無効な HTMLIllegal HTML

  • ページ内に以下のような非準拠のコントロールが含まれる。There are non-compliant controls on the page, for example:

    • MDS エンジンのホワイトリストにコントロールが存在しない。The control is not in the MDS engine whitelist.

    • コントロール アセンブリが準拠であるとマークされていない。The control assembly is not marked as compliant.

    • コントロール クラスに MDS 属性が存在しない。The control class doesn't have the MDS attribute.

ユーザーがさらに別の新しいページに移動すると、MDS エンジンでフェイルオーバーからの復旧が試行されます。The MDS engine tries to recover from a failover after the user navigates to yet another new page.

開発者のコントロールDeveloper controls

フェイルオーバーのメカニズムがあるおかげで、ユーザーの Web サイトで MDS が有効化されているかどうかに関係なく、コントロールがシームレスに動作します。しかし、SharePoint コントロールおよびコンポーネントを更新して、MDS のメリットを最大限に活かすことをお奨めします。作成したページやコントロールが MDS に準拠している方が、ユーザー エクスペリエンスが向上します。以下のコンポーネントは、いずれも MDS 用に最適化するために適したオプションです。Thanks to the failover mechanism, your controls work seamlessly whether or not MDS is enabled in your users' websites. However, it is a good idea to update your SharePoint controls and components to take full advantage of MDS. Users get a better experience when your pages and controls are MDS compliant. The following components are good candidates to get optimized for MDS:

  • マスター ページMaster pages

  • ASP.NET ページASP.NET pages

  • コントロールと Web パーツControls and Web Parts

関連項目See also