次の方法で共有


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

注:

この記事では、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 と証明書を使用して認証を使用します。

  1. コンピューターで PnP PowerShell を使用して、新しい自己署名証明書を作成します。

    Register-PnPAzureADApp -ApplicationName "PnPFlowDemo" -Tenant "contoso.onmicrosoft.com" -DeviceLogin -Out .
    

    contoso.onmicrosoft.com をテナントに置き換えます。

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

    コマンドの結果として、新しい Azure AD アプリケーションが登録され、アクセス許可が正しく設定され、テナントでのこのアプリケーションの使用に同意が与えられます。 これには、Azure AD への書き込みアクセスが必要です。

  2. 後で pfx ファイルと AzureAppId 値が必要になるため、コマンドレットが返す値をコピーしておきます。

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

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

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

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

フローを作成する

注:

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

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

  1. Power Automate サイトに移動してサインインし、ページの上部にある [空白から作成] を選択します。

  2. [多数のコネクタやトリガーを検索する] を選択して、トリガーを選択します。

  3. [要求] を検索し、[要求 ] - [HTTP 要求が受信されたとき] を選択します

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

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

  6. [Azure キュー] を検索し、[Azure キュー - キューにメッセージを入れる] を選択します。

  7. 接続を説明する名前を入力します。

  8. 前のセクションでコピーしたストレージ アカウント名を入力します。

  9. ストレージの共有キーを入力します。これは、ストレージ アカウントの [Key1 キー値] フィールドの値です。

  10. [作成] を選択します。

  11. キューの名前に、pnpprovisioningqueue を選択します。

  12. 要求本文に、webUrl という着信パラメーターを指定しました。 このフィールドの値をキューに入れるには、[メッセージ] フィールドをクリックし、[動的コンテンツの選択] から webUrl を選択します。

  13. [フローの保存] を選択します。 これにより、次の手順でコピーする URL が生成されます。

  14. フローの最初の手順である [HTTP 要求の受信時] を選択し、URL をコピーします。

  15. フローを保存します。

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

「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 関数の作成

  1. Azure Portal に移動します。

  2. [+ リソースの作成] を選択します。

  3. Function App を検索し、新しい関数アプリを作成します。 [ストレージ] フィールドで [既存のものを使用] を選択し、前に作成したストレージ アカウントを選択します。 必要に応じて他の値を設定しますが、ランタイムとして PowerShell Core を選択し、バージョンとして 7.0 を選択してください。

    [ランタイムスタック] と [バージョン] フィールドが強調表示された Azure portal のスクリーンショット

  4. 作成したら、新しい関数アプリに移動

  5. アプリ ファイル の選択

    メニューで強調表示された アプリ ファイル エントリを含む関数アプリのスクリーンショット

  6. ドロップダウン メニューで、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 関数 の最初の実行時に、これらのモジュールがダウンロードされ、使用可能になります。 バージョンのワイルドカード参照を使用することもできます。 このファイルに関する詳細をご覧ください

  7. 新しい Azure 関数を作成する 関数>Add:

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

  8. 新しい Azure Store Queue Trigger 関数を作成します。

    新しいキュー トリガー機能が強調表示された Azure ポータルのスクリーンショット

  9. 関数の名前を InvokePnPSiteTemplate にします。

  10. 前に作成したキューの名前を入力します。

  11. [追加] を選択します。 新しいページが開き、関数を変更できます。

注:

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

Azure 関数の完了

  1. 関数アプリのメイン画面に移動し、左側のメニューで [詳細設定ツール] を選択して、[移動] をクリックします。 新しいタブが開きます。

  2. 上部の [デバッグ コンソール] メニューから [PowerShell] を選択します。

  3. site\wwwroot\InvokePnPSiteTemplate (または site\wwwroot[name of your function]) に移動します

  4. 以前に作成した FlowDemoTemplate.xml ファイルをページにドラッグ アンド ドロップします。 これにより、ファイルがフォルダーにアップロードされます。

  5. 以前に生成された cert.pfx ファイルをページにドラッグ アンド ドロップします。 これにより、ファイルがフォルダーにアップロードされます。

  6. 関数に戻り、[コード + テスト] を選択して関数を編集します。

  7. 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 つまたは複数のサイト スクリプトを参照するコンテナーです。

  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
    }
    
  2. JSON をもう一度選択し、クリップボードに再びコピーします。

  3. PowerShell を開き、次のように入力してスクリプトを変数にコピーし、サイト スクリプトを作成します。

    $script = Get-Clipboard -Raw
    Add-PnPSiteScript -Title "Apply PnP Site Template" -Content $script
    Get-PnPSiteScript
    
  4. 作成したばかりのサイト スクリプトを含む 1 つまたは複数のサイト スクリプトのリストが表示されます。 作成したサイト スクリプトの ID を選択し、クリップボードにコピーします。

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

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

結果の確認

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

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