3
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?

#PowerApps グリッドコンテナーのプレビュー表示が消えたので改めて調べてみた

3
Posted at

Power Apps キャンバスアプリのモダンコントロールにおいて、個人的に待望の機能がテーブルとグリッドコンテナーです。そのグリッドコンテナーについて調べてみた記事です。あるいは、記事投稿時点における歴史の断片です。

そもそもグリッドコンテナーとは?

ざっくりヒトコトで言うと「領域をマス目(表)に分けて、部品をきれいに並べる」コントロールです。レスポンシブデザインにも対応しているので、表示領域によって動的に配置を変更する、という対応も可能です。

CSS の Bootstrap のような Gridレイアウト(Grid System)をご存じの方は、それに似た機能を持つコントロールだとイメージいただくとわかりやすいかもしれません。

レスポンシブデザインで画面レイアウトをグリッドコンテナーで動的に切り替える場合は配下に置いたコントロールを計算式などで調整が必要になるので全自動ではない点はご注意です。

ほぼ毎週金曜日 21時30分から Youtube Live で配信している Power Apps Weekly News の第128回目で2026年1月23日の状態が確認できますので、お時間ある際にあわせてご確認いただけるとイメージが持てるかな?と思います。

プレビューなのか否か問題(2026年5月4日 時点)

グリッドコンテナーのプレビューが外れているんですよ。一般提供(GA = General Availability)された、という更新情報を目にしていなかったので半信半疑だったのですが、現時点でも Power Apps Studio ではプレビューの表記が無い状態になっています。
ホントかなぁ……、ということでチョッと調べてみましょう。

Power Apps Studio の画面

確かに”プレビュー”の表記はありません。

スクリーンショット 2026-05-04 132641.png

Learn

公式サイトである Microsoft Learn にはバッチリと”プレビュー”の記載があります……。

スクリーンショット 2026-05-04 132821.png

結論

どっちやねん😓

結論:わからん、です(汗

記事投稿時点で、前述のグリッドコンテナーコントロールの Learn 記事は、最終更新日が英語・日本語ページともに 2025/12/19 ( 136 日前)です。公式情報が更新されていない可能性はあるものの、個人的には「明確に一般提供(GA)と明記された情報が公式で見当たらないのでプレビューだと思って使ったほうが良い」でしょう、ですかねぇ。

グリッドコンテナー 現時点の機能個人的まとめ

冒頭で”個人的な待望機能”と記載しましたが、その理由は「画面デザインのベースが1つのコントロールで可能になるから」です。これまでは、水平・垂直コンテナーを入れ子にして画面レイアウトを組む必要がありました。共著「Power Apps 入門」でも手順を案内しておりますが、この作業はなかなか手間です。

また、複雑な画面レイアウトを組むと、単純にコンテナーだけでコントロール数が増加します。これが、グリッドコンテナーを利用することで 1つのコントロールである程度レイアウトが組める、という状況になります。まぁ、なんて便利なんでしょう。

さきほど「プレビューだと思って利用したほうが良さそう」と書いたのですが、近日中に GA する気配を感じるので、そろそろ使い方等をまとめておこうかな、というノリですね。

事前準備

グリッドコンテナーはモダンコントロールになります。Power Apps Studio を起動した後で[設定]→[更新]→[モダンコントロールとモダンテーマ]をオンにする必要があります。

スクリーンショット 2026-05-04 134917.png

なお、Power Platform 環境のリリースサイクルが”早期”になっている場合や、地域によっては規定でオンになっている可能性があります。

グリッドの領域

行(Rows)と列(Columns)をグリッドコンテナーのプロパティで指定することで、表を指定できます。これが基礎になります。

例えば、グリッドコンテナーを配置したデフォルト状態だと
 Rows:2
 Columns:4
でキャンバスに追加されます。2*4なので、8マスの表になります。

スクリーンショット 2026-05-04 142840.png
※上図はわかりやすいように 1 から連番を表示させています。

例えば、4*4 に設定すると 16マスの表になります。

スクリーンショット 2026-05-04 143728.png

Toggle grid lines

2026年1月時点では存在しなかった新しい機能が追加されているようです。

グリッドコンテナー自体を選択すると、コントロールの左上に[Toggle grid lines]というスイッチが表示されます。これをオンにすると、グリッドの領域に薄い罫線が表示されます。

スクリーンショット 2026-05-04 143835.png

グリッドコンテナーの領域・表が”どういうマス目なのか?”が非常にわかりやすいですね。

・例)8マス目のコントロールを 2*2 の 4マス占領させた場合
スクリーンショット 2026-05-04 144014.png

ほんとに薄いグレーの線なので、是非お手元でスイッチON/OFFしてご確認ください。なお、実行時には薄い罫線は表示されません。

配下のコントロール配置

グリッドコンテナーの配下に、ラベル(モダンコントロールだと テキスト)コントロール等を配置して、どこの番地というか領域に、どれぐらいの範囲で配置するか?を指定していきます。

領域の基本

まず、グリッドコンテナーは表・マス目になるのですが、配下のコントロールは「配下に配置されたコントロール側のプロパティ」で領域を指定します。

グリッドコンテナーに配置したコントロールには[Grid position]というプロパティが追加されます。ここにある4つのプロパティに値を設定することで領域を指定できます。

スクリーンショット 2026-05-04 150920.png

 Column Start / Column End – 列の開始と終了
 Row Start / Row End – 行の開始と終了

前述の8マス目を 2*2 の4マス占領させた際のプロパティはこちらです。

グリッドコンテナーの領域指定は、下記のようなイメージになります。

マス・表なので「列と行を指定する」=マスを指定する、という想定を自分は当初したのですが、それは間違いです。グリッドコンテナーの領域指定は 『Column start(列の開始)は左端が1、Row start(行の開始)はいちばん上が1』で、始点と終点を決める イメージです。おそらく文章で説明するよりも、図を確認してもらうのが理解しやすいと思います。

スクリーンショット 2026-05-04 153458.png
上図の赤が列(Column)、青が行(Row)です。このように、始点と終点を意識して配置を考えて領域を指定する、と個人的にはわかりやすいと思っています。

0(ゼロ)は使わない

ほうが良さそうです。
その理由は前述の Youtube 動画をご確認ください。

Column start(列の開始)、Row start(行の開始)に 0(ゼロ)を指定すると思わぬ領域に配置されます。

まとめ

今まで水平・垂直コンテナー等で頑張って作っていたレイアウトを、1つのグリッドコンテナーで実現できそうじゃないですか?

  • Power Apps Studio ではプレビューが消えている
    • でも、公式サイト Microsoft Learn ではプレビューと明記(記事投稿時点
  • グリッドコンテナーを1つ置けば、複雑なレイアウトも構築できる
  • 配下に置いたコントロールのプロパティで領域を指定する

はたして、現時点で GA しているのか否かは不明ですが、便利なコントロールだと思います。活用できるタイミングで使っていきたいですね。

それでは、皆さま。素晴らしい Power Platform Life を!

3
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
3
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?