Power Virtual Agents と Power Platform の他のサービスとを簡単に連携する方法 Vol.3

# 前回 (Vol.2) からの続きです
[Vol.2](https://qiita.com/yugoes1021/items/10720538a67d245df0b0) からの続きです。前回を読んでいない方はぜひ前回からどうぞ！

[Power Virtual Agents と Power Platform の他のサービスとを簡単に連携する方法 Vol.1](https://qiita.com/yugoes1021/items/315c9caa9219cbc11a5a)
[Power Virtual Agents と Power Platform の他のサービスとを簡単に連携する方法 Vol.2](https://qiita.com/yugoes1021/items/10720538a67d245df0b0)

前回は

1. **Power BI Service** でストリーミングデータセットを作る
1. **Power Automation** でソリューションの中に **Flow** を作り、その中でストリーミングデータセットにデータを追加するようにしておく
1. **Power Virtual Agents** でボットを作る
1. ボットの処理で **Action** からフローを指定する
1. ボットの作成が終わったら、カスタムとしてデプロイする（発行）
1. **html** をコピーしておく
1. **Power BI Service** でダッシュボードを作成し、**Web** コンテンツに **html** を貼り付ける
1. **Power Apps** に埋め込む

の 5 まで終わりました。今回は 6. **html** をコピーしておく からです。

# 6. **html** をコピーしておく
https://powerva.microsoft.com/ を開いてください。
左側のメニューで **[Channels]** を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/2d7db74c-3109-c87c-e95f-8fd00cb93872.png)
**Custom website** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/eee8969d-48f2-83b5-34b4-2f4e5a71ae73.png)
**[Embed code]** をコピーするため **[Copy]** をクリックし、メモ帳などにコピーしておきます。

# 7. **Power BI Service** でダッシュボードを作成し、**Web** コンテンツに **html** を貼り付ける
[Power BI Service](https://app.powerbi.com/) を開きます。

## 7-1. レポートを作成する
Vol.1 で作成した **ストリーミングデータセット** からレポートを作成します。Vol.1 で作成した **ストリーミングデータセット** があるワークスペースを開いて **[データセット]** の一覧を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/ba75b6fc-105d-f112-eba5-5c62221c669a.png)
対象のストリーミングデータセット（私の場合は JankenQiita) の右側にある **[レポートの作成]** ボタンをクリックします

### カード：対戦数
レポートの作成画面で [視覚化] - [カード] をクリック
次に **[フィールド]** に **[DateTime]** を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/31213edd-10da-6585-a418-526eb42bef20.png)
カードに日付が表示されるので、ここは件数を表示するように変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/cc0dd9e0-201e-f073-0766-e43d4aff750b.png)
フィールドに選択してる **[DateTime]** の右側の下矢印をクリックし **[カウント]** を選択します
これでカードにカウントが表示されるようになりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/57ba46fe-aa89-6e47-aae9-b567d7258050.png)
書式設定で **[カテゴリラベル]** をオフにして、**[タイトルテキスト]** に**「対戦数」**と入力します。
### テーブル：戦歴
1. **[視覚化]** - **[テーブル]** をクリック
2. **[DateTime]**, **[PlayerJanken]** を選択する
3. **[DateTime]** 列の列名をクリックし、降順にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/3d5fe2aa-aa61-4925-1d76-91761b902d4c.png)

### ドーナツグラフ：Player の選択
1. **[視覚化]** - **[ドーナツグラフ]** をクリック
2. **[凡例]** に **[PlayerJanken]* を選択
3. **[値]** に **[DateTime]** を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/b334c36e-b38b-f9ff-bc3b-fdc7d307a1ca.png)

これでレポートに必要なものは揃ったので、レイアウトや文字サイズ、色などをお好みで調整して、保存しておきます。保存は右上の **[保存]** ボタンをクリックしてください。
## 7-2. ダッシュボードに３つのビジュアルをピン留めする
ビジュアルを選択状態にすると上部に **[ビジュアルをピン留めする]** というボタンが表示されます。これをクリックするとダッシュボードにビジュアルをピン留めすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/a2be9659-16bb-4981-b2c2-b5638ddfa7b7.png)
作成した３つのビジュアルすべてピン留めしておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/a99174b6-907e-4887-fac4-c9035aac22a7.png)
この画面が表示されるので **[新しいダッシュボード]** を選択しダッシュボード名を入力します。私の場合は **JankenQiita** です。**[ピン留め]** ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/dfe159b6-5368-ddfb-35d6-8bfd068cb807.png)
２個目以降のビジュアルは **[既存のダッシュボード]** を選んで、**JankenQiita** を選んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/5daafc4b-70a3-34ec-9a3c-3a97da9106f0.png)
作成したダッシュボードに移動すると、こんな感じになっているはずです。各ビジュアルはビジュアルの真ん中上部をドラッグ＆ドロップすることで移動、右下にマウス持っていきドラッグ＆ドロップすることで移動したり、サイズを変更することが可能です。調整するとこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/82e67173-5b79-521c-0060-b97a5ac77378.png)

## 7-3. Web コンテンツ タイルの追加
さて、ここまできたらようやく **Bot** を **Power BI Dashboard** に埋め込むことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/321c928d-495f-79ed-395a-be5df4f5429a.png)
…から **[タイルの追加]** をクリックします
**[Web コンテンツ]** を選択した状態で **[次へ]** をクリックしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/8e951195-0f7a-1aeb-ca73-3a307acb0135.png)

**Web コンテンツ** の設定については **Microsoft 公式ドキュメント** を確認しておきましょう
**画像やビデオなどをダッシュボードに追加する**
https://docs.microsoft.com/ja-jp/power-bi/service-dashboard-add-widget#tips-for-embedding-web-content
こちらのドキュメントを見ると、html の `<iframe></iframe>` が使用可能なのが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/0958328a-54d7-508b-1cff-eaeb51c6d4b5.png)
**Power Virtual Agents** の **[Channels]** - **[Custome website]** の設定を見ると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/21833cb6-127c-2a58-ce62-96b66ffbc717.png)
と `<!DOCTYPE html><html><body><iframe>...</iframe></body></html>` となっているので、中の `<iframe>...</iframe>` 部分だけあれば大丈夫です。該当部分をコピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/72398766-d169-00f5-df73-cf9546f0c086.png)


**[Web コンテンツ タイルの追加]** - **[埋め込みコード]** に `<iframe>...</iframe>` を貼り付けます。
そうすると **Bot** が表示されます。ついでに **[タイトル]** に「じゃんけんしよーぜ！ボット」と入力しておきます。

**！注意！**
**ここで注意です。この記事を書いていて気付いたのですが、Power BI ダッシュボードのタイルには全てタイトルを付けておいてください！
タイトルがないと、Power Apps でタイルを追加しようとする際に選択ができません！！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/c23b3992-0d7d-07b8-e437-e832d06e830c.png)
タイルに **[タイトル]** を設定するにはタイルの右上（上の画像の赤枠で囲んだところ）をクリックし **[詳細の編集]** をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/1c9e7cda-3328-3c5e-06be-708b776d0552.png)
右側から詳細の設定が表示されるので、**[タイトル]** に入力してください。


**Bot** の動作確認をしてみてください。正常に動けば OK です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/5838c155-e1d6-0b85-ec2b-cbec79eaf514.png)

# 8. Power Apps に埋め込む
**Power Apps* には **Power BI** のダッシュボードのタイル（各ビジュアル）を参照し、アプリに埋め込むための **Power BI タイルコントロール** があります。これを利用するとことで、先ほど **Power BI ダッシュボード** に埋め込んだ Bot を **Power Apps** に埋め込むことが可能です。

## 8-1. Power Apps を開く
https://make.powerapps.com/ を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/1a58a46a-81a6-f75f-558c-f26adb672c36.png)
**[+ 新しいアプリ]** - **[キャンバス]** をクリックする
ブラウザの別タブで **[Power Apps Studio](https://jp.create.powerapps.com/)** が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/c55c3d1d-9f87-711e-71e5-b2ababa3b070.png)
**[携帯電話レイアウト]** をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/86ed0dae-c8ac-164c-0d35-fa58518be9f6.png)
**[挿入]** - **[グラフ]** - **[Power BI タイル]** を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/68e7b61e-48cd-0eee-23f1-3b12dfbce0d8.png)
ワークスペース、ダッシュボート、タイルを選択します。まずは **[対戦数]** を選びます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/b4dec707-cfcd-5183-5d56-223b370da9fc.png)
もう一つ **Power BI タイル** を追加して、**じゃんけんしよーぜ！ボット** を選択します。
ここまでくればあとは **動作確認** です。**Bot** のコントロールの上で **Alt** を押しながらクリックしてください。そうするとこの画面でデバッグすることが可能です。
**Bot** の下部に入力ができるようになるので、**Bot** の動作確認をしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/834a90e5-a6bf-d043-4ea3-964cb6a605ae.png)

# 最後に
はい、Vol.3 までお付き合いいただきありがとうございました。いかがでしょうか？
本当に **コーディングを一切することなく** 、ここまでできることがご理解いただけたかと思います。
大事なのは **Power Platform** でここまでできることを知った上で、

- 自社の場合ならどうするのか？
- クライアントの場合ならどうするのか？

**これをきちんと考えられること** です。

皆さんにとって何かのヒントになれば、幸いです！！
ありがとうございました。