モデル駆動型アプリのカスタム ページの設計

この記事では、モデル駆動型アプリで使用するカスタムページを設計するためのヒントを提供します。 カスタム ページを使用すると、モデル駆動型アプリのキャンバス アプリに似たページを作成できます。

重要

カスタム ページは製品が大幅に変更された新機能であり、現在、カスタム ページの既知の問題 に概説されているいくつかの既知の制限があります。

カスタム ページでサポートされているコントロール

カスタム ページ作成では、キャンバス アプリ コントロールのサブセットがサポートされます。 次の表に、現在サポートされているコントロールの一覧を示します。

コントロール コントロールの種類 メモ
ラベル1 表示方法
テキスト ボックス1 入力
日付の選択1 入力
ボタン1 入力
コンボ ボックス1 入力
チェック ボックス1 入力
トグル1 入力
ラジオ グループ1 入力
スライダー1 入力
評価1 入力
垂直コンテナー レイアウト 新しいレスポンシブ水平レイアウト コンテナー
垂直コンテナー レイアウト 新しいレスポンシブ水平レイアウト コンテナー
リッチ テキスト エディター 入力
ギャラリー 一覧
アイコン メディア
Image メディア
フォームの編集 入力
フォームの表示 入力
コードコンポーネント カスタム カスタム ページにコード コンポーネントを追加する
キャンバス コンポーネント (プレビュー) カスタム カスタム ページにキャンバス コンポーネントを追加する

1 コントロールは、新しいモダン コントロールです。 コントロールは、Teams のキャンバス アプリのために導入されました。 コントロールは、Power Apps Component Framework でラップされた Fluent UI ライブラリ に基づいています。

重要

カスタム ページに追加する Fluent UI (v8) コントロールは非推奨です。 最新のコントロールがそれらに取って代わります。 アプリを最新のコントロールにアップグレードして、最新の設計、パフォーマンス、アクセシビリティの向上を維持します。 詳細については、「 Fluent UI コントロールをモダン コントロールにアップグレードする」を参照してください。

カスタム ページのカスタム コンポーネントのサポート

ローコード (キャンバス コンポーネント) とプロコード (コード コンポーネント) の両方のカスタム UX コンポーネントを環境に追加して、すべての作成者が利用できるようにすることができます。 カスタム ページに固有の UX 拡張性に関する記事については、モデル駆動型アプリのカスタム ページにキャンバス コンポーネントを追加する および モデル駆動型アプリのカスタム ページにコード コンポーネントを追加する を参照してください。

一般的に、ローコード拡張性アプローチは、構築、テストが簡単で、メンテナンス コストが低くなります。 最初にキャンバス コンポーネントを評価してから、より複雑で高度なカスタマイズが必要な場合にのみコード コンポーネントを使用することをお勧めします。

詳細情報:

コンテナー コントロールでレスポンシブ レイアウトを有効にする

レスポンシブ カスタム ページ レイアウトは、水平レイアウト コンテナーと垂直レイアウト コンテナー コントロールの階層を構築することによって定義されます。 これらのコントロールは、挿入 タブのレイアウトの下の Power Apps Studio にあります。

アプリ オブジェクトに画面の最小高さと幅を設定すると、ページ レベルのスクロールバーが表示されず、垂直方向のボディ スクロールバーが使用されます。

MinScreenHeight=200
MinScreenWidth=200

必要に応じて、カスタム ページのデザイン サイズは、設定>表示でサイズをカスタムに設定して調整できます。 次に、幅と高さを、「幅 1080」や「高さ 768」のような、より一般的なデスクトップ用カスタムページのサイズに設定します。 画面にコントロールが追加された後にこの設定を変更すると、一部のレイアウトプロパティがリセットされる場合があります。

一番上のコンテナがスペース全体を埋めるように設定し、利用可能なスペースに応じてサイズを変更します。

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

柔軟な高さのコンテナの水平方向のラッピング

デスクトップから狭い幅に調整するページに対応するには、高さを自由に設定できる横長のコンテナでこれらのプロパティを有効にします。 これらの設定がないと、ページ幅が狭い場合にコントロールが切れてしまいます。

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

このコンテナの直下にある子コンテナやコントロールは、ページが 300 ピクセルの幅に収まるように最小の幅を設定してください。 コンテナやコントロールだけでなく、親コンテナのパディングも考慮してください。

柔軟な幅のコンテナの縦型ラッピング

デスクトップから狭い幅に調整されたページに対応するには、幅が柔軟な縦型コンテナでこれらのプロパティを有効にします。 これらの設定がないと、ページ幅が狭い場合にコントロールが切れてしまいます。

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

このコンテナの直下にある子コンテナやコントロールは、ページが 300 ピクセルの幅に収まるように最小の高さを設定してください。 コンテナやコントロールだけでなく、親コンテナのパディングも考慮してください。

詳細情報: レスポンシブ レイアウトを構築する。

固定ヘッダー、柔軟なボディ、固定フッターのある垂直コンテナー

  1. 垂直コンテナーで、配置（水平）を引き伸ばすに設定します

  2. 3 つの垂直コンテナー コントロールを親垂直コンテナー に挿入します。

  3. 1 番目と 3 番目の子水平コンテナー コントロールで、高さのストレッチをオフにし、必要なスペース分まで高さを小さくします。たとえば、Height=80 です。

2つの均等な子コンテナーを持つ水平コンテナー

  1. 親の水平コンテナで、配置（垂直） を ストレッチ に設定します。

  2. 2 つの垂直コンテナー コントロールを親垂直コンテナーに挿入します。

モデル駆動型アプリコントロールに合わせたカスタム ページ コントロールのスタイル設定

最新のアプリ デザイナーからカスタム ページを作成すると、これらの機能では既定値が使用されます。

  • カスタム ページのテーマ。 カスタム ページで使用されるコントロールのテーマの値は、統一インターフェイスの既定の青のテーマに合わせて自動的に設定されます。 この既定のテーマは、スタジオとアプリケーション実行時の両方で使用されます。 明示的なテーマの選択は、カスタム ページの作成エクスペリエンスから削除されます。

  • コントロールでは、ページ階層内の位置に基づいて、異なるフォント サイズを使用する必要があります。

    注

    カスタム ページのテキストのアップスケーリングは 1.33 なので、目的のサイズにするためにターゲットの FontSize を 1.33 で割る必要があります。

    ラベルの種類 対象フォント サイズ 使用するフォント サイズ
    ページのタイトル 17 12.75
    通常のラベル 14 10.52
    小さなラベル 12 9.02

  • プライマリおよびセカンダリ ボタン コントロールには、次のスタイル変更が必要です。

    主要ボタン

    Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

    サブボタン

    Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

カスタム ページのタブのナビゲーションとキーボード アクセシビリティ

カスタム ページには、ホスティング モデル駆動型アプリで使用されているものと同じタブのナビゲーション デザインが適用されます。 視覚的に整列されたセマンティック HTML 構造により、ユーザーはキーボードまたはスクリーン リーダーの使用時にカスタム ページをシームレスに移動できます。 スタンドアロンのキャンバス アプリとは異なり、カスタム ページ コントロールやその他の UX 要素には明示的なタブ番号の割り当ては必要ありません。 モダン コントロールに TabIndex プロパティはなく、ナビゲーションにセマンティック HTML 構造を利用します。

コントロール、キャンバスおよびコード コンポーネント、コンテナーなどのさまざまな要素は、カスタム ページ レイアウトでの位置に基づいてタブ形式にできます。 タブ ナビゲーションには、Z オーダー ナビゲーションが適用されます。 タブはドキュメント オブジェクト モデル (DOM) ツリーの次の要素に移動する前に、コンポーネント、コンテナーなどのグループ化されたより大きな要素内のタブ ストップに最初に移動します。

これは、コントロール、コード、キャンバスのコンポーネントとコンテナーを含むページを使用したナビゲーションの例です。

カスタム ページのタブ ナビゲーション。

注

カスタム ページで重複するコントロールと要素は DOM がマージされないため、タブ ストップが視覚的なレイアウトと同期しない可能性があります。 数式を使用した動的要素の配置についても同じことが言えます。

関連項目

モデル駆動型アプリのカスタム ページの概要

カスタム ページで PowerFx を使用する

レスポンシブ レイアウトの構築

モデル駆動型アプリにカスタム ページを追加する

Fluent UI コントロールを最新のコントロールにアップグレードする

  • Last updated on