はじめに
Teams版のPower Virtual AgetnsとPower Automateを利用して、最近話題の Wordle を作ってみました。全２回の２回目です。
#PowerVirtualAgents で #Wordle を作ってみました。
— Miyake Mito (@MiTo60448639) March 6, 2022
答えは100の候補からランダムで設定するため、ゲームとしては簡単です笑
昨夜はWORDLEの事をよく知らずに適当なものを実装してしまってごめんなさい。#気ままに勉強会 pic.twitter.com/HMB4VUv1vj
メイン処理の作成
全体象は下図になります。今回は、赤枠で囲ったメイン処理部分を記載します。
③トピック「ループ１」
利用者から回答を受け、フローで答え合わせした結果を表示するトピックを作成します。
③-1 トピック間の変数の受け渡し
トピックの先頭で、呼び出し元のトピックから値を受け取ります。
[質問する]を２つ用意し、[特定]に[ユーザーの応答全体]を選択します。
[応答に名前を付けて保存]で設定された変数を選び、[変数のプロパティ]で[他のトピックから値を受け取ります]にチェックを付けます。
[他のトピックから値を受け取ります]をONすると、チャットボット実行時には問い合わせとして動作しません。
トピックの引数の定義となります。
■ 「答え」の定義
■ 「回答履歴」の定義
③-2 回答の質問
回答を質問します。
[条件]アクションを追加し、"リセット"と入力された場合、前回作成したトピック「初期化」に戻り、ゲームをリセットします。
③-3 フロー「メイン処理」の呼び出し
ここで一旦、フローを保存し[アクションを呼び出す]でフローの作成を選択します。
④フロー「メイン処理」
ユーザーの入力した回答に対し、答え合わせをするフローを作成します。
④-1 引数の設定
引数に、
- 「答え」：ゲームの答え
- 「回答履歴」：今回のゲームで今までユーザーが入力した回答の履歴
- 「回答」：入力された回答
を設定します。
「回答履歴」は、 " APPLE,POINT,CIGAR,MAJOR " のように、カンマ区切りの文字列として定義します
④-2 答えの配列を作成
[作成]アクションで、トリガーにある引数の「答え」を設定します。
さらに[選択]アクションで、「答え」の文字を、1文字ずつの配列に分解します。
range(0,length(outputs('答え')))
substring(outputs('答え'),item(),1)
「答え」が"HUMPH"であれば、以下の配列が返ります
④-3 回答履歴+回答の配列を作成
「回答履歴」に今回の回答を追加します。
上記で記載したように、「回答履歴」は過去の「回答」を順にカンマで区切った文字列として定義しています。
「回答履歴」が存在する場合はconcat()関数で文字連結をします。
if(empty(triggerBody()['text_1']),triggerBody()['text_2'],concat(triggerBody()['text_1'],',',triggerBody()['text_2']))
さらに、","（カンマ）を区切り文字として、split()関数で配列に変換します。
split(outputs('回答履歴+回答'),',')
④-4 色の設定
答え合わせの「結果」を表示する際の色を10進数で設定します。
念のため、各色の説明をします。
- 緑：「答え」の中にあり、位置も正しいです
- 黄：「答え」の中に含まれますが、位置は違います
- 灰：「答え」に含まれません
④-5 回答履歴の答え合わせ処理
Wordle で、「回答」できるチャンスは6回です。
よって「回答履歴」の要素数は最大で6になります。
6個の「回答履歴」に対し、答え合わせ処理を実施します。
処理を単純化するため、「回答」の度に過去の履歴も答え合わせしています
また、このような繰り返し処理はApply to eachを利用すると処理が簡略化できますが、レスポンスを考慮し除外しています
1つ目の回答履歴の答え合わせ処理
1つ目の「回答履歴」の答え合わせでは、以下の処理を行います。
[選択]アクションで「回答履歴」の1番目の要素（添え字=0）に対し、
- 1文字ずつ分解し、「答え」の同じ位置の文字と比較 ⇒ 同値の場合は緑（当たり）で文字を出力
- 1.でHitしなかったら、contains()関数で「答え」に存在するかチェック ⇒ 存在する場合は黄（位置が異なる）で文字を出力
- 上記以外 ⇒ 灰（ハズレ）で文字を出力
range(0,length(outputs('回答履歴+回答_array')?[variables('intCount')]))
if(equals(substring(outputs('回答履歴+回答_array')?[variables('intCount')],item(),1),substring(outputs('答え'),item(),1)),outputs('背景色1'),if(contains(outputs('答え'),substring(outputs('回答履歴+回答_array')?[variables('intCount')],item(),1)),outputs('背景色2'),outputs('背景色3')))
上記で取得した色と、「回答履歴」の各文字を下記のHTMLに挿入します。
<span style="color: WHITE; background-color:rgb(@{body('答え合わせ_1')?[0]}); font-family:'游ゴシック体'; font-size: 25px;"> @{substring(outputs('回答履歴+回答_array')?[variables('intCount')],0,1)} </span>
<span style="color: WHITE; background-color:rgb(@{body('答え合わせ_1')?[1]}); font-family:'游ゴシック体'; font-size: 25px;"> @{substring(outputs('回答履歴+回答_array')?[variables('intCount')],1,1)} </span>
<span style="color: WHITE; background-color:rgb(@{body('答え合わせ_1')?[2]}); font-family:'游ゴシック体'; font-size: 25px;"> @{substring(outputs('回答履歴+回答_array')?[variables('intCount')],2,1)} </span>
<span style="color: WHITE; background-color:rgb(@{body('答え合わせ_1')?[3]}); font-family:'游ゴシック体'; font-size: 25px;"> @{substring(outputs('回答履歴+回答_array')?[variables('intCount')],3,1)} </span>
<span style="color: WHITE; background-color:rgb(@{body('答え合わせ_1')?[4]}); font-family:'游ゴシック体'; font-size: 25px;"> @{substring(outputs('回答履歴+回答_array')?[variables('intCount')],4,1)} </span>
２つ目以降の回答履歴の答え合わせ処理
２回目以降の処理は、１回目の処理をベースに、条件を追加します。
該当する「回答履歴」が存在する時のみ、答え合わせ処理を実施します。
outputs('回答履歴+回答_array')?[variables('intCount')]
条件が合致する場合の処理は、上記の回答履歴１の処理をコピーしてください。
複数アクションをまとめてコピーする場合は、コピー対象を[スコープ]に格納すると一括で複製できます。
コピー後、HTMLの先頭に2行分の改行コードを追加し（＝Teamsチャットでの1行分の改行）、色情報の挿入内容をコピーしたアクション名に変更してください。
同様に、回答履歴２の処理をコピーし、回答履歴３~６を作成します。
④-6 トピックへの戻り値設定
「結果」に、１から６の回答履歴の答え合わせ結果をconcat()関数で結合した文字列を設定します。
concat(outputs('結果_1'),outputs('結果_2'),outputs('結果_3'),outputs('結果_4'),outputs('結果_5'),outputs('結果_6'))
回答履歴には「④-3 回答履歴+回答の配列を作成」で作成した、回答履歴と回答を","で結合したものを設定します。
outputs('回答履歴+回答')
トピック「ループ１」に戻り、[アクションを呼び出す]で、作成したフローを呼び出します。
⑤トピック「ループ2」
トピック「ループ2」は、トピック「ループ1」を複製してください。
複製後、[状態]をオンにしてください。
また、トピック先頭にて、「答え」と「回答履歴」に対し「他のトピックから値を受け取ります」をONにしてください。
トピックのリダイレクト設定
前回作成した①トピック「初期化」の末尾に、③トピック「ループ1」へのリダイレクトを追加してください。
③トピック「ループ1」の末尾に、⑤トピック「ループ2」へのリダイレクトを追加してください。
⑤トピック「ループ2」の末尾に、③トピック「ループ1」へのリダイレクトを追加してください。
以上で完成です。
注意
Teamsの Power Virtual Agents ポータルで、作成したWordleゲームを実行すると、HTMLが解釈されず下図のように表示されてしまします。
ゲームをプレイする際は、チャットボットを[公開]し、Teamsチャットから実行してください。
まとめ
Power Virtual Agents と Power Automate を利用した Wordle の作り方を紹介しました。
Power Virtual Agents のチャットの構成や、Power Automate での配列操作を工夫することで、快適に遊べるゲームを作成することが可能です。
是非作って、Playしてみてください！