次の方法で共有

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

  • [アーティクル]

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

重要

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

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

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

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

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

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

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

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

詳細:

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

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

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

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

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

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

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

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

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

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

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

  1. 垂直コンテナーで、配置 (水平方向) を拡大に設定します

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

  3. 1 番目と 3 番目の子垂直コンテナーで、高さの拡大をオフにして、必要な大きさにまで高さを減少します (高さ=80 など)。

2 つの一様な子コンテナーのある水平コンテナー

  1. 親水平コンテナーで、配置 (垂直方向) を拡大に設定します。

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

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

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

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

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

    注意

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

    ラベルの種類 ターゲットの FontSize 使用する FontSize
    ページのタイトル 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 を使用する

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

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