Power Appsキャンバスアプリの作り方入門｜ギャラリー・フォーム・ボタンの基本操作を手順つきで解説
Power Appsでキャンバスアプリを作ろうとしたとき、「どこから手をつければいい？」「ギャラリーとフォームって何が違う？」と迷う方は多いです。この記事では、キャンバスアプリの基本的な画面構成から、ギャラリー・フォーム・ボタンの設定、よく使う関数まで手順つきでわかりやすく解説します。
・キャンバスアプリの基本3画面構成
・ギャラリー（一覧表示）の設定方法
・フォーム（入力・編集）の設定方法
・ボタンに設定するよく使う関数
・初心者がつまずきやすいポイントと対処法
キャンバスアプリの基本3画面構成を知っておこう
多くの業務アプリは次の3つの画面で構成されています。この構成を押さえるだけで、アプリ設計の8割は決まります。
| 画面名 | 役割 | 主なコントロール |
|---|---|---|
| 一覧画面（HomeScreen） | データの一覧を表示。検索・絞り込みも行う | ギャラリー・テキスト入力（検索用） |
| 詳細画面（DetailScreen） | 一覧で選んだ1件のデータを詳しく表示する | 表示フォーム（Display Form） |
| 編集・追加画面（EditScreen） | データの新規入力・既存データの編集を行う | 編集フォーム（Edit Form）・保存ボタン |
Power Appsの作成画面で「SharePoint」を選択→リストを接続すると、この3画面構成のアプリが自動で生成されます。まず自動生成アプリで構造を確認し、カスタマイズする方法が最も効率的です。
キャンバスアプリの作成手順
ステップ1：アプリを新規作成する
- ブラウザで
make.powerapps.comを開き、Microsoft 365アカウントでサインイン - 左メニューの「＋作成」→「空のアプリ」→「空のキャンバスアプリ」をクリック
- アプリ名を入力（例：「在庫管理アプリ」）
- 形式は「タブレット」（PC・タブレット向け）または「電話」（スマホ向け）を選択
- 「作成」をクリック → アプリエディターが開く
ステップ2：データソースを接続する
- 左サイドバーの「データアイコン（円筒形）」→「データの追加」をクリック
- 「SharePoint」などを選択してリストまたはExcelファイルを接続
- 接続が完了するとデータパネルに表示される
ステップ3：ギャラリーで一覧画面を作る
ギャラリーは、複数のデータを一覧表示するためのコントロールです。
- 「挿入」タブ → 「ギャラリー」→「縦方向」を選択して画面に配置
- ギャラリーを選択した状態で、右側のプロパティパネル「データソース」にデータソースを設定
- 「フィールド」でタイトル・サブタイトルに表示する列を選択
在庫リスト とデータソース名を入力。検索フィルターをかけるなら Filter(在庫リスト, StartsWith(Title, TextInput1.Text)) のように書きます。ステップ4：フォームで詳細・編集画面を作る
フォームは1件のデータを表示・入力するためのコントロールです。2種類あります。
| フォームの種類 | 用途 | 保存方法 |
|---|---|---|
| 表示フォーム（Display Form） | データを読み取り専用で表示（詳細画面） | 保存不要 |
| 編集フォーム（Edit Form） | データの入力・編集ができる（編集・追加画面） | SubmitFormで保存 |
編集フォームの基本設定手順：
- 「挿入」→「フォーム」→「編集」を選択して画面に配置（フォーム名例：Form1）
- フォームを選択した状態で「データソース」にデータソースを設定
- 「フィールドの編集」で表示する項目を選択・並べ替え
ステップ5：ボタンと関数で動きをつける
Power Appsでは、コントロールのプロパティに関数を書くことで動作を設定します。
| 関数 | 用途 | 記述例 |
|---|---|---|
| Navigate() | 指定した画面に移動する | Navigate(EditScreen) |
| Back() | ひとつ前の画面に戻る | Back() |
| NewForm() | フォームを新規入力モードにする | NewForm(Form1) |
| EditForm() | フォームを編集モードにする | EditForm(Form1) |
| SubmitForm() | フォームの内容をデータソースに保存する | SubmitForm(Form1) |
| ResetForm() | フォームの入力内容をリセットする | ResetForm(Form1) |
ボタンの設定例
「新規追加」ボタン（一覧画面）：
OnSelect プロパティに以下を設定（編集画面に移動し、フォームを新規モードにする）：
Navigate(EditScreen); NewForm(Form1)「保存」ボタン（編集画面）：
OnSelect プロパティに以下を設定（フォームを送信する）：
SubmitForm(Form1)保存成功後に一覧画面へ戻るには、フォームのOnSuccessプロパティに：
Navigate(HomeScreen)SubmitFormの直後に画面遷移を書いても、保存が完了する前に画面が変わってしまいます。保存後の画面遷移はフォームの「OnSuccess」プロパティに書くのが正しい方法です。
ステップ6：ギャラリーで選んだデータを詳細・編集フォームに渡す
ギャラリーで選択したアイテムをフォームに表示するには、フォームの「Item」プロパティを設定します。
- 詳細フォームのItemプロパティ：
Gallery1.Selected - 編集フォームのItemプロパティ：
Gallery1.Selected
これで、ギャラリーでタップしたデータが詳細・編集画面のフォームに表示されます。
ステップ7：プレビューして動作確認・保存・発行
- エディター右上の「▶（プレビュー）」ボタンで動作確認
- 「ファイル」→「保存」でクラウドに保存
- 「発行」をクリックして他のユーザーが使えるように公開
よくあるつまずきポイント
| 症状 | 原因と対処 |
|---|---|
| フォームを保存してもデータが更新されない | フォームのDataSourceプロパティにデータソースが設定されていないか、Itemプロパティが正しく設定されていない。フォームのプロパティパネルで「データソース」と「Item」を再確認する |
| ギャラリーに何も表示されない | ギャラリーのItemsプロパティのデータソース名が正しいか確認。スペルミスやデータ接続が切れていないかを確認する |
| 保存後に画面が遷移しない | SubmitFormの直後にNavigateを書いていると保存前に遷移してしまう。フォームのOnSuccessプロパティにNavigateを記述する |
| 「代表者委任の警告（黄色い波線）」が出る | Filter・SortなどがSharePointリストの委任制限を超えている場合に表示される。500〜2000件以内の少量データなら無視できるが、大量データには別途対処が必要 |
| スマホで見たらレイアウトが崩れる | 作成時に「電話」レイアウトではなく「タブレット」を選んだ場合に起こりやすい。スマホ向けには「電話」レイアウトで作り直すか、レスポンシブデザイン設定を有効にする |
SubmitFormとPatchの使い分け
データの保存には「SubmitForm」と「Patch」の2つの方法があります。初心者はまずSubmitFormを使いましょう。
| SubmitForm | Patch関数 | |
|---|---|---|
| 難易度 | やさしい | やや難しい |
| フォームの必要性 | EditFormコントロールが必要 | フォームなしで書ける |
| 向いているケース | 通常の入力フォームで標準的な保存をしたいとき | ボタン1つで特定の列だけ更新したい・複数のデータを一括更新したいとき |
Power Appsの基本は「ギャラリーで一覧表示、フォームで詳細・入力、ボタンとNavigate/SubmitFormで画面を結ぶ」の3点セットです。まずSharePointリストから自動生成されたアプリを動かし、その構造を理解した上でカスタマイズを加えていくのが最短ルートです。
