"モダン" チーム サイトのカスタマイズCustomizing "modern" team sites

2016 年に、SharePoint Online チームは、"モダン" コラボレーション サイトをリリースしました。In 2016, the SharePoint Online team released "modern" collaboration sites. これらの "モダン" チーム サイトは、Office 365 グループと統合され、大幅に向上したエンド ユーザー エクスペリエンスを実現しています。These "modern" team sites are integrated with Office 365 groups and bring a greatly improved end user experience. "モダン" チーム サイトは、高い応答性を確保するように設計され、エンド ユーザーの立場からの作成や使用が非常に高速化されています。"Modern" team sites are responsive by design and are much faster to create and use from an end user perspective. 以下に、"モダン" チーム サイトでの主な利点をいくつか示します。Following are some of the key benefits of the "modern" team sites:

  • 完全なレスポンシブ エクスペリエンスのため、カスタマイズなしであらゆるデバイスにネイティブでスケールできるように設計されている。Designed to scale for any device natively without customizations for a fully responsive experience.
  • ネイティブ ニュース、クイック リンク、およびアクティビティ機能がある。Contain native news, quick links, and activity capabilities.
  • Office 365 グループに統合。Integrated with Office 365 groups.
  • "クラシック" チーム サイトと比べてサイト作成が大幅に高速化。Significantly faster site creation compared to "classic" team sites.
  • Microsoft Flow と PowerApps をサポートする "モダン" リストとモダン ライブラリが含まれる。Include "modern" lists and libraries with support for Microsoft Flow and PowerApps.
  • "モダン" ページの編集機能がある。Contain "modern" page editing capabilities.
  • サイトの使用状況に関する追加の洞察が得られる、更新されたサイトのコンテンツ ページが含まれる。Include an updated site contents page with additional insights on site usage.

この記事では、"モダン" チーム サイト内で使用可能な機能拡張オプションについて説明します。This article concentrates on the available extensibility options within "modern" team sites:

重要

"クラシック" エクスペリエンスは廃止されていません。"クラシック" と "モダン" の両方が共存しています。We're not deprecating the "classic" experience; both "classic" and "modern" will coexist.

"モダン" チーム サイトでサポートされているカスタマイズSupported customizations on "modern" team sites

"モダン" サイトには、"クラシック" チーム サイトと比較して、さまざまなレベルのカスタマイズ オプションがあります。"Modern" sites have a different level of customization options compared to "classic" team sites. 機能拡張とブランド化に主に重点を置いた、追加のカスタマイズ オプションを徐々に導入していきます。Over time we'll introduce additional customization options, mainly focusing on extensibility and branding. 次の一覧は、"モダン" チーム サイトでサポートされている機能の簡単な概要を示しています。The following list gives a quick overview of the supported capabilities for "modern" team sites. 次の操作を実行できます。You can:

  • SharePoint Framework を使用し、クライアント側の Web パーツを提供したり、SharePoint Framework 拡張機能を持つその他のユーザー インターフェイスの要素を含めたりすることによって、サイトのユーザー エクスペリエンスを変更します。Use SharePoint Framework to modify user experience in the sites by providing client-side web parts or including other user interface elements with SharePoint Framework Extensions.
  • カスタム テーマの適用/ロゴの変更Apply a custom theme or change the logo.
  • すぐに使用できるテーマの適用Apply an out-of-the-box theme.
  • カスタムのサイト列 (フィールド) とコンテンツ タイプの作成Create custom site columns (fields) and content types.
  • リストとライブラリの作成Create lists and libraries.
  • 地域設定、言語、監査設定などのサイト構成の設定Configure site settings, such as regional settings, languages, and auditing settings.

注意

既定では、"モダン" チーム サイトのスクリプト機能は無効になっています。By default, a "modern" team site has scripting capabilities turned off. カスタム テーマを適用することもできますが、エンド ユーザー向けのオプションとして、カスタム テーマをテーマ ギャラリーに導入することはできません。You can still apply a custom theme, but you cannot introduce a custom theme to the theme gallery as an option for end users. テーマ ギャラリーにテーマを追加する場合は、サイト上でスクリプトを有効にする必要があります。If you want to add a theme to the theme gallery, you need to enable scripting on the site.

"モダン" チーム サイトでサポートされていないことWhat's not supported on "modern" team sites

"モダン" チーム サイトには、標準的なカスタマイズが現時点で利用できないエリアが多数あります。In numerous areas on the "modern" team sites, the typical customizations are not currently available. これらの特定のトピックの中には、リリース準備が整うと、サポートされるものがあります。Further support will be available for some of these topics when they are ready to be released. 以下は、"モダン" チーム サイトで現在サポートされていないカスタマイズの一覧です。Following is a list of currently unsupported customizations on "modern" team sites:

  • カスタム マスター ページ - 今後、代替オプションを使用して、ブランド化がより広範にサポートされる。Custom master pages; more extensive branding will be supported later using alternative options.
  • クラシック seattle.master または oslo.master を使用するように "モダン" サイトを変更。Changing "modern" site to use "classic" seattle.master or oslo.master.
  • カスタム ページ レイアウト - 今後、複数のキャンバスをサポート予定。Custom page layouts; we are looking to have support for multiple canvases in the future.
  • サイトまたはサイト コレクションを対象範囲とする発行機能の有効化。技術的には機能を現在アクティブ化できますが、この構成はサポートされていません。Enabling site or site collection scoped publishing features; technically, features can be currently activated, but this is not a supported configuration.
  • ユーザー カスタム アクション/カスタム JavaScript - SharePoint Framework 拡張機能 (現在は開発者向けプレビュー版) から JavaScript をページに埋め込む方法をより高度に制御できるようになる。User custom actions / custom JavaScript; there will be a more controlled way to embed JavaScript on the pages through the SharePoint Framework Extensions (currently in dev preview).
  • "モダン" サブサイト - "モダン" チーム サイトで作成されたサブサイトは "クラシック" エクスペリエンスを使用する。ユーザー エクスペリエンスは "モダン" サイトと同様のエクスペリエンスに変更できます。"Modern" subsites; subsites created on "modern" team sites use the "classic" experience, but you can change the user experience to be similar to "modern" sites.
  • 使用可能なサブサイトのテンプレート オプションを制御する機能。Ability to control available subsite template options.
  • "クラシック" 発行機能 (WCM)。"Classic" publishing features (WCM).
  • "モダン" チーム サイトでのコミュニティ機能のアクティブ化や、コミュニティ サブサイトの作成。Activation of community feature or creation of community subsites under "modern" team site.

"モダン" チーム サイトではスクリプト機能も無効になっている (いわゆる NoScript サイト) ため、カスタマイズできない他のエリアが数多くあります。Because "modern" team sites also have scripting capabilities disabled (it's a so called NoScript site), numerous areas cannot be customized. NoScript の影響は、"モダン" サイトでも "クラシック" サイトでも同様です。The impact of NoScript is the same for "modern" or "classic" sites. "モダン" サイトは、既定で NoScript が有効になっています。つまり、スクリプト機能は利用できません。"Modern" sites have NoScript enabled by default, meaning that scripting capabilities are not available. しかし、"モダン" サイトとクラシック サイトの両方で NoScript の設定を無効にして、いくつかの機能を有効にすることは可能であり、サポートされています。However, it is possible and supported to disable NoScript settings in both "modern" and "classic" sites to further enable some capabilities.

ソリューションの設計時には、NoScript 設定に関するこれらの主要分野を考慮してください。When you design your solutions, consider these key areas related to the NoScript setting:

  • サンドボックス ソリューションがサポートされていない。Sandbox solutions are not supported.
  • "クラシック" 機能拡張オプションを使用して (例: ユーザー カスタム アクション経由で)、サイトでカスタム JavaScript を有効にできない。Custom JavaScript cannot be enabled on the sites by using "classic" extensibility options (for example, via user custom actions).
  • SharePoint Designer を使用してサイトにアクセスできない。You cannot access sites using SharePoint Designer.
  • エンド ユーザーは一部の Web パーツを使用できない。Some web parts are not available for end users.
  • サイト プロパティ バッグ エントリをアクセスまたは更新する機能。Ability to access or update site property bag entries.

注意

影響を受ける機能の完全なリストは、Microsoft サポート記事「カスタム スクリプトを許可または禁止する」の「カスタム スクリプトがブロックされているときに影響を受ける機能」のセクションでご確認いただけます。You can find the full list of impacted capabilities from the Microsoft Support article Allow or prevent custom script under the "Features affected when custom script is blocked" section.

"モダン" チーム サイトでの PnP プロビジョニング エンジンの使用Using PnP provisioning engine with "modern" team sites

PnP プロビジョニング エンジンを "モダン" チーム サイトで使用できます。You can use the PnP provisioning engine with "modern" team sites. PnP プロビジョニング エンジンは、サイトが "モダン" チーム サイトであるかどうかを自動的に検出し、サポートされている機能に基づいて動作を調整します。The PnP provisioning engine automatically detects if a site is a "modern" team site and adjusts its behavior based on the supported capabilities. プロセスは、スクリプト機能が無効になっていない "クラシック" サイトで PnP プロビジョニング エンジンを使用する場合とまったく同じです。The process is exactly the same as using the PnP provisioning engine with "classic" sites where the scripting capabilities are not disabled.

リモート テンプレートが "モダン" チーム サイトまたは NoScript が有効になっているサイトに適用された場合、次の要素は無視されます。The following elements are ignored when a remote template is applied to a "modern" team site or a site that has NoScript enabled:

  • 監査設定でのサイト コレクション AuditLogTrimmingRetention の構成Site collection AuditLogTrimmingRetention configuration in the auditing settings
  • テンプレートからカスタム テーマを適用する - 現在の実装には、カスタム テーマをカタログに格納する依存関係があります。これはサポートされていませんApplying a custom theme from the template; current implementation has a dependency on storing a custom theme to the catalog, which is not supported
  • コンテンツ タイプのフォームの設定Form settings for content types
  • サイト、Web、リストのレベルへのカスタム ユーザー アクションの追加Adding custom user actions to site, web, or list level
  • ファイルの種類が ".asmx"、".ascx"、".aspx"、".htc"、".jar"、".master"、".swf"、".xap"、".xsf" のファイルの追加Adding files with file types of ".asmx", ".ascx", ".aspx", ".htc", ".jar", ".master", ".swf", ".xap", ".xsf"
  • 次の URL "_catalogs/theme""style library""_catalogs/lt""_catalogs/wp" を含むライブラリにファイルを追加するAdding files to libraries with the following urls "_catalogs/theme", "style library", "_catalogs/lt", "_catalogs/wp"
  • サイト ページへの Web パーツの追加Adding web parts to site pages
  • プロビジョニングされたサイトのプロパティ バッグへのプロビジョニング テンプレート情報の格納Storing provisioning template information to the property bag of the provisioned site
  • サイト プロパティ バッグへのプロパティ バッグ エントリの追加または更新Adding or updating property bag entries to the site property bag
  • "クラシック" の発行設定およびアセット"Classic" publishing settings and assets
  • サイトのクロールなしの設定Site No Crawl settings
  • サイトのマスター ページの設定Site master page settings

"モダン" チーム サイトへのカスタム テーマの適用Apply a custom theme to a "modern" team site

"モダン" チーム サイトでは、エンド ユーザー向けの新しいギャラリー エントリをアップロードできませんが、カスタム テーマはサポートされています。"Modern" team sites support custom themes even though you cannot upload a new gallery entry for end users. これを行うには、サイトに必要なアセットをアップロードして、ApplyTheme メソッドを実行します。This can be achieved by uploading the needed assets to the site and then executing the ApplyTheme method. 次の PowerShell スクリプトは、"モダン" チーム サイトに対してこれを実行する方法を示しています。The following PowerShell script shows how to perform this for a "modern" team site.


# Connect to a previously created Modern Site
$cred = Get-Credential
Connect-PnPOnline https://[tenant].sharepoint.com/sites/siteurl -Credentials $cred

# Apply a custom theme to a Modern Site

# First, upload the theme assets
Add-PnPFile -Path .\sppnp.spcolor -Folder SiteAssets
Add-PnPFile -Path .\sppnp-bg.png -Folder SiteAssets

# Second, apply the theme assets to the site
$web = Get-PnPWeb
$palette = $web.ServerRelativeUrl + "/SiteAssets/sppnp.spcolor"
$background = $web.ServerRelativeUrl + "/SiteAssets/sppnp-bg.png"

# We use OOTB CSOM operation for this
$web.ApplyTheme($palette, [NullString]::Value, $background, $true)
$web.Update()
# Set timeout as high as possible and execute
$web.Context.RequestTimeout = [System.Threading.Timeout]::Infinite
$web.Context.ExecuteQuery()


図 1. カスタム テーマを使用した "モダン" チーム サイトFigure 1. "Modern" team site with custom theme

カスタム テーマを使用した "モダン" チーム サイト

注意

  • SharePoint カラー パレット ツールを使用して、カスタム カラー定義でカスタム テーマ ファイル (.spcolor) を作成できます。You can use the SharePoint Color Palette Tool to create a custom theme file (.spcolor) with the custom color definition. 一般的な "モダン" チーム サイトでは、"クラシック" サイトのテーマ要素を自動的に "モダン" サイトに変換することにより、テーマの外観の保存を試みます。In general, "modern" team sites try to preserve the feel of the theme by automatically converting "classic" site theming elements to the "modern" side. 保存される領域は、背景画像と次のテーマ スロットです: ContentAccent1、PageBackground、BackgroundOverlay。Preserved areas are background image and the following theme slots: ContentAccent1, PageBackground, and BackgroundOverlay.
  • SharePoint PnP UpdateUnifiedGroup メソッドに示されている Groups Graph API を使用して、"モダン" チーム サイトのロゴを変更することができます。You can change the logo of "modern" team site by using the Groups Graph API as shown by the SharePoint PnP UpdateUnifiedGroup method.
  • "モダン" チーム サイトにカスタム テーマを適用すると、タイムアウトが発生する場合があります。Applying a custom theme to a "modern" team site can cause timeouts. これを解決するには、テーマを適用する前に、サイトで利用可能なユーザー インターフェイス言語をすべて無効にして、後で元に戻します。The resolution for this is to turn off all available user interface languages for the site before applying the theme, and turn them back on afterwards.

サイトが "モダン" チーム サイトであるかどうかを特定するDetermine if a site is a "modern" team site

サイトの 'Web.WebTemplate' 値を確認することで、サイトが "モダン" チーム サイトであることを検出できます。You can detect that a site is a "modern" team site by checking the 'Web.WebTemplate' value of the site. "モダン" チーム サイトは、"GROUP" テンプレートを使用します。"Modern" team sites use the "GROUP" template. スクリプトが無効になっている場合、サポートされる機能は "クラシック" チーム サイトの場合と同じなので、コードで両方の設定を確認し、適切な動作やサポートされている機能を判別する必要があります。Because the supported capabilities are the same for a "classic" team site when the scripting is disabled, you should be checking both settings in your code to determine the right behavior or supported capabilities.

スクリプトが有効かどうかを確認するための直接のプロパティはないので、アクセス許可を使用して現在の状態を特定できます。Because there's no direct property to check if the scripting is enabled or not, you can use permissions to determine the current status. スクリプトが有効になっている場合は、サイトの基本アクセス許可に AddAndCustomizePages アクセス許可はありません。When scripting is enabled, there's no AddAndCustomizePages permission in the base permissions of the site.

/// <summary>
/// Can be used to check if site has noscript enabled.
/// </summary>
/// <param name="web">site object to inspect</param>
/// <returns>True if no scripting is enabled, False if it's not</returns>
public static bool IsNoScriptSite(Web web)
{
    // Ensure that we have the needed properties - Notice that these are 
    // PnP CSOM extension capabilities
    web.EnsureProperties(w => w.WebTemplate, w => w.EffectiveBasePermissions);

    // Definition of no-script is not having the AddAndCustomizePages permission
    if (!web.EffectiveBasePermissions.Has(PermissionKind.AddAndCustomizePages))
    {
        return true;
    }

    // It's a site without noscript enabled
    return false;
}

その他の考慮事項Additional considerations

その他の SharePoint Framework 機能のリリースと一致する ”モダン” チーム サイトのその他のカスタマイズ オプションについては、段階的に紹介します。We'll gradually introduce more customization options for "modern" team sites that will be aligned with the release of additional SharePoint Framework capabilities. 現在、正確なスケジュールをお知らせすることはできませんが、新しい機能がリリースされた場合は、"モダン" エクスペリエンスに関する記事を随時更新する予定です。Currently there is no exact schedule available, but we'll update the "modern" experience articles whenever new capabilities are released.

関連項目See also