サイト スクリプトから PnP プロビジョニング エンジンを呼び出すCalling the PnP provisioning engine from a site script

サイト デザインは、サイト コレクションの外観を標準化する優れた方法を提供します。Site designs offer a great way to standardize the look and feel of your site collections. ただし、サイト デザインでは、すべてのページにフッターを追加するなどの一部の作業はできません。You can't do some things with site designs, however, like add a footer to every page. PnP プロビジョニング エンジンを使用すると、アプリケーション カスタマイザーをサイトにプロビジョニングできるテンプレートを作成することができます。You can use the PnP provisioning engine to create a template that you can use to provision an Application Customizer to a site. このアプリケーション カスタマイザーを使うと、すべてのページにフッターを登録するなど、ページ デザインを更新できます。This Application Customizer can then update your page design, for example to register a footer on every page.

この記事では、PnP プロビジョニング テンプレートをサイトに適用するサイト デザインを作成する方法について説明します。This article describes how to create a site design that applies a PnP provisioning template to a site. テンプレートは、フッターをレンダリングするアプリケーション カスタマイザーを追加します。The template will add an Application Customizer to render a footer.

この記事の手順では、以下のコンポーネントを使用します。The steps in this article use the following components:

  • サイト デザインとサイト スクリプトA site design and a site script
  • Microsoft FlowMicrosoft Flow
  • Azure のキュー ストレージAzure Queue storage
  • Azure 関数An Azure Function
  • SharePoint Framework (SPFx) ソリューションA SharePoint Framework (SPFx) solution
  • PnP プロビジョニング テンプレートA PnP provisioning template
  • PnP PowerShell スクリプトA PnP PowerShell script
  • テナントの管理権限を持つアプリ ID とアプリ シークレットAn app ID and app secret with administrative rights on your tenant

サイトを作成してサイト デザインを適用した後、これらのコンポーネントを使用して PnP プロビジョニング コードをトリガーします。You'll use these components to trigger the PnP provisioning code after you create the site and apply the site design.

テナントへのアプリ専用アクセスを設定するSet up app-only access to your tenant

アプリ専用アクセスを設定するには、通常のサイト上と SharePoint 管理サイト上の 2 つの異なるページがテナントに必要です。To set up app-only access, you need to have two different pages on your tenant - one on the regular site, and the other on your SharePoint administration site.

  1. テナント内の次の URL に移動します: https://[yourtenant].sharepoint.com/_layouts/appregnew.aspx (任意のサイトに移動できますが、ここではルート サイトを選択します)。Go to following URL in your tenant: https://[yourtenant].sharepoint.com/_layouts/appregnew.aspx (you can go to any site, but for now pick the root site).
  2. [クライアント ID][クライアント シークレット] フィールドの横にある [生成] ボタンを選択します。Choose the Generate button next to the Client Id and Client Secret fields.
  3. アプリのタイトル (たとえば、「サイトのプロビジョニング」など) を入力します。Enter a title for your app, such as "Site Provisioning".
  4. [アプリ ドメイン] ボックスに、localhost と入力します。In the App Domain box, enter localhost.
  5. [リダイレクト URI] ボックスに、https://localhost と入力します。In the Redirect URI box, enter https://localhost.

    クライアント ID、クライアント シークレット、タイトル、アプリ ドメイン、リダイレクト URI の各フィールドが表示されるアプリ ページの作成

  6. [作成] を選択します。Choose Create.

  7. [クライアント ID][クライアント シークレット] の値をコピーします。これらの値は後で必要になります。Copy the values for Client Id and Client Secret - you will need them later.

次に、アプリがテナントへの適切なアクセス権を持つように、アプリを信頼します。Next, trust the app, so that it has the appropriate access to your tenant:

  1. https://[yourtenant]-admin.sharepoint.com/_layouts/appinv.aspx に移動します (URL 内の -admin に注意してください)。Go to https://[yourtenant]-admin.sharepoint.com/_layouts/appinv.aspx (notice the -admin in the URL).
  2. [アプリ ID] フィールドにコピーしたクライアント ID を貼り付け、[参照] を選択します。In the App Id field, paste the Client ID that you copied, and choose Lookup.
  3. 次の XML を [権限の要求 XML] フィールドに貼り付けます。In the Permission Request XML field, paste the following XML:

    <AppPermissionRequests AllowAppOnlyPolicy="true" >
        <AppPermissionRequest Scope="http://sharepoint/content/tenant" Right="FullControl" />
    </AppPermissionRequests>
    
  4. [作成] を選択します。Choose Create.

  5. このアプリを信頼することを確定するには、[信頼する] を選択します。To confirm that you want to trust this app, choose Trust It.

Azure のキュー ストレージを作成するCreate the Azure Queue storage

このセクションでは、Azure のキュー ストレージを使用して Microsoft Flow からメッセージを受信します。In this section, you will use Azure Queue storage to receive messages from Microsoft Flow. キュー ストレージにメッセージが表示されるたびに Azure 関数がトリガーされ、PowerShell スクリプトが実行されます。Every time a message shows up in the Queue storage, an Azure function is triggered to run a PowerShell script.

Azure のキュー ストレージを設定するには:To set up the Azure Queue storage:

  1. Azure Portal に移動し、サインインします。Go to the Azure portal and sign in.
  2. [+ 新規作成] を選択します。Choose + New.
  3. Microsoft Azure Marketplace のリストから [ストレージ] を選択し、Featured 列で [ストレージ アカウント - BLOB、ファイル、テーブル、キュー] を選択しますFrom the Azure Marketplace listings, select Storage, and in the Featured column, choose Storage account - blob, file, table, queue.
  4. 必要なフィールドの値を入力します。Provide values for the required fields. [ダッシュ ボードへのピン留め] を選択し、[作成] を選択します。Select Pin to dashboard, and choose Create. ストレージ アカウントを作成するのには数分かかることがあります。It can take a few minutes for the storage account to be created.
  5. ストレージ アカウントを開き、キュー に移動します。Open the storage account and go to Queues.
  6. 画面上部の [+ キュー] を選択します。Choose + Queue at the top of the screen.
  7. 名前を pnpprovisioningqueue と入力するか、命名基準に従って独自の値を入力します。Enter pnpprovisioningqueue for the name, or enter your own value; be sure to follow the naming standard. キューの名前をメモしておいてください。Azure 関数を作成するときにこの値が必要になります。Make note of the queue name; you will need this value when you create the Azure Function.
  8. [アクセス キー] **に移動し、ストレージ アカウント名と **Key1 のキー値をメモしてください。Go to Access Keys and note the Storage Account Name and the key1 Key value. フローを作成するときに、これらの値が必要となります。You will need these values when you create the flow.

フローを作成するCreate the flow

キューにメッセージを入れるには、フローを作成する必要があります。To put a message in the queue, you need to create a flow.

  1. Microsoft Flow サイトに移動してサイン インし、ページの上部にある [空白から作成] を選択します。Go to the Microsoft Flow site, sign in, and choose Create from Blank at the top of the page.
  2. [多数のコネクタやトリガーを検索する] を選択して、トリガーを選択します。Choose Search hundreds of connectors and triggers to select your trigger.
  3. [要求] を検索し、[要求 - HTTP 要求の受信時] を選択します。Search for Request, and select Request - When a HTTP Request is received.
  4. 次の JSON を、要求本文として入力します。Enter the following JSON as your request body:

    {
        "type": "object",
        "properties": {
            "webUrl": {
                "type": "string"
            },
            "parameters": {
                "type": "object",
                "properties": {
                    "event": {
                        "type": "string"
                    },
                    "product": {
                        "type": "string"
                    }
                }
            }
        }
    }
    
  5. [+ 新しい手順] を選択して、[アクションの追加] を選択します。Select + New Step and choose Add an action.

  6. [Azure キュー] を検索し、[Azure キュー - キューにメッセージを入れる] を選択します。Search for Azure Queues and select Azure Queues - Put a message on a queue.
  7. 接続を説明する名前を入力します。Enter a descriptive name for the connection.
  8. 前のセクションでコピーしたストレージ アカウント名を入力します。Enter the storage account name that you copied in the previous section.
  9. ストレージの共有キーを入力します。これは、ストレージ アカウントの [Key1 キー値] フィールドの値です。Enter the storage shared key, which is the value of the Key1 key value field of your storage account.
  10. [作成] を選択します。Choose Create.
  11. キューの名前に、pnpprovisioningqueue を選択します。Select pnpprovisioningqueue for the queue name.
  12. 要求本文に、webUrl という着信パラメーターを指定しました。In the request body, you specified an incoming parameter called webUrl. このフィールドの値をキューに入れるには、[メッセージ] フィールドをクリックし、[動的コンテンツの選択] から webUrl を選択します。To put the value of that field in the queue, click in the message field and select webUrl from the Dynamic Content picker.
  13. [フローの保存] を選択します。Choose Save Flow. これにより、次の手順でコピーする URL が生成されます。This will generate the URL that you will copy in the next step.
  14. フローの最初の手順である [HTTP 要求の受信時] を選択し、URL をコピーします。Choose the first step in your flow ('When an HTTP request is received') and copy the URL.
  15. フローを保存します。Save your flow.

フローは次のように表示されます。Your flow should look like the following.

「HTTP 要求の受信時」という名前のフローのスクリーンショット。[URL]、[要求本文]、[キュー名]、[メッセージ] の各フィールドを表示します。

フローのテストTest the flow

お手持ちのフローをテストするためには、POST 要求を行う必要があります。To test your flow, you have to make a POST request. 次の例に示すように、PowerShell によって実行することができます。You can do this via PowerShell, as shown in the following example.

$uri = "[the URI you copied in step 14 when creating the flow]"
$body = "{webUrl:'somesiteurl'}"
Invoke-RestMethod -Uri $uri -Method Post -ContentType "application/json" -Body $body

フローのメイン画面に移動すると、実行履歴が表示されます。When you go to the main screen of your flow, you will see a run history. フローが正しく動作していれば、Succeeded が表示されます。If your flow worked correctly, it will show Succeeded. その後、Azure で作成したばかりのキューに移動して、[最新の情報に更新] を選択します。Now go to the queue you just created in Azure and choose Refresh. フローを正しく起動したことを示すエントリがあるはずです。You should see an entry that shows that you correctly invoked the flow.

SPFx ソリューションのプロビジョニングProvision the SPFx solution

このセクションでは、既存の SPFx ソリューションである領域フッター アプリケーション カスタマイザーを使用します。In this section, you'll use an existing SPFx solution, the Regions Footer Application Customizer. サンプル リポジトリの Readme ファイルの手順に従って、ソリューションのビルドおよびプロビジョニングを行います。Follow the steps in the Readme file in the sample repo to build and provision the solution.

PnP プロビジョニング テンプレートの作成Create a PnP provisioning template

次のプロビジョニング テンプレート XML を新しいファイルにコピーし、FlowDemoTemplate.xml というファイル名で保存します。Copy the following provisioning template XML to a new file and save the file as FlowDemoTemplate.xml.

<?xml version="1.0"?>
<pnp:Provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2017/05/ProvisioningSchema">
  <pnp:Preferences Generator="OfficeDevPnP.Core, Version=2.20.1711.0, Culture=neutral, PublicKeyToken=3751622786b357c2" />
  <pnp:Templates ID="CONTAINER-FLOWDEMO">
    <pnp:ProvisioningTemplate ID="TEMPLATE-FLOWDEMO" Version="1" BaseSiteTemplate="GROUP#0" Scope="RootSite">
      <pnp:CustomActions>
        <pnp:WebCustomActions>
          <pnp:CustomAction Name="spfx-react-app-customizer" Description="Custom action for Application Customizer" Location="ClientSideExtension.ApplicationCustomizer" Title="spfx-react-app-customizer" Sequence="0" Rights="" RegistrationType="None" ClientSideComponentId="67fd1d01-84e8-4fbf-85bd-4b80768c6080" ClientSideComponentProperties="{&quot;SourceTermSetName&quot;:&quot;Regions&quot;}" />
        </pnp:WebCustomActions>
      </pnp:CustomActions>
    </pnp:ProvisioningTemplate>
  </pnp:Templates>
</pnp:Provisioning>

注意

プロビジョニング テンプレートは、ソリューションにカスタム アクションを追加します。The provisioning template adds a custom action to a solution. ClientSideComponentId は、前にプロビジョニングした領域フッター アプリケーション カスタマイザーに関連付けられています。The ClientSideComponentId is associated with the Regions Footer Application Customizer that you provisioned earlier. 独自の SPFx ソリューションでこのデモを実行する場合は、ClientSideComponentId を変更し、必要に応じて XML の ClientSideComponentProperties 属性値も変更してください。If you run this demo with your own SPFx solution, change the ClientSideComponentId and optionally the ClientSideComponentProperties attribute values in the XML.

Azure 関数の作成Create the Azure Function

  1. Azure Portal に移動します。Go to the Azure Portal.
  2. Function App を検索し、新しい関数アプリを作成します。Search for Function App and create a new function app. [ストレージ] フィールドで [既存のものを使用] を選択し、前に作成したストレージ アカウントを選択します。In the Storage field, select Use existing, and select the storage account that you created earlier. 必要に応じて他の値を設定します。Set the other values as required.
  3. Function App を開き、[関数] ** > ** [新しい関数] を選択します。Open the Function app and select Functions > New function.

    [新しい関数] オプションが強調表示されている Azure Portal のスクリーンショット

  4. 言語のドロップダウン ボックスから、[PowerShell] を選択します。From the Language drop-down box, select PowerShell.

  5. [QueueTrigger - PowerShell] を選択します。Select QueueTrigger - PowerShell.
  6. 関数の名前を ApplyPnPProvisioningTemplate にします。Name the function ApplyPnPProvisioningTemplate.
  7. 前に作成したキューの名前を入力します。Enter the name of the queue you created earlier.
  8. [作成] を選択します。Choose Create. PowerShell コマンドレットを入力できるエディターが開きます。An editor where you can enter PowerShell cmdlets will open.

次に、Azure 関数で使用できるように、PnP PowerShell モジュールをアップロードします。Next, you'll upload the PnP PowerShell module so that you can use it in the Azure Function.

Azure 関数用の PnP PowerShell モジュールをアップロードするUpload the PnP PowerShell module for your Azure Function

Azure 関数用にアップロードできるように、PnP PowerShell モジュールをダウンロードする必要があります。You'll need to download the PnP PowerShell module so that you can upload it for your Azure Function.

  1. コンピューターに一時フォルダーを作成します。Create a temporary folder on your computer.
  2. PowerShell を起動し、次のように入力してください。Launch PowerShell and enter the following: powershell Save-Module -Name SharePointPnPPowerShellOnline -Path [pathtoyourfolder]

PowerShell モジュールのファイルが、作成したフォルダー内のフォルダーにダウンロードされます。The PowerShell module files will download to a folder within the folder that you created.

次に、Azure 関数がモジュールを使用できるように、ファイルをアップロードします。Next, upload the files so that your Azure Function can use the module.

  1. Function App のメイン ページに移動し、[プラットフォーム機能] を選択します。Go to the main page of your Function App and select Platform Features.

    [プラットフォーム機能] が強調表示されている Function App のスクリーンショット

  2. [高度なツール (Kudu)] を選択します。Select Advanced tools (Kudu).

    [高度なツール (Kudu)] が強調表示されている開発ツールのスクリーンショット

  3. Kudu のメイン ページで、[デバッグ コンソール] を選択し、CMDPowerShell のいずれかを選択します。On the main Kudu page, select Debug Console and pick either CMD or PowerShell.

  4. ページの上部でファイル エクスプローラーを選択し、site\wwwroot\[nameofyourazurefunction] に移動します。Choose the file explorer on the upper part of the page, and go to site\wwwroot\[nameofyourazurefunction].
  5. modules という新しいフォルダーを作成します。Create a new folder named modules.

    [新しいフォルダー] オプションが強調表示されているスクリーンショット

  6. modules フォルダー内に SharePointPnPPowerShellOnline という別のフォルダーを作成し、そのフォルダーに移動します。In the modules folder, create another folder called SharePointPnPPowerShellOnline and go to that folder.

  7. コンピューターのファイル エクスプローラーで、すべての PnP PowerShell モジュール ファイルをダウンロードしたフォルダーに移動します。In File Explorer on your computer, go to the folder where you downloaded the PnP PowerShell module files. SharePointPnPPowerShellOnline\2.20.1711.0 フォルダーを開きます (バージョン番号は異なる場合があります)。Open the SharePointPnPPowerShellOnline\2.20.1711.0 folder (notice that the version number might be different).
  8. このフォルダーのすべてのファイルを、Kudu のフォルダーにドラッグ アンド ドロップしてアップロードします。Drag and drop all the files from this folder into the folder in Kudu to upload them.

    40 ファイルが追加された Kudu フォルダーのスクリーンショット

Azure 関数の完了Finish the Azure Function

  1. Azure 関数に戻り、右側に [ファイル] タブを展開します。Go back to your Azure Function and expand the files tab to the right.

    [ファイルの表示] タブのスクリーンショット

  2. [アップロード] を選択し、前に作成したプロビジョニング テンプレート ファイルをアップロードします。Select Upload and upload the provisioning template file that you created earlier.

  3. PowerShell スクリプトを次のものに置き換えます。Replace the PowerShell script with the following:

    $in = Get-Content $triggerInput -Raw
    Write-Output "Incoming request for '$in'"
    Connect-PnPOnline -AppId $env:SPO_AppId -AppSecret $env:SPO_AppSecret -Url $in
    Write-Output "Connected to site"
    Apply-PnPProvisioningTemplate -Path D:\home\site\wwwroot\ApplyPnPProvisioningTemplate\FlowDemoTemplate.xml
    

SPO_AppIdSPO_AppSecret という 2 つの環境変数を使用していることに注目してください。Notice that you're using two environment variables: SPO_AppIdand SPO_AppSecret. これらの変数を設定するには、Azure Portal の Function App のメイン ページに移動し、[アプリケーションの設定] を選択し、2 つの新しいアプリケーションの設定を追加します。To set those variables, go to the main Function App page in the Azure Portal, select Application Settings, and add two new application settings:

  1. SPO_AppId - テナントにアプリケーションを作成する際に、最初の手順でコピーしたクライアント ID に値を設定します。SPO_AppId - Set the value to the Client ID you copied in the first step when you created your app on your tenant.
  2. SPO_AppSecret - テナントにアプリケーションを作成する際に、最初の手順でコピーしたクライアント シークレットに値を設定します。SPO_AppSecret - Set the value to the Client Secret that you copied in the first step when you created your app on your tenant.

サイト デザインの作成Create the site design

PowerShell を開き、SharePoint Online 管理シェルがインストールされていることを確認してください。Open PowerShell and make sure that you have the Microsoft Office 365 Management Shell installed.

Connect-SPOService を使用してテナントに接続します。Connect to your tenant using Connect-SPOService.

Connect-SPOService -Url https://[yourtenant]-admin.sharepoint.com

これで、既存のサイト デザインを取得することができます。Now you can get the existing site designs.

Get-SPOSiteDesign

サイト デザインを作成するには、まずサイト スクリプトを作成する必要があります。To create a site design, you first need to create a site script. サイト デザインは、1 つまたは複数のサイト スクリプトを参照するコンテナーです。A site design is a container that refers to one or more site scripts.

  1. 次の JSON コードをクリップボードにコピーして、変更を加えます。Copy the following JSON code to your clipboard and modify it. URL プロパティを、フロー作成時にコピーした値に設定します。Set the url property to the value you copied when you created the flow. URL は次のようになります。The URL looks similar to the following:

    https://prod-27.westus.logic.azure.com:443/workflows/ef7434cf0d704dd48ef5fb6...oke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun

    {
        "$schema": "schema.json",
        "actions": [
        {
                "verb": "triggerFlow",
                "url": "[paste the workflow trigger URL here]",
                "name": "Apply Template",
                "parameters": {
                    "event":"",
                    "product":""
                }
        }
        ],
        "bindata": {},
        "version": 1
    }
    
  2. JSON をもう一度選択し、クリップボードに再びコピーします。Select the JSON again and copy it again to your clipboard.

  3. PowerShell を開き、次のように入力してスクリプトを変数にコピーし、サイト スクリプトを作成します。Open PowerShell and enter the following to copy the script into a variable and create the site script:

    $script = Get-Clipboard -Raw
    Add-SPOSiteScript -Title "Apply PnP Provisioning Template" -Content $script
    Get-SPOSiteScript
    
  4. 作成したばかりのサイト スクリプトを含む 1 つまたは複数のサイト スクリプトのリストが表示されます。You will see a list of one or more site scripts, including the site script you just created. 作成したサイト スクリプトの ID を選択し、クリップボードにコピーします。Select the ID of the site script that you created and copy it to the clipboard.

  5. 次のコマンドを使用してサイト デザインを作成します。Use the following command to create the site design:

    Add-SPOSiteDesign -Title "Site with footer" -SiteScripts [Paste the ID of the Site Script here] -WebTemplate "64"
    

Add-SPOSiteDesign コマンドレットはサイト デザインをチーム サイトに関連付けます。The Add-SPOSiteDesign cmdlet associates the site design with the team site. デザインをコミュニケーション サイトに関連付けるには、"68" の値を使用します。If you want to associate the design with a communication site, use the value "68".

結果の確認Verify the results

Azure のキュー ストレージを作成した後、アプリ専用アクセス用のアプリ ID、Azure 関数、サイト デザインを作成してきました。After you created your Azure Queue storage, you created the app ID for app-only access, the Azure Function, and the site design. その後、サイト デザインから Microsoft Flow をトリガーしました。You then triggered the Microsoft Flow from the site design.

その結果をテストするには、新しいサイトを作成します。To test the results, create a new site. SharePoint テナントで、[SharePoint] > [サイトの作成] > [チーム サイト] を選択します。In your SharePoint tenant, select SharePoint > Create Site > Team Site. 新しいサイト デザインは、デザイン オプションとして表示されるはずです。Your new site design should show up as a design option. サイトの作成後、サイト デザインが適用されていることに注目してください。Notice that the site design is applied after the site is created. 正しく設定してあれば、フローがトリガーされます。If you configured it correctly, your flow will be triggered. フローの実行履歴によって、フローが正しく実行されたことを確認することができます。You can check the run history of the flow to verify that it ran correctly. フッターがすぐに表示されない場合があります。表示されないときは、しばらくしてからサイトを再読み込みし、もう一度確認してください。Note that the footer might not show up immediately; if you don't see it, wait a minute and reload your site to check again.