20230520_ヒットアンドブロー(HIT&BLOW)をPower Virtual Agentsで作ってみた

ヒットアンドブロー(HIT&BLOW)を Power Virtual Agentsで 作ってみた Japan Power Platform Game Builders JPPGB #5 2023/5/20 1

自己紹介 • 名前： わたるふ • Twitter： @wataruf01 • ブログ： ルドルフもわたるふもいろいろあってな ・マシュマロ： wataruf01 • GitHub： wataruf01 • SharePoint Server 2007 からMicrosoft 製品に関わる • PowerShell が好き • Microsoft Teams が好き • 今はPower Automate に熱中 • 個人的に調べたことや検証したことなどをブログで公開しています 2

• https://twitter.com/wataruf01
• https://wataruf.hatenablog.com/
• https://marshmallow-qa.com/wataruf01?utm_medium=url_text&utm_source=promotion
• https://github.com/wataruf01

注意事項 • 解説する内容は私の個人的な見解が含まれています • 内容に誤りがある場合はご指摘をいただけると助かります 3

今回のお話 Power Virtual Agents を使って ヒットアンドブロー（HIT & BLOW）という 数当てゲームを作りました。 初めて Power Virtual Agentsに 挑戦しました。 チャットbot作成の 初挑戦で 登壇した経緯です。 次のスライドへ 4

経緯 5

経緯 そうだ！ └( 'ω’)┘ムキッ せっかくなので いままで触ったことのない Power Virtual Agents に 挑戦しよう 6

経緯 ゴールデンウイークでの帰省中に基本から勉強しました。 • Power Virtual Agents の基本情報、使い方 • 概要 - Power Virtual Agents | Microsoft Learn • Power Virtual Agentsを初めて触る方へ - Qiita • Miyakeさんが公開しているPower Virtual Agents関連情報 • • • • • • Power Virtual Agents で wordle を作る - Speaker Deck 組織でPower Virtual Agentsを導入するために知っておきたいこと | ドクセル (docswell.com) Power Virtual Agetns と Power Automate で Wordle を作る① - Qiita Power Virtual Agetns と Power Automate で神経衰弱ゲームを作る① - Qiita Power Virtual Agents for Teams のチャットボットをテナント間でコピーする - Qiita MiyakeMito/Repository (github.com) • 作るゲームのネタ関連 • • ヌメロン - フジテレビ (fujitv.co.jp) JavaScriptを使ってHit＆Blow（ヒットアンドブロー）を作ってみる。 7

• https://learn.microsoft.com/ja-jp/power-virtual-agents/fundamentals-what-is-power-virtual-agents
• https://qiita.com/ktr_ch/items/91043b0ea14b303b6988
• https://speakerdeck.com/miyakemito/power-virtual-agents-de-wordle-wozuo-ru
• https://www.docswell.com/s/Miyake/KLR37K-2022-06-23-135141
• https://qiita.com/MiyakeMito/items/f71a2541a5d2c284af9c
• https://qiita.com/MiyakeMito/items/fee22871ffecb287f5b5
• https://qiita.com/MiyakeMito/items/b2df9ca9832fbce26a0d
• https://github.com/MiyakeMito/Repository
• https://www.fujitv.co.jp/b_hp/numer0n/
• https://bubudoufu.com/hitblow/?amp=1

経緯 無事完成。 完成したゲーム： ヒットアンドブロー （HIT & BLOW） 8

ヒットアンドブロー(HIT&BLOW) とは • 『Numer0n』（ヌメロン）という名称でテレビ番組でも話題になった 1対1対戦型の数当てゲームです • 『Numer0n』（ヌメロン） とは • フジテレビ系列で深夜帯に不定期放送されていたゲームバ ラエティ番組。 • 2012年10月8日から2013年6月17日までは、毎週月曜日 23:00 - 23:30（『COOL TV』枠、JST）にレギュラー放送。 • レギュラー化前とレギュラー放送終了後は不定期特別番組 として放送された。 • 2019年7月8日から「Numer0nⅡ（ヌメロン・ザ・セカン ド）」としてdTVチャンネル・ひかりTVチャンネル+での 配信を開始。同年10月14日から2020年1月27日までの間は BSフジでも放送された。 9

ルール説明 （基本ルール） • 相手が考えた3ケタの数字を当てるゲームです。 • 相手の数字を予測して3ケタの数字を言います。数字と場所が当たっている数を「ヒット」。 数字は当たっているが場所が当たってない数を「ブロー」で答えます。 • 交互に数字を言い合って先に相手の3ケタの数字を当てた人が勝ちになります。 ルール説明とイラストは こちらのサイトからお借りしました。 ミックスじゅーちゅ 子どもの遊びポータルサイト https://45mix.net/hit-and-blow-game/ 10

• https://45mix.net/hit-and-blow-game/

ルール説明 （今回作ったゲーム固有部分） ゲーム開始時に正解の桁数を 「3桁」「4桁」「5桁」のなかから指定します 桁の数が多いほど 当てる難易度は高くなります 11

ルール説明 （今回作ったゲーム固有部分） 10回以内に正解の数字を当てることができたら勝利です 正解 ゲームオーバー 12

デモをします 13

構成の解説 今回作成したゲームの構成は 以前 Miyakeさんが公開された wordleをベースにしています。 Power Virtual Agents で wordle を作る - Speaker Deck https://speakerdeck.com/miyakemito/power-virtual-agents-de-wordle-wozuo-ru 14

• https://speakerdeck.com/miyakemito/power-virtual-agents-de-wordle-wozuo-ru

構成図 開始 何桁にする？ 3桁 回答：012 処理内容 初期化 トピック • 正解の生成 • 回答履歴表の生成 メイン処理A トピック ０ヒット 1ブロー 回答：345 初期化 フロー メイン処理 フロー メイン処理B トピック 処理内容 • 回答の正誤判定 • 回答履歴表の更新・表示 1ヒット 1ブロー 15

構成要素 • 2種類のトピックを使用 • 「トピック」とは会話内容の定義です（例：トリガーフレーズ、会話分岐） • 初期化トピック • 正解の生成 • 指定した桁数のランダムな数字を生成。同じ数字は1回のみ使用 • 回答履歴表の初期化 • メイン処理（同じ処理内容でAとBの2つを用意） なぜ同じ処理の トピックを用意するのかは このあとのスライドで解説しま す • 回答の正誤判定 • ヒットとブローの個数をチャットで表示 • 回答履歴表に判定結果を追加 • ゲームの終了判定 • （終了出ない場合は）次のメインよりトピックを呼び出す 16

解説ポイントは5個 1. メイン処理トピックをAとBの2つ用意している理由はなにか 2. どうやって重複なしのランダムな数字を生成しているか 3. 答え合わせをどうやって実現しているか 4. 答え合わせの結果をどうやってAとBで受け渡ししているか 5. 結果をどうやって表形式で表示しているか 次スライドから これらを解説します。 17

1. メイン処理トピックをAとBの2つ用意している理由はなにか • メイン処理を「繰り返し」実行するためです • トピックには繰り返し実行の設定がありません • トピック内で実行可能なアクションのなかに「別のトピックにリダイレクトする」というアク ションがありますが、そのトピック自身を呼び出し先にすることはできません • そのため、同じ内容のトピックを2つ用意して、交互に呼び出し合うこ とによって繰り返し実行を実現しています 自身が終了したら Bを呼び出す メイン処理A トピック メイン処理B トピック 自身が終了したら Aを呼び出す 18

2. どうやって重複なしのランダムな数字を生成しているか（1/5） • Hiroさんの「Power Automate で配列をシャッフルする方法」をお借りしました https://mofumofupower.hatenablog.com/entry/2020/10/06/160200 • この方法にアレンジを加えて、指定した桁数の重複なしの数字を生成しています ① 0～９の数字の配列を定義（要素の数：10） ➢ これはもちろん重複の無い配列 ② ランダムな数字を１０00個並べた配列を定義（要素の数：1000） ➢ こちらは重複のある配列 詳しく解説します ③ ①と②の配列からunion関数を使って重複を排除する（要素の数：10） ④ ③の配列に対してtake関数を使って指定した桁数の数字を取得（要素の数：3～５） 次のスライドへ 19

• https://mofumofupower.hatenablog.com/entry/2020/10/06/160200

2. どうやって重複なしのランダムな数字を生成しているか（2/5） ① ：0～９の数字の配列を定義（要素の数：10） ➢これはもちろん重複の無い配列 後続の処理で この配列は 重複を排除した際に 何のためにつくってる？ 残したいものを 定義する意図があります 20

2. どうやって重複なしのランダムな数字を生成しているか（3/5） ② ：ランダムな数字を１０00個並べた配列を定義 （要素の数：1000） ➢こちらは重複のある配列 何で要素の個数を 1000個にしてるの？ 1桁ずつrand関数を使って ランダムな数字を作る際に 確実に0～９の数字がすべて登場 するほどの大きな桁にしています 21

2. どうやって重複なしのランダムな数字を生成しているか（4/5） ③ ：①と②の配列からunion関数を使って重複を排除する（要素の数：10） 重複なしの ランダムな数字ができた （0から９すべてを使用） どうしてunion関数で union関数には 並び順がランダムの 「1回目にでてきた値を配列上の 数字が残るの？ 同じ位置のまま保持する」 という側面があるためです 22

2. どうやって重複なしのランダムな数字を生成しているか（5/5） ④ ：③の配列に対してtake関数を使って指定した桁数の数字を取得 （要素の数：3～５） 3桁が指定された場合 take関数を使用して 指定した桁の数だけ先頭から取得します。 4桁が指定された場合 取得した数字が「正解」になります。 5桁が指定された場合 23

3. 答え合わせをどうやって実現しているか（1/3） • 条件アクションと「変数の値を増やす」アクションを駆使しています • 変数「ヒットの回数」 • 変数「ブローの回数」 回答の桁をインデクサにして Apply to each （繰り返し処理）を実行 ヒットである場合は 「ヒットの回数」変数を＋1 する ブローである場合は 「ブローの回数」変数を＋1 する 24

3. 答え合わせをどうやって実現しているか（2/3） 正解 ５ ８ ７ 回答 ５ 0 8 equals ( outputs('作成-「回答」を1文字ずつに分解')[variables('ループカウンター')] , outputs('作成-「正解」を1文字ずつに分割')[variables('ループカウンター')] ) 次の値に等しい true 25

3. 答え合わせをどうやって実現しているか（3/3） 正解 ５ ８ ７ 回答 ５ 0 8 Contains ( outputs('作成-「正解」を1文字ずつに分割’) , outputs('作成-「回答」を1文字ずつに分解')[variables('ループカウンター’)] ) 次の値に等しい true 26

4. 答え合わせの結果をどうやって処理AとBで受け渡ししているか（1/7） • トピック間で配列を受け渡すことは仕様上できません • そのため、配列として使用する回答履歴の表を呼び出し先のトピックに渡す際には文字 列に変換してから渡しています • 回答履歴のデータに関して行っている操作は下記の通りです。 ① 呼び出し元のトピックから受け取った回答履歴（形式：文字列）を配列に変換 ② 回答履歴（形式：配列）にその回の回答結果を反映 詳しく解説します ③ 回答履歴（形式：配列）をHTMLテーブルに変換する ④ 回答履歴（形式：配列）を文字列に変換する ⑤ ③をボットがチャットに投稿 次のスライドへ ⑥ ④を呼び出し先のトピックに渡す 27

4. 答え合わせの結果をどうやって処理AとBで受け渡ししているか（2/7） ① ：呼び出し元のトピックから受け取った回答履歴（形式：文字列）を配列に変換 どうやって json 関数を使います 配列に変換するの？ 28

4. 答え合わせの結果をどうやって処理AとBで受け渡ししているか（3/7） ② ：回答履歴（形式：配列）にその回の回答結果を反映 どうやって アレイのフィルタと 回答結果の反映を 配列変数の追加の 実現している？ 合わせ技です 29

4. 答えわせの結果をどうやって処理AとBで受け渡ししているか（4/7） ③ ：回答履歴（形式：配列）をHTMLテーブルに変換する どうして sort関数で 並べ替えてるの？ ②の工程で 並び順が変わってしまったので Noの昇順で並べなおしています 30

4. 答え合わせの結果をどうやって処理AとBで受け渡ししているか（5/7） ④ ：回答履歴（形式：配列）を文字列に変換する どうして 配列のままでは 文字列に変換するんだっけ？ 次のトピックを呼び出す際に 渡すことができないからです 31

4. 答え合わせの結果をどうやって処理AとBで受け渡ししているか（6/7） ⑤ ：③をボットがチャットに投稿 していないです。 回答を入力する際に なので、どんな文字列でも 入力内容の適切であるかを 入力できてしまいます。 チェックしてる？ 32

4. 答えわせの結果をどうやって処理AとBで受け渡ししているか（7/7） ⑥ ：④を呼び出し先のトピックに渡す 呼び出し先の トピックに渡された 回答履歴はどう扱われるの？ 呼び出し先のトピックでも ① ～ ⑥の 処理が行われます。 33

5. 結果をどうやって表形式で表示しているか 「HTMLテーブルの作成」の出力をそのままボットで表示しています 34

まとめ ゲーム作成という主旨だからこそ得られる こだわりや工夫がきっとあると思います 誰かがすでに作ったものの真似でもいいので お作法の習得も兼ねて ゲーム作成に挑戦してみてはいかがでしょうか 35

普段はPower AutomateのフローやTIPSをブログで公開しています • 興味を持っていただけるかたは下記のURLから訪問ください https://wataruf.hatenablog.com 36

• https://wataruf.hatenablog.com/

37