技術情報ブログ
Power Platform
2023.04.07

Power Apps:キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(3)

Power Apps:キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(3)
小刀稱知哉

こんにちは。アーティサン株式会社の小刀稱(ことね)です。

Power Appsはブラウザで動作するアプリのため、PC・スマホで操作することが可能です。

しかし、1つのアプリでPC・スマホの両方に対応するには「レスポンシブ レイアウト」という考え方で、アプリを設計する必要があります。

Power Appsのいくつかの種類では、標準でレスポンシブ レイアウトに対応しておりますが、キャンバスアプリでは非対応です。
※詳細は以下URLを参照してください。

 

そこで今回は、Power Apps キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針についてまとめてみました。

Power Appsでアプリを作成している方に向けた内容となっています。
また、難易度としては中級者向けとなっています。

※本記事を読む前に、先程紹介した記事(Power AppsアプリをPCとスマホで操作したい時の対応方針)を一読していただければ幸いです。

 

前回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、「縦の位置関係を変えたくない時」の説明を行いました。

今回は、引き続き「横の位置関係」について説明していきます。

 

Power Apps キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針

Power Apps キャンバスアプリでレスポンシブ レイアウトに対応するためには、以下3つの場合があると思います。

  • 縦の位置関係を変えたくない時

  • 横の位置関係を変えたい時 ← 今回はこちらから

  • 横の位置関係を変えたくない時

前回のブログでは、「縦の位置関係を変えたくない時」について説明しました。

今回は、「横の位置関係を変えたい時」からお伝えしていきます。

 

横の位置関係を変えたい時

続いて、横の位置関係を変えたい場合です。
(ブラウザの表示幅が大きい場合は、横に複数項目表示されているが、小さい場合には1項目ずつ縦に並ぶ表示となる。)

フォームが代表的な例となります。

横の位置関係を変えたい時(イメージ)
横の位置関係を変えたい時(イメージ)

実は、こちらはコントロールがフォームの場合と、それ以外の場合で対応が異なります。

フォームの場合

まずはコントロールがフォームの場合です。

フォームの場合、標準でレスポンシブ対応しています。
よって、コンテナーを使用する必要はありません。

実装方法としては、以下の流れです。

フォームの設定
  1. サイズの幅・高さを設定

    コントロールの幅・高さを設定します。
    以下を設定する事が多いです。

    幅(Width)

    Parent.Width

    高さ(Height)

    Parent.Height

  2. フォーム配下のカードの設定

    「幅で合わせる」をオン

    フォーム配下にあるすべてのカードについて、幅で合わせるオンにします。

    フォームの「幅で合わせる」
    フォームの「幅で合わせる」

    上記の設定を行うことで、ブラウザの幅に応じて、縦の位置関係は可変となります。

    縦の位置関係を変えたくない時(フォームの場合)
    縦の位置関係を変えたくない時(フォームの場合)

フォーム以外の場合

続いて、コントロールがフォーム以外の場合です。
フォーム以外の場合、標準でレスポンシブ対応していませんので、水平コンテナーを使用します。

実装方法としては、以下の流れです。

水平コンテナーを追加

横の位置関係を設定する際には、「水平コンテナー」コントロールを用います。

水平コンテナー
水平コンテナー
水平コンテナーの設定
  1. サイズの幅・高さを設定

    水平コンテナーの幅・高さを設定します。
    以下を設定する事が多いです。

    幅(Width)

    Parent.Width

    高さ(Height)

    Parent.Height

  2. 「折り返す」をオンに設定

    折り返すプロパティをオンに設定します。

    この設定で、ブラウザの幅が水平コンテナー配下に配置した各コントロールの幅の合計値より小さくなった場合に、 コントロールが折り返し(=横に配置されたのが、縦に配置)されます。

コンテナー配下のコントロールの設定

コンテナー配下に追加したコントロールについては、幅を固定したい場合と、可変にした場合の2通りがあります。

それぞれについて、以下で説明します。

  1. 幅を固定にしたい場合


    コントロールの「幅(伸縮可能)」をオフ

    コントロールの「幅」に値を記入

    幅を固定にしたい場合は、コンテナー配下にコントロールを追加し、幅(伸縮可能)プロパティをオフ、コントロールのに特定の値を記入します。

    幅を固定にしたい場合
    幅を固定にしたい場合
  2. 幅を可変にしたい場合


    コントロールの「幅(伸縮可能)」をオン

    コントロールの「最小値」に値を設定

    幅を可変にしたい場合は、コンテナー配下にコントロールを追加し、幅(伸縮可能)プロパティをオンとし、最小幅に値を設定します。

    幅を可変にしたい場合
    幅を可変にしたい場合

上記の設定を行うことで、ブラウザの幅に応じて、縦の位置関係は可変となります。

縦の位置関係を変えたくない時(フォーム以外の場合)
縦の位置関係を変えたくない時(フォーム以外の場合)

 

おわりに

本日はここまで。

今回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、「横の位置関係を変えたい時」の説明を行いました。
コントロールフォームの場合は、標準でレスポンシブ対応しているため、とても便利ですよね。

次回は、引き続き「横の位置関係を変えたくない時」についてお伝えしていきます。

ここまで読んでくださり、ありがとうございます。

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

大分県出身(温泉大好き♥♥)、現在は東京都在住

1990年4月9日生まれ

30才にしてメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当しております!

シェアする
記事カテゴリ
最新記事
2024.03.27

Power Automateのベストプラクティス・アンチパターン(5)【Apply to each×コンカレンシー×変数の設定はNG】

2024.03.20

Power Apps×Teams:Teams上からPower Appsを実行する方法

2024.03.13

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう

2024.03.06

SharePointのあったらいいなを集めました(X-SPのご紹介)

2024.02.28

【2024年2月更新】Power Apps の実践的なノウハウ まとめ

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeams
PageTop
ページトップに戻る