コンテナーによるレスポンシブデザイン

Power Apps 入門

Luise Freese

Azure & Power Platform Architect

レスポンシブが必要な理由

 

  • 同じアプリをスマートフォン、タブレット、ノートパソコンで開けます
  • 固定レイアウトは小さい画面ではみ出し、大きい画面では間延びして見えます
  • レスポンシブとは、レイアウトが適応することです

$$

スマートフォン、タブレット、ノートパソコンで、同じアプリのレイアウトが1列から複数列に適応する様子

Power Apps 入門

最新のレイアウトコンテナー

垂直方向と水平方向のレイアウトコンテナーを比較したイラスト。子要素が縦に積み重なる場合と横に並ぶ場合を示しています

 

  • 垂直レイアウトコンテナーは、子要素を上から下に積み重ねます
  • 水平レイアウトコンテナーは、子要素を左から右に並べます
  • 最新のコントロールは使用可能なスペースに合わせて配置されます
Power Apps 入門

幅と高さの可変設定

 

  • FlexibleWidth と FlexibleHeight
  • オンにすると、コントロールはコンテナーに合わせて伸縮します
  • オフにすると、コントロールは固定サイズを保ちます

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Power Apps 入門

LayoutMinWidth と LayoutMinHeight

スマートフォンとタブレットの比較。LayoutMinWidth がブレークポイントとなり、レイアウトが1列からサイドパネル付きのレイアウトへ切り替わる様子

 

  • コンテナーが適切にレイアウトされるには十分なスペースが必要です
  • LayoutMinWidth は、レイアウトが変わる最小幅です
  • スマートフォンとタブレットで異なるレイアウトをトリガーします
Power Apps 入門

アプリの表示設定

 

  • 設定 → 表示で向きとサイズを設定します
  • アプリのレイアウト：固定は1つの比率にズームし、レスポンシブは画面に合わせて適応します
  • 複数のサイズでテストしましょう

$$

Power Apps Studio の表示設定ダイアログ。レイアウト、向き、キャンバスサイズのオプションが表示されています

Power Apps 入門

あらかじめ用意されたレイアウト

Power Apps Studio の「新しい画面」フライアウトの実際のスクリーンショット。あらかじめ用意されたレイアウトテンプレート（空白、分割画面、サイドバー、ヘッダーとフッター、承認リクエスト、ウェルカム画面）が、それぞれ小さなフレームプレビューとともに表示されています

 

  • + New screen にはあらかじめ用意されたレイアウトテンプレートが含まれます
  • サイドバー、ヘッダーとフッター、分割画面はすでにレスポンシブ対応です
  • 最初のレスポンシブアプリを作る際のおすすめの出発点です
Power Apps 入門

これから作るもの

$$

コントロールをレイアウトコンテナーにまとめる · デバイスサイズを切り替える · アプリが応答する様子を見る

スマートフォン、タブレット、ノートパソコンでアプリを表示し、ギャラリーのレイアウトが各画面サイズに適応する様子を示したイラスト

Power Apps 入門

練習しましょう！

Power Apps 入門

Preparing Video For Download...