直接、ツールバーから、または数式バーで、さまざまな UI 要素をアプリに追加したり、要素の外観や動作を構成したりします。 これらの UI 要素はコントロールと呼ばれ、構成する内容はプロパティと呼ばれます。

前提条件

  1. PowerApps にサインアップし、インストールして開きます。その後、サインアップに使用したのと同じ資格情報を入力してサインインします。

  2. PowerApps Studio の [File (ファイル)] メニュー (画面左側) の [New (新規)] をクリックまたはタップします。

    [File (ファイル)] メニューの [New (新規)] オプション

  3. [Blank app (空のアプリ)] タイルで、[Phone layout (Phone レイアウト)] をクリックまたはタップします。

    アプリを最初から作成する

  4. クイック ツアーの開始を求められたら、[Next (次へ)] をクリックまたはタップし、PowerApps インターフェイスの基本事項について確認します (または、[Skip (スキップ)] をクリックまたはタップします)。

    クイック ツアーの最初の画面

    クイック ツアーは後からいつでも開始できます。右上隅の疑問符アイコンをクリックまたはタップし、[Take the intro tour (クイック ツアーの開始)] をクリックまたはタップしてください。

コントロールを追加する

ツールバーの [Insert (挿入)] タブをクリックまたはタップし、カテゴリをクリックまたはタップし、目的のコントロールをクリックまたはタップすることにより、さまざまなカテゴリにコントロールを追加できます。 ここでは、追加できるコントロールの種類と、コントロールの種類ごとの場所を理解するために、各カテゴリのコントロールを確認します。

  • [Text (テキスト)]

    [Text (テキスト)] カテゴリのオプション

    ヒント: ペン入力を使用して書き込みまたは描画を行います。

  • [Controls (コントロール)]

    [Controls (コントロール)] カテゴリのオプション

    ヒント: リスト ボックス、ドロップダウン リスト、またはラジオ ボタンを追加することによって、アプリに選択肢を提供します。

  • [Gallery (ギャラリー)]

    [Gallery (ギャラリー)] カテゴリのオプション

    ヒント: ギャラリーを使用して、テーブルのレコードのリストを表示します。

  • [Forms (フォーム)]

    [Forms (フォーム)] カテゴリのオプション

    ヒント: フォームを使用して、レコードを表示または編集します。

  • [Media (メディア)]

    [Media (メディア)] カテゴリのオプション

    ヒント: アプリにマルチメディアを追加することによって、テキスト以外のデータを表示します。

  • [Charts (グラフ)]

    縦棒グラフ、折れ線グラフ、円グラフ

    ヒント: ミッション クリティカルなデータを表示するには、グラフを構成します。

  • [Icons (アイコン)]

    このカテゴリには、さまざまな図形、アクション アイコン、およびシンボル アイコンが含まれています。 すべてのオプションを確認するには、スクロールします。

コントロールのためにより多くの領域が必要な場合、画面を追加します。

コントロールを直接、構成する

この手順では、ラベル コントロールを追加および構成しますが、同じ原則の多くを他のコントロールに応用できます。

  1. ツールバーの [挿入] タブをクリックまたはタップし、[ラベル] をクリックまたはタップします。

    [Insert (挿入)] タブ

    コントロールを追加するときに、既定で選択されます。 クリックまたはタップすることによって、既存のコントロールを選択することもできます。 コントロールを選択すると、そのコントロールは選択ボックスで囲まれ、選択したコントロールを構成できるよう、UI の他の領域が変化します。 たとえば、ラベル コントロールを選択すると、このようになります。

    選択されたラベル

    重要: 別のコントロールまたは画面の空の領域を選択している状態でコントロールを選択すると、最初の要素は選択解除されます。

  2. ラベル コントロールの幅を狭くするには、選択ボックスの右端にあるハンドルを左にドラッグします (中央のハンドルは、表示を拡大する場合にのみ表示されます)。

    サイズが変更されたラベル

    後で説明するように、コントロールの [Height (高さ)][Width (幅)]、または両方のプロパティを変更してサイズを変更することもできます。

  3. ラベル コントロールを移動するには、選択ボックス自体をドラッグします (または、後で説明するように、[X][Y]、または両方のプロパティを変更します)。

  4. ラベル コントロールに表示されるテキストをトリプル クリックして「Hello, world」と入力します。

    カスタムのテキストが入力されたラベル

    後で説明するように、このコントロールの [Text (テキスト)] プロパティを設定してこのテキストを変更することもできます。

  5. ラベル コントロールを削除するには、コントロールをクリックまたはタップしてから Del キーを押します。

  6. ラベル コントロールを復元するには、Ctrl-Z キーを押します (または、この手順の最初の 4 ステップを繰り返します)。

ツールバーからコントロールを構成する

ツールバーからコントロールを構成することにより、直接構成する場合よりも幅広いオプションを指定できます。

  1. ラベル コントロールを選択した状態で、ツールバーの [ホーム] タブをクリックまたはタップします。

    [Home (ホーム)] タブ

  2. [Fill (塗りつぶし)] をクリックまたはタップし、アクアマリンなどの色をクリックまたはタップします。

    [Fill (塗りつぶし)] オプション

    ラベル コントロールに選択が反映されます。

    アクアマリンに塗りつぶされたラベル

  3. フォント ファミリとテキストのサイズを変更します (たとえば、18 ポイントの Georgia に)。

    フォント コントロール

    ラベル コントロールに選択が反映されます。

    18 ポイント Georgia

  4. [ラベル] タブをクリックまたはタップし、[VerticalAlign] をクリックまたはタップし、[上] をクリックまたはタップします。

    [Text box (テキスト ボックス)] タブ

    ラベル コントロールに選択が反映されます。

    テキストをボックスの上端に揃えたラベル

数式バーでコントロールを構成する

数式バーを使用すると、直接、またはツールバーからは設定できないプロパティを設定できます。 たとえば、ユーザーがコントロールをクリックまたはタップせずポイントしたときに表示されるヒントを設定できます。 アプリの能力を高める複雑な式を指定することもできます。

これまでの説明の中で行った変更のたびに、構成したコントロールのプロパティの値が更新されています。

  • コントロールのサイズを変更したときは、コントロールの [Width (幅)] プロパティを変更しました。
  • コントロールを移動したときは、コントロールの [X] および [Y] プロパティを変更しました。
  • コントロールに表示されるテキストを変更したときは、コントロールの [Text (テキスト)] プロパティを変更しました。

コントロールを直接、またはツールバーから構成する代わりに、プロパティの一覧でプロパティを選択してから数式バーで値を指定することによって、プロパティの値を更新することもできます。 この方法により、プロパティをアルファベット順に検索したり、より多くの種類の値を指定したりできます。

  1. ラベル コントロールを選択した状態で、プロパティの一覧にある [Text] をクリックまたはタップし、数式バーに "My Company Name" と入力します (引用符も含めます)。

    ラベル内のリテラル文字列

    テキストの文字列を引用符で囲むことで、入力したとおりに文字列が扱われる必要があることを指定します。 プロパティの値を数式に設定することもできます。

  2. ラベル コントロールを選択した状態で、プロパティの一覧にある [Text] をクリックまたはタップし、数式バーに Today() と入力します (引用符なし)。

    コントロールは、現在の日付を表示します。

    Today 関数

    ヒント: 日付と時刻に対して計算を実行することに加えて、さまざまな方法で日付と時刻の書式を設定できます。

相互作用するように 2 つのコントロールを構成する

この手順では、チェック ボックスを追加した後、チェック ボックスがオンのときにのみ表示されるように既存のラベルを構成します。

  1. [Insert (挿入)] タブをクリックまたはタップします。

    [Insert (挿入)] タブ

  2. [Controls (コントロール)] をクリックまたはタップし、[Check box (チェック ボックス)] をクリックまたはタップします。

    チェック ボックスを挿入する

  3. ラベル コントロールの下に表示されるようにチェック ボックス コントロールを移動し、チェック ボックス コントロールの [Text] プロパティを設定して、「Show text」と表示されるようにします。

    チェック ボックスを構成する

  4. チェック ボックス コントロールが選択された状態のまま、[Home (ホーム)] タブをクリックまたはタップします。

    チェック ボックスの名前を変更する

  5. ([New screen (新しい画面)] の右側で) チェック ボックス コントロールの現在の名前をクリックまたはタップし、「MyCheckbox」と入力します。

    チェック ボックスの名前を変更する

  6. ラベル コントロールをクリックまたはタップして選択し、[ラベル] タブをクリックまたはタップし、[表示] オプションをクリックまたはタップします。

    [Visible (表示する)] プロパティ

  7. 数式バーで、「true」を削除し、次の式を入力するか貼り付けます。

    If(MyCheckbox!Value = true, true, false)

    この If 関数は、チェック ボックスがオンのときにのみラベルが表示されることを指定します。 チェック ボックスをオフにしたので、ラベル コントロールは表示されなくなります (選択ボックスを除いて)。

    [Visible (表示する)] の数式

  8. チェック ボックス コントロールをクリックまたはタップして選択ボックスをコントロールに追加し、コントロールをもう一度クリックまたはタップしてチェック マークを追加します。

    ラベルが再び表示されます。

    チェック ボックスをオンにするとラベルが表示される

  9. ラベル コントロールを非表示にするには、チェック ボックス コントロールをオフにします。

    チェック ボックスをオフにするとラベルが非表示になる

この例は基本的なものですが、単純なものから複雑なものまで、1 つ以上の数式を構築することによってアプリの動作と外観を構成できます。

画面またはコントロールの名前を変更する

画面またはコントロールの名前を変更することにより、読みやすく保守しやすい数式を構築できます。

  1. 名前を変更する画面またはコントロールをクリックまたはタップします。

  2. [Home (ホーム)] タブで、([New screen (新しい画面)] の右側にある) コントロールの名前をクリックまたはタップし、新しい名前を入力します。

    チェック ボックスの名前を変更する