はじめに

この記事は、【Power Apps】レスポンシブレイアウトを試してみる~その1~の続きになります。
まだ、確認されていない方は先に上記を確認していただければと思います。

前回までは、Power Apps でのレスポンシブアプリの作成方法に関する簡単な解説と、実際にアプリを作成してみよう！ということでヘッダまで作成しました。

今回はボディ部分の作成を行っていこうと思います。

コンテナを作成する

ボディを作成する

完成イメージはこんな感じです。

いったんこれで #PowerApps でのはじめてのレスポンシブアプリの作成は完了ということで pic.twitter.com/KcHDbHNSJU
— コルネ (@koruneko32767) April 19, 2021

早速作成していきます。
まずは、Body 表示領域となるコンテナを配置します。

垂直コンテナを画面内に配置します。

BodyContainer.LayoutDirection

LayoutDirection.Vertical

位置はヘッダー下にくるように設定します。
サイズは横幅は画面いっぱい表示するようにし、高さは、ヘッダーの高さを除いて表示可能な領域だけとるようにします。

BodyContainer.X

BodyContainer.Y

HeaderContainer.Y + HeaderContainer.Height

BodyContainer.Width

Parent.Width

BodyContainer.Height

Parent.Height - Self.Y

今後の説明はすべてこのコンテナの配下に設定していきます。

メニューを作成する

まずは、メニューを作成していきます。

この箇所です。

PC で表示した場合のデザイン
スマホで表示した場合のデザイン

PC で表示した場合は、領域が十分あるので、横に一覧で表示させます。
スマホで表示した場合は表示領域が足りないので、非表示にしています。
かといって、縦に一覧で並べるためにわざわざ領域をとるようなものでもないため、ユーザーが表示したい場合のみ任意で表示できるようにしています。

BodyContainer の配下に垂直コンテナを配置してLinkParentContainer という名前にします。

さらにLinkParentContainer 配下に水平コンテナ(LinkContainer) と垂直コンテナ(SmallLinkContainer) を配置します。

f:id:koruneko:20210422002539p:plain

LinkContainer は薄いピンクのところです。
SmallLinkContainer は薄い肌色の箇所です。

LinkParentContainer は以下のように設定します。

LinkParentContainer.Width

Parent.Width

LinkParentContainer.Height

Parent.Height * If(!SmallLinkContainer.Visible, 0.08, 0.5)

LinkContainer は以下のように設定します。

f:id:koruneko:20210422003000p:plain

LinkContainer.LayoutAlignItems

LayoutAlignItems.Center

LinkContainer.Width

Parent.Width

LinkContainer.FillPortions

LinkContainer の配下には以下を設定します。

f:id:koruneko:20210422003510p:plain

それぞれ以下のように設定します。
* PowerAppsLink ~ PowerVirtualAgentLinkまでの4つのラベルは設定してあるテキストのリンクと FillPortions が異なるだけなので、 FillPortions 以外は、代表としてPowerAppsLink だけを取り上げています。

HamburgerIcon.Icon

Icon.Hamburger

HamburgerIcon.Height

Parent.Height

HamburgerIcon.Width

Self.Height

HamburgerIcon.Visible

!(BreakPointsLabel.Text in ["Large", "Extra Large"])

LinkLabel.Text

"Link" & If(BreakPointsLabel.Text in ["Large", "Extra Large"], " > ")

LinkLabel.Size

Switch(
    BreakPointsLabel.Text,
    "Small", 6,
    "Medium", 9,
    "Large", 12,
    15
)

LinkLabel.Align

If(HamburgerIcon.Visible, Align.Left ,Align.Right)

LinkLabel.Height

Parent.Height

LinkLabel.FillPortions

If(BreakPointsLabel.Text in ["Large", "Extra Large"], 1, 0)

PowerAppsLink.Text

"Power Apps"

PowerAppsLink.Size

Switch(
    BreakPointsLabel.Text,
    "Small", 6,
    "Medium", 9,
    "Large", 12,
    15
)

PowerAppsLink.Underline

true

PowerAppsLink.Align

Align.Center

PowerAppsLink.Height

Parent.Height

PowerAppsLink.FillPortions

PowerAppsLink.Visible

BreakPointsLabel.Text in ["Large", "Extra Large"]

PowerAutomateLink.FillPortions

PowerBILink.FillPortions

PowerVirtualAgentLink.FillPortions

ちょくちょく登場しているin 演算子ですが、対象のデータ内に検索対象の文字が含まれているか？を確認したいときに利用できます。

A in B としたならば、A のデータ内にB のデータが含まれていれば true 含まれていなければ false を返します。
データ内の値全てに対して、if で比較するなどしなくともよくなるので楽でいいですね。

最後にSmallLinkContainer は以下のように設定します。

f:id:koruneko:20210422011648p:plain

SmallLinkContainer.Width

Parent.Width

SmallLinkContainer.FillPortions

If(Self.Visible, 4, 0)

SmallLinkContainer.Visible

isVisibleSmallLink && !(BreakPointsLabel.Text in ["Large", "Extra Large"])

SmallLinkContainer の配下に設定するラベルたちは、先ほど作成したラベルたちをコピーしてきただけなので、説明は割愛します。

FillPortions だけはそれぞれ 1 に設定しておいてください。

f:id:koruneko:20210422011733p:plain

以上でメニュー部の作成は完了です！

メイン部を作成する

メイン部ではPower Platform の各アイコンと簡単な説明(公式サイトより引用)を載せています。
それぞれ以下から引用しています。

Power Apps とは
 Power Automate とは
 Power BI とは
 Power Virtual Agent とは

また、それぞれ OnSelect にて Launch 関数を設定して、クリック or タップすると、対象のサイトにジャンプするようにしています。

垂直コンテナを配置し、MainContainer にリネームします。
MainContainer の中身は以下のようにしています。

f:id:koruneko:20210423000832p:plain

各Platform 毎に設定はほとんど同じなので、Power Apps のコンテナだけの説明を行います。

MainContainer の配下に垂直 or 水平コンテナを配置します。
今回は画面サイズによってコンテナのレイアウトを可変にしてみようと思うのでどちらを追加しても大丈夫です。(やってみたかった)

PowerAppsContainer.LayoutDirection

If(BreakPointsLabel.Text in ["Large", "Extra Large"], LayoutDirection.Horizontal, LayoutDirection.Vertical)

PowerAppsContainer.LayoutAlignItems

LayoutAlignItems.Center

PowerAppsContainer.Width

Parent.Width

PowerAppsContainer.FillPortions

LayoutDirection にて画面サイズによってレイアウトを可変にしています。
LayoutWrap を true にすることで、折り返しが行われるようになるので似たようなことを実装できるかと思います。
気になった方は是非試してみてください。

Platform のコンテナの配下には、イメージとラベルを配置します。

それぞれ以下のように設定します。

Image_PowerApps.Height

Self.Width

Image_PowerApps.FillPortions

DescribeLabel_PowerApps.Text

"・Power Apps" & Char(10) &
If(BreakPointsLabel.Text in ["Large", "Extra Large"], "Power Apps は、ビジネス ニーズに合ったカスタム アプリを構築するために短時間でアプリケーションを開発できる環境を提供する、アプリ、サービス、コネクタ、およびデータ プラットフォームのスイートです。 Power Apps を使用すると、基盤となるデータ プラットフォーム (Microsoft Dataverse) または さまざまなオンラインおよびオンプレミスのデータ ソース (SharePoint、Microsoft 365、Dynamics 365、SQL サーバーなど) の いずれか に接続するカスタムのビジネス アプリをすばやく構築できます。")

DescribeLabel_PowerApps.Size

Switch(
    BreakPointsLabel.Text,
    "Small", 6,
    "Medium", 9,
    "Large", 12,
    15
)

DescribeLabel_PowerApps.Height

Parent.Height

DescribeLabel_PowerApps.FillPortions

説明のテキストは画面サイズがPC / タブレットの場合のみ表示するようにしています。

同じような設定を他のPlatform にも設定します。

以上でレスポンシブアプリの作成は完了です！

Power Platform のロゴ・アイコンに関して

今回利用している、Power Platform のアイコンは以下からお借りしました。

Microsoft Power Platform のロゴが変わりました

吉田大貴さんありがとうございます！！！

さいごに

コンテナを利用することで、比較的簡単にレスポンシブアプリが作成できることがわかりました。
記事のなかでも記載していましたが、レスポンシブアプリを作成するうえで、技術的に気を付けなくてはいけない点は以下2点かと思います。

サイズ / 座標には絶対値ではなく、相対値を利用する
サイズが変更になったとき文字などがはみ出ていないか

もし、一般的に公開されているようなPC / スマホ対応のWeb サイトのようなものを作成したい！
という場合は、PC 用の画面とスマホ用の画面とでそれぞれ分けて作成し、アクセス時にユーザーの画面サイズによって、それぞれの画面へ振り分ける(リダイレクト)。
といった作りにしたほうが良いと思います。

ただ、その場合画面数も単純に2倍になるので、

開発工数が増える
アプリが重くなる可能性がある

ことに留意ください。
アプリを作成するうえでユーザビリティを向上させるのは利用者目線でいうととても大事なことですが、それによりローコード開発によるメリットが失われると元も子もないですからね。

と、ここまで長々と説明してきましたが、実はPower Apps には初めからコンテナが配置されたレイアウトがテンプレートとして用意されています。

次回はこのテンプレートについて簡単に紹介したいと思いますー。

コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

【Power Apps】レスポンシブレイアウトを試してみる~その2~