JPPGB #9 2048作ってみた

1.7K Views

March 02, 24

スライド概要

JPPGB #9での登壇スライドです。
Power Appsで作成した2048とコンポーネントについて話しています
【JPPGB #9】Power Appsで2048を作ってみたhttps://powerplatformnikki.com/powerapps2048/
このプレゼンテーションでは、Power Appsでコンポーネントを使用することで、ロジックの重複を避け、再利用可能な共通部品を作成することができることが説明されています。コンポーネントは、コントロールの共通部品化、デザインの統一、スキルのギャップ解消、関数の汎用化・共通化などの利点があり、重複するロジックや複雑なロジックの汎用化が判断基準になります。プロパティの型は、データ、関数、アクションがあり、それぞれ入力・出力・動作の三種類があります。データは、コントロールをまとめて一つの意味をもつ部品を作る際に有効であり、関数は、アプリから呼び出す非動作関数を作成することができます。アクションは、アプリから呼び出す動作関数を作成することができます。

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

コンポーネントの概要

5.

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

6.

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

7.

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

8.

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

9.

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

10.

汎用化できれば、多くのアプリのロジックを処理の過程を理解す ることなく実装できる 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

11.

プロパティの型

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

2048作ってみた

32.

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

33.

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

34.

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

35.

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

36.

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

37.

課題・バグ・妄想

38.

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

39.

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

40.

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

41.

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

42.

生成AIに勝つ!!

43.

デモ