0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Microsoft】PowerPageseでの画面の各部品の設定方法について

Last updated at Posted at 2022-12-09

Power Pagesとは、2022年10月12日にローコード・ノーコードでビジネス向けWebサイトが作成できるツールとしてMicrosoftからリリースされたアプリです。今回は、このサービスを約1か月使ってみた私が大まかな画面制作の流れをまとめました。

まだ、Power Pagesを扱ったことのない人やこれから利用しようか考えている方は是非参考にしてみてください。

出来ること

Power Pagesの画面編集で出来る内容としては主に下記の4種類です。
これらはコンポーネントと呼ばれています。

  • テキスト
  • ボタン(遷移先を設定するのみ)
  • 入力フォーム
  • データベースの内容を出力

以下に、各コンポーネントの設定方法などを説明します。

編集画面の初期表示です。
image.png

①メニュー
ページ編集画面、スタイル設定画面やデータベース設定画面に切り替えることができます。
②メインナビゲーション
サイト上のページが一覧することが出来ます。
③ページ追加
新しくページを追加することが出来ます。
④ページ編集画面
各ページを編集することが出来ます。ページ上のボタンやテキスト(コンポーネント)の内容と配置を決めることが出来ます。

新しいページを追加するために左上の+ページをクリックすると、画面レイアウトを選択するページの追加ウインドウが表示される。
image.png

空白から開始を選択すると、テキストやボタンなどのコンポーネントを選択することが出来る。
image.png

テキストを挿入する場合

任意のテキストを入力することができて、書体や文字間隔、幅寄せなどが可能。
CSSやスタイル設定などからさらに細かいスタイルを設定することができる。

image.png

ボタンを挿入する場合

URLまたはページのリンクを指定することが出来て、ボタン押下時に画面を遷移させることが出来る。
また、ボタンのスタイルや配置方法なども指定できる。

編集ボタン押下時
image.png
スタイルボタン押下時
ボタンやテキストの色や形を指定できる。
詳細はメニュースタイル設定から設定することができる。
image.png
段落ボタン押下時
ボタンやテキストを右寄せ、左寄せ、中央配置することができる。
image.png

入力フォームを挿入する場合

既存のフォームか新規のフォームを作成して挿入することが出来る。
または既存のフォームを選択するの場所には現在編集しているサイト(プロジェクト)以外のサイトで作成したフォームも表示されている。今回は、テンプレートを使用しているため既存のフォームがいくつか表示されている。
image.png

[注意]
フォームに関しては、赤枠の「アクセス許可」でロールにアクセス許可の設定行わないとデフォルトではプレビュー(実際にユーザーが操作する画面)に表示されないため必ずアクセス許可の設定を行っておく。
image.png

データベースのデータを挿入する場合

コンポーネント選択画面のリストを選択する。
image.png

こちらも、入力フォームの時と同様に、現在編集しているサイト(プロジェクト)以外のサイトで作成したリストも表示されている。今回は、テンプレートを使用しているため既存のリストがいくつか表示されている。

【Microsoft】PowerPagesでのDBの設定方法
image.png

まとめ

以上、PowerPagesにおけるコンポーネントの挿入する方法や流れでした。
フォームやリストなどは、別画面で細かい設定方法などが必要なため初見ではやや扱いづらかったです。また、データ設定画面での設定方法も独特なUIをしており、一ヶ月使ってみただけでは完全に理解することは難しかったので、やはりこちらの記事でも述べたように動的な少し複雑なサイト制作にはPowerPagesは向いてないのかもしれません。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?