アプリへのさまざまな UI 要素の追加や、要素の外観と動作の構成を、ツールバー、[プロパティ] タブ、数式バーなどから直接行います。 これらの UI 要素はコントロールと呼ばれ、構成する内容はプロパティと呼ばれます。

前提条件

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

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

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

  3. [空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。

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

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

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

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

コントロールを追加する

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

  • [挿入] タブで、これらのカテゴリのいずれかをクリックまたはタップした後、追加するコントロールをクリックまたはタップします。

    テキスト: ラベル、テキスト入力、HTML テキスト、ペン入力
    コントロール: ボタン、ドロップ ダウン、日付の選択、リスト ボックス、チェック ボックス、ラジオ、トグル、スライダー、評価、タイマー
    ギャラリー: 縦、横、高さ (伸縮可能)、縦方向 (空)、横方向 (空)、高さ (伸縮可能、空)
    データ テーブル
    フォーム: 編集、表示、エンティティ フォーム
    メディア: 画像、カメラ、バーコード、ビデオ、オーディオ、マイク、画像の追加
    グラフ: 縦棒グラフ、折れ線グラフ、円グラフ
    [Icons (アイコン)]

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

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

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

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

    [Insert (挿入)] タブ

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

    選択されたラベル

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

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

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

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

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

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

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

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

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

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

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

    [Home (ホーム)] タブ

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

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

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

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

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

    フォント コントロール

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

    18 ポイント Georgia

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

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

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

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

[プロパティ] タブでコントロールを構成する

[プロパティ] タブを使用して、数式を記述することなくコントロールを構成できます。 この手順では、もう 1 つのラベル コントロールを追加および構成しますが、同じ原則の多くを他のコントロールに応用できます。

  1. このトピックで前述したように、もう 1 つのラベル コントロールを追加します。

  2. 新しいコントロールを選択して、右側のウィンドウにある [プロパティ] タブをクリックまたはタップします。

    [プロパティ] パネル

  3. [テキスト] ボックスに「Properties tab」と入力します。

    [プロパティ] パネルのラベル テキスト

    入力したテキストがラベル コントロールに表示されます。

    [プロパティ] パネルのキャンバス テキスト

  4. [プロパティ] パネルの塗りつぶしアイコンをクリックまたはタップして、色をクリックまたはタップします。

    [プロパティ] パネルの色テキスト

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

    [プロパティ] パネルのキャンバス色

  5. [プロパティ] パネルの Color プロパティをクリックまたはタップします。

    [プロパティ] パネルのプロパティ

    Color プロパティの値が数式バーで強調表示されます。

    [プロパティ] パネルのプロパティ式

    1. コントロールをクリックまたはタップしてから [削除] を押し、2 つ目のラベル コントロールを削除します。

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

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

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

  • コントロールのサイズを変更したときは、コントロールの [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. 引き続きチェック ボックス コントロールを選択した状態で、[プロパティ] タブの真上にあるコントロール名をクリックまたはタップし、「MyCheckbox」と入力します。

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

  5. ラベル コントロールをクリックまたはタップして選択します。

  6. [プロパティ] タブで、[Visible] プロパティをクリックまたはタップします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. 右側のウィンドウで ([プロパティ] タブの真上にある) コントロール名をクリックまたはタップし、好きな名前を入力します。

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

画面またはコントロールを検索して選択する

画面またはコントロールが非表示である場合や別のコントロールと重複している場合でも、左側のペインで検索することにより、画面またはコントロールを検索して選択できます。 このペインには、アプリの各画面のサムネイルまたは各画面の階層表示と、各画面に含まれるコントロールが表示されます。

  • サムネイルと階層表示を切り替えるには、ペインの右上隅にあるアイコンをクリックまたはタップします。

    表示の切り替え

  • コントロールを検索するには、1 文字以上の文字を入力すると、入力したテキストを含むコントロール名が強調表示されます。

    検索結果をクリックまたはタップすると、アプリ内でそのコントロールが選択されます。

    ツリー ビューでの検索

  • 画面の上下への移動、複製、削除、または名前変更を行うには、画面を右クリック (あるいは画面の横の省略記号をクリックまたはタップ) して、目的のオプションをクリックまたはタップします。

    ツリー ビューのコンテキスト メニュー

  • コントロールのコピー/貼り付け、削除、または名前変更を行うには、コントロールを右クリック (あるいはコントロールの横の省略記号をクリックまたはタップ) して、目的のオプションをクリックまたはタップします。