技術情報ブログ
Power Platform
2023.04.19

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

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

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

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

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

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

 

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

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

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

 

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

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

 

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

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

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

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

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

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

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

 

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

最後に、横の位置関係を変えたくない場合です。
横一列に配置されているアイコンはそのまま表示したい場合などが例に挙げられます。

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

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

水平コンテナーを追加

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

水平コンテナー
水平コンテナー

水平コンテナーの設定

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

  1. 水平コンテナーを追加

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

    幅(Width)

    Parent.Width

    高さ(Height)

    Parent.Height

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

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

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

こちらの設定方法については、前回紹介した内容と同様となります。
以下URLを参照してください。

注意点として、各コントロールの幅(もしくは最小幅)を小さい値とするようにしてください。
現状、水平コンテナーの「折り返し」をオフにしており、かつ「水平方向のオーバーフロー」を非表示に設定しています。
よって、ブラウザの幅が、各コンテナーの幅(もしくは最小幅)の合計値より小さくなった場合にコントロールが画面の右側に配置されるため、見えなくなります。

上記を防ぐために、各コントロールの幅(もしくは最小幅)を小さい値とするようにしてください。
(「水平方向のオーバーフロー」をスクロールに設定することでも対応できますが、スマホでの操作時、横スクロールはUI設計としてはあまりおすすめできません。)

上記の設定を行うことで、ブラウザの幅に関わらず、横の位置関係は変わらない状態となります。

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

 

まとめ

今回紹介した設計方針を以下にまとめてみました。

 

 

コンテナーの
種類

コンテナーの
折り返し

コントロールの
伸縮可能

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

高さを固定

垂直

オフ

オフ

 

高さを可変

垂直

オン

オフ

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

フォーム

なし

なし
(幅で合わせるをオン)

なし
(幅で合わせるをオン)

 

フォーム以外、
かつ幅を固定

水平

オン

オフ

 

フォーム以外、
かつ幅を可変

水平

オン

オン

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

幅を固定

水平

オフ

オフ

ポイントとしては以下となります。

  • 縦の位置関係は「垂直コンテナー」、横の位置関係は「水平コンテナー」を用いる

  • コントロールの位置関係を変えたいときは、コンテナーの「折り返し」をオン、変えたくないときはオフにする

  • コントロールの高さ/幅を固定にするときは、コントロールの「伸縮可能」をオフ、可変にするときはオンにする

  • コントロールがフォームの場合は、コンテナーは不要(「幅を合わせる」をオンにする)

 

おわりに

いかがでしたでしょうか?

今回は、キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針についてまとめてみました。
まとめてみるとそんなに難しいことはないんですが、実際にアプリを作成する際は、コンテナーが入れ子になることが多いため、段々と複雑になってきます。

そのような場合には、ぜひこちらの記事を参照していただければと思います。

また、今回はコンテナーを用いてレスポンシブ レイアウトを実装しましたが、他の方法で実装することも可能です。
(よろしければ、皆様の実装方法も教えていただければありがたいです(笑))

最後まで読んでいただき、ありがとうございました!

 

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

小刀稱知哉

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

1990年生まれ

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

趣味は読書

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

持ってる資格はPL-200/PL-300/PL-400/MS-700/AZ-104/AZ-305

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

非エンジニア【(元)自治体職員】がローコード開発をして気が付いたこと コーディング規約とPower Platformプレミアムサンプルアプリ集

2024.05.01

Power Apps・Power Automateの勉強方法(2)

2024.04.17

Power Apps・Power Automateの勉強方法(1)

2024.04.03

非エンジニア【(元)自治体職員】が半年間ローコード開発をしてみたら

2024.03.27

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

モデル駆動型アプリ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
ページトップに戻る