20251018JPPGB

「AIとPower Appsで遊ぶ！相撲ゲーム開発の世界」 ～君は夢の取組を見たか～

dai365 略歴 平成7年就職→非IT従事／現在はデジタル推進 得意 Power Apps / 生成AI 好き 登山・競馬・お酒・プロレス・PC MVP受賞・生成AIパスポート取得・健康回復 SNS X: @dai_keiba_73 | biribiri.connpass.com Power Apps Code Apps Generative AI Agri DX

私とJPPGB 初めてここに足を踏み入れたのはＪＰＰＧＢ＃４そこから私は・・・ JPPGB#6 JPPGB#8 しょぼいビンゴカード ＡＩプロレスゲーム爆誕 マインスイーパー！？ ＡＩと共創に魅せられる 初登壇。Power Appsでビンゴ AIが勝敗を判定し、レスラーが マインスイーパーのPythonから 神経衰弱 → ポーカー → ブラッ カードを作っただけのはずが、 しゃべる。GPT×音声合成 の移植にチャレンジするも、再 クジャックと、AIと共にゲーム ローコードの魔界へ足を踏み入 ×Power Appsという狂気のプロ 帰処理で躓き断念、これぞまさ 開発を加速。Claude・Gemini・ れる。笑いと共に「この世界、 レスシミュレーターを披露。50 にクソゲー o3などを駆使し、非エンジニア 面白いぞ」と悟った夜。 代の情熱が“技術とロマンの融 でも“遊び”を“学び”に変える挑 合”として爆発。 戦。「できない」が「できるか ゲームコンテスト＃１ JPPGB#11 も」に変わる瞬間を体験。 JPPGBは、遊びながら技術と自分を育てる場所。登壇のたびに「できない」が「できるかも」に変わってきました。

皆さん、初っ切りってご存じですか？

「初っ切り（しょっきり）」とは、相撲の本場所 などで本番の取組が始まる前に行われる“相撲の型 （かた）や禁じ手（反則）を面白おかしく実演す る余興”のことです。

では、今日の禁じ手は？？

本日の禁じ手！！バイブコーディング！！ バイブコーディングに夢中です 相棒は変わる でも熱は冷めない 赤い波線からの逆転劇 今年に入ってから、私は“バイブ ただし、その“相棒”はちょいちょ 初版では、2日目にして取組不足 コーディング”という新しい開発 い変わります（笑）最初は が露呈。ギャラリー順は崩れ、 スタイルにどっぷりハマってい Gemini 2.0、次に Gemini 2.5 画面には赤い波線が乱舞。 ます。Power Appsと生成AIを組 Pro。そしてこの夏、ついに しかし、GPT-5に切り替えた途 み合わせ、まるで“振動するよう GPT-5 に乗り換えました。それ 端、識別子や参照範囲の“芯”を突 な感覚”でコードが生まれていく。 ぞれに得意分野があり、まるで く修正が入り、流れが一変。す バンドメンバーが入れ替わるよ べてが美しく回り始めた。まる うな感覚。 でAIが“演出家”になったかのよ うな完成度でした。 作成開始は7月31日。8月上旬に“赤い波線”で一度詰みました（笑）

さて、今回はどんなゲームを作った？

KIMARITE！とは アプリの基本概念 技術基盤 Power Fxを使用して構築され、高度なロジックを実装しています。データは 相撲を題材にしたシミュレーションゲーム colRikishi、colBouts、colBashoHistなどのコレクションで管理され、イベント駆 動型の画面遷移を実現しています。 年間6場所の本場所とリアルな番付編成や取 組を再現しています なぜ相撲ゲームなのか？ 僕にとっての「青春を溶かしたもの」はプロレス。 没入感のある体験 ユーザーは力士の番付編成、取組、優勝決定、三賞選考など本場所のサイクルを その熱を、今回は相撲で形にしたかった。 体験できます。リーグ戦モードでは、選抜された力士による総当たり戦を楽しむ 日本の伝統文化をデジタルで再現し、リーグ戦の駆け引き や番付の妙を楽しめるゲームを作ることで、 「遊びながら学べる」体験を届けたい―― それがこの挑戦の原点です。 ことができます。

ゲームの流れ（ホーム → 取組 → 結果） ホーム画面 取組画面 タイマー制御で4段階アニメーション 15日間の取組をシミュレーション 「場所開始」ボタンで導入画面へ遷移 11日目以降は優勝争いリストを表示 「大荒れ日」判定で番狂わせ演出 結果画面 最終成績を集計し、三賞を選出 年間集計でMVPを決定

ロジックの工夫（番付・取組・勝敗・優勝） 番付編成 初場所：Power値順で固定枠（横綱、 取組編成 勝敗決定 必須カード（横綱vs大関など）を優先 式：基礎値＋応援ブースト＋(乱数× 大関、関脇、小結、前頭） 11日目以降、優勝候補をリスト化 乱数幅) 同率首位なら自動で決定戦（トーナメ 成績順にソート 2場所以降：勝ち星優先＋旧番付でタ 優勝争い プレーオフ → 同部屋回避 → 未対戦優先 大荒れ日やプレーオフで乱数幅を調整 イブレーク 決まり手は重み付きランダム抽選 ント or 三つ巴）

データモデル＆状態管理の要点

動的パネルと履歴 注目カードパネル 優勝争いパネル その日の見どころとなるカード 11日目以降、優勝争い中の力士リ がハイライト表示され、ユーザ ストが画面横に表示され、状況が ーに注目すべき取組を示します 可視化されます。 。 履歴パネル 今場所の全成績がオーバーレイ表示

隠しコマンドで遊び心をプラス！ リーグ戦モード （ 本格対戦） 四股名表示モード （ ネタ要素） リーグ戦モードは、通常の場所とは異なる、16名 アプリケーションの起動時は、創作四股名が初期設 の力士による総当たり戦（全15節）を行うシミュ 定として選ばれています。 レーション機能です 。 何かをタップ（選択）することで、隠された設定フ 開始時には、現在の番付または力士の強さに基づき ラグ が切り替わります。 16名の参加者が選出され、総当たり戦のスケ ジュール（全120試合）が生成されます。 画面の隅に表示されるツールアイコンを選択すると、 モード 創作四股名とM365製品名の間で交互に表 プレイヤーは「星取表（マトリクス）」画面で、各 力士の勝敗数や点数（勝ち2点）を確認できます 示が切り替わります。 どこを押すと四股名が変わる？

今回、生成AIを駆使してチャレンジしたこと

CodexCLIで Power Apps コントロール名を一括リネーム！ 目的 命名統一は保守性と検索性を高める 使用ツール •Power Platform CLI（pac）：アプリの展開・再構築 •CodexCLI：自然言語でコードを編集できるAIツール •VS Code：編集と差分確認用 ステップ Before（自動生成） After（命名ルール適用） Label1 lbl_Title_Main Label2 lbl_Score_Detail Button1 btn_Start_Home Gallery1 gal_ItemList_Detail 内容 ① unpack .msappファイルを展開して .fx.yaml と .json に分解 ② CodexCLI 「Labelを全部 lbl_ にして」など自然言語で命名ルールを指示 ③ pack 編集後のファイルを再び .msapp に戻す（別名で保存） ④ Power Appsで確認 アプリを開いて動作確認 ⑤ 繰り返し 問題なければ他の画面にも適用していく 問題 原因 pac canvas packでmsappを復元し、Power Appsで開 いて動作確認するだけです。これにより、従来数時間の 対策 作業が数分に短縮されます。 アプリが開かない .fx.yamlだけ変更して、.jsonのNameが未更新 CodexCLIに「YAMLとJSON両方更新して」と指示 よくある失敗と対策

GPT-5によるPower Apps画面生成とYAML貼り付け手法 目的 YAML直貼りで画面開発が10倍速くなる YAML構造の基本ルール 画面単位で貼り付け（Screens:ブロックごと） 式は =、文字列は ="..." で統一 非対応プロパティは排除（例：RadiusTopLeftなど） 貼り付け場所のコツ AppInfoではなく、対象の画面（Screen）を選択して貼り付ける 最初はGalleryなどの主要コンポーネントだけ貼り付けて、通るか確認 通ったらChildrenやHeaderなどを段階的に追加 よくあるエラーと対処法 エラー 原因 対処 YamlInvalidSyntax =が抜けている、全角スペース、クォート忘れ Text: VS → Text: ="VS" に修正 Unknown property 非対応プロパティを使っている RadiusTopLeftなどは削除 or Buttonに置き換え

Code Apps移植の要点まとめ 目的 Code Apps移植でPower Appsの限界を超える 使用ツール・環境 VS Code：開発環境 Codex（CLIまたはIDE）：自然言語でコード生成 Power Apps Code Apps：新しいコードベースのアプリ形式（プレビュー） 移植手順（5ステップ） ステップ 内容 ① VS Codeで空のCode Appsプロジェクト作成 pac code initで雛形を作成 ② キャンバスアプリからYAML抽出 全画面（OnStart含む）をコピー ③ Codexに自然言語で変換依頼 「このアプリをCode Appsに作り直して」と指示 ➃ 日本語で微調整指示 UIの色・動線・演出などを会話で調整 ⑤ 最後は人間の“手触り”で仕上げ レイアウトやアニメ速度などを完成で調整

よく出たエラーと対処 With の典型エラー

学びとTips（AI活用のコツ3つ） AIは相棒（ ） 構造化がカギ（ → 丸投げせず共創 失敗はネタ（ ） ） → YAML/JSONで精度UP → 赤波線もWithエラーも学び

AIと一緒に、限界を超えよう！ Power Apps × AIで「遊び」を「学び」に変える挑戦は、非エンジニアでも可能。 GPT-5やCodexCLIを駆使すれば、“できない”が“できるかも”に変わる瞬間を体験できる。 重要なのは、AIを信じて、でも丸投げせず、一緒に作ること。 その過程こそが、Power Platformの真の楽しさではないでしょうか。 AIと遊ぶことで、学びが加速する！

ご清聴ありがとうございました