背景
PowerAppsのCanvasアプリは、ふだんLabelなどのコントロールを画面に配置して作ることが多いと思います。僕も商品カタログアプリを作っていて、基本はこの方法でした。
作っていたのは、こんなイメージのアプリです（下はダミーデータのサンプル画面です）。
ただPowerAppsにはHTMLテキストというコントロールがあって、HtmlTextプロパティにHTML文字列を渡すと、そのHTMLがそのまま描画されます。今回初チャレンジでしたが、表示の一部をこれで作ることにしました。
課題
理由は2つあります。
1つ目は、サイズ×カラーのバリアント一覧画面で、表示するアイテム数が多いと、操作しているうちにアプリが強制再起動してしまう問題です。原因は、高さが伸縮するギャラリーの各行にLabelを大量に並べていて、行あたりのコントロール数が多く、描画・メモリの負荷が大きかったことでした。
2つ目は、税込・税抜価格の表示です。税込をメインで大きく、税抜を控えめに併記したかったのですが、Labelを並べる方式だと、この「主従」の表現が地味にやりにくいんですよね。
対応方法
Claudeの提案をもとに、表示内容をHTMLテキストにHTML文字列としてまとめる方針にしました。HTMLはPower Fxの&（文字列連結）で組み立て、色や値はWith()で先に変数化してから差し込んでいます。見た目（色・サイズ・太さ・配置）は、すべてインラインCSSで表現しました。
実装と動作確認は、PowerApps Studio上で僕が行いました。
結果・感想
バリアント一覧のほうは、1行分の複数のLabelを「HTMLテキスト 1つ＋透明ボタン1つ」に統合し、行あたりのコントロール数を大きく減らせました。価格表示のほうも、CSSを使うことで主従の見せ分けが自然にできました。
まとめ
今回は、HTMLテキストを使うことにした背景を書きました。次回から、実際に書いたHTML式を題材に、div・span・tableといったHTMLの基本要素を見ていきます。