はじめに
株式会社ネクストスケープ、ソリューションビジネス部所属の小野塚です。
今回の記事ではMicrosoftが提供するPower Platformのうち、Power Pagesについて触ってみたいと思います。
Power PlatformはこのPower Pages以外にも恐らく皆様も利用されているかもしれないPower BIや、簡単にスマホアプリ等のアプリが作成できるPower Apps等があります。
Power Appsは以前、以下の記事で紹介させてもらいましたので興味のある方はどうぞ。
Power Pagesは他のPower Platform同様、ノーコード・ローコードツールの１つであり、このPower Pagesを利用することで簡単にサイトの構築が可能になり、Microsoftが提供するCMS製品とも言えるものになります。
サイト作成
まずは以下のサイトより無料試用版が利用できます。
一番最初にPower Pagesを触る場合は以下の画面から開始します。
上記画面から「開始する」ボタンを押すと、以下のサイト作成のためのウィザード画面になります。
ここでは「はい、以前にも作成しています」を選びました。
次にテンプレートを選択します。今回は「スターターレイアウト１」を選んでみましょう。
最後にサイト名等の必要事項を入力して完了です。
この後サイト（の雛型）が作成されるまで少々時間がかかります。２～３分というところでしょうか。
作成が終わると以下の画面が表示されます。
これが「デザインスタジオ」と呼ばれる画面になります。
実はこのタイミングで小さな問題が発生してまして、上記画面のサイトの文字列が全て文字化けしていました。
対応方法を検索してみたのですが、同じ現象が起きている方もおらず、文字コード等の全体的な設定も見当たらなかったのでとりあえずもう一度作成した結果が上の画像になります。
もし同じ事象が発生した方はまずはもう一度サイトを作成し直してみてください。
ページ編集
このデザインスタジオでサイトが色々と編集できるようなので、まずは表示された画面の画像の隣の文字列をクリックしてみますと以下のようになります。
文字列の内容だけでなく、文字の色等をカスタマイズできることがわかります。
興味深いのは「Copilot」というボタン。ご存じの方もいらっしゃるかと思いますが、恐らくChat GPTでMicrosoft製品の利用をフォローしてくれるMicrosoft 365 Copilotのことかと思います。
どうやらこのPower Pagesでもこれが利用できるようでして、更に期待が膨らみます。
が、記事の趣旨から外れてしまいそうなのでこちらは一旦スルーします。
新しいページの作成やページの削除もメインナビゲーションを使って簡単に行うことができます。このページ管理の操作の部分はOneNoteに近いですね。
コードの編集
ここでエンジニアとしてはデザインスタジオ、そして、上のスクリーンショットのメニューにも表示されている「コードの編集」ボタンが気になるところでしたので、これをクリックしてみます。
すると以下のダイアログが表示されます。
筆者の環境にはVS Codeがインストールされていますが、このメッセージを読む限りではWeb上でVS Codeが開くようですね。
VS Codeの画面が表示され、以下のダイアログが出てくるので「許可」を押します。
するとアカウントへのログインを促されるのでログインします。
このように対象のページのHTML、CSS、JSファイルがVS Codeで編集できるようになりますのでJava ScriptやWeb APIの呼び出し等も行うことができます。
このようにサイトの見た目を維持したままでの編集はもちろん、ボタン１つでデベロッパー向けのソースコードの編集までシームレスで行うことができます。
より本格的に実装を行いたい場合はコードをダウンロードし、自身のエディタで編集、そしてGit Hubによる管理やAzure DevOpsによるデプロイの管理等、普段エンジニアがサイト開発で行っている開発環境や手順がPower Pagesでも用意、実践できます。
サイト開発、もしくはランディングページ等にこのPower Pagesの利用を考えている方は本格導入にあたって色々と気になるところがあるかと思いますが、それを全部この記事だけで説明するのはさすがに難しそうです。
上で書いたローカルでの編集やDevOpsとの連携も１つの記事として書けそうですが、そういったものは一旦置いておきまして、もう１つの機能に触れておきます。
フォーム作成
次に画面左側のメニューバーで「データ」を選んでみましょう。
以下の画面になりますので、「フィードバック」というタイトルの下の「フォーム」タブを選択します。
すると以下の画面になり、この画面でフォームが作成できます。
試しに「simple contact us form」、画面にも書かれている通り「お問い合わせ」のサンプルかと思いますが、こちらを選んでみましょう。
以下のような画面になり、入力内容の選択を行うことができます。
この「フォーム」タブでは内部で管理するデータと入力項目との紐づけを行う箇所となりまして、この入力項目の「表示」つまり画面の編集については最初に説明した各ページの編集画面で行うことになります。
この入力フォームをページに配置した結果が以下になります。
見切れてしまって申し訳ないのですが、画面下部にSubmitボタンも存在しています。
ここでもやはり見たまま編集が可能になりますし、コードの編集も可能です。
終わりに
以上のように、軽くページ作成、編集を眺めてみましたが、まださわりではあるものの画面操作や各画面の示す内容、つまりUI/UXが非常にわかりやすかったです。
仕事柄CMSも色々と触っているのですが、チュートリアルを見つつCMSの画面を見つつでこの段階でも試行錯誤してしまうことがあるのですが、こちらのPower Pagesは途中で書いたOneNoteに似ている箇所もあったりで、普段Microsoftの各種サービスを利用されている方には非常にとっつきやすいのではないかと思います。
まだここまでだけではサイトの公開もできておらず、いわゆる「Hello World」の前のレベルにとどまっているので、試用期間の間にもう少し色々と触ってみて、皆さんにご紹介できればと思います。
Webサイト構築や現在のCMSからの入れ替え等ご検討の場合は弊社ホームページからお気軽にお問い合わせください。
