サイトスクリプトから PnP プロビジョニングエンジンを呼び出す

[アーティクル]
08/31/2023

注:

この記事では、2021 年 1 月にリリースされた最新バージョンの PnP PowerShell を使用します。 Azure 関数は PowerShell Core を実行するため、Azure 関数でこのバージョンの PnP PowerShell を使用する必要があります。このバージョンの PnP PowerShell の詳細については、https://pnp.github.io/powershellを参照してください。

サイトデザインは、サイトコレクションの外観を標準化する優れた方法を提供します。ただし、サイトデザインでは、すべてのページにフッターを追加するなどの一部の作業はできません。 PnP プロビジョニングエンジンを使用すると、アプリケーションカスタマイザーをサイトにプロビジョニングできるテンプレートを作成することができます。このアプリケーションカスタマイザーは、ページデザインを更新して、たとえば、すべてのページにフッターを登録できます。

この記事では、PnP プロビジョニングテンプレートをサイトに適用するサイトデザインを作成する方法について説明します。テンプレートは、フッターをレンダリングするアプリケーションカスタマイザーを追加します。

この記事の手順では、以下のコンポーネントを使用します。

サイトデザインとサイトスクリプト
Power Automate
Azure のキューストレージ
Azure Functions
SharePoint Framework (SPFx) ソリューション
PnP サイトテンプレート
PnP PowerShell スクリプト
Azure AD アプリの登録

サイトを作成してサイトデザインを適用した後、これらのコンポーネントを使用して PnP プロビジョニングコードをトリガーします。

注:

PnP プロビジョニングフレームワーク & PnP プロビジョニングエンジンは、アクティブなコミュニティがサポートを提供するオープンソースソリューションです。 Microsoft からのオープンソースツールのサポート SLA はありません。

テナントへのアプリ専用アクセスを設定する

このチュートリアルでは、クライアント ID と証明書を使用して認証を使用します。

コンピューターで PnP PowerShell を使用して、新しい自己署名証明書を作成します。
```
Register-PnPAzureADApp -ApplicationName "PnPFlowDemo" -Tenant "contoso.onmicrosoft.com" -DeviceLogin -Out .
```
contoso.onmicrosoft.com をテナントに置き換えます。

手順に注意深く従ってください。

コマンドの結果として、新しい Azure AD アプリケーションが登録され、アクセス許可が正しく設定され、テナントでのこのアプリケーションの使用に同意が与えられます。これには、Azure AD への書き込みアクセスが必要です。
後で pfx ファイルと AzureAppId 値が必要になるため、コマンドレットが返す値をコピーしておきます。

Azure のキューストレージを作成する

このセクションでは、Azure のキューストレージを使用して Power Automate からメッセージを受信します。キューストレージにメッセージが表示されるたびに Azure 関数がトリガーされ、PowerShell スクリプトが実行されます。

Azure のキューストレージを設定するには:

Azure Portal に移動し、サインインします。
[+ リソースの作成] を選択します。
Microsoft Azure Marketplace のリストから [ストレージ] を選択し、Featured 列で [ストレージアカウント - BLOB、ファイル、テーブル、キュー] を選択します
必要なフィールドの値を入力します。 [ダッシュボードへのピン留め] を選択し、[作成] を選択します。ストレージアカウントを作成するのには数分かかることがあります。
ストレージアカウントを開き、キュー に移動します。
画面上部の [+ キュー] を選択します。
名前を pnpprovisioningqueue と入力するか、命名基準に従って独自の値を入力します。キューの名前をメモしておいてください。Azure 関数を作成するときにこの値が必要になります。
[アクセスキー]に移動し、ストレージアカウント名と Key1 のキー値をメモしてください。フローを作成するときに、これらの値が必要となります。

フローを作成する

注:

以下で使用する要求トリガーは Premium になり、追加のライセンスが必要になります。

キューにメッセージを入れるには、フローを作成する必要があります。

Power Automate サイトに移動してサインインし、ページの上部にある [空白から作成] を選択します。
[多数のコネクタやトリガーを検索する] を選択して、トリガーを選択します。
[要求] を検索し、[要求 ] - [HTTP 要求が受信されたとき] を選択します。

次の JSON を、要求本文として入力します。

{
    "type": "object",
    "properties": {
        "webUrl": {
            "type": "string"
        },
        "parameters": {
            "type": "object",
            "properties": {
                "event": {
                    "type": "string"
                },
                "product": {
                    "type": "string"
                }
            }
        }
    }
}

[+ 新しい手順] を選択して、[アクションの追加] を選択します。
[Azure キュー] を検索し、[Azure キュー - キューにメッセージを入れる] を選択します。
接続を説明する名前を入力します。
前のセクションでコピーしたストレージアカウント名を入力します。
ストレージの共有キーを入力します。これは、ストレージアカウントの [Key1 キー値] フィールドの値です。
[作成] を選択します。
キューの名前に、pnpprovisioningqueue を選択します。
要求本文に、webUrl という着信パラメーターを指定しました。このフィールドの値をキューに入れるには、[メッセージ] フィールドをクリックし、[動的コンテンツの選択] から webUrl を選択します。
[フローの保存] を選択します。これにより、次の手順でコピーする URL が生成されます。
フローの最初の手順である [HTTP 要求の受信時] を選択し、URL をコピーします。
フローを保存します。

フローは次のように表示されます。

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

フローのテスト

お手持ちのフローをテストするためには、POST 要求を行う必要があります。次の例に示すように、PowerShell によって実行することができます。

$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

フローのメイン画面に移動すると、実行履歴が表示されます。フローが正しく動作していれば、Succeeded が表示されます。その後、Azure で作成したばかりのキューに移動して、[最新の情報に更新] を選択します。フローを正しく起動したことを示すエントリがあるはずです。

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

このセクションでは、既存の SPFx ソリューションである領域フッターアプリケーションカスタマイザーを使用します。サンプルリポジトリの Readme ファイルの手順に従って、ソリューションのビルドおよびプロビジョニングを行います。

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

次のプロビジョニングテンプレート XML を新しいファイルにコピーし、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>

注:

プロビジョニングテンプレートは、ソリューションにカスタムアクションを追加します。 ClientSideComponentId は、前にプロビジョニングした領域フッターアプリケーションカスタマイザーに関連付けられています。独自の SPFx ソリューションでこのデモを実行する場合は、ClientSideComponentId を変更し、必要に応じて XML の ClientSideComponentProperties 属性値も変更してください。

Azure 関数の作成

Azure Portal に移動します。
[+ リソースの作成] を選択します。
Function App を検索し、新しい関数アプリを作成します。 [ストレージ] フィールドで [既存のものを使用] を選択し、前に作成したストレージアカウントを選択します。必要に応じて他の値を設定しますが、ランタイムとして PowerShell Core を選択し、バージョンとして 7.0 を選択してください。
作成したら、新しい関数アプリに移動
アプリファイル の選択
ドロップダウンメニューで、requirements.psd1 を選択し、次のように新しいエントリを追加します
```
# This file enables modules to be automatically managed by the Functions service.
# See https://aka.ms/functionsmanageddependency for additional information.
#
@{
    # For latest supported version, go to 'https://www.powershellgallery.com/packages/Az'.
    'Az' = '5.*'
    # For the latest supported version, go to 'https://www.powershellgallery.com/packages/PnP.PowerShell'.
    'PnP.PowerShell' = '1.*'
}
```
ファイルを保存します。 Azure PowerShell コマンドレットを使用しない場合は、このファイルからそのエントリを削除できます。 requirements.psd1 ファイルを使用すると、特定の PowerShell モジュールがすべての機能で使用できるようになります。 Azure 関数の最初の実行時に、これらのモジュールがダウンロードされ、使用可能になります。バージョンのワイルドカード参照を使用することもできます。このファイルに関する詳細をご覧ください。
新しい Azure 関数を作成する関数>Add:
新しい Azure Store Queue Trigger 関数を作成します。
関数の名前を InvokePnPSiteTemplate にします。
前に作成したキューの名前を入力します。
[追加] を選択します。新しいページが開き、関数を変更できます。

注:

ストレージアカウントは、相互に通信するリソースが同じ領域に配置されている必要があるため、Azure Function App と同じ領域に存在する必要があります。これは Azure Functions の要件です。

Azure 関数の完了

関数アプリのメイン画面に移動し、左側のメニューで [詳細設定ツール] を選択して、[移動] をクリックします。新しいタブが開きます。
上部の [デバッグコンソール] メニューから [PowerShell] を選択します。
site\wwwroot\InvokePnPSiteTemplate (または site\wwwroot[name of your function]) に移動します
以前に作成した FlowDemoTemplate.xml ファイルをページにドラッグアンドドロップします。これにより、ファイルがフォルダーにアップロードされます。
以前に生成された cert.pfx ファイルをページにドラッグアンドドロップします。これにより、ファイルがフォルダーにアップロードされます。
関数に戻り、[コード + テスト] を選択して関数を編集します。

PowerShell スクリプトを次のものに置き換えます。

param([string] $QueueItem, $TriggerMetadata)

# Write out the queue message and insertion time to the information log.
Write-Host "PowerShell queue trigger function processed work item: $QueueItem"
Write-Host "Queue item insertion time: $($TriggerMetadata.InsertionTime)"
Connect-PnPOnline -ClientId [insertyourAzureAppIdhere] -CertificatePath D:\home\site\wwwroot\InvokePnPSiteTemplate\cert.pfx -Tenant 'contoso.onmicrosoft.com' -Url $QueueItem
Write-Output "Connected to site"
Invoke-PnPSiteTemplate -Path D:\home\site\wwwroot\InvokePnPSiteTemplate\FlowDemoTemplate.xml

[insertyourAppIdHere] を、Register-PnPAzureApp コマンドレットが AzureAppId に対して返した値に置き換えます。

「contoso.onmicrosoft.com」を自分のテナントの詳細に置き換えます。

サイトデザインの作成

PowerShell を開き、Connect-PnPOnline を使用してテナントに接続します。

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

これで、既存のサイトデザインを取得することができます。

Get-PnPSiteDesign

サイトデザインを作成するには、まずサイトスクリプトを作成する必要があります。サイトデザインは、1 つまたは複数のサイトスクリプトを参照するコンテナーです。

次の JSON コードをクリップボードにコピーして、変更を加えます。 URL プロパティを、フロー作成時にコピーした値に設定します。 URL は次のようになります。

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
}
```
JSON をもう一度選択し、クリップボードに再びコピーします。
PowerShell を開き、次のように入力してスクリプトを変数にコピーし、サイトスクリプトを作成します。
```
$script = Get-Clipboard -Raw
Add-PnPSiteScript -Title "Apply PnP Site Template" -Content $script
Get-PnPSiteScript
```
作成したばかりのサイトスクリプトを含む 1 つまたは複数のサイトスクリプトのリストが表示されます。作成したサイトスクリプトの ID を選択し、クリップボードにコピーします。

次のコマンドを使用してサイトデザインを作成します。

Add-PnPSiteDesign -Title "Site with footer" -SiteScriptIds [Paste the ID of the Site Script here] -WebTemplate TeamSite

結果の確認

Azure のキューストレージを作成した後、アプリ専用アクセス用のアプリ ID、Azure 関数、サイトデザインを作成してきました。その後、サイトデザインから Power Automate をトリガーしました。

その結果をテストするには、新しいサイトを作成します。 SharePoint テナントで、[SharePoint]>[サイトの作成]>[チームサイト] を選択します。新しいサイトデザインは、デザインオプションとして表示されるはずです。サイトの作成後、サイトデザインが適用されていることに注目してください。正しく設定してあれば、フローがトリガーされます。フローの実行履歴によって、フローが正しく実行されたことを確認することができます。フッターがすぐに表示されない場合があります。表示されないときは、しばらくしてからサイトを再読み込みし、もう一度確認してください。

サイト スクリプトから PnP プロビジョニング エンジンを呼び出す