レスポンシブ デザインを使用したモバイル最適化アプリの作成
この演習では、Microsoft Power Apps と Contoso Coffee Machines のデータを使用して、モバイル向けに最適化された単一画面アプリを構築します。 この実践的なタスクにより、自動レイアウト コンテナーの使用方法を理解しやすくなり、デバイス間でのレスポンシブ デザインの動作を観察できるようになります。
Power Apps ホーム ページから開始します。 次の手順を実行します。
App in a Day ファイルをダウンロードして展開します。 Machine-Order-Data.xslx という Excel ファイルを開きます。
make.powerapps.com にアクセスします。 作成>空白のキャンバスから開始>レスポンシブ を選択します。 ようこそポップアップが表示されたら、スキップを選択します。
以降のいくつかの手順については、下の図を参照してください。 コマンド バーで、設定 ボタンを選択します。 表示されていない場合、ツリー ビュー パネルでアプリを選択して表示します。
設定ポップアップ パネルで 表示 タブを選択し、下にスクロールして 画面に合わせて倍率を変更 オプションがオフになっていることを確認します。 (これにより、縦横比をロックするがオフに切り替わります)。
設定 ポップアップを閉じます。
ツリー ビュー ペインで + 新しい画面を選択して、新しい画面を作成します。 新しい画面のサイドバー レイアウトを選択します。 画面名 (Screen2) をダブルクリックし、「Catalog Screen」と入力して、Catalog Screen という名前を付けます。
別の新しい画面を作成します。この画面では、成功テンプレートを使用します。 新しい画面の名前を "Success Screen" にします。
ツリー ビューで画面をクリックして、画面の右側の省略記号を選択し、削除 を選択して、Screen1 を削除します。
次に、Catalog Screen のサイドバー コンテナを選択します。 (サイドバー コンテナーを見つけるには、コンテナーの複数のレイヤーを展開する必要があります)。+ 挿入 を選択し、次に SidebarContainer1 を選択した状態で垂直ギャラリーを選択して、垂直ギャラリーを追加します。
データ ソースの選択 ペインが自動的に開きます。 開かない場合、ツリー ビュー ペインでギャラリー コントロールを選択した状態で、コマンド バーから データの追加 ボタンを選択します。
次に、OneDrive for Business を見つけて選択し、接続を作成します。 (検索入力フィールドを使用して検索を絞り込むことができます)。
画面の右側に Excel ファイルの選択 パネルが表示されます。 Machine-Order-Data.xlsx ファイルを選択し、コーヒー メーカー テーブルを選択します。 パネルの下にある接続を選択してテーブルを接続します。 画面の上部に通知が表示されます。これを X で消すことができます。
ギャラリーに表示されているデータを更新する必要が生じることがあります。 ギャラリーが下の図のようになっている場合、次の手順に従ってください。 正しいフィールドが表示されている場合、以下の手順 17 に直接進むことができます。
ギャラリーを展開し、タイトル フィールドを選択します。 数式バーで、タイトル テキスト ラベルの Text プロパティを
ThisItem.'Machine Name'に変更します。次に、サブタイトル フィールドを選択します。 数式バーで、サブタイトル テキスト ラベルの Text プロパティを
ThisItem.Priceに変更します。次に、画像フィールドを選択します。 数式バーで、画像コントロールの Image プロパティの Image プロパティを
ThisItem.Photoに変更します。ツリー ビューで、サイドバー コンテナーの横にあるドロップダウンを選択して、その内容を折りたたみます。
画面の右側にある MainContainer2 というメイン コンテナーを選択します。
フォームの編集を挿入するには、プラス (+) アイコン (またはコマンドバーから [挿入] ボタン) を選択します。 コーヒー メーカー テーブルをデータ ソースとして選択します。
右側のプロパティ パネルで、データ ソースの下にある フィールドの編集 オプションを選択します。
フィールド パネルで、フィールドの追加を選択し、各フィールド名の横にあるボックスを順序どおりにオンにしてフィールドを追加します (写真、コーヒー メーカー ID、コーヒー メーカー名、色、説明、機能、価格、コーヒー メーカー タイプ、コーヒー メーカー タイプ ID、平均カップ数/週、平均エスプレッソ数/週)。 次に、一番下の 追加 ボタンを選択します。
フィールド パネルを閉じます。
フィールドは選択した順序でフォームに挿入されることに注意してください。
Form1 を選択したまま、画面の左上 (ツリー ビュー ヘッダーの上) にある プロパティ ドロップダウン メニューで、Item プロパティを選択し、数式 (fx) フィールドに「
Gallery1.Selected」と入力します。 (ギャラリーの名前が Gallery1 ではない場合、実際のギャラリー名を使用します)。最後に、フォームを選択したまま、Fill プロパティを
Color.LightSteelBlueに設定します。次に、ヘッダー コンテナーに追加します。 HeaderContainer2 コントロールを選択し (この演習では、実際のヘッダー コントロールの名前が異なる場合はその名前を使用します)、プラス (+) アイコンを使用してテキスト ラベル コントロールを挿入します。 次のように、プロパティ ドロップと数式バーを使用してテキスト ラベルのプロパティを調整します。
Text: "Contoso Coffee Catalog "
Size: 13 から 20 に変更
Height: 40 から Parent.Height に変更
Width: 150 から 200 に変更
コマンド バーの位置合わせドロップ ダウン (色ボタンの左、または右側のプロパティ パネルのテキストのアラインメント)を使用し、位置合わせを左揃えから両端揃えに変更します。
次に、テキスト ラベルの外側のヘッダー コンテナーを選択して、テキスト ラベル コントロールの選択を解除します。 画像コントロールを HeaderContainer2 に挿入し、次のようにプロパティを変更します。
Image: User().Image
Height: Parent.Height
地球アイコンを HeaderContainer2 に挿入して、接続アイコンを作成できます。 プロパティを次のように変更します。
Height: 20
Width: 20
Color:
If(Connection.Connected, Color.Green, Color.LightSteelBlue)次に、ヘッダー コンテナー項目を右揃えにすることができます。 これを行うには、ツリー ビューで HeaderContainer2 を選択し、右側のプロパティ パネルを確認します。 両端揃え (水平方向) オプションを見つけます。 3 番目のオプションは終了です (アイコンの上にマウス カーソルを合わせると表示されます)。 それを選択します。
最後に、ヘッダー コンテナーに背景色を追加できます。 Fill プロパティを
Color.LightSteelBlueに調整します。フォームを配置する MainContainer2 を選択します。 ボタン コントロールを挿入し、プロパティを次のように設定します。
Text: "保存"
Width:
Parent.WidthOnSelect:
SubmitForm(Form1)MainContainer2 内のフォームを選択し、OnSuccess プロパティを
Navigate('Success Screen')に変更します。ツリー ビュー パネルから Success Screen を選択します。
チェック アイコン (iconCheck1) を選択し、OnSelect プロパティを次のように変更します。
Back()プレビュー モードに変更します。 [電話] ドロップダウンを選択し、iPhone 12 での表示に変更します。 デバイスや向きに応じてレイアウトがどのように調整されるかを確認します。
後で使用したり再度アクセスしたりする場合は、アプリを保存してください。
これで、プラットフォーム間で使用できるレスポンシブ アプリが作成されました。