Power AppsでSharePointリストからアプリを作成した際、書籍で紹介されているようなスマートフォン向けの3画面構成にならず、パソコンのモニターサイズのような横長画面で表示されることがあります。この現象は、Power Appsの作成時に選択したレイアウト設定やアプリの表示サイズ設定が原因で発生するケースが多くあります。
この記事では、Power Appsでスマホ向けアプリにならない理由や、3画面構成で作成するための設定方法、既に作成したアプリをスマホ表示へ変更する方法について詳しく解説します。
Power AppsがPCサイズ表示になる主な原因
Power AppsでSharePointリストからアプリを自動作成すると、作成時の設定によって画面サイズが決まります。特に、タブレット形式やカスタムサイズで作成された場合、スマートフォン向けではなく大きな画面サイズで表示されます。
Power Appsのキャンバスアプリでは、同じアプリでもスマートフォン用レイアウトとタブレット用レイアウトが存在します。書籍ではスマホ画面を前提に説明されていても、作成時に別の形式を選択していると見た目が異なります。
例えば、縦長のスマホ画面では「一覧画面」「詳細画面」「編集画面」の3画面構成になりますが、タブレットサイズでは横幅が広いため、同じ設定でもPCのような表示になります。
新規作成時にスマホレイアウトを選択する方法
Power Appsで新しくアプリを作成する場合は、キャンバスアプリ作成時の画面サイズを確認することが重要です。
Power Apps Studioで作成を開始するときは、「空のアプリ」または「SharePointから作成」を選択した後、スマートフォン形式を選択します。
作成時に「タブレット」を選択すると、後から画面サイズを変更してもレイアウト調整が必要になるため、スマホ利用が目的の場合は最初から電話形式を選ぶことをおすすめします。
既存のPower Appsをスマホ表示に変更する方法
すでにPCサイズで作成してしまった場合でも、設定を変更することでスマートフォン向け表示に近づけることができます。
Power Apps Studioを開き、左側メニューから「設定」を選択します。その中の「表示」または「画面サイズと向き」に関する項目を確認してください。
主に確認する設定は以下の項目です。
- 画面のサイズを「電話」に変更する
- 向きを「縦」に設定する
- スケールに合わせてサイズ変更する設定を確認する
- アスペクト比を固定する設定を確認する
設定変更後は、各画面内のボタンや入力欄の位置がずれる場合があります。その場合は、スマホ画面に合わせてコントロールのサイズや位置を調整します。
Power Appsの3画面構成とは何か
Power AppsでSharePointリストから作成される代表的な3画面構成は、「BrowseScreen」「DetailScreen」「EditScreen」の3種類です。
BrowseScreenはデータ一覧を表示する画面、DetailScreenは選択したデータの詳細を確認する画面、EditScreenは新規登録や編集を行う画面です。
例えば、社員名簿アプリの場合は、最初の画面で社員一覧を表示し、名前を選択すると詳細情報が表示され、編集ボタンから情報変更ができるという流れになります。
スマホで確認する場合の注意点
Power Apps Studio上ではPC画面で編集するため、実際のスマホ表示とは見え方が異なる場合があります。
作成後はPower Appsアプリやスマートフォンのブラウザーから実際に開いて確認することが大切です。特に文字サイズ、ボタンの押しやすさ、入力欄の幅などはスマホ実機で確認すると問題を発見しやすくなります。
また、Edgeブラウザーで確認している場合でも、表示倍率が変更されていると画面サイズが正しく見えないことがあります。ブラウザーのズーム設定も確認してください。
SharePointリスト連携アプリでよくある設定ミス
SharePointリストから作成したPower Appsでは、自動生成された画面をそのまま利用するケースが多いですが、作成時のテンプレート設定によって表示形式が変わります。
よくある原因として、以下のようなものがあります。
| 原因 | 対策 |
|---|---|
| タブレット形式で作成している | 電話形式で新規作成する |
| 画面サイズ設定が大きい | 表示設定から変更する |
| 既存画面の配置がPC向け | コントロールを手動調整する |
| ブラウザー表示倍率の問題 | ズーム設定を確認する |
まとめ
Power AppsでSharePointリストから作成したアプリがスマホ用の3画面構成にならない場合、多くは作成時の画面サイズ設定が原因です。
スマートフォンで利用するアプリを作る場合は、最初から電話形式で作成し、必要に応じてPower Apps Studioの表示設定を確認することが重要です。
既に作成済みのアプリでも設定変更や画面調整によってスマホ向けに改善できます。実際の端末で動作確認を行いながら調整すると、使いやすいPower Appsアプリに仕上げることができます。
コメント