最初のコントロール

Power Apps 入門

Luise Freese

Azure & Power Platform Architect

コントロールは構成要素

 

  • コントロールはすべてのキャンバスアプリの構成要素です
  • 各コントロールは、テキストの表示、入力の受付、アクションの実行のいずれか一つを担当します
  • エディタ上部の数式バーで設定します

 

ツールバーから開いた Power Apps Studio の挿入パネル。テキストラベル、ボタン、ギャラリーなどのコントロールカテゴリが一覧表示されている

Power Apps 入門

テキスト入力から値を読み取る

 

  • テキスト入力はユーザーが入力した内容を保持します
  • 現在の値は TextInput1.Text に格納されます
  • ラベルの Text など、どこからでも参照できます

 

ラベルを選択した状態の Power Apps Studio。数式バーには Text = "Welcome, " & TextInput1.Text と表示され、上のテキスト入力の内容からラベルに "Welcome, Sam" と表示される

Power Apps 入門

Set() で変数を使う

 

Button2 を選択した Power Apps Studio。数式バーには OnSelect = Set(isSignedIn, true) と表示され、キャンバス上の Sign in ボタンがハイライトされている

 

  • 変数はアクションをまたいで値を保持します
  • Set(isSignedIn, true) は isSignedIn という名前の変数を作成します
  • 同じ Set() は第 3 章でも登場します
Power Apps 入門

If() で条件付き表示

 

  • Visible = isSignedIn は true のときだけラベルを表示します
  • ボタンを押す → 変数が更新 → ラベルが表示される
  • 二択の判定には If(condition, value-if-true, value-if-false) を使います

$$

サンクスメッセージのラベルを選択した Power Apps Studio。数式バーには Visible = isSignedIn と表示され、isSignedIn が false のためラベルはキャンバス上で非表示になっている

Power Apps 入門

テーマで個別スタイリングを効率化

 

アプリ全体に適用できるカラーテーマのプレビューをグリッド表示する Power Apps Studio のテーマピッカー

 

  • テーマはパレット、タイポグラフィ、境界線、影を設定 → アプリ全体に適用
  • すべてのモダンコントロールが継承 → 一度の変更で全体のデザインが変わる
  • サイズ、形状、向きはコントロールごとに個別設定
Power Apps 入門

アクセントを 1 つだけ上書きする

  $$

特定のコントロールを目立たせたいですか？

  • 選択し、Fill を直接設定します：RGBA(...) または Color.Teal
  • 多用するとテーマが上書きされるため、注意して使いましょう

Steel テーマを適用し、1 つのアクセントをオーバーライドした Power Apps キャンバスの実際のスクリーンショット

Power Apps 入門

まとめ

Power Apps Studio で開いた Library Sign-in キャンバスアプリ。ツリービュー、コントロールのあるキャンバス、数式バー、プロパティパネルが表示されている

  • テキスト入力は数式バーを通じて他のコントロールにリアルタイムで値を渡します
  • Set() は値を保存し、If() はその値に基づいて表示・非表示を切り替えます
  • テーマは全画面のスタイルを一括設定します。アクセントには 1 つのコントロールの Fill を上書きします
Power Apps 入門

練習しましょう！

Power Apps 入門

Preparing Video For Download...