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

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

Power Apps でコントロールのプロパティは変更せず画面の向きを変更する


スポンサードリンク

はじめに

この記事では、Power Apps のアプリの向きを内部に設定されたコントロールのプロパティを変更することなく、変更する方法を纏めています。 

Power Apps の画面の向きについて

この章は知っている人にとっては今更な話なので、タイトルみてなんとなくわかる方は飛ばしちゃってOKです。

Power Apps はデータソースから画面を自動生成することができる

Power Apps ではデータソースを元に以下の3画面を自動生成することができます。

  • 一覧画面(BrowseScreen1)
  • 詳細画面(DetailScreen1)
  • 編集/新規作成画面(EditScreen1)

Microsoft Dataverse からキャンバス アプリを作成する - Power Apps | Microsoft Docs

便利ですねー

ただ、こちらで生成できるアプリは縦向き(携帯電話レイアウト)しか選べないんですよね。。。

f:id:koruneko:20210702010900p:plain

空のアプリやアプリ テンプレートから作成するアプリですと、縦向き(携帯電話レイアウト)か横向き(タブレット レイアウト)が選択可能です。

f:id:koruneko:20210702011116p:plain

アプリの向きを変更する

一度縦向きレイアウトを選んだ後でも、設定から横向きレイアウトに変更することが可能です。(もちろん逆も可能です。)

ファイル > 設定 > 表示
を選択すると、向きを選択できる画面が表示されます。

f:id:koruneko:20210702011411p:plain

今は縦になっているので横に変更してみます。

横を選択すると、以下のようなポップアップが表示されるので、適用を選択します。

f:id:koruneko:20210702011456p:plain

すると、アプリの画面の向きが横に変わりますが、レイアウトが崩れちゃいます。

Before
f:id:koruneko:20210702011703p:plain

After
f:id:koruneko:20210702011759p:plain

これは、縦 → 横 に変更したことにより、横成分のプロパティ(XWidth)に設定してある式が解除されちゃっているからです。

例えば DetailScreen1LblAppName2 を比較してみましょう。

LblAppName2.X

- IconBackarrow1.X + IconBackarrow1.Width
+ 0

LblAppName2.Width

- Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width
+ 640
  • が変更前で + が変更後です。

この方法で向きを変更してしまうと、このようにレイアウトが崩れてしまうので、向きを変更前のアプリをバックアップかなにかで取っておいて、変更後、差分をもとに戻してあげる必要があります。

一応補足しておきますと、式が解除されちゃうのは、定数(10や200など)を入力しているような箇所ではなく、式(Parent.Width など)でアプリの幅、高さを参照しているようなところです。

アプリ内のコントロールを変えることなく画面の向きを変更する

さて、本題です。
上記のやり方で画面の向き変更できますが、せっかく設定した式解除されちゃうのでレイアウトが崩れてしまい、また設定し直す羽目になってしまいます。

これを回避するために、コード(YAML)を修正することでアプリの向きを変更しようと思います。

前提条件

Power Apps でキャンバスアプリのコード管理を行うために事前準備が必要です。

memo.tyoshida.me

吉田さんの記事で紹介されているような準備が必要です。

  1. .NET Core SDK v3.1.x (x64) をインストールします
  2. GitHub - microsoft/PowerApps-Language-Tooling: Tooling support for PowerApps language and .msapp filesをローカルにコピーします (リポジトリをクローンする - GitHub Docs)
  3. 2でコピーしたディレクトリに移動して build.cmd を実行します
  4. 3が成功すれば bin\Debug\PASopa ディレクトリが作成されるはずです

Power Apps のアプリをローカルに保存する

Power Apps のアプリ(.msapp)をローカルにダウンロードします。

ファイル > 名前を付けて保存 > このコンピュータ > ダウンロード

を選択してアプリ(.msapp)をローカルにダウンロードします。

[アプリ名].msapp

という名前のアプリがダウンロードされます。

アプリを展開する

先ほどダウンロードしたアプリを任意の場所に移動します。

PowerShell(or コマンドプロンプト)を開き、以下コマンドでアプリを展開します。
展開したファイルは[アプリ名].msapp ファイルがあった場所と同じディレクトリに"[アプリ名]_src"というフォルダ名でで展開されます。

[事前準備でダウンロードしてきたディレクトリ]\PowerApps-Language-Tooling\bin\Debug\PASopa\PASopa.exe -unpack [.msappのあるディレクトリ]\[アプリ名].msapp

D:\microsoft\PowerApps-Language-Tooling\bin\Debug\PASopa\PASopa.exe -unpack D:\アプリ.msapp

展開したファイルにはYAMLJSON が含まれています。
お好きなエディターで開いてください。

設定を変更する

先ほど展開されたフォルダを開き、直下にある CanvasManifest.json を開きます。

変更するのは DocumentLayoutHeightDocumentLayoutOrientation DocumentLayoutWidth です。

画面を横向きにする場合は以下のように設定します。

    "DocumentLayoutHeight": 640,
...
    "DocumentLayoutOrientation": "landscape",
...
    "DocumentLayoutWidth": 1136,

画面を縦向きに変更するには以下のように変更します。

    "DocumentLayoutHeight": 1136,
...
    "DocumentLayoutOrientation": "portrait",
...
    "DocumentLayoutWidth": 640,

DocumentLayoutHeigh :画面の高さ
DocumentLayoutWidth:画面の幅
DocumentLayoutOrientation:画面の向き

をそれぞれ表しています。
向きは英語表記の設定値です。

変更したら、ファイルを保存します。

変更した内容をPower Apps でアプリとして読み込む

変更が完了したら、その内容でPower Apps でアプリとして読み込ませます。

このままでは、Power Apps で読み込めないのでまずは.msapp に戻します。

[事前準備でダウンロードしてきたディレクトリ]\PowerApps-Language-Tooling\bin\Debug\PASopa\PASopa.exe -pack [.msappを出力したいディレクトリ]\[アプリ名].msapp D:\[アプリ名]_src

D:\microsoft\PowerApps-Language-Tooling\bin\Debug\PASopa\PASopa.exe -pack D:\EditApp.msapp D:\アプリ_src

2つ目の引数で指定した場所に指定した名前で.msapp ファイルが生成されます。

このファイルをPower Apps で読み込みます。

新しいアプリ > キャンバス > 開く > 参照
より、先ほど作成して.msapp ファイルを選択します。

f:id:koruneko:20210702020857p:plain

するとアプリが表示されますので、エラーなどが出ていないことを確認して保存してください。

ここでなにもせず閉じちゃうとクラウド上に保存されないので、次回以降そのアプリを開くときまた、ローカルから選択するかたちになってしまいますので注意してください。

おわりに

どちらの方法にしてもちょっとひと手間必要なのは変わらないので、お好きな方法を選択してください。

個人的には後者のほうが、ユーザがアプリに加える変更が少ないので、変更漏れなどを考慮すると後者のほうがいいんじゃないかな?と思います。

ただし、後者のやり方はまだ、実験段階の方法を用いているので、フォーマットが変更される可能性があることに注意してください。

質問や指摘がありましたら、お気軽に尋ねてくださいー。

では。


スポンサードリンク