この記事で得られる3つのポイント
- PowerAppsで動的な進捗アイコンをSVGで自作する方法がわかる
- Power FxとSVGの連携で、リアルタイムに色や表示値を変える仕組みを学べる
- 見た目のカスタマイズ性を高めて、伝わるUIを設計できるようになる
標準アイコンだけでは物足りない?
Power Apps の標準アイコンやグラフは、手軽に使えて便利な一方で、以下のような悩みを持ったことはないでしょうか?
- 「円グラフっぽく進捗を見せたいけど、いいコンポーネントがない」
- 「色や形をもっと自由に変えたい」
- 「満足度やスコアを”ぱっと見で伝える”UIがほしい」
こうしたニーズに応えるのが SVG(Scalable Vector Graphics) の活用です。SVGは、コードで見た目を定義できる画像フォーマットで、Power Fxと組み合わせることで、数値によって動的に変化するアイコンを作成できます。
別記事:Power AppsでもSVGが使える!自由自在なアイコン作成のすすめ
実装:SVGで「進捗サークル」を描いてみよう
完成イメージ
下記のような、スコアによって色と円の長さが変わる進捗サークルを実装します。
- スコアが高いほど「緑」、中程度なら「黄」、低いと「赤」に変化
- 円グラフのように円弧の長さでスコアを視覚化
- 真ん中には数値(%)を表示

コード全文(Power Fx)
ImageコントロールのImageプロパティに以下を入力してください:
"data:image/svg+xml," &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='100' height='100'>
<circle cx='18' cy='18' r='16' fill='none' stroke='#E0E0E0' stroke-width='3'/>
<circle cx='18' cy='18' r='16' fill='none' stroke='" &
If(
Round(ProgressValue.Text, 2) >= 0.8,
"#4CAF50", // 緑
If(
Round(ProgressValue.Text, 2) >= 0.5,
"#FFC107", // 黄
"#F44336" // 赤
)
) &
"' stroke-width='3'
stroke-dasharray='" &
Text(Round(ProgressValue.Text * 100, 0), "[$-en-US]0") & ",100'
stroke-linecap='round' transform='rotate(-90 18 18)'/>
<text x='18' y='22' text-anchor='middle' font-size='10' font-family='Arial, sans-serif' fill='#000'>" &
Text(Round(ProgressValue.Text * 100, 0), "[$-en-US]0") & "%</text>
</svg>"
)
各パーツの解説
SVG要素 | 意味・役割 |
---|---|
<circle>(1つ目) | 灰色の背景円(ベース) |
<circle>(2つ目) | スコアに応じた色と長さの円弧 |
stroke-dasharray | 円の「塗り分け」を制御(例:80,100で80%) |
transform=’rotate(-90 18 18)’ | 円弧の開始位置を上(12時方向)に調整 |
<text> | 真ん中に数値を表示(%形式) |
ProgressValue.Text | 進捗率を表す数値(0.0~1.0)を格納したコントロール。フォームやデータカードにバインドされた動的な値です。 |
この部分は、たとえば SharePoint や Dataverse に格納された「進捗率」や「スコア値」などのフィールドと接続されたテキスト入力コントロールです。
Power Apps のフォームにおいて、ProgressValue.Text という名前のコントロールが対象フィールドの値を読み込んでおり、SVG内ではそれを参照しています。
まとめ
PowerAppsでSVGを使うと、見た目にこだわったUIがぐっと身近になります。
今回紹介した「進捗サークル」は、数値 × 視覚化の最適な例です。
次は、SVGで「ナビゲーション用の戻る・進むアイコン」や「カスタムアニメーション付きアイコン」も作ってみてはいかがでしょうか?
Power Fx × SVG:コード詳細解説
ここでは、先ほどのSVGコードを構成する各パーツについて、Power Appsでの役割やカスタマイズのポイントを丁寧に解説します。
① “data:image/svg+xml,” & EncodeUrl(…)
SVGコードをBase64ではなく、URLエンコード形式でImageコントロールに表示するための記述です。
EncodeUrl(…) によってSVGタグ内の記号(<, >, # など)を正しくWeb用に変換し、Power Appsで問題なく扱えるようにしています。
② <svg xmlns=… viewBox=’0 0 36 36′ width=’100′ height=’100’>
SVG全体の定義です。
- viewBox=’0 0 36 36′ は座標系の基準。36×36の仮想キャンバス上に図形を配置します。
- width=’100′ height=’100′ はPower Apps上での表示サイズ(ピクセル単位)。自由に変更可能です。
③ <circle cx=’18’ cy=’18’ r=’16’ fill=’none’ stroke=’#E0E0E0′ stroke-width=’3’/>
グレーの背景円を描画するコードです。
- cx=’18’ cy=’18’:中心座標。viewBoxの中央(18,18)に円を配置
- r=’16’:半径16の円。stroke幅3を含めると、ちょうど外枠に収まる大きさです
- stroke=’#E0E0E0’:色は薄いグレー。進捗表示のベースになります
- fill=’none’:中を塗らない(空洞にする)指定です
④ <circle … stroke='(Power Fx 式)’ stroke-dasharray='(Power Fx 式)’ … />
この部分が進捗率に応じて変化するメインのサークルです。以下のように動的に生成されます。
stroke=’(Power Fx 式)’
If(
Round(ProgressValue.Text, 2) >= 0.8, "#4CAF50", // 緑
If(
Round(ProgressValue.Text, 2) >= 0.5, "#FFC107", // 黄
"#F44336" // 赤
)
)
- ProgressValue.Text は 進捗率(0~1)を格納したコントロール
- この値に応じて、進捗円の色を「緑(80%以上)」「黄(50%以上80%未満)」「赤(それ未満)」に分岐
- Round() で少数第2位まで四捨五入しています
stroke-dasharray=’(Power Fx 式)’
Text(Round(ProgressValue.Text * 100, 0), "[$-en-US]0") & ",100"
- SVGのstroke-dasharray属性は、**線を「何%描画するか」**を指定するための属性です
- 60,100 なら、円の60%だけ塗り、残りは空白に
- ProgressValue.Text * 100 で進捗をパーセンテージに変換し、0~100の範囲に変換
- Text(…, “[$-en-US]0”) で小数点なしの数字に整形(ロケール設定付き)
その他属性
- stroke-linecap=’round’:線の両端を丸くする指定。美しく見せる効果があります
- transform=’rotate(-90 18 18)’:円の描画開始位置を上(12時方向)に回転して調整(デフォルトは3時方向)
⑤ <text …>
円の中央にスコアの数値(%)を表示するための要素です。
<text x='18' y='22' text-anchor='middle' font-size='10' font-family='Arial, sans-serif' fill='#000'>
(Power Fx 式での数値表示)
</text>
- x=’18’ y=’22’:中央に配置(やや下に調整)
- text-anchor=’middle’:テキストを中央寄せで描画
- font-size=’10’ や fill=’#000′ は表示サイズ・色の指定
Power Fx内では、以下のように数値(%)を埋め込みます:
Text(Round(ProgressValue.Text * 100, 0), "[$-en-US]0") & "%"
補足:ProgressValue.Text の意味
この式の中で使われている ProgressValue.Text は、フォームやギャラリーなどのデータカード内にある「値入力フィールド」に相当します。
例えば SharePoint や Dataverse にある「進捗率(0.0~1.0)」という列に接続していれば、
その値を読み取り、SVGの見た目にリアルタイム反映してくれるわけです。
読者の環境に合わせて、ProgressValue を実際のコントロール名に置き換えてください。
コメント