CSSを書き換えてPower Appsの開発環境を改善してみた

久しぶりに投稿と思ったらExcelではなくPower Appsネタです。すみません。

ここ最近はローコード開発ソフトのPower Appsをベースに開発を行っております。

要約

今回は、これを

こうする話です。

数式バーの展開が不便すぎる問題

さて、Power Appsが何かは置いといて、この開発環境である Power Apps Studio にはかなりのストレスがたまる要素があります。

おそらく、ちゃんとした開発環境でコーディングしたことがある人ほど気になるポイントだと思うのですが、開発画面のレイアウトの自由度がとてつもなく厳しいです。

左は画面やコントロールのツリー、右はコントロールのプロパティ、中央がデザイン画面で、上部にExcelみたいな数式バー。実物を見たほうがわかりやすいと思うので貼りますがこんな感じです。

全体的なレイアウトについてはExcelライクで構わないのですが、問題は数式バーにあります。

Power AppsにはExcelと親和性の高い（が実際にはだいぶ違う）数式が採用されており、各コントロールの各プロパティに対して、 fx へと続く数式を記述します。

Power Fxでは、頻繁に配列データを扱う都合上、数式が入れ子になるのは避けられず、Excel以上に長い数式になりがちです。

そんな時に使用するのが、Alt+Enter でお馴染みの「改行」です。

もちろん Power Appsでも改行はでき、特殊なショートカットキーは使う必要がなく、普通にEnterキーを押すだけで改行されるくらいには基本的な操作とされています。

改行した数式を見るためにはExcelのように数式バーを縦に展開しなければなりませんが、そこが問題です。

展開するとご覧の有様になります。

お分かりいただけただろうか・・・？

数式バーが、他のUIの上にことごとく重なるデザインなのです。

特に困るのが赤線で示すこの部分。

数式を書くためにはコントロールを選択しなければならないため、数式バーで画面上のコントロールが隠れると選び直す事ができません。

また、右のプロパティウィンドウから「TextBox1」などのコントロール名を確認したり、他のプロパティの数式を見ながら書きたいときもあります。

結果的に、実際の開発では何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も数式バーの開閉を繰り返すことになります。

Stylebotを使用してCSSを書き換える

これを解決するために今回紹介するのがCSS（スタイルシート）の書き換えです。

Power Apps Studioは画面のレイアウトを全くと言っていいほど変更できない※ため、今回はStylebotという拡張機能を使用してCSSを動的に書き換え、自分が使いやすいレイアウトに調整します。

※一般的な開発環境（VisualStudio、vscode、VBEなど）なら、各ツール画面を自由に変形でき、サブウィンドウとして分離して好きなところに置くことができる。

かれこれ2年近く使っているのですが、最近になってStylebotの設定は時々消えてしまうことがわかったので、私が開発した設定値を公開しておきます。

また、以前はアップデートのたびにCSSのClassの修正が必要でしたが、今回発見したクラスなら長期的に使えそうです。

実行中のキャンバスの乱れも起きないクラスも見つけたので、前以上に快適になりました。

Stylebotの使い方

今回紹介するStylebotは https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha からインストールすることができ、Chromiumの拡張機能なのでEdgeでもChromeでも導入できます。

導入すると右上のあたりの拡張機能の欄にStylebotが増えるので、左クリックしてオプションを開きます。

次に、「スタイル」タブを開き、「新しいスタイルを追加」をクリックします。

設定値のURLとCSSを入力する画面がポップアップ表示されます。

URLには

authoring.jp-il101.gateway.prod.island.powerapps.com

を入力することで動作します。

※複数の環境でこのURLで動作することを確認していますが、すべての環境がこのURLかどうかはわかりません。

CSSの欄に記入する内容は、好みのスタイルシートを記述する必要があるため次項で紹介しますが、次図のように設定して「保存をする」を押したら完了です。

もし編集したい時は、同じようにこの画面を開いて「編集する」を押してください。

設定が完了したら、Power Appsの開発画面を開きなおすことで適用されます。

既に開いている場合は開発中のデータを保存してから、Ctrl+F5などでリロードしてください。

本番環境でレイアウト調整を行なうとリロードに時間がかかりますし、万が一ということもありますので、テスト用のアプリの画面で調整することをおすすめします。

CSSの値を微調整する方法

これから紹介するCSSの数値は微調整が必要になるかもしれませんし、新たなレイアウトを作りたい場合は自力でCSSを作る必要がありますので、簡単にですが調整方法を説明します。

いったんStylebotによるCSSが適用済みなのを前提で説明します。

まず、Edgeの開発者ツールを開きます。

このとき一般的なF12キーはPower Apps Studioがmsappのダウンロード用に上書きしているため、右クリックから開きます。

せっかくなので調整したい数式展開ボタンを右クリックして開発者ツールを開いてみます。

すると、（Edgeの初期設定では）画面の右にソースコードを表示するパネルが追加され、該当箇所のhtmlタグの位置が選択された状態になります。

この図では、 <button class="button_18dzwa2-o_O-focus_x46kcf "> とあるので、これが数式バーの展開ボタンを構成する部分ということになります。

その下にスタイルを表示する部分があり、目的のClassに対して数値を設定している部分が見つかると思います。

この数値をダブルクリックして変更することで、リアルタイムに画面上のレイアウト調整が可能です。

数値にカーソルがあたっている状態で、マウスホイールを回すと1単位で増減できます。

ただし、開発者ツールのパネルの影響で本来の開発画面の解像度が小さな状態になっているため、理想的な調整ができません。

開発者パネル左下の「・・・」より、「ドッキングの位置」を「ドッキングを解除して別のウィンドウで表示」にすると、PowerAppsの画面から切り離すことができます。

また、上記の方法による微調整は、ちょっとした変更で定義済みの数値にリセットされてしまいます。

ある程度数値が決まったら、開発者パネルにフォーカスが当たっている状態で Ctrl+Fキーを押して検索ボックスにフォーカスを当て、先ほどのClassコードを入力してEnterを押すと候補は2つあるはずなので、Stylebotで決めたCSSの定義位置に飛びます。

こちらのCSSを書き換えることで、Ctrl+F5でリロードが起きるまでは値を維持するようになります。（操作性が悪いのでご注意）

あまりこねくり回す予定がないのであれば、いきなりStylebotの定義を更新してCtrl+F5リロードをしても構いません。

補足しておくとPowerAppsのスクリーンの位置と表示倍率は、開発画面の解像度の変更やスクリーンの切り替えが起きた時に調整が入ります。

意図的に調整を実行させるには、Ctrl+Shift+Bでブックマークバーの表示／非表示を切り替えるのが一番手っ取り早いです。

Stylebot用のCSS

ここからは筆者が使っているCSSを幾つか紹介しますが、紹介するCSSは筆者の開発用のウルトラワイドモニタ（UWQHD＝3440x1440＝21:9）でEdgeの表示倍率100%で、iPad等を想定した16:9のスクリーンキャンバスが100%で表示できるように調整しています。

一般的な16:9のFHD、QHD、UHD（4K）では、調整が必要ですし、同じ解像度のモニタでも環境によっては微調整が必要になるかもしれませんのでご注意ください。。

縦長のスマートフォン用のキャンバスで開発するのであれば、もっと攻めた調整にすることもできます。

※Power Apps Studioのアップデートにより、動作しない場合があります。筆者はサポートできないので、自力で対応できるようになってください。大抵はCSSのClasssが変更したことによる影響なので、開発者ツールで調べればわかります。

今回使用するCSSは次の3つです。

プロパティ選択コンボボックスの幅 .propertyComboBox_1kn1ij8
スクリーンキャンバスの余白 .blankPage_1xi5pac
数式バー展開ボタン .button_18dzwa2-o_O-focus_x46kcf

左にスクリーン100%、右に数式バー、ツリービューの幅を初期値（最小）プロパティパネルの幅を最大にして使用

/* キャンバスの位置を右に寄せて、数式バーを左側に寄せる ウルトラワイドUWQHD推奨 */
/* これにより数式バーを下まで展開してもスクリーンと重ならない *//* 左にスクリーン、右に数式、ツリービュー最小、プロパティパネル最大、100%表示*/
/* プロパティ選択コンボボックスの幅 */
.propertyComboBox_1kn1ij8 {
    min-width:1700px;/*最大値*/
}
/* スクリーンキャンバスの位置 を左に寄せる */
.blankPage_1xi5pac {
    margin-right: 1100px;
}
/* 数式バー展開ボタン */
.button_18dzwa2-o_O-focus_x46kcf {
    width:520px !important;/*最大値*/
}

左に数式、右にスクリーン100%、ツリービュー最大、プロパティパネル最大

/* キャンバスの位置を右に寄せて、数式バーを左側に寄せる ウルトラワイドUWQHD推奨 */
/* これにより数式バーを下まで展開してもスクリーンと重ならない */
/* 左に数式、右にスクリーン、ツリービュー最小、プロパティパネル最大、100%表示*/
/* プロパティパネルの幅 */
.propertyComboBox_1kn1ij8 {
    min-width:500px;/*最大*/
}
/* スクリーンキャンバスの余白 */
.blankPage_1xi5pac {
    margin-left: 900px;/*自宅*/
}
/* 数式バー展開ボタン */
.button_18dzwa2-o_O-focus_x46kcf {
    width:1940px !important;/*最大値*/
}

スクリーンを下に寄せて、数式バーを14行分くらい展開したままにする猶予を与え、ツリービュー最大、プロパティパネル最大

この方法に限り16:9のQHDモニタでも使用できます。

/* プロパティ選択コンボボックスの幅 */
/* を横に大きくして、
数式バーがツリービューと重ならないように変更
バージョンアップで度々 Class が変わる */
/* ツリービューの幅は制限があり250px～500px */
/* 2024/8/26 */
.propertyComboBox_1kn1ij8 {
    /*min-width:250px;/*標準値*/
    min-width:500px;/*最大値*/
}

/* スクリーンキャンバスの余白 */
/* を上に挿入してキャンバスを下にずらす
/* 開発者ツールパラメータ調整中はブクマバーのON/OFFとスクリーン切り替えで倍率更新が起きる */
/* 2024/8/26 */
.blankPage_1xi5pac {
    margin-top: 270px;/*QHD ブクマバーON 100%表示向け*/
}

/* 数式バー展開ボタン */
/* を横に大きくして、
数式バーがプロパティパネルと重ならないように変更 */
/* プロパティパネルの幅は制限があり320px～520px */
.button_18dzwa2-o_O-focus_x46kcf {
    /*width:30px !important;/*初期値*/
    /*width:320px !important;/*標準幅*/
    width:520px !important;/*最大幅*/
}

最後に

CSSを書き換える行為は、ユーザーが独自に行うものです。

プログラムの誤動作などに繋がることはないと思いますが、自己責任で行いましょう。

また、今回はStylebotを使用しましたが、似たようなブラウザ拡張機能は複数あります。

拡張機能そのものの信頼性についても各自の判断で選定・利用をしてください。

Power Appsの開発画面のレイアウトで困っている方は、ぜひCSSを変更して快適な開発環境を手に入れましょう！

もしも、もっと良いレイアウトやClassを見つけた方は、コメント欄やTwitterで教えて下さい！

それではまた来週？来月？来年？。ちゅんちゅん

P.S.

紹介したCSSだと固定サイズになるため、Edgeを小さくした時に数式バーが画面外に行ってしまいます。誰か改善案をくださいorz

えくせるちゅんちゅん

ことりがエクセルをちゅんちゅんするブログ