コンポーネント拡張機能でレスポンシブなダイアログを作った話です。

1. 2021.4.3
ZEE CitizenDevSupport / MakotoMaeda
コンポーネント拡張機能で
ダイアログ作ってみた！

2. 今日のお話

3. #TryResponsive
コンポーネントを使ってダイアログ、よく作りますよね。
少し前に強化されたコンポーネント機能を使って
もっといい感じにしてみました。
今日のお話

4. #TryResponsive
コンポーネントがわかってる前提。
わからない人は、これを機会におさえておこう！
前提条件

5. Who are you?

6. 氏名： 前田 誠（おうじゃ）
仕事： Power Apps / Power Automate のフリーランスをしてます。
- アプリ作成や導入に関する支援サービスを提供
- ハンズオン研修（半日/1日）
- ４月から学校で Power Apps 教えることになりました。 ←New！
Who are you?

7. Power Apps 周辺のもくもく会を毎週開いています。
仲間が欲しい人は一緒にやろうぜ！
Who are you?

8. Power Apps でいろいろつくってます。
Who are you?

9. 本題にもどって

10. 作った機能紹介

11. コンポーネントでダイアログつくりました。
作った機能紹介

12. ピックアップ１
アプリサイズにフィット！
入力プロパティから設定することで、
高さと幅を柔軟に変更可能！
作った機能紹介

13. ピックアップ２
レスポンシブ対応！
タブレットでも携帯でも、画面にフィット！
作った機能紹介

14. ピックアップ３
OK、キャンセルに対応！
選択により処理の切り替えが可能！
作った機能紹介

15. DEMO

16. アプリサイズにフィット！

17. プロパティ名はSetting。
Frame以下は型。
コンポーネントの幅はプロパティ値を参照
Component.Width
Self.Setting.Frame.Size.Width
アプリサイズにフィット！

18. 直指定でもいいが、今回は出力プロパティを利用した。
プロパティ値は出力プロパティから取得
{
Margin:100,
FontSize:20,
Frame:Self.GetSize(App.Width,App.Height)
}
アプリサイズにフィット！

19. パラメータはHeightとWidth。
出力プロパティはパラメータから出力
{
Size:
{
Height:Height,
Width:Width
},
～
}
アプリサイズにフィット！

20. 高さ横幅から中心点とか出せる。
ワンポイント解説：
出力プロパティを利用すると、入力値が少なくて済む！
アプリサイズにフィット！

21. レスポンシブ対応！

22. コンポーネントの横幅から
計算してることだけ覚えてもらえれば。
ラベルの横幅はコンポーネントの横幅や設定値から計算
Label.Width
Parent.Width - (Parent.Setting.Margin * 2)
レスポンシブ対応！

23. だいたいできたら、
あとはいいかんじになるまでがんばるだけ。
ワンポイント解説：
コンポーネントの幅や高さから計算すると
動的に対応できる！
レスポンシブ対応！

24. OK、キャンセルに対応！

25. このとき、引数を渡しておく。
プロパティ型：動作と紐付け
OKButton.OnSelect
Parent.SelectButton_OnSelect(true)
OK、キャンセルに対応！

26. 戻り値から処理を分岐させる。
選択値から処理を分岐
Button.OnSelect
If(
SelectedValue,
Notify("削除しました。"),
Notify("キャンセルしました。")
);
OK、キャンセルに対応！

27. うまく使うとGOOD!
ワンポイント解説：
プロパティ型：動作とパラメータを使うと
実装箇所をまとめられてスマートに実装できる！
OK、キャンセルに対応！

28. まとめ

29. 見返しながら作ってみて！
・拡張機能をつかってスマートに実装しよう！
・複雑さが減り、メンテしやすくなるはず！
・詳細が知りたい方は おうじゃさんといっしょ へ！
まとめ

30. ありがとうございました！
# TryResponsive で感想ツイートよろしく！
以上で今日のお話はおわりです。
おわり