【初心者でも60分で完成】 Power Appsでミニゲームを作って楽しもう！プログラミングの基礎も習得可能

YouTube動画

完成品のデモ、開発手順の詳細は下記の動画で確認してください。このページに掲載のサンプルコードをコピー＆ペーストすればプログラミング経験ゼロでもゲームが作れます！

作業をはじめる前に

ご自身の所属する組織（会社、学校、他）でPower Appsを使ってよいか？については組織のルールをご確認ください。

不明な場合は組織のIT担当者にこのページのURLを共有して「このアプリを作ってみたいんですけど」と聞いてみてください。組織によっては作業をするためのPower Platformの環境等の指定ほかルールがあるかもしれませんので従うようにしましょう。

画像を用意する

動画内では「いらすとや」様のフリー素材を使用しています。同じ素材でアプリを作る場合は下記のいらすとや様にアクセスし、「イラストを検索」から「福笑い」で探してみてください。

かわいいフリー素材集 いらすとや

コピー＆ペースト用のプログラム　その１

「上」ボタン

OnSelect

UpdateContext({ctxUpBtn: !ctxUpBtn});

Fill

RGBA(56, 96, 178, If(ctxUpBtn,0.5,1))

「下」ボタン

OnSelect

UpdateContext({ctxDownBtn: !ctxDownBtn});

Fill

RGBA(56, 96, 178, If(ctxDownBtn,0.5,1))

「左」ボタン

OnSelect

UpdateContext({ctxLeftBtn: !ctxLeftBtn});

Fill

RGBA(56, 96, 178, If(ctxLeftBtn,0.5,1))

「右」ボタン

OnSelect

UpdateContext({ctxRightBtn: !ctxRightBtn});

Fill

RGBA(56, 96, 178, If(ctxRightBtn,0.5,1))

「次へ」ボタン

OnSelect

//ステータスを変更する
Switch(
    ctxStatus,
    "待機",
    UpdateContext({ctxStatus: "右目"});
    ,
    "右目",
    UpdateContext({ctxStatus: "左目"});
    ,
    "左目",
    UpdateContext({ctxStatus: "鼻"});
    ,
    "鼻",
    UpdateContext({ctxStatus: "口"});
    ,
    "口",
    //終了して結果を表示
    UpdateContext({ctxStatus: "終了"});
    UpdateContext(
        {
            ctxKaoT:0,
            ctxMigimeT: 0,
            ctxHidarimeT: 0,
            ctxHanaT: 0,
            ctxKutiT: 0
        }
    );
   
);

Text

If(ctxStatus="待機","スタート","次へ")

「リセット」ボタン

OnSelect

UpdateContext({
    ctxKaoT:0,

    ctxMigimeX:0,
    ctxMigimeY:0,
    ctxMigimeT:0,

    ctxHidarimeX:0,
    ctxHidarimeY:100,
    ctxHidarimeT:0,
   
    ctxHanaX:0,
    ctxHanaY:200,
    ctxHanaT:0,
   
    ctxKutiX:0,
    ctxKutiY:300,
    ctxKutiT:0,

    ctxStatus: "待機"
});

「タイマー」

OnTimerEnd

//押されているボタンの方向にパーツを移動させるために距離を計算する
//時間経過とともにパーツが透明になる速度もここで指定している
UpdateContext({
    //XY軸の移動を計算
    ctxMoveX: If(ctxRightBtn, 4, 0) + If(ctxLeftBtn, -4, 0),
    ctxMoveY: If(ctxDownBtn , 4, 0) + If(ctxUpBtn  , -4, 0),

    //現在操作中のパーツは少し早めに、顔はゆっくり透明化
    ctxToHide: 0.005,
    ctxToHideFace: 0.002
});

//現在操作中のパーツに座標と透明度の変化を与える
//顔パーツは常に透明になりつづけるように設定
Switch(ctxStatus,
    "右目",
    UpdateContext({
        ctxKaoT: ctxKaoT + ctxToHideFace,
        ctxMigimeX: ctxMigimeX + ctxMoveX,
        ctxMigimeY: ctxMigimeY + ctxMoveY,
        ctxMigimeT: ctxMigimeT + ctxToHide
    });
   
    ,"左目",
    UpdateContext({
        ctxKaoT: ctxKaoT + ctxToHideFace,
        ctxHidarimeX: ctxHidarimeX + ctxMoveX,
        ctxHidarimeY: ctxHidarimeY + ctxMoveY,
        ctxHidarimeT: ctxHidarimeT + ctxToHide
    });
   
    ,"鼻",
    UpdateContext({
        ctxKaoT: ctxKaoT + ctxToHideFace,
        ctxHanaX: ctxHanaX + ctxMoveX,
        ctxHanaY: ctxHanaY + ctxMoveY,
        ctxHanaT: ctxHanaT + ctxToHide
    });

    ,"口",
    UpdateContext({
        ctxKaoT: ctxKaoT + ctxToHideFace,
        ctxKutiX: ctxKutiX + ctxMoveX,
        ctxKutiY: ctxKutiY + ctxMoveY,
        ctxKutiT: ctxKutiT + ctxToHide
    });
);

「ステータス表示」

Text

ctxStatus

コピー＆ペースト用のプログラム　その２

「顔」

Transparency

ctxKaoT

「右目」

Transparency

ctxMigimeT

X

ctxMigimeX

Y

ctxMigimeY

「左目」

Transparency

ctxHidarimeT

X

ctxHidarimeX

Y

ctxHidarimeY

「鼻」

Transparency

ctxHanaT

X

ctxHanaX

Y

ctxHanaY

「口」

Transparency

ctxKutiT

X

ctxKutiX

Y

ctxKutiY

教材としての活用案

いかがでしょうか。簡単操作でしっかり遊べるミニゲームが作れることが体験できたと思います。

Power Appsのような「ローコード」にはアイディアをすぐに形にするポテンシャルが秘められています。本来、ゲームを作るためのプラットフォームではありませんが、このようにアイディア次第では遊びながらプログラミングを学ぶことも可能です。

今回のミニゲームは小学校高学年～中学生で勉強する座標や四則演算ができれば十分に理解できるものです。プログラミング知識としては「変数」さえ理解できればアプリを自分なりに改造して遊ぶといった学び方もできると思います。

また、業務においてはAI活用など模索されている方も多いと思いますが、そういった方向けの教材としても使えるかな、と考えています。まだプレビュー機能ですがPower AppsにはPDF関数を通してPower Automateへ作成した福笑い画像を含むPDFデータを受け渡すことが可能です。その先のCopilot StudioやAzureで画像比較して採点するAIエージェントといった使い方もできるのではないでしょうか（もちろん従量課金の対象になりますので「大人の遊び方」になりますね）。絶対的な点数がつけられない感覚的な評価はAIの特性を学ぶにもうってつけだと思います。

動画で紹介したようにチャットの対話画面にスクリーンショット画像を渡すといった遊び方でも十分に楽しめます。

本ミニゲームアプリは誰でも簡単に作れるからこそ、教材として様々な活用シーンがあるかなと思います。いろいろ試してみてください！

教材としてのご利用にあたり、著作権侵害のおそれがない限り特に私への許可申請は必要ございませんが、体験してみての感想やその他フィードバックをYouTubeコメントまたは問い合せフォームへお寄せいただけると嬉しいです！