演習 - アプリケーションカスタマイザーを使用して Viva コネクションデスクトップを拡張する - Training

11 分

この演習では、SharePoint リストからデータを取得し、Viva コネクションデスクトップエクスペリエンスに表示する SharePoint Framework アプリケーションカスタマイザーを構築します。

新しいソリューションを作成する

開始するには、SharePoint Framework Yeoman ジェネレーターを使用することでソリューションを作成します。

spfx-company-announcements-appcustomizer という名前のプロジェクトのフォルダーを作成します。
ターミナルで、作業ディレクトリを spfx-company-announcements-appcustomizer に変更します。
yo @microsoft/sharepoint コマンドを実行して、新しいソリューションのスキャフォールディングを開始します。

次のジェネレーターの要求に応答します。

プロンプト	エントリ
ソリューション名は何ですか?	spfx-company-announcements-appcustomizer
SharePoint Online (最新版) のみサポートしています。それ以前のバージョンの SharePoint (2016、2019) の場合は、ジェネレーターの 1.12.1 バージョンをご利用ください。	SharePoint Online のみ (最新)
ファイルをどこに保存しますか?	現在のフォルダーを使用する
テナント管理者が、サイトで機能を展開したり、アプリを追加したりせず、すぐにすべてのサイトでソリューションを展開できるようにしたいですか?	いいえ
ソリューションのコンポーネントには、テナント内の他のコンポーネントと共有されていない一意の Web API にアクセスするためのアクセス許可が必要ですか?	いいえ
どの種類のクライアント側コンポーネントを作成しますか?	Extension
どの種類のクライアント側拡張機能を作成しますか?	アプリケーションカスタマイザー
Web パーツ名は何ですか?	会社の重要なお知らせ
Web パーツで何を行いますか?	会社の重要なお知らせを表示する

プロジェクトの作成が完了するのを待ちます。これには数分かかる場合があります。

ヒント

待機中に、いくつか警告が表示されます。これらは無視しても問題ありません。
npm install @microsoft/sp-office-ui-fabric-core コマンドを実行して、Office UI Fabric パッケージをインストールします。これは、アプリケーションカスタマイザーのスタイルを設定するために必要です。

開発証明書をインストールする

SharePoint Framework では、SharePoint Online でホストされているワークベンチを使用します。ここで、コードを Viva コネクションにデプロイする前にテストできます。コードをテストする場合は、Gulp を使用してローカル Web サーバーを起動します。 SharePoint Framework ワークベンチでは、ローカルサーバーからファイルを読み込むとテストを行うことができます。

ワークベンチがローカル開発サーバーからファイルを読み込むには、次の手順を使用して SharePoint Framework で提供される開発証明書を信頼します。

重要

開発証明書は、1 回だけコンピューターにインストールする必要があります。新規プロジェクトを作成する場合、SharePoint Framework は以前インストールされた証明書を使用します。既にこれを行っている場合は、これらの手順は省略できます。

ターミナルを開きます。
作業ディレクトリをプロジェクトフォルダーに変更します。
gulp trust-dev-cert コマンドを実行します。
画面に表示される手順に従って操作を行い、インストールを完了します。

アプリケーションカスタマイザーコードを編集する

プロジェクトを作成した後、次の手順では、アプリケーションカスタマイザーを拡張して、重要なアナウンスをリストから読み込み、以下のページのトッププレースホルダーに表示します。

コードエディターでプロジェクトを開きます。
コードエディターで、./src/extensions/importantCompanyAnnouncements/ ImportantCompanyAnnouncementsApplicationCustomizer.ts ファイルを開きます。
@microsoft/sp-application-base import ステートメントを拡張して、以下の PlaceholderContent と PlaceholderName を含めます。
```
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';
```
import { SPHttpClient } from '@microsoft/sp-http'; を追加します。
ImportantCompanyAnnouncementsApplicationCustomizer クラスでは、非公開の次の _topPlaceholder 変数を追加します。
```
private _topPlaceholder: PlaceholderContent | undefined;
```

イベントハンドラーを使用して onInit() メソッドを拡張し、以下のプレースホルダーをレンダリングします。

@override
public onInit(): Promise<void> {
  this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

  return Promise.resolve();
}

次のコードを使用して、「Stats」という名前の次の新しい _renderPlaceHolders プライベートメソッドを作成します。

private _renderPlaceHolders(): void {
  if (!this._topPlaceholder) {
    this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
      PlaceholderName.Top
    );

    if (!this._topPlaceholder) {
      console.error('The expected placeholder (Top) was not found.');
      return;
    }    
    this.context.spHttpClient
      .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Announcements')/items?$filter=Important eq 1&$select=Title`,
        SPHttpClient.configurations.v1,
        {
          headers: {
            'accept': 'application/json;odata.metadata=none'
          }
        })
      .then(response => response.json())         
      .then(announcements => {          
         const announcementsHtml = announcements.value.map(announcement =>
           `<li>${announcement.Title}</li>`);              
         this._topPlaceholder.domElement.innerHTML=`<div class="${styles.app}">
           <ul>${announcementsHtml.join('')}</ul></div>`;
      }).catch(error => console.log(error));
  }
}

前述のコードは、プレースホルダーをインスタンス化します。プレースホルダーが利用可能かどうかをチェックして、[アナウンス] 一覧から重要なアナウンスを取得します。最後に、取得したアナウンスをプレースホルダーの DOM 要素でレンダリングします。

/src/extensions/importantCompanyAnnouncements フォルダーに、次のコンテンツを含む ImportantCompanyAnnouncementsApplicationCustomizer.module.scss という名前の新しいファイルを追加します。
```
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.app {
  background-color: $ms-color-themePrimary;
  color: $ms-color-white;
  display: flex;
  font-size: 1.5em;   
  justify-content: center;

  ul {
    list-style: none;    
  }
}
```
まず、Fluent UI をインポートして、Microsoft 365 と一貫したスタイルを実現します。次に、CSS クラスを追加してアプリケーションカスタマイザーのスタイルを設定します。
ImportantCompanyAnnouncementsApplicationCustomizer.ts ファイルの上部で、作成したスタイルファイル ImportantCompanyAnnouncementsApplicationCustomizer.module.scss の import ステートメントを追加します。
```
import styles from './ImportantCompanyAnnouncementsApplicationCustomizer.module.scss';
```

ページでアプリケーションカスタマイザーをテストする

重要なアナウンスのためにアプリケーションカスタマイザーを構築し、プレビューするには、以下の操作を行います。

ターミナルで、gulp serve --nobrowser コマンドを実行します。 https://localhost:4321 でローカル Web サーバーが起動します。

警告

ターミナルに以下のような警告が表示される場合は、ローカル Web サーバーが開発証明書を読み込めなかったことを意味します。

警告 - [spfx-serve] HTTPS モードでサービスを提供する場合は、PFX 証明書パスまたは証明書パスとキーパスを指定するか、開発証明書を生成して信頼する必要があります。 SSL 証明書が指定されていない場合は、既定の自己署名証明書が使用されます。ブラウザーのセキュリティに関する警告が必要です。

この問題を解決するには、Ctrl+C を選択して Web サーバーを停止し、gulp trust-dev-cert コマンドを実行します。
コードエディターで src/extensions/importantCompanyAnnouncements/ImportantCompanyAnnouncementsApplicationCustomizer.manifest.json ファイルを開き、値をコピーします id 。アプリケーションカスタマイザーのローカルバージョンをテストするためのページデバッグ URL を作成するには、この値が必要です。
Web ブラウザーで、<Home site URL>/SitePages/home.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={"<id>":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{ }}} のページデバッグ URL に移動します。 <id> を、アプリケーションカスタマイザーのマニフェストからコピーした値に置き換えます。

ヒント

ホームサイトの URL は、前回の演習で [アナウンス] 一覧を作成した SharePoint サイトの URL です。
プロンプトが表示されたら、[デバッグスクリプトの読み込み] ボタンを選択して、アプリケーションカスタマイザーの読み込みを続行します。

ページの上部に重要なアナウンスが表示されるようになりました。

テストを停止するには、以下の操作を行います。

ページデバッグモードを無効にするには、<Home site URL>/SitePages/home.aspx?reset=true に移動します。

重要

デバッグモードを無効にせず、ローカル Web サーバーのみを停止する場合、次にホームサイトに移動すると、「ページはローカル Web サーバーでマニフェストを読み込めません」というエラーが表示されます。この問題を修正するには、ページ URL に ?reset=true を追加します。これにより、デバッグモードが無効になります。
開発 Web サーバーを停止するには、ターミナルに戻って Ctrl+C を選択します。

Viva コネクションにアプリケーションカスタマイザーをデプロイする

SharePoint Framework を使用することにより、重要なアナウンス アプリケーションカスタマイザーをビルドしました。次に、Viva コネクションにデプロイします。

Gulp を使用して、以下のように Web パーツをアプリにパッケージ化します。

作業ディレクトリがプロジェクトのルートフォルダーであるターミナルに移動します。
リリースモードでソリューションをビルドするには、gulp bundle --ship コマンドを実行します。
ソリューションのリリースモードパッケージを作成するには、gulp package-solution --ship コマンドを実行します。 ./sharepoint/solution/spfx-company-announcements-appcustomizer.sppkg アプリパッケージファイルが作成されます。

次に、このアプリパッケージを SharePoint アプリカタログに展開します。テナントにアプリカタログがない場合は、それを作成します。

Web ブラウザーで、[Microsoft 365 管理センター]に移動します。
サイドメニューから、[すべて表示] を選択します。
[管理センター] のリストから、[SharePoint] を選択します。
SharePoint 管理センターで、サイドメニューから [その他の機能] を選択します。
[アプリ] セクションで [開く] ボタンを選択すると、アプリ管理ページに移動します。
[アプリ] で、[アプリカタログ] を選択します。
サイトが開いたら、アプリカタログが既に存在するため、さらに手順をスキップできます。

アプリカタログが存在しない場合は、作成を求めるメッセージが表示されます。
オプションの一覧から、[新しいアプリカタログサイトを自動的に作成する] を選択し、[OK] を選択します。

アプリケーションを以下のアプリカタログに展開します。

Web ブラウザーで、SharePoint アプリカタログに移動します。
カタログのサイドメニューで、[SharePoint 用アプリ] を選択します。
spfx-company-announcements-appcustomizer.sppkg ファイルをリストにドラッグします。
SharePoint がパッケージの確認と展開を要求します。 [展開] を選択して、パッケージを SharePoint サイトにインストールできるようにします。

アプリカタログにアプリが正常に展開されると、ホームサイトに次のアプリをインストールする必要があります。

Web ブラウザーで、ホームサイトに移動します。
トップメニューから、[設定] (歯車) アイコンを選択します。
[SharePoint] セクションから、[アプリの追加] リンクを選択します。
[マイアプリ] ページの検索ボックスで、「会社」と入力して spfx-company-announcements-appcustomizer-client-side-solution アプリを検索します。
[追加] ボタンを選択します。

ホームサイトのすべての SharePoint ページに [重要な会社のアナウンス] アプリケーションカスタマイザーが表示されるようになりました。アプリをテストして、Viva コネクションでどのように表示されるかを確認します。

Microsoft Teams デスクトップクライアントを開くか、Web ブラウザーで Teams サイトに移動します。
Viva コネクションアプリを開き、ホームサイトのホームページの上に [重要な会社のお知らせ ] バナーが表示されていることを確認します。

続行

演習 - アプリケーション カスタマイザーを使用して Viva コネクション デスクトップを拡張する

新しいソリューションを作成する

開発証明書をインストールする

アプリケーション カスタマイザー コードを編集する

ページでアプリケーション カスタマイザーをテストする

Viva コネクションにアプリケーション カスタマイザーをデプロイする

フィードバック

演習 - アプリケーションカスタマイザーを使用して Viva コネクションデスクトップを拡張する

アプリケーションカスタマイザーコードを編集する

ページでアプリケーションカスタマイザーをテストする

Viva コネクションにアプリケーションカスタマイザーをデプロイする