Power Pagesのスタイルシートをハックしてみた。

前回の続きで、Microsoft Build 2022で発表された、Preview版のPower Pagesをハックしていきます。
今回は独自のスタイルシートを定義できるのか試してみましたが、先に言っておきます！
僕の思惑通りには動きませんでした！😢😢😢

今回実現したかったこと

Power PagesでHTMLやスタイルシートを変更した場合、「どこまで編集可能なのか？」です。目指すは完全にオリジナルのデザイン作成です。

Power Pagesの基本はデザインのスタイルを選ぶだけ！

Power Pagesのページデザインの基本カラースタイルは、「スタイル」メニューから「スタイル設定」を選ぶだけで、変更することができます。
他にも色を登録したり、フォントやバックグラウンドなど、ページの要素について色を変更することも可能です。

因みに、この色のテイスト、とても良いと思いませんか？
エクセルなどの標準色パレットに関してはパッとしないイメージ（あくまで個人的見解です💦）だったのですが、北欧色でとってもきれいです。

ソースを確認してみる

前回同様に、Visual Studio Codeからソースを確認してみます。（ブラウザでも編集可能です）
まず、Power PagesのHTMLソースをみて一番気になったのは、CSSをインラインで書いていることです。

これはスタイルシートの使い方としては、メンテナンス性の良くない書き方です😢
なぜかというと、同じようなデザインが続く場合に、スタイルは、できるだけ要素ごとにまとめて、外部ファイルにするのがセオリーです。

まずはページ内で分離できるか試す。

では、このインラインで書かれているスタイルシートをページ内で分離してみます。

スタイルを分離

<style>
  .sectionBlockLayoutInner{
    padding: 8px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    min-height: 374px;
  }
  .containerInner{
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
  }
  .columnBlockLayoutInner{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    padding: 16px;
    color: red;
  }
</style>

<div class="row sectionBlockLayout sectionBlockLayoutInner">
  <div class="container containerInner">
    <div class="col-md-12 columnBlockLayout columnBlockLayoutInner">ここにスタイル適用可能？？</div>
  </div>
</div>

ざっくりですが、この様にスタイルを定義する部分とHTMLを分離して、Classを作成して要素に定義して、再度Power Shellを使ってアップロードしてみます。

Power Platform CLI

pac paportal upload --path [ローカルファイルのパス]

変更内容を確認

アップロードが完了したら、Power Pagesの編集画面の右上にある「同期」ボタンを押して編集内容をサイトに展開します。

その後に、「プレビュー」ボタンを押して、「デスクトップ」を押すと、新しいタブが開きブラウザで編集内容が表示されます。

それでは、編集した変更内容が反映できているのか確認してみます。
ブラウザのデベロッパー ツールを開き、ソースを確認すると、赤線の部分にきちんと変更した内容が反映されているのが確認できます。

「これで自分のスタイルを作成できるー！！！」

と、思ったのもつかの間です。
Power Pagesの編集画面でページ要素を追加すると、、、、、、、、

インラインに戻ってるー！！！！！💦💦💦

うぅ、、、、、、😢
なぜ？？？
冷静にPower Pagesの編集システムを考えて予想してみると
Power Pagesの追加するブロックのHTMLのソースコードには、このように記載されています。

<div class="row sectionBlockLayout">
  <div class="container">
    <div class="col-md-12 columnBlockLayout">ここにスタイル適用可能？？</div>
  </div>
</div>

このdivのClassに、

• 「row」「container」「col-md-12」と記載されているのは、BootStrapのスタイル。
• 「sectionBlockLayout」「columnBlockLayout」は、大まかなPower Pagesのレイアウトで使われているスタイル。
• インラインでスタイル定義されているのが、たぶん編集画面で変更された内容を保持するためなんじゃないかと。

なので、ブラウザから要素を追加すると、編集機能を維持するために、インラインに戻してしまうのではないかと予想しています。
でも、Visual Studio Codeで文字を赤くしたスタイル定義は残っているので、きちんと理解してインラインに直しているのは、凄いと思いました。

ただ、これだと目指すオリジナルデザインはできない、、、

思い切って外部ファイル化

書き換えられてしまうのであれば、「スタイルシートを外部ファイルにしてしまったらどうだろか？」と、Visual Studio Code側でスタイルシートを外部ファイル化した後に、アップロードしてブラウザで確認してみると、、、、、（本来はHead内に入れるべきなので、お行儀はよろしくないです）

きちんと自分で作成したスタイルシートのファイルがアップロードされているは確認できて、HTMLソースにも外部ファイル化されているのは確認できました。
いやぁー！素晴らしい！なんだかいけそうな気がする～！

ここまで実験したのに、このブログの書き出しの「期待した通りにならなかった」というのが、この写真の通りで外部ファイルに記載したスタイル定義が全部消えていました、、、、真っ白です😢

考えてみればソースの編集機能を保つためには、必要な処置なのかもしれませんね。

残念ですが、今回のハックはここまで！

ローカルで作ったファイルがアップロードできたのは確認したので、次回はJavaScriptを外部ファイルからDOMでアクセスできるのか、試してみたいと思います。