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

6 分

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

Excel シート CoffeeMachineData.xlsx をダウンロードします。リンクを選択し、処理前のファイルをダウンロード ボタンを選択して、ファイルをダウンロードします。ダウンロードしたら、次の手順に進んでください。
make.powerapps.com にアクセスします。作成 > 空のアプリ > 空のキャンバスアプリ > タブレット を選択します。アプリの名前を入力し、作成を押します。
以降に行ういくつかのステップに関する支援については、以下の図を参照してください (ステップに番号が振られています)。コマンドバーで、設定ボタンを選択します。 (ツリービュー パネルでアプリを選択しないと表示されない場合があります。)
設定ポップアップパネルでディスプレイ タブを選択し、下にスクロールしてから、画面に合わせて倍率を変更オプションをオフにします (縦横比をロックするが自動的にオフに切り替わります)。
設定ポップアップを閉じます。
新しい画面をサイドバーのレイアウトでアプリに作成します。「Catalog Screen」という名前を付けます。
テンプレート > 成功を選択して新しい画面を作成します。「Success Screen」という名前を付けます。
Screen1 を削除します。
次に、コマンドバーからデータの追加を選択します。次に、OneDrive for Business を探して選択します。
画面右側の Excel ファイルの選択パネルで CoffeeMachineData.xlsx ファイルを選択し、CoffeeMachines テーブルを選択します。パネルの下にある接続を選択してテーブルを接続します。
画面の左側で、SidebarContainer1 という名前の水平コンテナーを選択します。以降のいくつかのステップについては、以下の画像を参照してください。
コンテナー内でプラス (+) アイコンを選択し、SidebarContainer1 に垂直ギャラリーを挿入して、CoffeeMachines をデータソースとして選択します。 Fill プロパティを Color.LightSteelBlue に設定します。
次に、Catalog Screen にフォームを挿入します。アプリキャンバスの右側にある MainContainer1 を選択します。 フォームの編集を挿入するには、プラス (+) アイコン (またはコマンドバーから [挿入] ボタン) を選択します。画面右側のパネルにあるプロパティ パネルで CoffeeMachines をデータソースとして選択します。
引き続き [プロパティ] パネルで、[データソース] にあるフィールドの編集オプションを選択します。
フィールド パネルでフィールドの追加を選択し、[フィールドの選択] ポップアップで各フィールド名の隣にあるボックスをオンにして、すべてのフィールドを追加します。次に、一番下の追加ボタンを選択します。
フィールド パネルを閉じます。
Form1 を選択したまま、画面左上にあるプロパティ ドロップダウンで Item プロパティを選択し、式 (fx) フィールドに Gallery1.Selected と入力します
最後に、やはりフォームで Fill プロパティを Color.LightSteelBlue に設定します
次に、ヘッダーコンテナーに追加します。 ヘッダーコンテナー コントロールを選択し、プラス (+) アイコンを使用してテキストラベル コントロールを挿入します。ドロップダウンのプロパティを次のように変更します。

Text: "Contoso Coffee カタログ"

Size: 13 から 20 に変更

Height: 40 から Parent.Height に変更

Width: 150 から 200 に変更
コマンドバーの位置合わせボタン (色ボタンの左、または右側のプロパティ パネルのテキストのアラインメント)を使用し、位置合わせを左揃えから両端揃えに変更します。
次に、画像コントロールを HeaderContainer1 に挿入し、次のようにプロパティを変更します。

Image: User().Image

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

Height: 20

Width: 20

Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)
次に、HeaderContainer 項目を右揃えにします。これを行うには、ツリービューで HeaderContainer1 を選択し、右側の [プロパティ] パネルで 両端揃え (水平方向) オプションを探します。 3 番目のオプションは終了です。それを選択してみてください。
最後に、ヘッダーコンテナーに背景色を追加しましょう。 Fill プロパティを Color.LightSteelBlue に変更します。
フォームを配置する MainContainer1 を選択します。 ボタン コントロールを挿入し、プロパティを次のように設定します。

Text: "保存"

Width: Parent.Width

OnSelect: SubmitForm(Form1)
MainContainer1 内のフォームを選択し、OnSuccess プロパティを Navigate('Success Screen') に変更します
ツリービュー パネルから Success Screen を選択します。
チェック アイコン (iconCheck1) を選択し、OnSelect プロパティを次のように変更します。

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

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

続行

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

フィードバック

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