※この記事では、"PowerApps" は "PowerApps キャンバスアプリ" の事を指します。
こんにちは！
「 PowerApps は神」 「 PowerApps は〇〇するには難しい」 「やっぱり PowerApps 最高！」
と真逆の発言を繰り返しているインターナルデベロップメントの松井です。
最近は PowerApps で開発する事が特に多く、かなりの時間を PowerApps エディタと過ごしています。
そこで、自分の中で溜まってきた開発時のテクニックをシェアしようと思い、記事にしてみました。
全てを紹介することはできませんので、今回は色々なテクニックの中でもシェアしたいと思った3つのテクニックを紹介します。
1. 要素の配置は基本コンテナで
PowerApps にはコンテナ系のレイアウトコントロールとして、「コンテナー」「垂直コンテナー」「水平コンテナー」の3つが用意されています。
これらのコンテナを組み合わせて要素を配置することで、座標指定に比べて複数のメリットがあります。
一つ目のメリットは、レスポンシブデザイン対応が容易になることです。
「垂直コンテナー」「水平コンテナー」はプロパティを適切に設定することで、要素を均等な間隔で配置したり要素が占める割合を指定して配置することができ、要素の折り返し設定もできるため、レスポンシブデザイン対応が容易にできます。
また、要素ごとに配置設定をしないコンテナは、後から要素を追加・削除するのがとても簡単になります。
座標指定でもレスポンシブデザイン対応はできますが、要素ごとに複雑な計算・条件式を用いた配置が必要であり、その計算・条件式で数珠繋ぎのような依存関係になった複数の要素に後から要素を追加・削除するのは容易ではありません。
二つ目のメリットは、ツリーが構造的になることです。
座標指定配置だと要素が同じ階層にずらっと並んでしまい、とても見にくくなりますが、コンテナを使うと要素が構造的に配置されて見やすくなります。
見え方なんて些細なことのように感じるかもしれませんが、ぱっと見でどの要素がどこに含まれているのかがわかるだけで作業効率が段違いに早くなります。
2. 変数名の先頭にはアンダースコアを入れる
一般的なプログラミング言語では変数と関数を用いますが、PowerApps は変数と関数だけでなく要素やデータを直接用いることができるユニークな特徴があります。
しかし、その特徴のせいで予測変換候補が大量に表示されて使いにくかったり、変数名と要素名が被ってしまってバグの温床になってしまったり、変数なのか要素なのかデータなのかが判別しにくいといった問題があります。
そこで、その問題を解決するために登場するのが "_" (アンダースコア)です。
変数名の先頭にアンダースコアを入れることで、変数かそれ以外かを簡単に見分けることができるようになります。
予測変換もアンダースコアを最初に入れるだけで変数のみに絞れるため、作業効率がかなり上がります。
私はさらに変数とコレクションを区別するため、変数はアンダースコア1つ、コレクションはアンダースコア2つと使い分けることで、できるだけ可読性を向上させています。
3. リッチなボタンにはボタンコントロールを被せる
ボタンコントロールの上にテキストやアイコンなどの要素を重ねたリッチなボタンを作る時、重ねている要素全てに[Selectプロパティ]Select(ボタンコントロール)を指定するのが一般的ですが、これにはいくつか問題があります。
一つ目の問題は、カーソルの問題です。
ボタンにカーソルをホバーした際はポインターカーソルになるのが適切ですが、テキストが重ねてある場合はテキスト挿入カーソルになってしまいます。
二つ目の問題は、ホバー時・選択時の見た目の問題です。
ホバー時・選択時に全体的にボタンを明るく（または暗く）したいとなっても、ホバー・選択している要素のみのデザインが変更され見た目が崩れてしまう事があります。
以下は極端な例ですが、ボタンにホバーした時にボタンのみが明るくなり、アイコンや期日のテキストの色味が変わっていません。
これらの問題を解決する方法が、ボタンコントロールを被せるという方法です。
全体を覆うように被せることで、どこにホバーしても必ずポインターカーソルになります。
ホバー時・選択時の見た目の問題は、通常時は透明で塗りつぶしておき、ホバー時・選択時にのみある程度透過した白色・黒色で塗りつぶされるようにすることで対処できます。
また、被せているボタンコントロールのみが選択されるようになるので、重ねている要素全てにプロパティを設定する必要がなくなります。
最後に
役立つテクニックがあったでしょうか？
紹介したテクニックの中で「いやいや、もっと良いこんな方法があるよ！・知ってるよ！」となった方、ぜひコメントで教えてください！
今回紹介できなかったテクニックや今後も溜まっていくであろうテクニックについては、また別の記事で紹介させていただきます！
