自動生成 レスポンシブアプリのカスタマイズ ① アプリ作成の流れ

はじめに

今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
当時Qiitaにその際のざっと見た概要や修正点などを載せておりました。

Power Apps キャンバスアプリ　自動生成アプリについて確認・比較してみた（2023年6月上旬時点） - Qiita

はじめにこんにちは。ヨウセイです。今回はPower Appsの新しいトップ画面（現在プレビュー）上で、キャンバスアプリのPC/タブレット用レイアウトでのデータからのアプリ自動生成が出来るようにな…

本記事から数回にわたって自動生成レスポンシブアプリの簡単なカスタマイズサンプルなどをご紹介予定です。
その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介していきます。

Dataverseからの作成やExcelアップ→Dataverseアプリの自動生成なども可能ですが、
掲載するサンプルはSPOリストを使ったレスポンシブ版の自動生成アプリをメインに進めます。

TIPS※日本環境 2023/11/07 時点のバージョン：3.23104.17の内容で記載しています

NOTE自動生成されるアプリの内容は6月にQiitaに記載した状態から基本変わっていませんでした。
一部リライト的な内容にもなりますがご容赦ください。

新しいホーム画面とアプリ画面

Power Appsのホーム画面が2023年6月ごろにリニューアルされました。当時プレビューでしたが現在はGAされています。新しいホーム画面は以下のような画面となっています。

ホーム画面

公式情報 ※copilotも載ってますが本記事投稿時点では日本環境ではまだ使用出来ません。
https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/intro-maker-portal?tabs=home-new-look#4–build-apps

アプリ画面

また、少し前にアプリ画面も新しくなりました。
こちらでは自分のアプリ、共有されたアプリの切り替え表示やキャンバスアプリのインポートなどの操作が可能です。

上記２つの画面からレスポンシブ版の自動生成アプリが作成できます。

作成画面

作成画面は本記事投稿時点では以前のままの画面となっています。
ここからはレスポンシブ版の自動生成アプリは作成できませんが、従来からある空のアプリやスマホレイアウト版の自動生成アプリなどが作成できます。
そのうちにこちらの画面も新しいレイアウトに統一されるんだと思います。
今回はレスポンシブ対応版の作成のため、ここからの作成の流れは割愛します。

自動生成アプリを作成するルート

以下、ホーム画面またはアプリ画面から自動生成アプリを作成する流れです。
以下3通りの作成ルートがあります。ホームとアプリ画面から同様に進めます。
併せて各画面から作成できるアプリの概要についてもご紹介します。

1. データで開始する
2. ページデザインで開始する
3. アプリテンプレートで開始する

アプリ画面：プルダウン

アプリ画面

① データで開始する から作成

ここからは以下の種類が選択できます。いずれもレスポンシブ対応の自動生成アプリが作成できます。
①～③まではDataverseをデータソースに使用するアプリとなりますので有償ライセンスが必要となります。
④でSharePoint、Excelを選択した場合は通常ライセンス範囲でのアプリ作成が出来ます。※SQLは有償ライセンス必要

1. Excelファイルをアップロード
2. 空白のテーブルから開始する
3. 既存のテーブルを選択する
4. 外部データを選択（SharePoint、SQL、エクセル）

①はエクセルファイルをアップすると自動でDataverseテーブルを作成してくれます。そしてそのまま自動生成アプリを作成してくれます。詳細はここでは割愛しますが、自動で列名やデータ型を選定してテーブルを作ってくれる便利な機能です。
②は自分でDataverseのテーブルを新規に作成してそのまま自動生成アプリを作成できます。
③は既存のDataverseテーブルを選択しそのまま自動生成アプリを作成できます。

④ではデータソースの種類をSharePoint、Excel、SQLのいずれかから選択し対象のリストやファイルを選択して自動生成アプリを作成できます。
以降の記事で紹介するサンプルはこちらから作成したアプリとなります。

② ページ デザインで開始する から作成

ここからは色々と作れます。分かりずらいですがモデル駆動型アプリも混ざっています。
また、空のキャンバスから作成（タブレット・スマホ）も可能です。

テーブルに接続したギャラリー（Dataverse）と外部データに接続したギャラリー（SPO/Excel/SQL）を選択すると、①データで開始すると同様にレスポンシブ版の自動生成アプリを作成できます。

以下ざっと概要を記載します。

1. テーブルに接続したギャラリー　
   →Dataverseを使ったレスポンシブ対応の自動生成アプリ
2. 外部データに接続したギャラリー
   →SPOなどを使ったレスポンシブ対応の自動生成アプリ
3. 空のキャンバス　（タブレット　/　電話）
   →従来の空のキャンバスから作成する。レイアウトをどちらか選択可能
   ★初期状態でレスポンシブではないアプリを作れる
4. ビューとフォーム
   →モデル駆動型アプリ（⑤とは最初にテーブル選択ダイアログが出る違い）
5. ナビゲーション付きの空白ページ
   →モデル駆動型アプリ
6. 画像またはFigmaファイル
   →画像またはFigmaからアプリを作成する機能（詳細は検索ください）
7. 分割画面
8. サイドバー
9. ヘッダー、メインセクション、フッター
   →上記3つはレイアウトを指定して空で作成（レスポンシブ）
10. ダッシュボード
    →モデル駆動型（⑤とは最初にダッシュボード選択ダイアログが出る違い）

レスポンシブ対応の自動生成アプリのほか、モデル駆動型アプリや空、レイアウト、Figmaからの作成などが可能

③ アプリ テンプレートで開始する から作成

ここからはレスポンシブ対応の自動生成アプリは作成できません（現状は）
作成できるのは、従来のスマホレイアウトの自動生成アプリか従来からあるアプリ テンプレートから作成するアプリとなります。

スマホレイアウトの自動生成アプリを作成したい場合や（または作成画面からも可能）
アプリ テンプレートでアプリ作成したい場合はこちらから進めます。アプリ テンプレートはキャンバスアプリ（タブレット版またはスマホ版）とモデル駆動型が混在しています。

④ その他 アプリ編集画面から「データあり」（Dataverse限定）

上記以外で確認した方法が以下です。

・一旦レイアウトから作成などの既定でレスポンシブ設定となるアプリを作成する。
・編集画面でスクリーンの中身を空にする、または新しい画面で空のテンプレートを指定する。
・「データあり」「レイアウトあり」が画面中央に表示される。

「データあり」を指定するとDataverseのテーブルを選択できる。選択したテーブルのレスポンシブ対応の自動生成アプリが作成されます。

NOTEこちらは確認した現時点ではDataverseのみの対応の様です。
今年の6月にも確認していましたがそこからの変化はありませんでした。

作成したスクリーンの中身を削除する。または、新しい画面から空のテンプレートを選択してスクリーンを追加する。

空のキャンバスアプリの場合は「データあり」は出てこない

上記ですが、従来からある空のキャンバスアプリから作成する場合だと出てこないです。
空の画面の表示が異なります。

空のキャンバスアプリを作成する場合は、既定でレスポンシブ対応ではないなどの違いがあります。
そのためこの部分の挙動が違うのかな?と勝手に思っています。将来的に統合されるかもしれません。

おまけ：空のアプリとその他レイアウトアプリはレスポンシブ対応の既定値が異なる

空のキャンバスアプリから進めた場合はレスポンシブ対応設定になっていません。
従来どおり画面に合わせてフィットする設定となっています。

設定＞表示＞画面に合わせて倍率を変更、縦横比をロックするがオンになっている
→画面にフィットする設定（従来はこれが基本だった）

対して他のレイアウトを選択して作成した場合は以下のようにレスポンシブ対応する設定になっています。
設定＞表示＞画面に合わせて倍率を変更、縦横比をロックするがオフになっている

空のキャンバスアプリから初めて、レスポンシブ対応にしたい場合は、まず上記を調整（画面にあわせて倍率を変更、縦横比をロックするをオフにする）必要があります。そうすればレスポンシブ対応が出来るようになります。
※もちろん動的なレイアウトになるように各コントロールの対応が必要となります。

おわりに

今回はまずアプリ作成のルートからご紹介しました。
自動生成アプリの作成以外にもエクセルから作成やFigmaから、テンプレートから、空から作成などさまざまな方法があります。
また、空のキャンバスアプリと他のアプリではレスポンシブ対応用の設定や編集画面から自動生成の可否に違いがある点もご紹介しました。正直この辺りは触っていて気付いた内容なので、明確な理由などはわかっていませんが、へーそうなんだねーくらいに思っていただければと。将来的にはまた色々変わってくるかと思いますし。

アプリの作成ルートの部分までで結構長くなってしまったので、アプリのご紹介は次回その②で記載します。
それでは。

関連記事

続きの記事：自動生成 レスポンシブ アプリのカスタマイズサンプル ② 自動生成アプリ概要

2023.11.10

自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要

その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介しました。 その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成し、レイアウトやページ構成などの概要部分をご紹介しようと思います。...

自動生成関連：

自動生成 | Power Apps Tips ログ

Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。

レスポンシブ関連：

レスポンシブ | Power Apps Tips ログ

Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。