SharePoint Online での Single Part App Pages の使用Using single part app pages in SharePoint Online

Single Part App Pages では、SharePoint Framework Web パーツまたは SharePoint Online の Teams アプリケーションを、ロックされたレイアウトでホストすることができます。Single part app pages provides a capability to host SharePoint Framework web parts or Teams applications in SharePoint Online with locked layout. エンド ユーザーは、Single Part App Pages レイアウトを使用しているページを変更したり設定したりできません。End users cannot modify or configure the page which is using Single Part App Page layout.

App Pages には、次のような特徴があります。App pages have following characteristics:

  • エンド ユーザーはブラウザーを使って Single Part App Pages を編集できないSingle Part App Pages cannot be edited by end users using browser
  • 現在は、単一の Web パーツまたは Microsoft Teams アプリケーションのホスト機能のみをサポートしているCurrently supports hosting only single web part or Microsoft Teams application
  • 通常のページ レイアウトから Single Part App Pages へのページ レイアウトには、プログラム手法でのみ変更できるPage layout can only be changed programatically from normal page layout to a Single Page App Page
  • エンドユーザーは、公開されている Web パーツや Teams アプリケーションをパラメーター化できないEnd-users cannot parametrize exposed web part or Teams application


ページに使用したページ レイアウトを選択すると、アプリのページは最新のページ作成機能のオプションとして公開されます。App pages are exposed as an option in the modern page creation capability when you chose the used page layout for your page. アプリページとしても利用可能なように構成された全てのウェブパーツは、Create page機能で利用できます。All web part swhich have been configured to be available also as an app page are available on the Create page capability.

アプリ ページとして公開されるように、Web パーツを構成できます。Web part can be configured to be exposed as an app page. この構成は、Web パーツのマニフェスト ファイルで supportedHosts の値を調整して行います。This configuration is performed in the web part manifest file by adjusting the supportedHosts value. supportedHosts の値に "SharePointFullPage" 値が含まれている場合、予定されているアプリ ページ選択ユーザー インターフェイスのオプションとして、Web パーツが公開されます。Web part will be exposed as an option in the upcoming app pages picker user interface, if the supportedHosts value contains "SharePointFullPage" value.

以下の Web パーツ マニフェストでは、supportedHosts パラメーターのすべての異なる値を更新することによって、サポートされているすべてのプラットフォームに Web パーツを含めるシナリオを示します。Following web part manifest demonstrates scenario where the web part is included to be in all supported platforms by updating all different values for the supportedHosts parameter.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "eb7ac2da-d8eb-4118-9f4f-19ce595d3ad3",
  "alias": "AllPlatformsWebPart",
  "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,
  "supportedHosts": ["SharePointWebPart", "SharePointFullPage", "TeamsTab"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "All Platforms" },
    "description": { "default": "This web part is visible in all platforms" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "allPlatforms"
    }
  }]
}

テナント内での Single Part App ページの使用方法How to use the Single Part App page in your tenant?

SharePoint サイトで Signle Part App Page レイアウトを有効にするには、次の手順を実行する必要があります。You will need to perform following steps to enable Single Part App Page layout in your SharePoint site.

  1. 新しいページを作成するCreate a new page
  2. ページに Web パーツを追加し、必要に応じて構成するAdd a web part on the page and configure that as needed
  3. ページ レイアウトの種類を SingleWebPartAppPage に変更するChange the page layout type as SingleWebPartAppPage

ページをさらに変更する必要がある場合、ページ レイアウトを Article に戻し、コンテンツ編集を有効にできます。If you need to further modify the page, you can change the page layout back as as Article to enable content editing.

ブラウザー コンソールで JavaScript を使用したページ レイアウトの変更Changing page layout using JavaScript in browser console

ブラウザーの開発者ツールを使用すると、Single Page App Page レイアウトを使用できるように既存のページを変更できます。You can change existing page to use Single Page App Page layout by using browser developer tools. 開発者ツールを有効にして次のコードを実行するだけで、SingleWebPartAppPage レイアウトを使用するよう既存のページを変更できます。You can simply enable the developer tools and execute following code to change an existing page to use a SingleWebPartAppPage layout.

環境に合わせてテナントとページの名前を調整する必要があります。You will need to adjust tenant and page name based on your environment.

var siteUrl = 'https://contoso.sharepoint.com/sites/marketing/';
var pageUrl = 'SitePages/page.aspx'

fetch(siteUrl + '_api/contextinfo', {
  method: 'POST',
  headers: {
    accept: 'application/json;odata=nometadata'
  }
})
  .then(function (response) {
    return response.json();
  })
  .then(function (ctx) {
    return fetch(siteUrl + "_api/web/getfilebyurl('" + pageUrl + "')/ListItemAllFields", {
      method: 'POST',
      headers: {
        accept: 'application/json;odata=nometadata',
        'X-HTTP-Method': 'MERGE',
        'IF-MATCH': '*',
        'X-RequestDigest': ctx.FormDigestValue,
        'content-type': 'application/json;odata=nometadata',
      },
      body: JSON.stringify({
        PageLayoutType: "SingleWebPartAppPage"
      })
    })
  })
  .then(function(res) {
    console.log(res.ok ? 'DONE' : 'Error: ' + res.statusText);
  });

PnP PowerShell を使用したページ レイアウトの変更Changing page layout using PnP PowerShell

また、PnP PowerShell を使用して、以下のスクリプトで既存のページのレイアウトを更新することもできます。You can also use PnP PowerShell to update the page layout for the existing page with following script.

注意

PnP PowerShell はオープン ソース ツールであり、アクティブなコミュニティでサポートが提供されています。PnP PowerShell is an open-source tool with active community providing support for it. Microsoft からのオープン ソース ツールのサポート SLA はありません。There is no SLA for the open-source tool support from Microsoft.

環境に合わせてテナントとページの名前を調整する必要があります。You will need to adjust tenant and page name based on your environment.

Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/marketing
$item2 = Get-PnPListItem -List "Site Pages" -Query "<View><Query><Where><Eq><FieldRef Name='FileLeafRef'/><Value Type='Text'>page.aspx</Value></Eq></Where></Query></View>"
$item2["PageLayoutType"] = "SingleWebPartAppPage"
$item2.Update()
Invoke-PnPQuery

Office 365 の CLI によるページ レイアウトの変更Changing page layout using Office 365 CLI

また、Office 365 CLI を使用して、以下のスクリプトで既存のページのページ レイアウトを更新することもできます。You can also use Office 365 CLI to update the page layout for the existing page with following script.

注意

Office 365 CLI はオープン ソース ツールであり、アクティブなコミュニティでサポートが提供されています。Office 365 CLI is an open-source tool with active community providing support for it. Microsoft からのオープン ソース ツールのサポート SLA はありません。There is no SLA for the open-source tool support from Microsoft.

o365 spo login https://contoso.sharepoint.com/sites/marketing
o365 spo listitem set --webUrl https://contoso.sharepoint.com/sites/marketing --listTitle 'Site Pages' --id 3 --PageLayoutType SingleWebPartAppPage

環境に合わせてテナントとページの名前を調整する必要があります。You will need to adjust tenant and page name based on your environment.