登壇することになったのでPower Platformでゲーム作成に挑戦してみた
3.9K Views
August 20, 22
スライド概要
2022/8/20 JPPGB #2
「登壇することになったのでPower Platformでゲーム作成に挑戦してみた」
の資料です。
Power Platform、Micorosoft 365らへんについて勉強しています。 気ままに勉強会 主催運営 https://kimamani.connpass.com/ たなの覚え書き（blog） https://tana-techlog.net/
関連スライド
各ページのテキスト
登壇することになったので Power Platformでゲーム作成に 挑戦してみた JPPGB #2 2022/8/20
自己紹介 Power Platformに魅了されたパンダ。 推しはPower Automate。 Power Platformの仲間が増えると嬉しいです。 たな Twitter ： @dreams_panda ブログ ： https://tana-techlog.net/ Docswell ： https://www.docswell.com/user/tanapandalove Twitter #JPPGB #気ままに勉強会 https://kimamani.connpass.com/ 2
注意事項 • お話する内容は、私の個人的見解です。 • 内容について認識違いをしている点があるかもしれません。 お気づきの場合は、ご指摘いただけると助かります。 Twitter #気ままに勉強会 3
いきさつ とある日、Twitterで JPPGB#1 のときの、 コルネさんのテクニック ためになったんだよなー 【JPPGB #1】【初心者も歓迎！】Power Appsでじゃんけんアプリを作成してみよう！ - YouTube Twitter #JPPGB 4
登壇！！！ 詳細を聞くと・・・ なんと登壇すること になったｗｗｗ Twitter #JPPGB 5
どんなゲームを作ろう？ • 思いつくもの • オセロ （白と黒でパンダっぽい） • Power Virtual Agents + Power Automate で作ってるひといたなー • 神経衰弱 （とあるMVPの方にお勧めされた） • 勧めた本人が作っている・・・ • Power Virtual Agents + Power Automate で 作ってるひといたなー • コインドック （以前にハンズオンで作った） ゲームって数式とか めっちゃ考えないと 作れないんじゃない の？ • そもそもハンズオンで言われるがまま作っただけ・・・ Power Virtual Agetns と Power Automate で神経衰弱ゲームを作る① - Qiita Power Virtual Agetns と Power Automate で神経衰弱ゲームを作る② - Qiita Power Virtual Agetns と Power Automate で神経衰弱ゲームを作る③ - Qiita 神経衰弱みたいな機構をPower Appsで作成してみた（初級者向け） - When I was XXX in the toilet, I came up with an idea! /s-tbl tech Blog Power Apps で横スクロールアクションゲームを作る 記事まとめ - Power Appsの使い方 (hateblo.jp) Twitter #JPPGB 6
ゲームとは？ 勝負！？ まあ、遊べたら いいでんしょ？ 出展：ゲーム - Wikipedia Twitter #JPPGB 7
閃いた！ • たしか • 画像をAI Builderで認識させていたひとがいたなー AI Builder はガノタなりうるのか！？ - Qiita • お絵描きアプリ作ってたひとがいたなー 【Power Apps】SharePoint Listに直接画像を保存したい！【SharePoint List】 - YouTube 先人たちの知恵を 合体させよう！ お絵描きしたイラストを採点できるのでは？ Twitter #JPPGB 8
イメージ ① Power Apps で絵を描く ② Power Automate へ 描いた絵を画像として送る ③ 送られた画像を AI Builderで解析する ④ 解析結果を Power Appsへ返却する ※ AI Builde：有償ライセンス必要 お絵描きアプリ お絵描きアプリ 80点 いけるでしょ！！ たぶん・・・ 採点 採点 Twitter #JPPGB 9
デモ Twitter #JPPGB
Power Apps から 画像データを Power Automateに渡す
[OnSelect]
③ フローを
UpdateContext(
呼び出す
{
④ 「PowerApp また
vResult:お絵描き採点フロー.Run(
は Flow に応答する」
Substitute(
アクションの戻り値を
JSON(PenInput.Image,IncludeBinaryData),
変数（ｖResult）に格納
Char(34),"“
する
)
)
① JSON関数の戻り値
}
② 「”」を取り除く
は、文字列のため
);
「”」で括られている
PowerApps Flowから値を取得する - Power Appsの使い方 (hateblo.jp)
Power AppsとPower Automateの連携でのつまずきポイント | ドクセル (docswell.com)
Power Apps の JSON 関数 - Power Platform | Microsoft Docs
Twitter #JPPGB
11
ハマった こと ①
• Power Apps から Power Automateへ画像として送れない
base64でエンコードされたデータだと思いこみ、
base64ToBinary()で変換をしていた
Power Appsから取得したデータ
Point
Power Appsで画像データに対して、
JSON関数を利用すると、base64のDataURI
文字列に変換されるため、
dataUriToBinary()で変換が必要
■ base64のDataURI形式
data:[<mediatype>][;base64],<data>
#PowerApps のJSON関数を利用した写真の一括登録 - Qiita
Power Appsにおける画像の扱いについて - Qiita
データ URL - HTTP | MDN (mozilla.org)
Twitter #JPPGB
12
ハマった こと ② • 予測の結果をApply to each で囲まれたので直接値を抜き出すのに手間 取った • JSONは怖くない - Speaker Deck • Power Automate から Power Apps へ返した応答を変数に設定する 式がなかなか認識できなかった • 式を書き直してもダメ • Power Appsで呼び出しているフローを最新の情報に更新してもダメ • Power Appsで呼び出しているフローを削除して追加してもダメ ※ 結局、原因わからなかったけど、認識するようになった・・・ • 画像認識の学習がなかなかうまくいかない • 色もちゃんと認識している Twitter #JPPGB 13
出来上がった お絵描きアプリ Twitter #気ままに勉強会 14
まとめ • 先人の力を借りたら、なんとか作れた • 重要な部分を AI Builderに任せることでなんとか作れた みんなもゲーム作ってみよう！ Twitter #JPPGB 15
THANK YOU !