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.

重要

この機能は現在プレビュー段階であり、変更される可能性があります。This feature is currently in preview and is subject to change. 運用環境での使用は、現在サポートされていません。It is not currently supported for use in production environments. SharePoint 開発ドキュメントの問題リスト」を使用して、この機能に関するフィードバックやご意見をお寄せください。Your feedback and input around this capability is welcome using the SharePoint Dev Docs issue list.

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

テナント内での 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.