カスタマイズのモダン化
重要
モダン化ツールと他のすべての PnP コンポーネントは、それらをサポートしてくれるアクティブなコミュニティによって支援されているオープン ソース ツールです。 公式の Microsoft サポート チャネルのオープン ソース ツールのサポート用の SLA ではありません。
サイトをモダン化する上では、そのサイトで使用されているカスタマイズを理解することが重要になります。これは、サイトをモダン化すると、既存のカスタマイズの一部が動作しないことがあるためです。 よくある典型的な例は、企業情報の一部 (法的通知など) を表示するサイト バナーです。
これは、一般的にユーザーのカスタム アクションによって JavaScript がページに埋め込まれ、その JavaScript によりバナーが表示されます。 このバナーは従来のすべてのページで表示されますが、モダン ページでは表示されなくなります。 この問題は、SharePoint Framework アプリケーション カスタマイザー拡張機能としてバナーを実装してテナント/サイトに展開すると回避できます。
この記事では、モダン ユーザー インターフェイスと互換性がないカスタマイズの概要と、その修正方法に関するガイドラインを取り扱います。
リストとライブラリのカスタマイズ
このセクションでは、リストとライブラリに実装している可能性のあるカスタマイズを取り上げます。 SharePoint は互換性のないカスタマイズを検出すると、自動的に従来のリストとライブラリのユーザー インターフェイスに戻ります。 そのため 100% のモダン エクスペリエンスを得るには、これらのカスタマイズに対処することが重要です。
使用中のリストやライブラリとモダン ユーザー インターフェイスとの互換性について理解するには、「SharePoint Modernization スキャナー」をご利用ください。
JSLink
SharePoint ユーザー インターフェイスでフィールドの表示方法を制御する一般的なモデルとして、JSLink を使用する方法があります。 基本的には、JSLink を使用すると、JavaScript をプラグインして、その JavaScript がフィールドのレンダリングを処理することができます。 モダン ユーザー インターフェイスでも、リスト ビュー ページでは同様のカスタマイズ機能を使用できますが、リスト編集ウィンドウは現在のところカスタマイズできません。
JSLink を置き換える場合、2 つの代替アプローチを検討できます。どちらが最適かは、既存のソリューションの複雑さによって異なります。
- データの表示方法だけが問題ならば、多くの場合、列の書式設定を使用することが最適な選択となります。
- より多くの動作が必要な場合は、多くの場合、SharePoint Framework フィールド カスタマイザーの拡張機能を使用することが最適な選択となります。
列の書式設定を使用する
列の書式設定を使用して、SharePoint のリストやライブラリのフィールドの表示方法をカスタマイズできます。 それには、フィールドがリストビューに入ったときに表示する要素を記述し、加えて、要素に適用するスタイルを記述した JSON オブジェクトを作成します。 列の書式設定は、リスト アイテムまたはファイルのデータを変更しません。リストを閲覧しているユーザーへの表示の方法が変わるだけです。 リスト内でビューを作成および管理できるすべてのユーザーは、列の書式設定を使用してビューのフィールドの表示方法を設定できます。
たとえば、タイトル、取り組み、割り当て、状態というフィールドがあるリストは、カスタマイズされていない場合は次のように表示されます。
列の書式設定により、取り組み、任命先、状態の各フィールドの外観をカスタマイズしたリストは、次のように表示されます。
列の書式設定の詳細については下記を参照してください。
SharePoint Framework フィールド カスタマイザー拡張機能を使用する
SharePoint Framework 拡張機能を使用すると、開発用の使い慣れた SharePoint Framework のツールとライブラリを活用しながら、モダン ページとドキュメント ライブラリ内で SharePoint のユーザー エクスペリエンスを拡張できます。 具体的には、フィールド カスタマイザーを使用すると、リスト ビューやライブラリ ビューでのフィールド データの表示方法を完全に制御できます。
パーセンテージの列の例は次のようになります。
SharePoint Framework フィールド カスタマイザー拡張機能の詳細については、下記をご覧ください。
- 最初のフィールド カスタマイザーの拡張機能を作成する
- JSLink カスタマイズを SharePoint Framework フィールド カスタマイザーに移行する
- JSLink から SharePoint Framework 拡張機能への移行のチュートリアル
カスタム メニュー オプションを追加または JavaScript を埋め込む、リスト ユーザー カスタム アクション
カスタム メニュー オプションを追加したり JavaScript を埋め込んだりするリスト ユーザー カスタム アクションを使用する方法は、JSLink に次いで一般的なカスタマイズ パターンですが、モダン リストやライブラリ エクスペリエンスでは動作しません。 SharePoint Framework 拡張機能を使用すると同様のカスタマイズを実現できます。具体的には、コマンド セット拡張機能により、カスタム ECB メニュー項目やカスタム ボタンをリストやライブラリのコマンド バーに追加できます。 あらゆる JavaScript (TypeScript) アクションをこれらのコマンドに関連付けることができます。
SharePoint Framework リスト ビュー コマンド セット拡張機能の詳細については、下記をご覧ください。
- 最初の ListView Command Set 拡張機能を作成する
- ユーザー カスタム アクションおよび ECB メニュー項目の SharePoint Framework 拡張機能への移行
- ECB メニュー項目から SharePoint Framework 拡張機能への移行
- UserCustomAction から SharePoint Framework 拡張機能への移行のチュートリアル
ページのカスタマイズ
SharePoint には、Wiki ページ、Web パーツ ページ、発行ページといった、複数の従来のサイト ページが用意されています。 これらのページはいずれも、Web パーツや (書式設定された) テキストを追加したり、ユーザー カスタム アクションで JavaScript を埋め込んだりして、ユーザーがページをカスタマイズできます。 このセクションでは、既存のカスタマイズ モデルの概要と、これらをモダンの互換性のあるオプションに置き換える方法について説明します。
そのまま使用できる従来の Web パーツ
SharePoint には、(スクリプト エディターの Web パーツを含む) そのままで使用できる Web パーツが数多くあります。これらは従来のページでは動作しますが、モダン ページでは動作しません (つまり、モダン版にはそのまま使用できる同等のものはありません)。 従来の Web パーツの一部では、同様の機能を提供する最新のファースト パーティ製の最新の Web パーツのセットも利用できます。ただし、まったく同じ機能のものはありません。
従来の Web パーツの機能を最新の同等の機能として必要な場合、使用するバージョンを SharePoint Framework に基づいてロールするか、オープン ソース SharePoint Framework Web パーツの膨大なリストにある Web パーツを使用することが必要になります。このリストは、sp-dev-fx-webparts GitHub リポジトリにあります。
以下は、サンプル Web パーツを表示する図です。
SharePoint Framework の Web パーツの詳細については、下記をご覧ください。
- SharePoint Web パーツの概要
- 既存するスクリプト エディター Web パーツのカスタマイズ内容を SharePoint Frameworkに移行する
- SharePoint Framework の Web パーツのサンプルおよびチュートリアル教材
JavaScript を埋め込むサイト スコープまたは Web スコープのユーザー カスタム アクション
導入部分で説明したように、サイト バナーを追加する場合、サイト スコープか Web スコープのユーザー カスタム アクションで JavaScript を埋め込むのが一般的なパターンです。 このパターンはモダン ユーザー インターフェイスと互換性がないため、SharePoint Framework アプリケーション カスタマイザー拡張機能に基づいて、この種類のカスタマイズを再度行う必要があります。 アプリケーション カスタマイザーを使用すると、ページの上部か下部にある定義済み拡張点で、HTML を埋め込むために使用できるカスタム スクリプトを SharePoint のモダン ユーザー インターフェイスに挿入できます。
SharePoint Framework アプリケーション カスタマイザー拡張機能の詳細については、下記をご覧ください。
- SharePoint Framework の最初の拡張機能を作成する
- ユーザー カスタム アクションおよび ECB メニュー項目の SharePoint Framework 拡張機能への移行
- UserCustomAction から SharePoint Framework 拡張機能への移行のチュートリアル
[サイトの操作] におけるカスタム メニュー項目
現在、モダン ページの [サイトの操作] メニュー (歯車アイコン) に独自のカスタム メニュー項目を追加することはできません。 代替策としては、必要なリンクをサイトのナビゲーションに追加する方法と、必要なリンクをサイトのホーム ページに追加する方法があります。