Power Apps で「進捗率サークルアイコン」をSVGで実装する方法

この記事で得られる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）を格納したコントロール。フォームやデータカードにバインドされた動的な値です。

まとめ

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 を実際のコントロール名に置き換えてください。