演習 - Web パーツを使用して Viva コネクションデスクトップを拡張する - Training

13 分

この演習では、SharePoint リストからデータを取得する SharePoint Framework Web パーツを構築します。次に、Web パーツを Viva コネクションデスクトップに追加します。

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

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

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

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

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

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

ヒント

待機中に、いくつか警告が表示されます。これらは無視しても問題ありません。

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

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

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

重要

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

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

Web パーツの編集

プロジェクトを作成した後、次の手順では、Web パーツを拡張して、会社のアナウンスをリストから読み込み、ページに表示します。

コードエディターでプロジェクトを開きます。
コードエディターで、./src/webparts/companyAnnouncements/CompanyAnnouncementsWebPart.ts ファイルを開きます。
ファイルの上部セクションに、import { SPHttpClient } from '@microsoft/sp-http'; を追加します。
render メソッドのコンテンツをクリアします。
render メソッドで、次のコードブロックを追加します。
```
this.context.spHttpClient
  .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Announcements')/items?$select=Title,Description,Important`,
    SPHttpClient.configurations.v1,
    {
      headers: {
        'accept': 'application/json;odata.metadata=none'
      }
    })
  .then(response => response.json())
  .then(announcements => {
    // todo: display results
  })
  .catch(error => this.context.statusRenderer.renderError(this.domElement, error));
```
spHttpClient を使用して、前に作成した [アナウンス] リストからアナウンスの一覧を取得します。 spHttpClient は、標準 fetch API をラップし、SharePoint API を呼び出すために認証されます。

API URL では、OData $select パラメーターを使用して取得するプロパティの一覧を指定します。これらのプロパティは、[アナウンス] リストの列と一致します。

SharePoint API を呼び出している間に、応答のメタデータを抑制する accept ヘッダーも設定します。これにより、ネットワーク上で送信されるデータ量を最小限に抑えることができます。

API から応答を受け取った後、その JSON 応答を取得します。 API の呼び出し中にエラーが発生した場合は、Web パーツが公開しているヘルパーメソッドを使用して、Web パーツのコンテンツ領域に表示されます。
リストからアナウンスを取得した後、次の手順としてそれらを Web パーツに表示します。最後の then 句で、// todo: display results コメントを次のブロックに置き換えます。
```
const announcementsHtml = announcements.value.map(announcement =>
  `<dt${announcement.Important ?
    ` class="${styles.important}"` : ''}>${announcement.Title}</dt>
  <dd>${announcement.Description}</dd>`);

this.domElement.innerHTML = `
<div class="${styles.companyAnnouncements}">
  <div class="${styles.container}">
    <div class="${styles.title}">Announcements</div>
    <dl>
      ${announcementsHtml.join('')}
    </dl>
  </div>
</div>
`;
```
announcement 変数には、リストからのアナウンスの配列を保持する value プロパティが含まれます。各アナウンスに対して、dt と dd 要素にアナウンスの内容を記述した HTML 文字列を作成します。次に、アナウンスを 1 つの HTML 文字列に結合し、Web パーツの DOM 要素に表示します。

ヒント

可能な場合は、汎用的な div 要素や span 要素ではなく、常にセマンティック HTML を使用する必要があります。見出し (h1-h6) や定義リスト (dl) などのセマンティック HTML を使用すると、スクリーンリーダーや他のアクセシビリティツールを使用するユーザーは、ページのコンテンツにより簡単に従うことができます。
変更を保存するには [ファイル>保存] を選択するか、キーボードで [Ctrl + S]キーを押します (macOS の場合は CMD + S)。

Web パーツのコンテンツのスタイルを設定する

Web パーツでアナウンスを表示するために、標準の dl、dt、および dd HTML 要素を使用しました。重要なアナウンスを強調表示する、important という名前のカスタム CSS クラスも含まれます。 CSS スタイルを追加して、アナウンスや重要なアナウンスの表示方法を書式設定しましょう。

コードエディターで、./src/webparts/companyAnnouncements/CompanyAnnouncementsWebPart.module.scssファイルを開きます。
ファイルのコンテンツを次のコードで置き換えます。
```
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.companyAnnouncements {
  .container {
    @include ms-Grid;
    color: var(--primaryText, #323130);
  }

  .title {
    @include ms-fontSize-18;
    @include ms-fontWeight-semibold;
  }

  dt {
    @include ms-fontWeight-bold;
    @include ms-fontSize-14;
    margin-top: 1rem;

    &.important {
      color: $ms-color-red;
    }
  }

  dd {
    margin-left: 0;
  }
}
```
まず、Fluent UI をインポートして、Microsoft 365 と一貫したスタイルを実現します。次に、Web パーツのタイトルに CSS クラスを追加します。クラスでは、Fluent UI でフォント定義を参照します。次に、アナウンスの表示に使用した dt 要素と dd 要素のスタイルを定義します。

Web パーツのタイトルで行ったのと同じように、Fluent UI スタイルを参照して一貫性を確保します。重要なアナウンスを強調表示するには、Fluent UI で定義された赤字のテキストを使用する important という名前の追加のクラスを定義します。
変更を保存するには [ファイル>保存] を選択するか、キーボードで [Ctrl + S]キーを押します (macOS の場合は CMD + S)。

Web パーツをテストする

会社のアナウンスのための Web パーツをビルドしてプレビューするには、以下の操作を行います。

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

警告

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

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

この問題を解決するには、[Ctrl+C] キーを選択して Web サーバーを停止し、gulp trust-dev-cert コマンドを実行します。
Web ブラウザーで、<Home site url>/_layouts/workbench.aspx のワークベンチに移動します。ホームサイトの URL は、前回の演習で [アナウンス] 一覧を作成した URL です。

警告

ワークベンチを開いた後、次のエラーが表示された場合は、ローカル Web サーバーが開発証明書を読み込めなかったことを意味します。

Web パーツはツールボックスに表示されません。 Web パーツプロジェクトで "gulp serve" が実行されていることを確認してください。 "gulp serve" が実行されたら、ページを更新してください。

この問題を解決するには、Ctrl+C を選択して Web サーバーを停止し、gulp trust-dev-cert コマンドを実行します。
新しく作成した Web パーツをキャンバスに追加するには、[+] ボタンを選択してツールボックスを起動します。
検索バーに「会社のアナウンス」と入力し、Web パーツを選択します。

すべての手順を正常に実行した場合は、ワークベンチに表示された [アナウンス] リストにアナウンスが表示されます。

重要として選択されたアナウンスのタイトルは赤で表示されます。
開発 Web サーバーを停止するには、ターミナルに戻って [Ctrl+C] を選択します。

Web パーツを Viva コネクションにデプロイする

SharePoint Framework を使用して、[会社のアナウンス] Web パーツをビルドしました。これで、Viva コネクションにデプロイできます。

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

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

package-solution タスクは、[./sharepoint/solution] フォルダーに spfx-company-announcements-webpart.sppkg という名前のアプリパッケージファイルを作成しました。このファイルがアプリパッケージです。次に、すべての Viva コネクション拡張機能を含む SharePoint アプリカタログにこのパッケージをデプロイします。

テナントにアプリカタログがない場合は、それを作成します。

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

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

アプリケーションをカタログに展開するには、以下の操作を行います。

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

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

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

Company のアナウンス Web パーツをサイト上の任意の SharePoint ページに追加できるようになりました。ホームサイトのホームページで、Web パーツを追加するには、以下の操作を行います。

Web ブラウザーで、[ホームサイト] に移動します。
ホームページに移動していることを確認するには、上部のメニューから [ホーム] を選択します。
ページを編集するには、ページメニューから [編集] を選択します。
Web パーツを配置するページ内の領域を選択します。
[+] オプションを選択してツールボックスを開きます。
会社のアナウンス Web パーツを検索します。
Web パーツを選択してページに追加します。
ページメニューから [再発行] を選択します。

[会社のアナウンス] Web パーツがホームサイトのホームページに表示されるようになりました。アプリをテストして、Microsoft Teams の Viva コネクションでこの Web パーツがどのように表示されるかを確認します。

Microsoft Teams デスクトップクライアントを開くか、Web ブラウザーで [Teams サイト] に移動します。
Viva 接続アプリを開き、会社のお 知らせ Web パーツにホームサイトのホームページのすべてのお知らせが表示されることを確認します。

続行

演習 - Web パーツを使用して Viva コネクション デスクトップを拡張する