全幅列で Web パーツを使用するUse web parts with the full-width column

モダン SharePoint ページは、ユーザーのページにある情報を整理することができるレイアウトをサポートしています。Modern SharePoint pages support layouts that allow users to organize the information they present on their pages. ユーザーは2 列、3 列、または 1/3列など、さまざまなセクションレイアウトから選択できます。Users can choose from a number of different layouts, such as two columns, three columns or one-third column. コミュニケーション サイトのモダン ページには、全幅列と呼ばれる追加のページレイアウトがあります。Modern pages in communication sites offer users an additional page layout named Full-width column. このレイアウトは、横方向の余白やパディングを使用せず、ページの幅全体に広がっています。This layout spans the full width of the page without any horizontal margin or padding. SharePoint フレームワークの Web パーツはいずれのレイアウトにも配置することができますが、追加の要件があるため Web パーツが明示的に全幅列をサポートしている必要があります。SharePoint Framework web parts can be placed in any layout, but due to its extra requirements, web parts must explicitly enable support for the full-width column.

全幅列のレイアウトの要件Layout requirements for the full-width column

モダン SharePoint ページの標準レイアウトに共通するものは最大幅です。One thing that regular layouts in modern SharePoint pages share, is the maximum width. 読みやすさと使いやすさを保証するために、モダン ページの本体は特定の幅を超えて広がらないようになっています。To guarantee the ease of readability and usability, the body of a modern page doesn't expand beyond a certain width. 通常のレイアウトで使用される Web パーツを作成する場合は、既知の最大と最小の幅制限に対して Web パーツをテストし、正しく表示されることを確認します。When building web parts that will be used in regular layouts, you would test your web parts width the known maximum and minimum width constrains to ensure that they are displayed properly.

しかし、全幅列のレイアウトの場合は、レイアウトがページの幅全体に広がるため、作成が複雑になります。When working with the full-width column layout, things become a bit more complicated, as that layout expands to the full width of the page. 非常に大きい画面で表示した場合、全幅列の幅が数千ピクセルに及ぶ場合があります。When displayed on an ultra-wide monitor, the full-width column could become even a few thousands pixels wide. これにより、全幅列で使用可能な Web パーツを作成するときに考慮しなければいけない追加テスト要件が発生します。This introduces additional testing requirements that you should take into account when building web parts that can be used in the full-width column.

全幅列のサポートを有効にするEnable support for the full-width column

既定では、SharePoint フレームワーク クライアント側 Web パーツを全幅列のレイアウトに 配置することはできません。By default SharePoint Framework client-side web parts cannot be placed in the full-width column layout. ユーザーが Web パーツを全幅列に追加できるようにするには、Web パーツのマニフェストで supportsFullBleed プロパティを true に設定します。To allow users to add your web part to the full-width column, in the web part manifest, set the supportsFullBleed property to true.

{
  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "34f6d7f2-262f-460a-8b65-152d784127cb",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld"
    }
  }]
}

この設定を有効にすると、全幅列レイアウトを含むページを編集するときに、あなたのWeb パーツは列に追加できる Web パーツの 1 つとして表示されます。With this setting enabled, when you edit a page with a full-width column layout, your web part will be displayed among web parts that can be added to the column.

全幅列のレイアウトに追加できる Web パーツの 1 つとして表示されるカスタム SharePoint フレームワーク クライアント側 Web パーツ

現時点では、SharePoint ワークベンチは全幅列レイアウトでの Web パーツのテストをサポートしていません。At this moment, the SharePoint Workbench doesn't support testing web parts in the full-width column layout. 代わりに、開発者向けのテナントに Web パーツを展開し、コミュニケーション サイトを構築し、そこで Web パーツをテストする必要があります。Instead, you would have to deploy your web part to a developer tenant, create a communication site and test your web part in there.