レスポンシブ デザインを使用したモバイル最適化アプリの作成

完了

この演習では、Contoso コーヒー マシンのデータを操作する、モバイルに最適化された 1 画面のみのアプリを作成します。 この演習の目的は、自動レイアウト コンテナーを使用してアプリを作成することです。レスポンシブなアプリの動作を実際に目で確認してください。 アプリを新しく作成するので、Power Apps のホーム ページに移動し、次の手順に従って操作します。

  1. Excel シート CoffeeMachineData.xlsx をダウンロードします。 リンクを選択し、処理前のファイルをダウンロード ボタンを選択して、ファイルをダウンロードします。 ダウンロードしたら、次の手順に進んでください。

  2. 作成>空のアプリ>タブレット PC の順に選択します。 アプリの名前を入力し、作成を押します。

  3. 以降に行ういくつかのステップに関する支援については、以下の図を参照してください (ステップに番号が振られています)。 コマンド バーで、設定ボタンを選択します。 (ツリー ビュー パネルでアプリを選択しないと表示されない場合があります。)

    ステップ 3. ~ 7. および 9. の番号が付けられた画像。画像は、コマンド バーおよびツリー ビューと共にアプリの [設定] パネルを示しています。

  4. 設定ポップアップ パネルでディスプレイ タブを選択し、下にスクロールしてから、画面に合わせて倍率を変更オプションをオフにします (縦横比をロックするが自動的にオフに切り替わります)。

  5. 設定ポップアップを閉じます。

  6. 新しい画面サイドバーのレイアウトでアプリに作成します。 「Catalog Screen」という名前を付けます。

  7. テンプレート>成功を選択して新しい画面を作成します。 「Success Screen」という名前を付けます。

  8. Screen1 を削除します。

  9. 次に、コマンド バーからデータの追加を選択します。 次に、OneDrive for Business を探して選択します。

  10. 画面右側の Excel ファイルの選択パネルで CoffeeMachineData.xlsx ファイルを選択し、CoffeeMachines テーブルを選択します。 パネルの下にある接続を選択してテーブルを接続します。

  11. 画面の左側で、SidebarContainer1 という名前の水平コンテナーを選択します。 以降のいくつかのステップについては、以下の画像を参照してください。

    11. ~ 13. の番号が付けられたステップのスクリーンショット。

  12. コンテナー内でプラス (+) アイコンを選択し、SidebarContainer1垂直ギャラリーを挿入して、CoffeeMachines をデータ ソースとして選択します。 Fill プロパティを Color.LightSteelBlue に設定します。

  13. 次に、Catalog Screen にフォームを挿入します。 アプリ キャンバスの右側にある MainContainer1 を選択します。 フォームの編集を挿入するには、プラス (+) アイコン (またはコマンドバーから [挿入] ボタン) を選択します。 画面右側のパネルにあるプロパティ パネルで CoffeeMachinesデータ ソースとして選択します。

  14. 引き続き [プロパティ] パネルで、[データ ソース] にあるフィールドの編集オプションを選択します。

  15. フィールド パネルでフィールドの追加を選択し、[フィールドの選択] ポップアップで各フィールド名の隣にあるボックスをオンにして、すべてのフィールドを追加します。 次に、一番下の追加ボタンを選択します。

  16. フィールド パネルを閉じます。

  17. Form1 を選択したまま、画面左上にあるプロパティ ドロップダウンで Item プロパティを選択し、式 (fx) フィールドに Gallery1.Selected と入力します

  18. 最後に、やはりフォームで Fill プロパティを Color.LightSteelBlue に設定します

  19. 次に、ヘッダー コンテナーに追加します。 ヘッダーコンテナー コントロールを選択し、プラス (+) アイコンを使用してテキスト ラベル コントロールを挿入します。ドロップダウンのプロパティを次のように変更します。

    Text: "Contoso Coffee カタログ"

    Size: 13 から 20 に変更

    Height: 40 から Parent.Height に変更

    Width: 150 から 200 に変更

  20. コマンド バーの位置合わせボタン (ボタンの左、または右側のプロパティ パネルのテキストのアラインメント)を使用し、位置合わせを左揃えから両端揃えに変更します。

  21. 次に、画像コントロールを HeaderContainer1 に挿入し、次のようにプロパティを変更します。

    Image: User().Image

    Height: Parent.Height

  22. 接続アイコンを作成しましょう。地球アイコンを HeaderContainer1 に挿入します。 プロパティを次のように変更します。

    Height: 20

    Width: 20

    Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

  23. 次に、HeaderContainer 項目を右揃えにします。 これを行うには、右側の [プロパティ] パネルで両端揃え (水平方向) オプションを探します。 3 番目のオプションは終了です。 それを選択してみてください。

  24. 最後に、ヘッダー コンテナーに背景色を追加しましょう。 Fill プロパティを Color.LightSteelBlue に変更します。

  25. フォームを配置する MainContainer1 を選択します。 ボタン コントロールを挿入し、プロパティを次のように設定します。

    Text: "保存"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

  26. MainContainer1 内のフォームを選択し、OnSuccess プロパティを Navigate(Screen3) に変更します

  27. ツリー ビュー パネルから Success Screen を選択します。

  28. チェック アイコン (iconCheck1) を選択し、OnSelect プロパティを次のように変更します。

    Back()

  29. アプリをプレビュー モードにします。 [電話] ドロップダウンを選択し、iPhone 12 での表示に変更します。 ディスプレイのコントロールが変更されたことを確認します。 タブレットや携帯電話で何度か向きを変えて、画面がどのように変化するかを確認してください。

以上で、シンプルでレスポンシブな、どのプラットフォームでも使用できるアプリが完成しました。 お疲れさまでした。