2021年12月1日開催の Japan M365 Dev User Group 勉強会のスライドです。 Viva Connections アプリの開発についてのハンズオン資料になります。

1. #M365Dev #jpm365dcd
SharePoint Framework による
Viva Connections アプリの開発
及川 紘旭
Microsoft MVP for Office Development
2021年12月1日

2. #M365Dev #jpm365dcd
目次
◼ 自己紹介
◼ Viva Connections を知ろう
◼ Microsoft Viva とは
◼ Viva Connections とは
◼ Adaptive Card Extension とは
◼ Viva Connections アプリを開発してみよう
◼ Viva Connections の設定
◼ Viva Connections アプリの作成
◼ Viva Connections アプリのデバッグ
◼ Viva Connections アプリのデプロイ
◼ まとめ
© SharePoint Developer
sharepoint.orivers.jp
2

3. #M365Dev #jpm365dcd
自己紹介
◼及川 紘旭 (おいかわ ひろあき)
◼Microsoft MVP
for Office Servers and Services 2007年10月～2016年9月
for Office Development 2016年10月～
◼アドバンスド・ソリューション株式会社
代表取締役社長 兼 SharePoint 開発担当
◼ブログ SharePoint Developer
(http://sharepoint.orivers.jp)
◼Twitter @HiroakiOikawa
© SharePoint Developer
sharepoint.orivers.jp
3

4. #M365Dev #jpm365dcd
Viva Connections を
知ろう
今回のお題である Viva Connections が何
者なのかを説明します。
4
© SharePoint Developer
sharepoint.orivers.jp

5. #M365Dev #jpm365dcd
Microsoft Viva とは
Microsoft Viva は、Microsoft 365 に蓄積されたデータをもとに、ユーザーやチームの生産性向上に役立つ
情報やツールを集約、提供するプラットフォームです。
© SharePoint Developer
sharepoint.orivers.jp
5
Microsoft Viva スイート (¥980 ユーザー/月)
※Connections は Microsoft 365 のライセンスに含まれています
Connections
パーソナライズされた情報
にアクセスするためのゲート
ウェイ。
組織内の重要な情報やタ
スク、M365内の関連性の
あるニュースや会話などに
素早くアクセスするためのア
プリとアプリを管理する仕組
みを提供。
Insights
従業員、マネージャー、リー
ダーのそれぞれの役割に合
わせて、仕事での過ごし方
に関するデータを要約し、
より効率的に健康的に仕
事をするための方法を提
案するサービス。
Topics
組織内のさまざまな用語に
ついて、その意味や、用語
に関連する組織内の有識
者、サイトやドキュメントを
抽出するサービス。
Learning
Microsoft やサードパー
ティが提供する学習コンテ
ンツへのアクセス、従業員
の学習状況の確認などが
行えるサービス。
企業独自のコンテンツを追
加運用することも可能。

6. #M365Dev #jpm365dcd
Viva Connections とは
Viva Connections は、Viva Connections Teams アプリを介してユーザーに Viva ダッシュボードを
提供します。
Viva ダッシュボードにはプリセットのカードの他、ACE (Adaptive Card Extension) で実装された独
自のカードを配置、利用することができます。
© SharePoint Developer
sharepoint.orivers.jp
6
デスクトップ版 モバイル版

7. #M365Dev #jpm365dcd
Adaptive Card Extension とは
◼ ACE (Adaptive Card Extension) の特徴
⚫ SPFx (SharePoint Framework) v1.13 で追加された新しいコンポーネント
⚫ Viva ダッシュボードと SharePoint ページに対応
⚫ Adaptive Card フレームワークをベースにした宣言型 JSON スキーマによる UI 生成
⚫ コンポーネントの外観はデバイスに合わせて SPFx により最適化されるため、ロジック開発に注力可能
◼ ACE の要素と実装方法
© SharePoint Developer
sharepoint.orivers.jp
7
カードビュー
クイックビュー
カードビューの UI
カードビューに表示するデータ
クイックビューの UI
クイックビューに表示するデータ
カードビュークリック時の動作
要素
実装不可(変更不可)
予め決められたアクションから選択
SPFx コンポーネントとしてコーディング
Adaptive Card JSON テンプレート
SPFx コンポーネントとしてコーディング
実装方法
クイックビューのボタンクリック時の動作 SPFx コンポーネントとしてコーディング

8. #M365Dev #jpm365dcd
Viva Connections
アプリを開発してみよう
Viva Connections アプリを利用するための環
境構築とアプリ開発の方法を紹介します。
8
© SharePoint Developer
sharepoint.orivers.jp

9. #M365Dev #jpm365dcd
Viva Connections の設定 1/2
詳細手順は docs を参照
① ホームサイトとして使用するモダンサイトを作成
② SharePoint 管理センターでホームサイトを設定
1. SharePoint 管理センター > 設定 > ホームサイト
2. [使用するサイトの URL] に①で作成したサイトの URL を指定
③ ホームサイトでグローバルナビゲーションを設定
1. ホームサイト > 設定 > グローバルナビゲーション
2. [グローバルナビゲーションを有効にする] をオンにする
④ ホームサイトで Viva コネクションを設定
1. ホームサイト > 設定 > Viva コネクションのセットアップ
2. [ダッシュボードを作成] をクリック
© SharePoint Developer
sharepoint.orivers.jp
9

10. #M365Dev #jpm365dcd
Viva Connections の設定 2/2
詳細手順は docs を参照
⑤ ダッシュボードエディターにてダッシュボードを作成
⑥ ホームサイトに “Viva コネクションのダッシュボードアプリ” を配置
⑦ Teams 管理センターで Viva Connections アプリのブロックを解除
1. Teams 管理センター > アプリを管理
2. “Viva Connections” を検索し、[許可] をクリック
⑧ Teams 管理センターで Viva Connections アプリをピン留めされたアプリとして追加
1. Teams 管理センター > セットアップポリシー > グローバル (組織全体の既定値)
2. [ピン留めされたアプリ] の [アプリを追加] をクリックし、”Viva Connections” を追加
※⑧設定後、Teams アプリに設定が反映されるまで時間がかかります。
© SharePoint Developer
sharepoint.orivers.jp
10

11. #M365Dev #jpm365dcd
Viva Connections アプリの作成
① SharePoint Framework 開発環境を構築
⚫ こちらのブログを参考に環境構築
② プロジェクトを作成
Visual Studio Code のターミナルから以下のコマンドを実行 (緑字箇所を入力)
※大量のファイルがダウンロードされるため通信環境の良いところで実行してください。3分程度で処理が完了します。
© SharePoint Developer
sharepoint.orivers.jp
11
yo @microsoft/sharepoint --package-manager yarn
? What is your solution name? VivaSampleApp
? Only SharePoint Online (latest) is supported. For earlier versions of SharePoint (2016 and 2019) please use the 1.4.1 version of the
generator. SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any
feature deployment or adding apps in sites? N
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in
the tenant? N
? Which type of client-side component to create? Adaptive Card Extension
? Which template do you want to use? Primary Text Template
? What is your Adaptive Card Extension name? VivaSampleApp
? What is your Adaptive Card Extension description? VivaSampleApp description

12. #M365Dev #jpm365dcd
Viva Connections アプリのデバッグ 1/2
① Hosted workbench URL の指定
Visual Studio Code で .vscode/launch.json ファイルを開き、”Hosted workbench” の “url” に以下の URL を
セットし保存する
https://[ホームサイトアドレス]/_layouts/15/workbench.aspx
?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
② 開発用証明書の作成
Visual Studio Code のターミナルから以下のコマンドを実行
③ プロジェクトをデバッグ実行
Visual Studio Code のターミナルから以下のコマンドを実行
© SharePoint Developer
sharepoint.orivers.jp
12
gulp trust-dev-cert
gulp serve --nobrowser

13. #M365Dev #jpm365dcd
Viva Connections アプリのデバッグ 2/2
④ デバッグ実行
1. Visual Studio Code のアクティビティバーから [実行とデバッグ] をクリックし、[Hosted workbench] を選択した状態
で [▶] をクリック
2. サイトが開くので資格情報を入力しログイン ⇒デバッグできないエラーが出るが無視
⑤ ローカル Web サーバーにアクセス
1. ④で開かれたブラウザにてタブを追加し以下の URL にアクセス
https://localhost:4321
2. 証明書エラーが表示されるが無視してページを開く
⑥ 改めてサイトを開く
1. ④で開いたブラウザのタブを再読み込み
2. “スクリプトのデバッグを許可しますか？” は、[デバッグスクリプトを読み込む] を選択
⑦ ページにデバッグ対象アプリを配置
Web パーツのデバッグ時と同様に、ページにデバッグ対象となるアプリを配置しプレビューモードでデバッグを実施
© SharePoint Developer
sharepoint.orivers.jp
13

14. #M365Dev #jpm365dcd
Viva Connections アプリのデプロイ 1/2
① アプリパッケージを作成
⚫ Visual Studio Code のターミナルから以下のコマンドを実行
② アプリカタログにパッケージファイルを配置
1. アプリカタログサイトに①で作成されたパッケージファイル viva-sample-app.sppkg ファイルをアップロード
2. アプリカタログサイトが未作成の場合は、docs を参考にアプリカタログサイトを作成した後、パッケージファイルをアップロード
する
③ ホームサイトにアプリを追加
1. ホームサイト > 設定 > アプリの追加
2. [viva-sample-app-client-side-solution] の [追加] ボタンをクリックしアプリを追加
© SharePoint Developer
sharepoint.orivers.jp
14
gulp bundle --ship
gulp package-solution --ship

15. #M365Dev #jpm365dcd
Viva Connections アプリのデプロイ 2/2
④ ダッシュボードにアプリを追加
1. ホームサイト > 設定 > Viva コネクションのセットアップ > ダッシュボードを表示
2. ページを編集モードにして、[カードを追加] をクリックし、”VivaSampleApp” をクリック
3. [再発行] をクリックしてダッシュボードを保存
© SharePoint Developer
sharepoint.orivers.jp
15

16. #M365Dev #jpm365dcd
まとめ
今回のセッションでは以下の内容を紹介しました。
◼ Microsoft Viva の概要
◼ Viva Connections アプリは ACE で実装された SPFx のアプリであること
◼ Viva Connections アプリの作成、デバッグ、デプロイ手順
Microsoft Learn には、Viva Connections アプリの開発に関するモジュール
が掲載されているので、実践に向けて学習しましょう。
© SharePoint Developer
sharepoint.orivers.jp
16
・Microsoft Viva コネクションの使用を開始する
・アダプティブカード拡張機能を使用してMicrosoft Viva コネクションを拡張する
Microsoft Learn おすすめモジュール
アンケートに
ご協力ください