カスタマイズのモダン化Modernize the customizations

サイトをモダン化する上では、そのサイトで使用されているカスタマイズを理解することが重要になります。これは、サイトをモダン化すると、既存のカスタマイズの一部が動作しないことがあるためです。An important aspect of a site modernization is understanding the customizations that are used on that site as not all existing customizations continue to work after the site modernization. よくある典型的な例は、企業情報の一部 (法的通知など) を表示するサイト バナーです。A classic example that occurs frequently is a site banner that shows some type of company information (such as a legal notice).

これは、一般的にユーザーのカスタム アクションによって JavaScript がページに埋め込まれ、その JavaScript によりバナーが表示されます。This typically is realized via user custom action that embeds JavaScript on the page which on it's turn is responsible for showing the banner. このバナーは従来のすべてのページで表示されますが、モダン ページでは表示されなくなります。This banner is visible on all classic pages, but will not be visible on modern pages. この問題は、SharePoint Framework アプリケーション カスタマイザー拡張機能としてバナーを実装してテナント/サイトに展開すると回避できます。To workaround this problem you can implement the banner as a SharePoint Framework Application customizer extension and deploy that one to the tenant/site.

この記事では、モダン ユーザー インターフェイスと互換性がないカスタマイズの概要と、その修正方法に関するガイドラインを取り扱います。In this article you'll get an overview of the customizations which are not compatible with the modern user interface and guidelines on how to remediate.

リストとライブラリのカスタマイズCustomizations in lists and libraries

このセクションでは、リストとライブラリに実装している可能性のあるカスタマイズを取り上げます。This chapter focusses on customizations that you might have implemented on your lists and libraries. SharePoint は互換性のないカスタマイズを検出すると、自動的に従来のリストとライブラリのユーザー インターフェイスに戻ります。SharePoint automatically falls back to the classic list and library user interface when it detects an incompatible customization. そのため 100% のモダン エクスペリエンスを得るには、これらのカスタマイズに対処することが重要です。Therefore, it's important to address these customizations if you want to get a 100% modern experience.

ユーザーが使用しているリストやライブラリのモダン ユーザー インターフェイスとの互換性について理解するには、「SharePoint の "モダン" ユーザー インターフェイス エクスペリエンス スキャナー」をご利用ください。To get an understanding of the modern user interface compatibility of your lists and libraries, use the SharePoint "Modern" user interface experience scanner.

SharePoint ユーザー インターフェイスでフィールドの表示方法を制御する一般的なモデルとして、JSLink を使用する方法があります。A very common model to control how a field is represented in the SharePoint user interface is using JSLink. 基本的には、JSLink を使用すると、JavaScript をプラグインして、その JavaScript がフィールドのレンダリングを処理することができます。Essentially JSLink allows you to plugin JavaScript that then takes over the rendering of the field. モダン ユーザー インターフェイスでも、リスト ビュー ページでは同様のカスタマイズ機能を使用できますが、リスト編集ウィンドウは現在のところカスタマイズできません。In the modern user interface similar customization capabilities are available for the list view pages, although customizing the list edit pane currently is not possible.

JSLink を置き換える場合、2 つの代替アプローチを検討できます。どちらが最適かは、既存のソリューションの複雑さによって異なります。If you're replacing JSLink then there's two alternative approaches that you can consider, which one works best depends on the complexity of the existing solution.

  • データの表示方法だけが問題ならば、多くの場合、列の書式設定を使用することが最適な選択となります。If it's merely about how to display the data then using column formatting often is the best choice, if more 'behavior' is needed then a SharePoint Framework Field Customizer extension probably is the best.
  • より多くの動作が必要な場合は、多くの場合、SharePoint Framework フィールド カスタマイザーの拡張機能を使用することが最適な選択となります。If more behavior is needed, using a SharePoint Framework Field Customizer extension is often the best choice.

列の書式設定を使用するUse column formatting to customize SharePoint

列の書式設定を使用して、SharePoint のリストやライブラリのフィールドの表示方法をカスタマイズできます。You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. それには、フィールドがリストビューに入ったときに表示する要素を記述し、加えて、要素に適用するスタイルを記述した JSON オブジェクトを作成します。To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. 列の書式設定は、リスト アイテムまたはファイルのデータを変更しません。リストを閲覧しているユーザーへの表示の方法が変わるだけです。The column formatting does not change the data in the list item or file; it only changes how it’s displayed to users who browse the list. リスト内でビューを作成および管理できるすべてのユーザーは、列の書式設定を使用してビューのフィールドの表示方法を設定できます。Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.

たとえば、タイトル取り組み割り当て状態というフィールドがあるリストは、カスタマイズされていない場合は次のように表示されます。For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:


列の書式設定の使用前


列の書式設定により、取り組み割り当て状態の各フィールドの外観をカスタマイズしたリストは、次のように表示されます。A list with the appearance of the Effort, Assigned To, and Status fields customized via column formatting might look like this:


列の書式設定の使用後


列の書式設定の詳細については下記を参照してください。To learn more about column formatting check out these resources:

SharePoint Framework フィールド カスタマイザー拡張機能を使用するUse SharePoint Framework Field Customizer extension

SharePoint Framework 拡張機能を使用すると、クライアント側開発用の使い慣れた SharePoint Framework のツールとライブラリを活用しながら、モダン ページとドキュメント ライブラリ内で SharePoint のユーザー エクスペリエンスを拡張できます。SharePoint Framework Extensions enable you to extend the SharePoint user experience within modern pages and document libraries, while using the familiar SharePoint Framework tools and libraries for client-side development. 具体的には、フィールド カスタマイザーを使用すると、リスト ビューやライブラリ ビューでのフィールド データの表示方法を完全に制御できます。Specifically Field Customizers allow you fully control how field data is presented in your list or library views.

パーセンテージの列の例は次のようになります。Following is an example of a percent column.

フィールド カスタマイザー

SharePoint Framework フィールド カスタマイザー拡張機能の詳細については、下記をご覧ください。To learn more about SharePoint Framework Field Customizer extensions, see:

カスタム メニュー オプションを追加または JavaScript を埋め込む、リスト ユーザー カスタム アクションList-scoped user custom actions that add custom menu options or embed JavaScript

カスタム メニュー オプションを追加したり JavaScript を埋め込んだりするリスト ユーザー カスタム アクションを使用する方法は、JSLink に次いで一般的なカスタマイズ パターンですが、モダン リストやライブラリ エクスペリエンスでは動作しません。Using a list user custom action that adds custom menu options or embeds JavaScript is next to JSLink a very common customization pattern which does not work anymore for the modern list and library experience. SharePoint Framework 拡張機能を使用すると同様のカスタマイズを実現できます。具体的には、コマンド セット拡張機能により、カスタム ECB メニュー項目やカスタム ボタンをリストやライブラリのコマンド バーに追加できます。Luckily using SharePoint Framework Extensions you can realize similar customizations, more in particular via command set extensions which allows you to add custom ECB menu items or custom buttons to the command bar of a list or library. あらゆる JavaScript (TypeScript) アクションをこれらのコマンドに関連付けることができます。You can associate any JavaScript (TypeScript) action to these commands.


リスト ビュー コマンド セット

SharePoint Framework リスト ビュー コマンド セット拡張機能の詳細については、下記をご覧ください。To learn more about SharePoint Framework ListView Command Set extensions, see:

ページのカスタマイズCustomizations used on pages

SharePoint には、Wiki ページ、Web パーツ ページ、発行ページといった、複数の従来のサイト ページが用意されています。SharePoint has multiple flavors of classic site pages, there's wiki pages, web part pages and publishing pages. これらのページはいずれも、Web パーツや (書式設定された) テキストを追加したり、ユーザー カスタム アクションで JavaScript を埋め込んだりして、ユーザーがページをカスタマイズできます。Each of these pages allow the user to customize them by adding web parts and (formatted) text to them or by embedding JavaScript via user custom actions. このセクションでは、既存のカスタマイズ モデルの概要と、これらをモダンの互換性のあるオプションに置き換える方法について説明します。This chapter will give an overview of the existing customization models and how these can be replaced by modern compatible options.

そのまま使用できる従来の Web パーツOut-of-the-box classic web parts

SharePoint には、(スクリプト エディターの Web パーツを含む) そのままで使用できる Web パーツが数多くあります。これらは従来のページでは動作しますが、モダン ページでは動作しません (つまり、モダン版にはそのまま使用できる同等のものはありません)。SharePoint has many out-of-the-box web parts (including the script editor web part) that work on classic pages but not on modern pages (that is, there's no out-of-the-box modern equivalent). 従来の Web パーツの一部では、同様の機能を提供するファースト パーティ製のクライアント側のモダン Web パーツのセットも利用できます。ただし、まったく同じ機能のものはありません。There's also a nice set of modern, 1st party, client side web parts available that offer similar functionality for some of the classic web parts...however, there's no feature parity.

従来の Web パーツの機能をモダン クライアント側の同等の機能として必要な場合、使用するバージョンを SharePoint Framework に基づいてロールするか、オープン ソース SharePoint Framework Web パーツの膨大なリストにある Web パーツを使用することが必要になります。このリストは、sp-dev-fx-webparts GitHub リポジトリにあります。If you need the functionality of a classic web part as a modern client side equivalent you'll need to either roll your own version based on the SharePoint Framework or alternatively consume a web part from the large list of open source SharePoint Framework web parts which you can find in the sp-dev-fx-webparts GitHub repository.

以下は、サンプル Web パーツを表示する図です。Following is a diagram showing a sample web part.

SPFX Web パーツのサンプル

SharePoint Framework のクライアント側 Web パーツの詳細については、下記をご覧ください。To learn more about SharePoint Framework client-side web parts, see:

JavaScript を埋め込むサイト スコープまたは Web スコープのユーザー カスタム アクションSite or Web scoped user custom actions that embed JavaScript

導入部分で説明したように、サイト バナーを追加する場合、サイト スコープか Web スコープのユーザー カスタム アクションで JavaScript を埋め込むのが一般的なパターンです。In the introduction we mentioned the common pattern of adding a site banner by embedding JavaScript via a site/web scoped user custom action. このパターンはモダン ユーザー インターフェイスと互換性がないため、SharePoint Framework アプリケーション カスタマイザー拡張機能に基づいて、この種類のカスタマイズを再度行う必要があります。As this pattern is not compatible with the modern user interface you'll need to rework this type of customization based upon the SharePoint Framework Application Customizer extensions. アプリケーション カスタマイザーを使用すると、ページの上部か下部にある定義済み拡張点で、HTML を埋め込むために使用できるカスタム スクリプトを SharePoint のモダン ユーザー インターフェイスに挿入できます。Using application customizers you can insert custom script that can be used to embed HTML into the SharePoint modern user interface at predefined extension points at the top/bottom of the page.


SPFX アプリケーション カスタマイザーのサンプル


SharePoint Framework アプリケーション カスタマイザー拡張機能の詳細については、下記をご覧ください。To learn more about SharePoint Framework Application Customizer extensions, see:

[サイトの操作] におけるカスタム メニュー項目Custom menu items in the site actions menu

現在、モダン ページの [サイトの操作] メニュー (歯車アイコン) に独自のカスタム メニュー項目を追加することはできません。Currently it's not possible to add your own custom menu items to the site actions menu (the gear icon) on modern pages. 代替策としては、必要なリンクをサイトのナビゲーションに追加する方法と、必要なリンクをサイトのホーム ページに追加する方法があります。Alternative strategies you can follow are adding the needed links into the site's navigation or by adding the needed links on the site's home page.

関連項目See also