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

完了

このユニットでは、モバイル用に最適化されたアプリの作成に役立つ、Power Apps の次のようなコンポーネントについて説明します。

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

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

• レスポンシブ フォーム

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

• コンテナー

• オフライン機能

• ユーザーに接続がないことを通知する機能

キャンバス アプリの作成

計画を完了したら、Power Apps ホーム ページにアクセスしてアプリの作成を開始します。 作成オプション、空のアプリから開始の順に選択して、空のキャンバス アプリを作成します。 Power Apps では、アプリの作成前からフォーマット オプション、つまりフォーム ファクターを提案します。 ここでは、ニーズに最も適した、モバイル アプリに必要なフォーム ファクターを採用するための最初の選択を行います。

携帯電話とタブレットのどちらかのレイアウトを使用できますが、使用方法は異なります。 たとえば、電話レイアウトを作成する場合、アプリケーションでは縦向きが想定され、ユーザーがデバイスの狭いウィンドウで上下にスクロールできる機能が含められます。 タブレット モードでは、同じデバイスのレイアウトでユーザーが横モードで操作することが想定され、デバイスは水平方向に維持されます。 最適なアプリケーションはケースバイケースで異なります。

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

キャンバス アプリの編集中に、設定 > 表示に移動すると、いくつかの重要な表示設定が示されます。

• 方向 - アプリの既定の表示方向を設定します。 縦に長い縦向き、または幅の広い横向きに設定できます。

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

• 縦横比をロックする - この機能は、高さと幅の比率を自動的に維持します。 画面に合わせて倍率を変更オプションがオンに設定されている場合にのみ有効になります。 このオプションがオフに設定されている場合、特定の画面サイズ向けにキャンバス アプリをデザインすることはできなくなります。

• 向きをロックする

  • このオプションがオンに設定されている場合、方向の設定はロックされます。 たとえば、アプリケーションが縦モードで、向きをロックするがオンに設定されている場合、ユーザーがそのキャンバス アプリで横向きにすることはできません。

  • このオプションがオフに設定されている場合、ユーザーはデバイスを扱う方法によって、アプリケーションの横向きと縦向きを切り替えることができます。

レスポンシブ レイアウト

新しい画面をアプリに追加すると、レイアウト タブで、分割画面、サイドバー、ヘッダーとフッターなどのいくつかのレスポンシブ オプションを選択できるようになります。 これらのオプションは設計上レスポンシブ レイアウトであり、適宜プラットフォームに適応します。

これらのオプションがいずれもビジネス目的に合わない場合は、コンテナー、式、条件を使用して独自のレスポンシブ レイアウトを作成できます。

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

ボタンは、ユーザーが簡単に見つけて選択できる必要があります。 アプリケーションの両端にまたがるように表示されたフォームの上部または下部に配置します。 削除などのアクションの場合は、ユーザーがデバイスを持つ (右手または左手) 可能性の高い方のレコードの横にボタンを配置します。

フォームにフィールドを含める場合は、デバイスの端とフィールドの間に十分なスペースを確保して、画面に触れた際に誤った選択が行われないようにします。 ユーザーは一貫性なくフィールドをタッチする可能性があるため、別の意図しないフィールドにフォーカスが移動することを避ける必要があります。 フィールドの端とフォームの端にスペースを設けることで、前のフォームに戻るなど、ユーザーが誤ってデバイスのスワイプ操作を行うことを防止できます。 必須フィールドがある場合は、これらのフィールドを優先的に最初に設定します。

データを含むグリッドは、フォーム上に端から端までまたがるように配置し、縦または横のいずれかの方向にのみスクロール可能にする必要があります。 フォームに他のフィールドが必要な場合は、レコードの右や左の別の列にではなく、レコードの主要フィールドの下に配置します。 複数のフォームを使用する場合は、アプリ全体でスクロール操作が均一になるようにします。

コンテナー

コンテナーは、コントロールの整理に役立つ優れたツールです。 さらに、コンテナーを使用して、コントロールを水平または垂直に自動的に配置することもできます。

水平コンテナーと垂直コンテナー コントロールはどちらも、コンテナー内に挿入される子コンポーネントの位置 (x および y プロパティ) を自動的に決定する自動レイアウト機能を使用します。 また、これらのコントロールは、使用可能なスペースを子コンポーネントに配分して、子コンポーネントの垂直方向と水平方向の配置を決定することができます。

自動レイアウト コンテナーは、ユーザー インターフェイスが画面サイズやフォーム ファクターの変更に対応する必要がある場合に最適です。 また、使用可能なスペース内でコンポーネントの積み重ねと間隔を Power Apps に自動的に処理させる場合にも便利です。

オフライン機能

ユーザーが Power Apps Mobile を実行したときには、特定のオフライン データをモバイル デバイスに保存できます。 モバイル デバイスがインターネットに再接続すると、Power Apps Mobile は、保存されているデータをデバイスから送信できます。 まだ取り上げていない 2 つの関数に、LoadData 関数と SaveData 関数があります。これらの関数は、アプリ デバイスのストレージから単にコレクションをリロードし、保存します。 また、ClearData 関数はモバイル デバイスのメモリからコレクションを削除します。

ユーザーに接続がないことを通知する機能

アプリがオフラインのとき、Power Apps では接続信号式を介してユーザーに警告できます。 接続からのフィードバックに基づいて色を変更するアイコン コントロールを使用できます。 また、通知機能を使用して、接続に関してユーザーに警告したり、接続に基づいて特定のコントロールの表示モードを変更したりすることもできます。

要約すると、モバイル用に最適化されたアプリの設計を支援するために利用できるさまざまなツールが用意されています。 アプリの作成を開始したときから最後の仕上げを行う時点に至るまで、アプリを最大限に活用するためのオプションがあります。 モジュールの概要には、これらの機能をアプリに組み込む方法に関する詳細情報へのリンクがいくつか含まれています。

続行