演習 - キャンバス アプリの基本的な画面ナビゲーションを作成する

  • 5 分

このユニットでは引き続き Contoso コーヒー メーカー アプリに取り組みます。そのため、この学習モジュールでここまでに構築してきたアプリを開いてください。

ユーザーがアプリの別の画面に移動できるように、アプリ画面のナビゲーションを追加します。 アプリを構築するときに、アプリの StartScreen の式で意図的に別の画面を定義しない限り、アプリを開くとツリー ビューの最上部にある画面が表示されます。 今回の場合、アプリを共有したユーザーに表示される最初の画面は "Home Screen" です。

以下の手順に従って、アプリにナビゲーションを追加します。

  1. アプリの "Home Screen" に移動して、ボタン コントロールを 2 つ挿入します。

  2. 両方とも画面の中央に配置し、一方をタップしようとしたユーザーが誤って他方をタップしないように、間にスペースをあけて上下に配置します。 Power Apps では、画面上の点線参照が提供され、近くにある画面上の他のコントロールを基準にしてコントロールを配置することができます。 この場合、コントロールの配置方法を知ることができるように、わずかにオフセットされていることを確認します。

  3. Shift キーを押したまま、両方のコントロールを選択します。 一部のコントロールには同じプロパティがあるため、両方とも選択すると簡単に揃えることができます。 両方のコントロールを選択したままで、次の 2 つの手順に進みます。

  4. コマンド バーから 配置 ドロップダウン コントロールを選択し、"左揃え" を選択します。 コマンド バーに配置ドロップダウン コントロールが表示されない場合は、(両方のコントロールを選択した状態で) 右クリックすると、ポップアップに配置オプション ドロップダウンが表示されます。

    注

    配置機能は、複数のコントロールを一度にすばやく配置する強力な方法です。 知っておくべきもう 1 つの強力な機能は、戻るボタンのすぐ右側のコマンド バーにある、元に戻す機能です。

  5. 次に、右側の [プロパティ] パネルを確認し、"幅" と "高さ" のプロパティを見つけます。 これらは数値を入力するフィールドです。 Width に 250、Height に 100 をそれぞれ入力します。

  6. 上のボタンの Text プロパティを "カタログの表示" に変更し、下のボタンの Text プロパティを "Admin Screen" に変更します。

    text プロパティを編集するには、画面上のボタンのテキストをダブルクリックするか、式フィールドに移動するか、プロパティ パネルに移動してテキストを更新します。 これらすべての手法を試して、どの方法が最適かを判断してください。

  7. 次に最初の関数を追加して、画面ナビゲーションを実現します。 Navigate 関数には、アプリが切り替わる画面を指定する、必須パラメーターが 1 つあります。 Navigate 関数を追加する際は、画面の名前を単一引用符で囲んで入力します。これを式バーに入力すると Power Apps によってプロンプトが表示される点に注意してください。 [カタログの表示] ボタンを選択して、OnSelect プロパティに次の内容を追加します。

    Navigate('Catalog Screen')

  8. 同様に、"Admin Screen" という名前のボタンを選択し、OnSelect プロパティに次の内容を入力します。

    Navigate('Admin Screen')

  9. ユーザーがホーム画面から移動できる機能を追加する場合は、ホーム画面に戻る方法も提供しないと、ユーザーは移動先の画面で立ち往生することになります。 ユーザーがホーム画面に戻る際に使用する Navigate 関数について先に説明しましたが、Power Apps には Back 関数によってユーザーが以前の画面に戻る方法も用意されています。 Catalog Screen に移動してボタン コントロールを追加します。

  10. 新しいボタンを画面の右下隅にドラッグし、Text プロパティを "戻る" に更新します。

  11. 次に、新しいボタンの OnSelect プロパティを、次のように更新します。

    Back()

    この式によりユーザーは以前の画面に戻ります。

  12. "Admin Screen" に移動して、上記の 2 つの手順を繰り返します。

  13. 次に "Home Screen" に戻り、アプリをプレビュー モードに設定します。 [カタログの表示] ボタンを選択し、[戻る] ボタンでホーム画面に戻ってみましょう。 "Admin Screen" のボタンでも同様に試してみてください。

ヒント

アプリで最初にその画面に移動した場合にのみ、アプリの [戻る] ボタンは機能します。 "Catalog Screen" や "Admin Screen" からアプリのプレビューを開始した場合は、"Back" 関数で移動するべき画面のコンテキストが Power Apps に存在しません。 そのためアプリをプレビューする際は、必ず "Home Screen" からプレビューを開始してください。

お疲れさまでした。 これでアプリに基本的なナビゲーションが追加されました。 アプリのナビゲーションに関する詳細は、次の学習モジュールで解説します。 簡単な知識チェックに挑戦してから、次のレベルにアプリを引き上げるテクニックをさらに学習しましょう。