JPPGB #9 2048作ってみた

JPPGB #9 Power Appsで 2048を作ってみた 2024/3/2 PPログ

PPログ X(Twitter):https://twitter.com/PowerPlatform4 Blog:https://powerplatformnikki.com/ JPPGB #9 2

• https://twitter.com/PowerPlatform4​
• https://powerplatformnikki.com/

Content • コンポーネントの概要 • プロパティの型 • コンポーネント使用時の注意点 • 2048の説明 • デモ 3

コンポーネントの概要

コンポーネント、 使ってますか？

コンポーネントとは、Power Appsで再利用可能な共通部品を 作成することのできる機能です。 コントロールの共通部品化 • デザインの統一 • スキルのギャップ解消 関数の汎用化・共通化 • 複雑な数式の簡素化 • パフォーマンス向上 JPPGB #9 6

コンポーネント化の判断基準として、アプリ内またはアプリ間で 重複するロジックや複雑なロジックが挙げられます。 アプリA アプリB JPPGB #9 アプリC 7

重複している単純なロジックの汎用化or出現回数の多い複雑なロ ジックという観点でリファクタリングしてみては 複雑 アプリA 単純 複雑 アプリB アプリC 複雑 JPPGB #9 8

ロジックの汎用化(=関数化)の例 x+1 (x+1)2 x2-1 x+1(x-1)2 JPPGB #9 9

汎用化できれば、多くのアプリのロジックを処理の過程を理解す ることなく実装できる f(a, b) = (x+1)a × (x-1)b f(1, 0) = x+1 f(2, 0) = (x+1)2 f(1, 1) = x2-1 f(1, 2) = x+1(x-1)2 ※汎用化する範囲を広げすぎるとコンポーネントのロジックが複雑になるので注意 JPPGB #9 10

プロパティの型

コンポーネントには4種類のプロパティの型があります。 データ以外の型はプレビュー機能です。 プレビュー(パラメーター設定可)→ JPPGB #9 12

通常プロパティには、入力・出力・動作の三種類があります https://powerplatformnikki.com/componentsproperties/ JPPGB #9 13

• https://powerplatformnikki.com/componentsproperties/

データは、コントロールをまとめて一つの意味をもつ部品を作る 際に有効です アプリ コンポーネント a a+b コントロール b a-b コントロール JPPGB #9 14

データの例： 二次方程式の解を計算するコンポーネント 複数コントロールと それらへの入力の結果、 計算された値が欲しいときに 使用する JPPGB #9 15

関数は、アプリから呼び出す非動作関数を作成することができま す アプリ コンポーネント f(a,b) f(a,b) a b JPPGB #9 コントロール.非動作プロパティ f(a, b) a+b a-b 16

関数の例： 二次方程式の解を計算する非動作関数 非動作プロパティで使用する App.Fomulasと同様の使い方 JPPGB #9 17

アクションは、アプリから呼び出す動作関数を作成することがで きます アプリ コンポーネント f(a,b) a b JPPGB #9 コントロール.動作プロパティ f(a, b) a+b a-b 18

アクションの例： 二次方程式の解を計算する動作関数 動作プロパティで使用する 複雑な処理を簡単にすることがで きる JPPGB #9 19

イベントは、コンポーネントに対して作用する動作関数を作成す ることができます アプリ コンポーネント f(a,b) クリック JPPGB #9 コントロール.動作プロパティ f(a, b) 20

イベントの例： 二次方程式の解を計算する動作関数 コンポーネント内でのみ使用可能 なカスタム関数を作成できる JPPGB #9 21

コンポーネント使用時の注意点

アクセスアプリスコープがオフの場合は、画面のコントロールや 変数にアクセスできず、コンポーネント内に変数が作成される JPPGB #9 画面 コンポーネント コントロール コントロール 変数 変数 23

アクセスアプリスコープをオンにした場合のみ、画面のコント ロールや変数にアクセス可能です JPPGB #9 画面 コンポーネント コントロール コントロール 変数 変数 24

グローバル変数とコレクションが利用でき、アクセスアプリス コープオフの場合はコレクションローカルの変数が作成されます。 使用可否 アクセスアプリ スコープオン アクセスアプリ スコープオフ Set 〇 画面に変数作成 コンポーネントに 変数作成 UpdateContext × - - 画面に変数作成 コンポーネントに 変数作成 (プレビュー不可)※ ClearCollect 〇 ※廃止済み機能をオンにすると画面の変数へアクセスできる JPPGB #9 25

アクセスアプリスコープをオンにすると汎用性が下がる反面、ス キーマのエラーはなくなる JPPGB #9 オン オフ 汎用性高 つくりにくい 汎用性低 つくりやすい 26

単純なロジックは組織単位で、複雑なロジックはアプリ単位のコ ンポーネント化 複雑 アプリA 単純 複雑 アプリB アプリC 複雑 JPPGB #9 27

コンポーネントのインポート/エクスポートは廃止済み。 個別のアプリでの利用なら許容範囲 JPPGB #9 28

コンポーネントライブラリへのアクセス方法 JPPGB #9 29

その他注意点はコルネさん、Hiroさんの資料をご覧ください！ • コルネと学ぶコンポーネント by @korune • Component勉強会 • 今日から始めるPower Appsのコンポーネント開発 by @korune JPPGB #9 30

• https://www.docswell.com/s/korune/ZYRXE5-2021-08-01-152933
• https://www.slideshare.net/NagaoHiroaki/component-249893944
• https://www.docswell.com/s/korune/5W3G45-M365VM22-Korune-Component

2048作ってみた

2048は、2n(n>1)のパネルを組み合わせて大きな数字を作る ゲームです JPPGB #9 32

ゲームボードは1つのギャラリーに座標のテーブルを設定していま す JPPGB #9 33

操作ボードは2つのギャラリーで縦横の操作を可能にしています JPPGB #9 34

アクションプロパティのコンポーネントを使用して、ロジックを 簡単に実行できるようにしています RandPut：ランダムにパネルを配置 Up：上操作時のロジック Down：下操作時のロジック Left：左操作時のロジック Right：右操作時のロジック JPPGB #9 35

トグルによる移動検知・動作の数式の実行 1. ギャラリーが移動(デフォルトの位置で はなくなる) 2. トグルがオンになる 3. OnChangeプロパティの数式が実行され る 4. OnChangeプロパティの最後の Reset(ギャラリー)でデフォルトの位置 に戻る JPPGB #9 36

課題・バグ・妄想

VisibleIndexが正しく計算されない、たまにReset関数が実行さ れないバグがある JPPGB #9 38

PCでは横スクロールの操作性に難がある&そもそも不可 https://amzn.to/3SXbvJ7​ JPPGB #9 39

• https://amzn.to/3SXbvJ7​

スマホの固定レイアウトにすれば安定して動作する JPPGB #9 40

フリック・傾きなど、スマホ専用のアクションゲームを作れたら 面白いかも！！ JPPGB #9 41

生成AIに勝つ！！

デモ