1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Power Apps コントロール完全解説】テキストラベル編

1
Posted at

はじめに

こんにちは!

このシリーズでは、Power Appsで使用するコントロールを1つずつ取り上げ、基本的な使い方から各プロパティまで詳しく解説していきます。

クラシックコントロールとモダンコントロールの両方を扱い、

  • どんなコントロールなのか
  • どんな場面で使うのか
  • どんなプロパティがあるのか
  • クラシックとモダンで何が違うのか
  • 実務ではどのように使えるのか

まで、実際の設定例やPower Fxを交えながら紹介します。

「このプロパティ、何に使うんだっけ?」

そんなときにも振り返れる、Power Appsのコントロール辞典のようなシリーズを目指していきます。

それでは、今回のコントロールを見ていきましょう!


🏷️ 今回のコントロール:テキストラベル

今回取り上げるのは、ラベルコントロールです。

ラベルは、アプリ上に文字や値を表示するために使用する基本的なコントロールです。

例えば、

  • 項目名
  • ユーザー名
  • 日付
  • ステータス
  • 件数
  • 計算結果
  • エラーメッセージ
  • ユーザーへの案内

など、さまざまな情報の表示に使用できます。

一見すると「文字を表示するだけ」のシンプルなコントロールですが、Power Fxと組み合わせることで、アプリの状態に応じた動的な表示もできます。

例えば、ログインしているユーザー名を表示する場合は、

User().FullName

件数を表示する場合は、

"登録件数:" & CountRows(Gallery1.AllItems) & "件"

条件によって表示内容を変更することもできます。

If(
    glbIsEdit,
    "編集中",
    "参照中"
)

このようにラベルは、アプリが持っている情報をユーザーに伝えるための重要なコントロールです。


💡 まずはこれだけ覚えよう

ラベルには多くのプロパティがあります。

最初からすべて覚える必要はありません。

まずは、次のプロパティを押さえておくとラベルの基本的な操作ができます。

プロパティ 役割
Text 表示する文字や値を指定する
Visible 表示・非表示を制御する
Color 文字色を指定する
Fill 背景色を指定する
Size 文字サイズを指定する
Width 横幅を指定する
Height 高さを指定する

💡 POINT

特に重要なのが Text と Visible です。

「何を表示するか」と「いつ表示するか」。

この2つをPower Fxで制御できるようになると、ラベルの活用範囲が大きく広がります。


🎨 クラシックとモダン

Power Appsには、従来から存在するクラシックコントロールと、新しいデザインシステムを採用したモダンコントロールがあります。

文字を表示するコントロールについても、それぞれ用意されています。

クラシック モダン
コントロール名 Label Text
主な用途 テキストの表示 テキストの表示
Power Fx 使用可能 使用可能
デザイン プロパティを細かく設定 テーマとの統合を重視

名前は異なりますが、基本的な役割はどちらも同じです。

ユーザーに文字や値を表示する

ここからは、クラシック → モダンの順番で、それぞれのプロパティを見ていきます。


🧱 クラシック:Label

まずはクラシックのLabelコントロールです。
image.png

基本的な使い方

Labelに表示する内容は、Textプロパティで指定します。

固定文字を表示する場合は、

"こんにちは!"

と設定します。

Power Fxを使って動的な値を表示することもできます。

"こんにちは、" & User().FullName & "さん"

例えば、次のように表示されます。

こんにちは、山田 太郎さん

「文字を書くためのコントロール」

というより、

「Power Fxの結果をユーザーに見せるためのコントロール」

と考えてみるとイメージしやすくなります。

User().FullName で取得される表示名は、Microsoft 365に登録されているユーザー情報に依存します。
そのため、環境やユーザーの設定によって表示内容が異なる場合があります。


📚 クラシック:プロパティ一覧

クラシックのLabelコントロールで使用できるプロパティを紹介します。

プロパティの掲載順は、Power Apps Studioの「詳細設定」に表示される順番に準拠しています。

また、それぞれのプロパティについて、一般的なアプリ開発でどの程度使用するかを5段階で表しています。

使用頻度の見方

アイコン 使用頻度
🤩 非常によく使う
😊 よく使う
🙂 使用することがある
😐 使用する機会は少ない
😴 使用する機会はかなり限定的

使用頻度はMicrosoft公式による評価ではありません。
一般的なPower Appsのアプリ開発を想定した、本記事独自の目安です。


⚙️ アクション

プロパティ 内容 使用頻度
OnSelect コントロールがクリックされたときに実行する処理を指定する 🙂

🗃️ データ

プロパティ 内容 使用頻度
ContentLanguage コントロールのコンテンツに使用する言語を指定する 😴
Live 内容が変更された際のスクリーンリーダーへの通知方法を指定する 😴
Role テキストの役割を指定する 😴
Text 表示する文字や値を指定する 🤩
Tooltip マウスポインターを合わせた際に表示する補足情報を指定する 😊

🎨 デザイン

プロパティ 内容 使用頻度
Align テキストの水平方向の配置を指定する 🙂
AutoHeight テキスト量に応じて高さを自動調整する 🙂
BorderColor 枠線の色を指定する 🙂
BorderStyle 枠線の種類を指定する 🙂
BorderThickness 枠線の太さを指定する 😊
Color テキストの色を指定する 🤩
DisabledBorderColor 無効状態の枠線の色を指定する 😴
DisabledColor 無効状態のテキストの色を指定する 😴
DisabledFill 無効状態の背景色を指定する 😴
DisplayMode コントロールの表示モードを指定する 😐
Fill 背景色を指定する 😊
FocusedBorderColor フォーカス時の枠線の色を指定する 😴
FocusedBorderThickness フォーカス時の枠線の太さを指定する 😴
Font フォントを指定する 😐
FontWeight テキストの太さを指定する 🙂
Height コントロールの高さを指定する 🤩
HoverBorderColor マウスオーバー時の枠線の色を指定する 😴
HoverColor マウスオーバー時のテキストの色を指定する 😴
HoverFill マウスオーバー時の背景色を指定する 😴
Italic テキストを斜体にするか指定する 😴
LineHeight テキストの行間を指定する 😐
Overflow コントロールからはみ出した内容の表示方法を指定する 😐
PaddingBottom 下側の内側余白を指定する 🙂
PaddingLeft 左側の内側余白を指定する 🙂
PaddingRight 右側の内側余白を指定する 🙂
PaddingTop 上側の内側余白を指定する 🙂
PressedBorderColor 選択時の枠線の色を指定する 😴
PressedColor 選択時のテキストの色を指定する 😴
PressedFill 選択時の背景色を指定する 😴
Size テキストのサイズを指定する 🤩
Strikethrough テキストに取り消し線を付けるか指定する 😴
TabIndex Tabキーによるフォーカス順序を指定する 😐
Underline テキストに下線を付けるか指定する 😴
VerticalAlign テキストの垂直方向の配置を指定する 😐
Visible コントロールの表示・非表示を指定する 🤩
Width コントロールの横幅を指定する 🤩
Wrap テキストを折り返して表示するか指定する 🙂
X コントロールの横方向の位置を指定する 🤩
Y コントロールの縦方向の位置を指定する 🤩

🔍 クラシック:主要プロパティを詳しく見てみよう

ここからは、クラシックのLabelコントロールの中でも、使用頻度が 🤩「非常によく使う」または 😊「よく使う」 プロパティに絞って詳しく見ていきます。

Text

Textは、Labelに表示する内容を指定するプロパティです。

ラベルを使用するうえで最も基本となるプロパティです。

基本例

"ユーザー情報"

動的な値を表示

User().FullName

文字列と値を組み合わせる

"ユーザー名:" & User().FullName

条件によって内容を変更する

If(
    glbIsEdit,
    "編集中",
    "参照中"
)

💡 POINT

Textには固定文字だけでなく、関数・変数・データソースの値・計算結果など、さまざまなPower Fxを設定できます。


Tooltip

Tooltipは、マウスポインターをコントロールに合わせたときに表示する補足説明を指定するプロパティです。

画面上に常時表示する必要はないものの、ユーザーに補足情報を伝えたい場合に利用できます。

基本例

"ログインしているユーザーの名前を表示しています"

データソースの値をそのまま表示することもできます。

ThisItem.Title

BorderThickness

BorderThicknessは、Labelの枠線の太さを指定するプロパティです。

例えば、

1

と設定すると、太さ1の枠線が表示されます。

0

と設定すると、枠線は表示されません。

数値を大きくするほど枠線が太くなります。


Color

Colorは、文字の色を指定するプロパティです。

例えば赤色にする場合は、

Color.Red

と設定します。

条件によって文字色を変更することもできます。

If(
    glbError,
    Color.Red,
    Color.Black
)

例えば、エラー時だけ文字を赤くするといった表現ができます。

💡 POINT

ColorにPower Fxを設定することで、アプリの状態に応じて文字色を動的に変更できます。


Fill

Fillは、コントロールの背景色を指定するプロパティです。

例えば、

Color.White

と設定すると、背景色を白色にできます。

透明にする場合は、

RGBA(0, 0, 0, 0)

と設定できます。

条件によって背景色を変更することもできます。

If(
    glbError,
    Color.LightPink,
    Color.White
)

Colorと組み合わせることで、ステータスやエラーなどを視覚的に分かりやすく表現できます。


Height

Heightは、コントロールの高さを指定するプロパティです。

例えば、

40

と設定すると、高さを40にできます。

固定値だけでなく、他のコントロールを基準に設定することもできます。

Button1.Height

複数のコントロールで高さを揃えたい場合などにも利用できます。


Size

Sizeは、文字サイズを指定するプロパティです。

例えば、

16

と設定します。

タイトル・見出し・本文・補足説明など、用途に応じて文字サイズを変更します。

例えば、画面タイトルを大きく表示する場合は、

24

項目名などでは、

14

といったように使い分けることができます。


Visible

Visibleは、コントロールを表示するかどうかを制御するプロパティです。

trueの場合は表示され、

true

falseの場合は非表示になります。

false

条件による表示制御

例えば、グローバル変数を使う場合は、

glbShowMessage

と設定できます。

glbShowMessageがtrueの場合だけラベルが表示されます。

エラーメッセージが存在するときだけ表示する場合は、

!IsBlank(glbErrorMessage)

のような設定もできます。

💡 POINT

Visibleはラベルだけでなく、多くのコントロールで使用する重要なプロパティです。

Power Appsでは、条件によってコントロールを表示・非表示にする場面が多いため、実務でも頻繁に使用します。


Width

Widthは、コントロールの横幅を指定するプロパティです。

例えば、

300

と設定すると、横幅を300にできます。

固定値だけでなく、親コントロールを基準にすることもできます。

Parent.Width

とすることで、親コントロールと同じ横幅にできます。

左右に20ずつ余白を設ける場合は、

Parent.Width - 40

のような計算も可能です。


X

Xは、コントロールの横方向の位置を指定するプロパティです。

例えば、

20

と設定すると、親要素の左端を基準として横方向の位置を指定できます。

固定値だけでなく、他のコントロールを基準にすることもできます。

LabelTitle.X + LabelTitle.Width + 10

この場合、LabelTitleの右側に10の間隔を空けて配置できます。


Y

Yは、コントロールの縦方向の位置を指定するプロパティです。

例えば、

100

と設定すると、親要素の上端を基準として縦方向の位置を指定できます。

固定値だけでなく、他のコントロールを基準にすることもできます。

LabelTitle.Y + LabelTitle.Height + 10

この場合、LabelTitleの下に10の間隔を空けて配置できます。


✨ モダン:Text

続いて、モダンコントロールです。
image.png
モダンコントロールでは、クラシックのLabelに相当する文字表示用コントロールとしてTextコントロールがあります。

基本的な役割は同じですが、モダンコントロールではテーマとの統合など、新しいデザインシステムを前提とした設計になっています。


📚 モダン:プロパティ一覧

モダンTextについても、用途ごとにプロパティを見ていきます。

⚙️ アクション

プロパティ 内容 使用頻度
OnSelect コントロールがクリックされたときに実行する処理を指定する 🙂

🗃️ データ

プロパティ 内容 使用頻度
AccessibleLabel スクリーンリーダーなどの支援技術向けの説明を指定する 😐
ContentLanguage コントロールのコンテンツに使用する言語を指定する 😴
Text 表示する文字や値を指定する 🤩

🎨 デザイン

プロパティ 内容 使用頻度
Align テキストの水平方向の配置を指定する 🙂
AutoHeight テキスト量に応じて高さを自動調整する 🙂
BorderColor 枠線の色を指定する 🙂
BorderStyle 枠線の種類を指定する 🙂
BorderThickness 枠線の太さを指定する 😊
Color テキストの色を指定する 🤩
DisplayMode コントロールの表示モードを指定する 😐
Fill 背景色を指定する 😊
Font フォントを指定する 😐
FontWeight テキストの太さを指定する 🙂
Height コントロールの高さを指定する 🤩
Italic テキストを斜体にするか指定する 😴
PaddingBottom 下側の内側余白を指定する 🙂
PaddingLeft 左側の内側余白を指定する 🙂
PaddingRight 右側の内側余白を指定する 🙂
PaddingTop 上側の内側余白を指定する 🙂
RadiusBottomLeft 左下の角丸の大きさを指定する 🙂
RadiusBottomRight 右下の角丸の大きさを指定する 🙂
RadiusTopLeft 左上の角丸の大きさを指定する 🙂
RadiusTopRight 右上の角丸の大きさを指定する 🙂
Size テキストのサイズを指定する 🤩
Strikethrough テキストに取り消し線を付けるか指定する 😴
Underline テキストに下線を付けるか指定する 😴
VerticalAlign テキストの垂直方向の配置を指定する 😐
Visible コントロールの表示・非表示を指定する 🤩
Width コントロールの横幅を指定する 🤩
Wrap テキストを折り返して表示するか指定する 🙂
X コントロールの横方向の位置を指定する 🤩
Y コントロールの縦方向の位置を指定する 🤩

モダンTextのDisplayModeについては、Microsoft Learnでは更新版のコントロールからプロパティパネルから削除され、後方互換性のために残っているものの効果はないとされています。

Power Appsのバージョンや環境によって、表示されるプロパティが異なる可能性があります。


🔍 モダン:主要プロパティを詳しく見てみよう

モダンのTextコントロールで使用頻度が 🤩「非常によく使う」または 😊「よく使う」 としたプロパティについては、基本的な使い方はクラシックのLabelコントロールと同様です。

そのため、ここでは個別の説明は省略します。

各プロパティの使い方については、前述の「クラシック:主要プロパティを詳しく見てみよう」を参照してください。

モダンとクラシックでは使用できるプロパティの種類に違いがありますが、今回取り上げた主要プロパティについては基本的な使い方は同様です。


⚖️ クラシックとモダンの違い

最後に、クラシックLabelとモダンTextを比較してみます。

項目 クラシック Label モダン Text
基本用途 テキスト表示 テキスト表示
Power Fx ○ ○
動的な表示 ○ ○
表示・非表示 ○ ○
スタイル設定 個別に細かく指定しやすい テーマとの統合を重視
デザイン 従来のPower Apps モダンなデザイン

どちらも「テキストを表示する」という基本的な役割は共通しています。

ただし、利用できるプロパティやデザインの考え方には違いがあります。

クラシックとモダンを混在させる場合は、それぞれの特徴を理解したうえで使用することが重要です。


🛠️ 実務で使えるラベル活用例

ここからは、実際のアプリで使いやすい設定をいくつか紹介します。

👤 ログインユーザーを表示

"ログインユーザー:" & User().FullName

ログインしているユーザーの名前を画面上に表示できます。


📅 今日の日付を表示

Text(
    Today(),
    "yyyy/mm/dd"
)

アプリを開いた日の日付を表示できます。


🔢 登録件数を表示

"登録件数:" & CountRows(Gallery1.AllItems) & "件"

ギャラリーに表示されているデータの件数をユーザーに伝えることができます。


🚨 エラーメッセージを表示

Text

glbErrorMessage

Visible

!IsBlank(glbErrorMessage)

Color

Color.Red

これで、glbErrorMessageに値が入っている場合だけ、赤文字でエラーメッセージを表示できます。


🔄 状態によって表示を変更

If(
    glbIsEdit,
    "✏️ 編集中",
    "👀 参照中"
)

Power Appsでは、このようにコントロールのプロパティそのものにPower Fxを設定することで、アプリの状態に応じたUIを作ることができます。


⚠️ ラベルを使うときのポイント

ラベルは、ユーザーに文字や値などの情報を表示することを目的としたコントロールです。

ラベルにはOnSelectプロパティがあるため、クリックしたときに画面遷移や処理を実行することもできます。

例えば、

Navigate(Screen2)

と設定すれば、ラベルをクリックして別の画面へ遷移させることができます。

しかし、ラベルは見た目上「文字を表示するためのコントロール」であるため、ユーザーから見るとクリックできることが分かりにくい場合があります。

そのため、

  • 画面遷移させたい
  • 処理を実行させたい
  • ユーザーにクリックしてもらいたい

といった用途では、基本的にButtonなど、クリックできることがUI上で分かりやすいコントロールを使用しましょう。

💡 POINT

OnSelectが設定できるからといって、必ずしもクリック操作に適したコントロールとは限りません。

ラベルは基本的に**「ユーザーに情報を見せる」**ために使用し、クリック操作にはその役割がユーザーに伝わりやすいコントロールを使用することが大切です。


📝 まとめ

今回は、Power Appsのラベルコントロールについて解説しました。

ラベルはシンプルなコントロールですが、

  • 固定文字の表示
  • データの表示
  • ユーザー情報の表示
  • 計算結果の表示
  • ステータスの表示
  • エラーメッセージの表示

など、実際のアプリではさまざまな場面で使用します。

特に、

  • Text
  • Visible
  • Color
  • Fill
  • Size
  • Width
  • Height

あたりは使用する機会が多いため、まず押さえておきたいプロパティです。

そしてラベルを使いこなすポイントは、

「文字を表示するコントロール」ではなく、「Power Fxの結果をユーザーに伝えるコントロール」と考えること。

Power Fxと組み合わせることで、シンプルなラベルでもさまざまな表現ができるようになります。


今後も、Power Appsで使用するコントロールを1つずつ取り上げ、「このプロパティ何だっけ?」というときに振り返れる記事としてまとめていきます。

最後まで読んでいただき、ありがとうございました!
この記事が、Power Apps開発者の皆様に少しでもお役に立てていれば幸いです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?