登壇することになったのでPower Platformでゲーム作成に挑戦してみた

4.5K Views

August 20, 22

スライド概要

2022/8/20 JPPGB #2
「登壇することになったのでPower Platformでゲーム作成に挑戦してみた」
の資料です。

profile-image

Power Platform、Micorosoft 365らへんについて勉強しています。 気ままに勉強会 主催運営 https://kimamani.connpass.com/ たなの覚え書き(blog) https://tana-techlog.net/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

登壇することになったので Power Platformでゲーム作成に 挑戦してみた JPPGB #2 2022/8/20

2.

自己紹介 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

3.

注意事項 • お話する内容は、私の個人的見解です。 • 内容について認識違いをしている点があるかもしれません。 お気づきの場合は、ご指摘いただけると助かります。 Twitter #気ままに勉強会 3

4.

いきさつ とある日、Twitterで JPPGB#1 のときの、 コルネさんのテクニック ためになったんだよなー 【JPPGB #1】【初心者も歓迎!】Power Appsでじゃんけんアプリを作成してみよう! - YouTube Twitter #JPPGB 4

5.

登壇!!! 詳細を聞くと・・・ なんと登壇すること になったwww Twitter #JPPGB 5

6.

どんなゲームを作ろう? • 思いつくもの • オセロ (白と黒でパンダっぽい) • 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

7.

ゲームとは? 勝負!? まあ、遊べたら いいでんしょ? 出展:ゲーム - Wikipedia Twitter #JPPGB 7

8.

閃いた! • たしか • 画像をAI Builderで認識させていたひとがいたなー AI Builder はガノタなりうるのか!? - Qiita • お絵描きアプリ作ってたひとがいたなー 【Power Apps】SharePoint Listに直接画像を保存したい!【SharePoint List】 - YouTube 先人たちの知恵を 合体させよう! お絵描きしたイラストを採点できるのでは? Twitter #JPPGB 8

9.

イメージ ① Power Apps で絵を描く ② Power Automate へ 描いた絵を画像として送る ③ 送られた画像を AI Builderで解析する ④ 解析結果を Power Appsへ返却する ※ AI Builde:有償ライセンス必要 お絵描きアプリ お絵描きアプリ 80点 いけるでしょ!! たぶん・・・ 採点 採点 Twitter #JPPGB 9

10.

デモ Twitter #JPPGB

11.
[beta]
Power Apps から 画像データを Power Automateに渡す
[OnSelect]
③ フローを

UpdateContext(
呼び出す
{
④ 「PowerApp また
vResult:お絵描き採点フロー.Run(
は Flow に応答する」
Substitute(
アクションの戻り値を
JSON(PenInput.Image,IncludeBinaryData),
変数(vResult)に格納
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

12.
[beta]
ハマった こと ①
• 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

13.

ハマった こと ② • 予測の結果をApply to each で囲まれたので直接値を抜き出すのに手間 取った • JSONは怖くない - Speaker Deck • Power Automate から Power Apps へ返した応答を変数に設定する 式がなかなか認識できなかった • 式を書き直してもダメ • Power Appsで呼び出しているフローを最新の情報に更新してもダメ • Power Appsで呼び出しているフローを削除して追加してもダメ ※ 結局、原因わからなかったけど、認識するようになった・・・ • 画像認識の学習がなかなかうまくいかない • 色もちゃんと認識している Twitter #JPPGB 13

14.

出来上がった お絵描きアプリ Twitter #気ままに勉強会 14

15.

まとめ • 先人の力を借りたら、なんとか作れた • 重要な部分を AI Builderに任せることでなんとか作れた みんなもゲーム作ってみよう! Twitter #JPPGB 15

16.

THANK YOU !