キャンバス アプリをモバイルに最適化するためのコンポーネントの特定

このユニットでは、モバイル向けに最適化されたアプリの作成に役立つ Microsoft Power Apps コンポーネントについて学習します。 トピックは次のとおりです。

• キャンバス アプリの作成

• アプリケーションの表示設定

• レスポンシブ フォーム

• コントロールおよびフォーム デザインに関する考慮事項

• コンテナー

• オフライン機能

• 接続アラート

キャンバス アプリを作成する

計画が完了したら、Power Apps ホームページに移動し、作成を選択して、空白のキャンバスから開始を選択します。 Microsoft Power Apps では、アプリが作成される前に 形式 オプションを選択するよう求められます。 これは、アプリの目的のモバイル エクスペリエンスに一致するフォーム ファクター (電話、タブレット、レスポンシブ レイアウトなど) を選択する最初の機会です。

携帯電話やタブレットのレイアウトを選択できます。 携帯電話のレイアウトでは、垂直方向と垂直スクロールが想定されています。 タブレット レイアウトでは横向きが使用されます。 レスポンシブ レイアウトでは、画面サイズに合わせて調整するように設計された定義済みのコンテナー テンプレートが使用されますが、この機能が正しく動作するにはコンテナーを使用する必要があります。

表示設定を構成する

アプリの編集中、設定 > 表示 に移動してレイアウト オプションを調整します。

• 向き : 既定のレイアウト (縦または横) を設定します。

• 画面に合わせて倍率を変更 - レスポンシブ デザインでは、このオプションを オフ に変更します。 既定では オン になっています。

• 縦横比をロックする: 画面に合わせて倍率を変更 がオンの場合、高さと幅の比率を維持します。

• 向きをロックする: オン にすると、向きの設定が強制適用されます。 オフの場合、ユーザーはデバイスの操作に基づいて向きを切り替えることができます。

レスポンシブ レイアウトを使用する

新しい画面を追加するときに、レイアウト タブから、分割画面、サイドバー、ヘッダーとフッターなどの組み込みのレスポンシブ テンプレートを選択できます。 これらの機能は、さまざまなデバイスに合わせて自動的に調整されます。

いずれもニーズを満たさない場合は、コンテナー、数式、条件付きロジックを使用してカスタムのレスポンシブ レイアウトを作成します。

コントロールおよびフォームをモバイル用にデザインする

ボタンは簡単にタップできるようデザインしてください。理想的には、画面の上部または下部に端から端まで配置します。 削除などのアクション ボタンを、ユーザーの利き手に合わせて配置します。

タッチ エラーを減らすため、フィールドと画面の端の間に間隔を追加します。 これにより、フォーカスが意図せず移動したり、システム ジェスチャがトリガーされたりするのを防ぐことができます。 必須フィールドは、フォームの上部の近くに表示します。

グリッドは、垂直方向または水平方向のいずれか一方向にのみスクロールし、画面の幅全体に広がる必要があります。 複数のフォームを使用する場合は、スクロール動作が一貫している必要があります。

コンテナーを使用してコントロールを整理する

コンテナーはコントロールの整理と配置に役立ちます。 水平コンテナー コントロールと垂直コンテナー コントロールは、自動レイアウト機能を使用して子要素の位置を設定し、スペースを配分します。 これらを使用して、さまざまなフォーム ファクターにわたってレスポンシブな動作を維持します。

自動レイアウト コンテナーは、Power Apps で間隔と配置を動的に管理する場合に役立ちます。

オフライン機能を有効にする

Microsoft Power Apps Mobile はデータをローカルに保存し、接続が再開されたときに同期できます。 SaveData 関数と LoadData 関数を使用して、デバイス ストレージからデータを保持および取得します。 ClearData 関数は保存されたデータを削除します。

オフライン時にユーザーに警告する

接続信号を使用して接続状態を監視します。 たとえば、アイコン コントロールは接続状態に基づいて色を変更できます。 また、通知機能を使用して、メッセージを表示したり、条件に応じてコントロールを無効にしたりすることもできます。