SharePoint のサーバー サイド・クライアント サイド レンダリングについて
こんにちは SharePoint サポートの森 健吾 (kenmori) です。今回の投稿では SharePoint Online、SharePoint Server 2013 以降の 2 つのレンダリング モードについてご説明します。
2 つのレンダリング モードについて
SharePoint Online と SharePoint Server 2013 以降のリストやライブラリのビューや各種フォームは、2 つのレンダリング モードがあります。リストの種類によって差はありますが、基本的にクライアント サイド レンダリングを既定とし、サーバー レンダリングも引き続きサポートしています。
SharePoint は、双方のレンダリング モードをサポートすることで、ページ設計の自由度を広げています。
1) サーバー レンダリング
サーバー レンダリングは XSL 変換などを使用し、HTML 表示データをサーバー側で生成して、ブラウザー側に応答する仕組みです。
SharePoint 2010 までのバージョンには、このレンダリング モードだけが存在していました。
(この仕組みでもリボンのハンドラーなど、AJAX を使用していますので AJAX があるか否かという部分とは区別する必要があります。)
新規、編集フォームの場合はフォームをポストバックし、サーバー側処理でデータを更新します。エラーが発生した場合は全画面に表示されます。
カスタマイズのポイント
このモードでは SharePoint Designer などを使用して、XSL をカスタマイズすることが可能です。
タイトル : SharePoint Designer によるページ カスタマイズを理解する
アドレス : https://blogs.technet.com/b/sharepoint_support/archive/2013/10/17/spd-sharepoint-designer.aspx
2) クライアント サイド レンダリング
クライアント サイド レンダリングは、JSON (JavaScript Object Notation) オブジェクトをブラウザーに返し、ブラウザー側でリンクされた JavaScript (JSLink) が表示側を整形する仕組みです。
サーバー側での XSL 変換等は負荷の高い作業になりますため、ページと表示データを JSON という少ないデータ量で応答し、データ部分の HTML を生成する描画処理をブラウザー側のスクリプト処理に委ねる設計となります。
新規、編集フォームの場合は JavaScript でデータ送信して、データを更新が成功した後でページを切り替えます。このため、エラー発生した際には、部分ページ描画でその旨が通知されるため、入力途中の情報を維持することができます。
カスタマイズのポイント
JSLink と呼ばれるカスタマイズ手法で描画内容をカスタマイズすることが可能となります。
タイトル : JSLink を使用してドキュメント ライブラリの列の表示をカスタマイズする (ビュー)
アドレス : https://blogs.technet.com/b/sharepoint_support/archive/2014/07/28/jslink-customize-document-library-view.aspx
タイトル : JSLink を使用してドキュメント ライブラリの列の表示をカスタマイズする (アイテム表示フォーム)
アドレス : https://blogs.technet.com/b/sharepoint_support/archive/2014/07/28/jslink-customize-document-library-display-item-form.aspx
サーバー レンダリングに意図的に切り替える方法
Web パーツの設定を変更することで、意図的にサーバー表示に変更することが可能となります。
ただし、すべてのリスト定義が両方のレンダリング モードに対応しているわけではありません。例えば、ディスカッション掲示板などではレンダリング モードを変更すると表示が崩れます。変更すべきか否かは事前にリストが複数のレンダリング モードに対応しているかどうかを確認した上でご検討ください。
ビューの場合
1. [*] – [ページの編集] をクリックします。
2. Web パーツ右上にカーソルを置き、[▼] – [Web パーツの編集] をクリックします。
3. "その他" を展開し、"サーバー表示" にチェックを入れます。
4. [OK] をクリックします。
5. [ページ] – [編集の終了] をクリックします。
フォームの場合 (NewForm, EditForm, DispForm)
1. [*] – [ページの編集] をクリックします。
2. Web パーツ右上にカーソルを置き、[▼] – [Web パーツの編集] をクリックします。
3. "その他" を展開し、"CSR 表示モード" にて "サーバー レンダリング (ServerRender)" を選択します。
4. [OK] をクリックします。
5. [ページ] – [編集の終了] をクリックします。
補足
サーバー レンダリングでは、古いバージョンの PeoplePicker を使うことができます。
クライアント サイド レンダリングを使用できる条件
クライアント サイド レンダリングを使用するには、いくつかの条件があります。条件に合致しない場合は、サーバー レンダリングで動作する形となります。下記に一部を紹介しますが、下記がすべてではありません。
・2013 モードにビジュアル アップグレードしている
ビジュアルアップグレードを使用せず、SharePoint Server 2010 モードでページを描画している場合は使用できません。
・XsltListViewWebPart で実装されたリスト ビュー
リスト ビューは、XsltListViewWebPartを使用する必要があります。
SharePoint Server 2007 で主流だった ListViewWebPart や SharePoint Designer でリストビューを XSLT 変換した際の DataFormWebPart では実現できません。
オンプレミス環境のアップグレードの際に、ListViewWebPart から XsltListViewWebPartに Web パーツが置き換わらなかった場合はクライアント サイド レンダリングが使用できない状況が発生します。この場合の対処策としては、ビューの再作成が確実です。
・特殊なビュー (予定表ビュー、ガント ビューなど) では使用できません。
上記と内部的には同じ要因ではありますが、予定表ビュー、ガント ビューなどは継続して ListViewWebPart として実現されているため、クライアント サイド レンダリングを使用できません。
・特殊なリスト (アンケートリスト) では使用できません。
上記と内部的には同じ要因ではありますが、アンケート リストは ListViewWebPartを使用しているため、クライアント サイド レンダリングを使用できません。
・ListFormWebPart で実装されたリスト フォーム
リスト フォームは、ListFormWebPart を使用する必要があります。
SharePoint Designer でフォームを生成した際に使用される DataFormWebPart はサーバー レンダリングとなります。
InfoPath でリスト フォームをカスタマイズした場合も、サーバー レンダリングとなります。
リスト ビューとフォームのハイブリッド レンダリングと注意点
リスト ビューとリスト フォームは、クライアント サイドレンダリングをサポートしていますが、描画するフォーム、フィールドなどは JSLink を実装していない下位バージョンのものが含まれることを想定しています。JSLink を実装していない場合、ブラウザー側のスクリプトで描画 HTML を生成することができません。
リスト ビューでは、このようなフィールドが存在したとしても、XSL と JavaScript を高度にハイブリッドさせて描画させることが可能となります。ただし、下記の様にその複雑さには限界はありますので十分注意ください。
例えば、Visual Studio を使用してカスタム フィールド定義を開発している場合、下記のような制限もあります。
タイトル : JSLink プロパティを override しないカスタム フィールド定義で作成した列でリスト ビューをグループ化するとデータが表示されない。
アドレス : https://support.microsoft.com/kb/2923678/ja
リスト フォームでは JSLink を実装していないフィールド定義が存在した場合、描画ではクライアント サイド レンダリングとのハイブリッドを維持しますが、更新処理がサーバー表示のようにページのフル ポストバックになります。
これまでの説明の通り、リスト フォームにおけるクライアント サイド レンダリングのメリットとして、データ更新時にサーバー側でエラーを検出した際において画面全体がポストバックされないため、入力内容が維持される点がありました。
ところが、リスト フォームでクライアント サイド レンダリングに対応していない列などのコンポーネントが 1 つでもあれば、非同期でサーバーにデータを送ることができなくなるため、フォーム全体がポスト バックされます。この点は、ユーザー エクスペリエンス上においても重要な点になり得ます。
なお、カスタム フィールド定義だけにはとどまりません。既定の機能においても、リストにコンテンツ タイプを複数関連づけた場合は、コンテンツ タイプ (内部的に集計列) を選択するセレクトボックスが表示されますが、これが表示されると無条件で全体のポストバックになります。
カスタマイズのポイント
SharePoint Server 2013 にアップグレードする際に、カスタム フィールド タイプ定義を開発している場合、クライアント サイド レンダリングへの親和性を上げるためには、JSLink プロパティを override したフィールド定義を開発することもご検討ください。
タイトル : [方法] クライアント側レンダリングを使用して、フィールド タイプをカスタマイズする
アドレス : https://msdn.microsoft.com/ja-jp/library/office/jj220061(v=office.15).aspx
今回の投稿は以上になります。