Web パーツを使用して Viva コネクション デスクトップを拡張する
Viva コネクションは、Microsoft 365 テナントのホーム サイトとして選択された SharePoint サイトによってサポートされます。 ホーム サイトは、ユーザーがテナントのルート URL (https://contoso.sharepoint.com など) に移動した場合に表示される既定のサイトでもあります。
SharePoint サイトとは、ユーザーが Web ページを作成したり、ドキュメント、画像、ビデオなどのファイルを保存したりできる場所です。 エディターは、Web ページを作成するときに、Web パーツを使用してこれらのページをカスタマイズできます。 Web パーツは、画像、ファイル、ビデオ、安全な API から取得した動的コンテンツ、さらには完全なアプリケーションをページに追加するための文書パーツです。
最新の Web テクノロジを使用して、組織に合わせたカスタム Web パーツをビルドすることができます。 組織の管理者による展開後、これらの Web パーツは、組織内のすべてのユーザーが自分のサイトで使用できるようになります。
Web パーツは、Viva コネクション用に構築できる数少ない種類の拡張機能の 1 つです。 次のセクションでは、Viva コネクションを拡張するときに考慮する必要がある Web パーツの最も重要な特性について説明します。
重要
Web パーツは、Viva コネクション デスクトップ エクスペリエンスでのみ機能します。 モバイル Viva コネクション アプリでは機能しません。
コンテンツ エディターによる Web パーツのページへの配置
Web パーツは、ページ エディターがページに追加できる文書パーツです。 ページで作業する場合、編集者は使用可能な Web パーツのどれでも選択してページに追加できます。 開発者がアプリケーションをビルドする際に再利用可能なコンポーネントを使用するのと同じように、Microsoft 365 のページ エディターは Web パーツを使用して豊富なページと動的ダッシュボードを作成できます。
ページ エディターは、ページのコンテンツ領域に Web パーツを追加できます。 また、同じ Web パーツの複数のインスタンスをページに追加することもできます。 たとえば、同じ Web パーツを使用して複数のビデオを埋め込んだり、複数の場所の天気予報を表示したりできます。
Web パーツの使用方法や配置場所を推測する必要はありません。 代わりに、SharePoint ページがサポートする構成で動作することを確認します。
コンテンツ エディターによる Web パーツの構成
Web パーツに固有のもう 1 つの特徴は、構成可能であることです。 たとえば、編集者がページにビデオを埋め込む Web パーツを作成したとします。 Web パーツが特定のビデオを再生するのではなく、Web パーツを構成可能にすることで、Web パーツをページに追加する場合に再生するビデオをエディターが選択できるようにします。
Web パーツをビルドする場合、開発者は、エディターが構成できるプロパティを決定します。 これらのプロパティは、Web パーツの構成時にエディターに表示されるプロパティ ウィンドウで公開されます。
必ずしも Web パーツを構成可能にする必要はありませんが、考慮する必要があります。 Web パーツを構成可能にすると、より柔軟になります。 エディターは、Microsoft 365 テナント内の SharePoint サイト間でそれらを使用できます。
Web パーツの HTML と CSS は、責任を持って管理してください
Webパーツを開発する場合は、その UI に対して責任があります。 Web パーツのコードでは、Web パーツの HTML を追加することになる DOM 要素にアクセスします。 使用できる HTML タグや UI の実装方法に制限はありませんが、次の推奨事項は、ユーザーが気に入る Web パーツを構築するのに役立ちます。
- すべての Web パーツで同じデザイン言語を使用する必要があります。 コンテンツ エディターは、Web パーツを使用して豊富な sharepoint ページをビルドします。 通常、各ページには複数の Web パーツがあります。 同じデザイン言語を使用すると、ページが読みやすくなります。 また、Web パーツは、Microsoft 365 で提供される標準の Web パーツと同じ方法で動作するため、使いやすくなります。 Fluent UI は、Microsoft 365 で使用されているデザイン言語です。
- Web パーツは、テーマをサポートする必要があります。 SharePoint サイト所有者は、テーマを使用してサイトの外観をコントロールすることができます。 Microsoft 365 で提供される Web パーツは、この変更を採用し、UI にテーマ カラーを使用しています。 カスタム Web パーツを作成する場合は、テーマにも対応している必要があります。 ユーザーが、コンピューターの設定でハイコントラストや反転テーマ (暗い背景に明るい文字が表示される) を使用する場合は、特に重要です。
応答性の高い UI を意識したビルド
エディターは、Web パーツをページのどこにでも配置できます。 ページを作成する場合、セクションや Web パーツを自由に組み合わせて、伝えたいストーリーを表現することができます。
閲覧者は、大きなモニターから携帯電話までのさまざまなデバイス上のページにアクセスします。 設計上、SharePoint のページは応答性の高いデザインを使用し、利用可能なスクリーン サイズに合わせて、コンテンツの読みやすさを確保しています。 そのメリットを得るには、ページ上のすべての Web パーツも応答性の高いデザインをサポートする必要があります。 応答性の高いデザインを意識して Web パーツをビルドすると、あらゆるデバイスで Microsoft 365 とシームレスに統合されます。
Web パーツ同士での接続が可能です
Web パーツ特有のデザインの別の側面として、パーツ同士を接続できます。 たとえば、イベントの一覧を作成し、選択したイベントの場所をマップに表示するとします。 この目的のために特別に Web パーツを作成するのではなく、2 つの汎用 Web パーツを作成することができます: 1 つはイベントの場所を表示し、もう 1 つはマップを表示します。
両方の Web パーツが接続をサポートしている場合、リスト Web パーツは、選択したイベントに関する情報をマップ Web パーツに渡します。 位置情報を受信すると、マップ Web パーツは正確な場所を地図上に表示します。 両方の Web パーツは汎用的であるため、さまざまなシナリオで使用できます。 また、ページ上に互いに独立して配置することもできます。これにより、エディターはページを作成するときに柔軟性を高めることができます。
推奨事項
Viva コネクション デスクトップ エクスペリエンスを拡張する必要があり、コンテンツ エディターがページ上のどこに配置するかを決定できるようにする必要がある場合は、Web パーツを構築することを検討してください。 地図やビデオ プレーヤーなどの汎用ウィジェットをコンテンツ エディターに提供し、必要に応じて構成できるようにする場合にも、Web パーツが推奨ソリューションです。
次の演習では、SharePoint リストから情報を取得してページに表示する Web パーツをビルドします。 ソリューションをテストし、Viva コネクションにデプロイします。