Power Apps でボタンやプログレスバーを作るとき、標準コントロールのデザインだと物足りないことがあります。コンテナを使って複数のコントロールをまとめることで、見た目も動作も自分好みのカスタムコントロールを作れます。しかも一度作ればコピペで量産できます。
カスタムコントロールとは何か
Power Apps におけるカスタムコントロールとは、複数のコントロールをコンテナにまとめて一つの部品として扱えるようにしたものです。コンポーネント（Component Library）という仕組みも似たようなことができますが、コンポーネントは複数画面での再利用を前提にしていて、設定が少し複雑です。一方、コンテナを使ったカスタムコントロールは同一画面内での量産・使い回しに向いていて、コピペするだけで増やせるのが強みです。
コンテナを使ったレイアウト設計の全体像はPower Apps コンテナ完全ガイドで解説しています。このページではその応用として、カスタムコントロールの実装パターンを具体的に掘り下げます。
私がよく作るのはカスタムボタンとプログレスバーの2種類です。どちらも標準コントロールだと痒いところに手が届かない場面があり、コンテナで自作することにしました。一度パターンを作ってしまえば、以降は複製して中身を変えるだけなので、2つ目からの作業はとても速くなります。
カスタムボタンの作り方
標準の Button コントロールはシンプルで使いやすいですが、アイコンとテキストを横並びにしたい、テキストの左右にそれぞれ要素を置きたい、といった要件には対応しにくいです。そこでコンテナを使ってボタンを自作します。
構成はシンプルです。Auto Layout の水平コンテナを作り、中にアイコン（または Icon コントロール）とラベルを横並びで入れます。さらに透明な Button コントロールを同じコンテナに重ねてタップ判定を担当させます。
cntCustomBtn（水平 Auto Layout コンテナ）
├─ Icon コントロール（アイコン表示）
├─ Label（テキスト表示）
└─ Classic/Button（Fill: Transparent、タップ判定専用）Button の Fill を Color.Transparent にしてコンテナ全体を覆うように配置することで、見た目はアイコン＋テキストのカスタムデザインのまま、クリック・タップの判定は Button が受け持つという役割分担ができます。OnSelect の処理は Button コントロールに書きます。
コピペで量産する方法
このカスタムボタンを別の場所に使い回したいときは、コンテナごとコピーします。コンテナをコピーすると中の子要素も全員ついてきます。コピー後に変える箇所は Label の Text プロパティと Button の OnSelect だけです。アイコンの種類を変えたい場合は Icon プロパティも変えますが、それだけで別のボタンとして機能します。
私のアプリでは更新ボタン・フィルタークリアボタン・CSVエクスポートボタンをすべてこのパターンで作っています。最初の1つを作るのに10分かかっても、2つ目以降は3分で完成します。コンポーネントを使うほどではないけれど、同じ画面で何度も使うボタンがあるなら、このコンテナ量産パターンが一番コスパが良いです。
カスタムプログレスバーの作り方
Power Apps には標準のプログレスバーコントロールがありません（モダンコントロールのProgressBar は存在しますが、デザインの自由度が低い）。コンテナと Rectangle を組み合わせると、自由なデザインのプログレスバーが作れます。
構造はこうです。外側コンテナがバー全体の背景（グレーなど）を担当し、内側コンテナが進捗部分（グリーンなど）を担当します。内側コンテナの Width を進捗率に応じた式で動的に変えることで、バーの長さが変化します。
cntBar（外側コンテナ：背景色・角丸設定）
├─ recLeft（Rectangle：進捗部分、Width は動的計算）
└─ recRight（Rectangle：残余部分、Width は残り幅）進捗部分の Width 式はこう書きます。
// recLeft の Width（進捗部分）
Parent.Width * varSubmittedCount / varTotalCountParent.Width はバー全体の幅、varSubmittedCount は完了件数、varTotalCount は総件数です。完了件数が30で総件数が100なら、バーは全体の30%の長さになります。残余部分（recRight）の Width は Parent.Width - recLeft.Width で計算すると、合計が常にバー全体の幅になります。
件数ゼロのときのエラーを防ぐ
varTotalCount がゼロのとき、ゼロ除算エラーになります。データがまだない初日や、フィルターで全件が除外された場合などに起きます。これを防ぐには If 式で分母がゼロの場合を分岐させます。
// ゼロ除算を防ぐ式
If(
varTotalCount = 0,
0,
Parent.Width * varSubmittedCount / varTotalCount
)私はこのプログレスバーを船舶の作業進捗表示に使っています。varTotalCount が全船舶数、varSubmittedCount が作業提出済み船舶数です。朝一番にアプリを開いたとき、バーがどこまで埋まっているかで今日の進捗が一目でわかります。数字だけ見るより直感的で、チームへの共有にも使いやすいです。
コンポーネントとの違いと使い分け
コンポーネント（Component Library）はプロパティを外部から注入できるため、複数の画面・複数のアプリで同じ部品を共通化したい場合に向いています。一方、コンテナを使ったカスタムコントロールは同一画面内での使い回しに向いています。設定の複雑さとスコープで使い分けるのが現実的です。
まとめると、同一画面で3つ以上同じデザインのボタンやバーを使う場合はコンテナ量産パターン、複数画面や複数アプリに展開したい場合はコンポーネントという判断基準で問題ないです。市民開発の現場では、コンポーネントを設計する時間が取れないことも多いので、まずコンテナで作って後からコンポーネント化するというステップが現実的です。
角丸をコンテナで実現するテクニックはコンテナを使ってすべてのコントロールに角丸を適用する方法で解説しています。カスタムコントロールにも同じ考え方が使えるので、合わせて確認してみてください。
まとめ
コンテナを使ったカスタムコントロールは、作る手間より使い回しのメリットの方がはるかに大きいです。最初の1個を丁寧に作っておけば、あとはコピペと中身の差し替えだけで量産できます。プログレスバーのように標準コントロールにないものも自作できるのがコンテナの強みです。市民開発はこういった小さな工夫の積み重ねで、アプリの品質が上がっていきます。楽しみながら試してみてください。
