[開発] Power Appsでアプリの基礎を作成

報告アプリの基礎を開発します。

編集フォームの作成

1. 左メニューにある「挿入」を開き、「入力」を押下します。
2. 下の方にある「編集フォーム」を選択し、キャンバス内に表示されたことを確認します。
3. 「データソースの選択」はステップ2で接続した「ReportData」を選びます。
4. 画面右にあるプロパティから「フィールドの編集」を押下し、「フィールドの追加」を選択します。
5. ステップ1で用意した列名（合計8列）を全て選択し、追加を実行します。
6. フォーム内のレイアウトを整えるため、プロパティの「列」を「1」、「レイアウト」を「横」にします。
7. フォーム内の項目順をExcelのテーブルに合わせるため、プロパティの「フィールド」を選択し、三点リーダーから「すべて折りたたむ」を選択後、ドラッグ操作で並び替えます。

アプリの保存

編集フォームができたら、ここまでの作業を保存します。

1. 上メニューの左にある「上書き保存」を選択し、名前を入力します。
2. 保存に成功すると、画面左上にあるアプリ名が変わっていることを確認します。

Tips: 保存は「Ctrl+S」でも可能です。

編集フォームの表示

アプリの出来栄えを確認するには、上メニューにある「アプリのプレビュー」を選択します。
実行すると、「表示するアイテムがありません」となりますが、現段階では正しい姿です。
フォームには複数のモードがあり、適切なものを選択することで、表示が可能になります。

1. 左メニューの「ツリービュー」を選択し、「Form#」を押下します。
   ※Formを何度が作っていると、最初はForm1ですが、Form2,3...と増えていきます
2. 該当のFormがアクティブになったのを確認し、左メニューの「既定モード」から「新規」を選択します。
3. 「アプリのプレビュー」を再度実行すると、フォームの項目名と入力欄が表示されていることを確認します。

編集フォームのサイズ調整

プレビュー画面では、PC、タブレット、スマホなど様々なサイズで確認できます。
スマホのサイズにした時、フォームの形が崩れているので、レスポンシブ対応にします。

1. ツリービュー内にFormとScreenContainerがあることを確認します。
   ※ScreenContainerがない場合は、作成方法を後述
2. ツリービュー内でFormを選択し、ScreenContainerの子コンポーネントとして、MainContainerの下部に移動します。
3. MainContainerを削除します（削除は右クリックもしくは三点リーダーから実行）。
4. 該当Formを選択し、画面右側のプロパティから「詳細設定」を押下し、「Width」があることを確認します。
5. 「Width」のテキストエリアを選択し、Parent.Width * 0.9と入力します。
6. 該当Form内にある各項目（末尾がDataCardになっているもの）をShiftを押しながら選択します。
7. 各項目を全て選択後、「Width」のテキストエリアを選択し、Parent.Widthと入力します。
8. 「Height」は、HeaderContainerとFooterContainerはParent.Height * 0.1、FormsはParent.Height * 0.8、各項目はParent.Height * 0.125とします。
   ※0.125の根拠は、1/8=0.125で、Formエリアの8等分を指す

Tips: Parentは、ツリービュー内のコンポーネントの親子関係を指します。

コンポーネントの整理

作成したコンポーネントは名前を変更し、管理しやすくします。

1. 該当Formを右クリックもしくは三点リーダーを押下し、「名前の変更」を選択します。
2. 「ReportForm」と編集し、Enterを押すと確定します。

Tips: コンポーネントに名前を付けることで、Power Fx（ローコード言語）で使いやすくなります。

ScreenContainerの作り方（自動生成されていない方向け）

「空のキャンバスを使用して開始」で「レスポンシブ」を選択すると、ScreenContainerは自動生成されます。
一方、「タブレットPCのサイズ」や「電話のサイズ」を選択すると、生成されません。
ですが、ScreenContainerは位置から作成することも可能です。

1. 左メニューの「挿入」から「レイアウト」を押下し、「垂直コンテナー」を選びます。
2. 表示されたCotainerを選択し、詳細設定から「X」を0、「Y」を0、「Width」をParent.Width、「Height」をParent.Heightにします。
3. スクリーン内にあるContainerの「＋」を押下し、「水平コンテナー」を選びます。
4. 作成されたContainerの詳細メニューから、「FillPortions」を0にし、サイズや位置などはそれぞれ調整します。
5. HeaderやFooterは「X」と「Y」の設定値で位置を決めます。

レスポンシブ対応にする必要とは？

画面サイズは、アプリ開発する最初の段階で決めておく内容です。
特にPower Appsでは、画面内にコンポーネントを配置し、ロジック（機能）を付与する開発手法のため、サイズ調整は作業工数が膨らみがちです。
一般的なプログラミング開発では、サイズは保有する属性に従い、簡単に変更できます。
Power Appsのコンポーネントは、このレシピでみたように、一つ一つに対して設定する必要があります。
PCやスマホのみ、と使用環境を制限するのも開発のうまさといえます。
レスポンシブ対応にする場合、Parentに対してどの程度か、といった相対値で設定するため、サイズ調整は工夫が必要になります。

できたもの