【Dataverse for Teams】Dataverse for Teamsでのレスポンシブ対応【第13回】

こんにちは、MS開発部の新城です。 弊社のブログをご愛読いただき、ありがとうございます。 今回は【Dataverse for Teams】シリーズ 【Dataverse for Teams】使用されていない環境の自動無効化・削除【第12回】 に続きまして、今回はレスポンシブ対応を行ってみたいと思います。 というのもDataverse for Teamsで作成したPower Appsアプリは下記の通り、 チームに公開すると左ペイン（チームやチャネルの表示領域）がある為 アプリケーションの表示エリアが小さく、利用時に最大化（タブを展開する）したい所ですが… レスポンシブを意識して作成しないと単にアプリケーション全体が左に移動するだけで、 最大化する意味がなくなってしまいます。 また、ユーザーやデバイスによって画面サイズが異なる為、画面がスクロールだらけで使いづらい… といった事も考えられるでしょう。 最大化 意識せずに作成した場合 各種コンテナーを用いてレスポンシブ対応した場合 今回はこの様な形を目指して、ベースとなるコンテナーの配置と設定を試していきます。

Dataverseとは

Microsoftでは、Teamsの利用をより便利にするため、 またPower Platform利用の敷居を下げるためDataverse for Teamsを提供しています。 Dataverse for Teamsは、Microsoft Teams用の組み込みローコードプラットフォームです。 Dataverse for Teamsについては過去のブログで詳しく説明しております。 また、どのようなサービス・機能があるか各回でピックアップして紹介しておりますので、 併せて一読いただければ幸いです。

レスポンシブとは

利用可能な画面のスペースを使用するため、異なる画面サイズやフォームファクタ※に 自動的にアプリを合わせて、様々なデバイスでも柔軟に調節し、見やすく最適な表示にすることです。 ※フォームファクタ・・・ハードウェアやハードウェア部品のサイズや形状、物理仕様のことです。 レスポンシブ性によって、アプリの様々な要素がどのように動作するか指定することができます。

• 画面サイズの変更に応じてストレッチまたはサイズ変更が可能です。
• 画面サイズの変更に合わせて位置を維持、変更が可能です。

レイアウトコンテナー

レスポンシブを実装するには３つのコンテナーを使用します。各種のコンテナーについてご紹介します。 ・水平コンテナー コンテナー内で左から右に横並びにコントロールを配置します。 ・垂直コンテナー コンテナー内で上から下に縦並びにコントロールを配置します。 ・コンテナー 上記の2つのコンテナーとは違い、コンテナー内に自由に配置することができます。

レスポンシブレイアウトの作成

まず、先にレスポンシブの完成形ご紹介させていただきます。 このように画面を縮小した際でも、画面サイズに合わせて変化します。 では、こちらの完成形を作成する手順についてご紹介していきます。

事前設定

まず初めにアプリを作成するにあたり、全体画面を無効化にする設定をご紹介します。 初期設定のデバイスサイズに合わせて拡大縮小を解消するために、 全体表示を無効化にする必要があります。 全体表示を無効化にする設定の仕方

1. 上部タブにある「設定」を選択します。
2. 「表示」を選択します。
3. 「画面に合わせた倍率を変更」と「向きをロックする」をオフにします。

2つの設定をオフにすることで、デバイスのサイズに合わせて調整され、 画面に多くの情報を表示できます。 さらに、全ての画面のWidthプロパティがMax(App.Height, App.MinScreenHeight)に設定され、 HeightプロパティはMax(App.Width, App.MinScreenWidth)に設定されるので、 レスポンシブ対応ができるようになります。 詳しくはこちらをご覧ください。 キャンバス アプリの画面のサイズと表示方向の変更 – Power Apps | Microsoft Learn

カスタムブレークポイント

画面のサイズ プロパティは、画面の幅プロパティをアプリの SizeBreakpoints プロパティの値と比較することにより計算されます。 このプロパティは、名前付き画面サイズを区切る幅の ブレークポイントを示す、数値の単一列テーブルです。 引用元：キャンバス アプリのレスポンシブ レイアウトの作成 – Power Apps | Microsoft Learn

なぜ、ブレークポイントを使用するのか？ それは、デバイスの画面サイズに基づいてレイアウトできるからです。 デバイスの画面サイズによって分類している為ブレークポイントが必要になってきます。 この表は定数の一覧になります。 BrakePoint(ラベル)のプロパティを設定します。 Text: If( App.Width<=First(App.SizeBreakpoints).Value,”Small”, App.Width<=Last(FirstN(App.SizeBreakpoints,2)).Value,”Medium”, App.Width<=Last(FirstN(App.SizeBreakpoints,3)).Value,”Large”, “Extra Large” )

Screen1を可変になるように設定

Screen1のプロパティを設定します。 Height: Max(App.Height, If(App.Height < App.Height, App.DesignHeight, App. DesignWidth)) Width: Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App. DesignHeight)) Power Appsでの画面の幅や高さについて下記のようになります。

レイアウトコンテナーの配置

下記に従ってプロパティを設定していきます。 ・HeaderContainerのプロパティを設定します。 X: 0 Y: 0 Height: 100 Width: App.Width ・MainContainerのプロパティを設定します。 X: 0 Y: Headercontainer.Height Height: (App.Height-HeaderContainer.Height)-FooterContainer.Height Width: App.Width LayoutWrap: true ・FooterContainerのプロパティを設定します。 X: 0 Y: App.Height-FooterContainer.Height Height: 100 Width: App.Width

MainContainerに水平コンテナーを配置

・Container4-Container7まで下記のプロパティを設定します。 FillPortions: 1 LayoutMinWidth: Switch(BrakePoint.Text,”Small”,App.Width,”Medium”,App.Width/2,App.Width/4) Container4-Container7内に幅のサイズが分かるようにラベルを挿入しています。 Text: “テキスト(自由)” & ラベル名.Width FillPortions: 1 以上の設定で、今回のサンプルの完成形の状態が作成できます。 実際に作成してみて、画面サイズに適応しているのか試してみてください。

まとめ

今回の【Dataverse for Teams】Dataverse for Teamsレスポンシブ対応のご紹介はいかがでしたでしょうか？ 基本的なレスポンシブの使い方や作成についてのご紹介でした。 今後、私たちアプリ開発者やユーザーが見やすく使いやすいアプリを作成していくために、 少しでも今回の記事を見ていいヒントになっていただけたら嬉しいので参考にしてみてください。 長文になってしまいましたが、最後までご覧いただき、誠にありがとうございます。 今後も【Dataverse for Teams】シリーズについての情報は発信していきますので、 引き続きよろしくお願いいたします。