演習 - Power Apps で最初のアプリを作成する

15 分

次の演習では、Excel テーブルをデータソースとして使用する最初のアプリを作成します。データをテーブルとしてフォーマットし、アクセス権のあるデータソース (OneDrive など) に保存した場合、任意の Excel テーブルをデータソースとして使用できます。この演習では、データをダウンロードして OneDrive に保存し、簡単な 3 画面アプリを作成してから、空のキャンバスでアプリの作成を開始します。この演習で空白の画面から作成を開始するアプリは、今後の学習ユニットで継続して使用するアプリになります。 3 画面アプリは参考用です。これにより、コントロールがデータにアクセスするためにどのように相互作用するかを確認できます。どちらのアプリも同じデータを操作できます。

データを入手する

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

OneDrive ブラウザータブから、新規追加 > ファイルのアップロード を選択します。
[開く] ポップアップで、CoffeeMachineData.xlsx ファイルの場所 (通常は [ダウンロード] フォルダー内) を選択します。
CoffeeMachineData.xlsx ファイルを見つけて選択したら、開くを選択します。 OneDrive コマンドバーの中央上部にある検索フィールドに「CoffeeMachineData」と入力して、OneDrive にそのファイルが存在することを確認します。 OneDrive にデータファイルができたので、アプリを構築しましょう。

3 画面アプリを構築する

まずは、ボタンを数回クリックするだけで Power Apps で作成できる 3 画面アプリの構築を始めましょう。

Power Apps Maker Portal make.powerapps.com に戻り、組織のアカウントでサインインします。
左側のメニューから、作成タブを選択します。
開始オプションの下にある Excel ボタンを選択します。
接続に OneDrive の接続が表示されない場合は、+ 新しい接続 ボタン、作成ボタンの順にクリックして接続を作成します。新しい接続が作成できたら、OneDrive for Business 接続を選択します。
Excel ファイルの選択の下で、CoffeeMachineData.xlsx ファイルを見つけて選択します。右上隅の検索フィールドを使用してユーザーを検索します。
テーブルの選択 で、「CoffeeMachines」を選択します。 CoffeeMachines は、アプリのデータが存在するテーブルです。
右下の接続ボタンを選択し、Power Apps で 3 画面アプリが構築されるのを見てください。

しばらくすると、モバイルの外観を備えた完全に機能するアプリが Power Apps に表示されます。モバイルデバイスでどのように表示されるかを確認するには、右上の「保存」アイコンの近くにある「再生」ボタンのようなプレビューボタンを使用します。 [再生] ボタンを選択して (または F5 を押して)、インターフェイスを試してください。

項目の一覧をスクロールし、項目を選択します。続いて、項目の詳細を確認し、項目の詳細を編集して、変更を保存/キャンセルすることができます。 [Excel] ボタンを使用してアプリを構築すると、完全に機能するアプリをすぐに作成できます。

右上隅の [X] を押してプレビューモードを終了し、このアプリを保存しましょう。
保存ボタンを選択して、名前を付けて保存ペインにこのアプリの名前を入力します。次に、保存を選択します。
コマンドバーの左上の戻るボタンを選択して、アプリを終了します。

Power Apps がユーザーに代わってアプリを作成するを経験したので、次は独自のアプリの構築を始めましょう。

キャンバスアプリを作成する

Power Apps Maker Portal (make.powerapps.com) から始めて、作成タブを選択し、空のアプリを選択します。
作成ポップアップウィンドウの、空のキャンバスアプリ の下で作成を選択します。
アプリに「Contoso コーヒーメーカー」という名前を付け、[形式] トグルが タブレット PC に設定されたままにしておきます。作成を選択します。
[Power Apps Studio へようこそ] ポップアップで空白の画面が表示されるか、画面上にメッセージが表示されます。「挿入ペインから項目を追加するか、データに接続する」ように求められます。まず、データレコードを表示するためのギャラリーの作成から始めます。ギャラリーオプションを選択します。このポップアップが表示されない場合は、コマンドバーから挿入ボタンを選択し、垂直ギャラリー を検索して選択します。
Gallery1 というコントロールが画面に表示されます。この時点ではデータに接続されていないため、Power Apps はデータソースを選択するように求めるメッセージを表示します。さまざまな種類のデータすべてを使用して、接続するデータの種類を Power Apps に通知する必要があります。この場合、OneDrive に保存した Excel スプレッドシートに接続する必要があります。これは、OneDrive for Business 接続を使用して行います。この接続により、ビジネスの OneDrive アカウントや、アクセス可能な任意の SharePoint ドキュメントライブラリからドキュメントにアクセスできるようになります。
OneDrive for Business を検索して選択します。検索フィールドに「OneDrive」と入力すると、これをすばやく見つけることができます。次に、接続の追加を選択し、接続を認証する必要がある場合があります。
OneDrive for Business への接続が完了すると、画面の右側にパネルが表示され、Excel ファイルを選択するよう求められます。 OneDrive にコピーした "CoffeeMachineData.xlsx" という Excel ドキュメントを見つけて選択します。見つけるのが難しい場合は、検索フィールドにファイル名を入力して選択肢を絞り込むことができます。
"CoffeeMachineData.xlsx" を選択すると、パネルでテーブルを選択するよう求められます。 [CoffeeMachines] のオプションが 1 つだけあるはずです。[CoffeeMachines] の横のボックスを選択し、パネルの下部にある接続ボタンを選択します。
もう一度ギャラリーを選択します。画面右側に、ギャラリーコントロールの プロパティ パネルがあります。 データソースが「CoffeeMachines」に設定されていることを確認します。ギャラリーに写真、タイトル、価格がまだ表示されていなかった場合は、この時点で表示されているはずです。
ギャラリーのサイズを変更して、画面の下部まで拡張し、画面の左側に触れるようにします。
次に、ギャラリーに表示されるデータを更新できるようにフォームコントロールを追加しましょう。ヘッダーメニューから挿入ボタンを選択します。 フォームの編集 を見つけて選択します。
コントロール Form1 が画面に表示されます。これを画面の右半分にドラッグし、画面の右半分を占めるように位置とサイズを変更します。
新しいフォームではデータに接続するよう求められていることに注目してください。フォームコントロールが選択された状態で、画面の右側にプロパティ パネルが表示されます。 プロパティの直下に、データソースと、なしというドロップダウンが表示されます。ドロップダウンを選択し、CoffeeMachines テーブルを選択します。
現在のフォームは空白であるため、フォームにフィールドを追加しましょう。 プロパティ パネルで、[データソース] ドロップダウンのすぐ下にあるフィールドの編集へのリンクを選択します。
フィールド ポップアップパネルで、フィールドの追加 ボタンを選択します。
フィールドの選択 の下にある各フィールドの横のボックスをオンにします (場合によっては、下にスクロールしてすべてを表示する必要があります)。その後、追加を選択します。これで、フォームに入力フィールドが 3 列のフォームに配列されて表示されます。 フィールド パネルを閉じます。すべてのフィールドは空白にする必要があります。
次に、フォームに表示するデータ項目を指定する必要があります。画面の左側に表示されるギャラリーコントロールを確認します。ギャラリーにはすべてのコーヒーメーカーが表示されているため、フォームにはそのうちの 1 つを表示したいと考えています。フォームを選択した状態で、画面上部の数式 (fx) バーに移動します。数式バーの左側には、フォームコントロールのプロパティを見つけるためのドロップダウンがあります。ドロップダウンを選択し、Item プロパティを見つけ、それを選択します。
fx 数式入力ボックスの "項目" フィールドに、Gallery1.Selected と入力します。フォームのフィールドにデータが入力された状態がすぐに表示されます。
コマンドバーの右上にある [再生] アイコンを選択するか、F5 ファンクションキーを押すか、キーボードの Alt キーを選択して押し続けることで、いつでもアプリをプレビューできます。アプリをプレビューモードにして、ギャラリーをスクロールし、いくつかの異なるコーヒーメーカーを選択してみてください。選択した項目に基づいてフォームにどのように入力されるかを確認します。
次に、データに加えた変更を保存できるようにボタンコントロールを追加しましょう。コマンドバーから挿入ボタンを選択し、ボタン を見つけて選択します。以降の 3 つの手順については、以下の画像を参照してください。
ボタンのテキストを「ボタン」から「変更の保存」に変更しましょう。右側の [プロパティ] パネルで、最初の項目は Text プロパティです。「ボタン」を「変更の保存」に置き換えて入力します。
新しいボタンコントロールを画面下部のフォームの下に再配置します。
ボタンコントロールを選択した状態で、fx 数式バーに移動します。 OnSelect プロパティを「false」から SubmitForm(Form1) に変更します。
ここで、アプリを再びプレビュー モードにします。そして、フォーム内のフィールドの 1 つ (Machine Price など) を更新します。保存ボタンを押して、変更を記録します。
次に、アプリのヘッダーを追加しましょう。もう一度 [挿入] ボタンを選択し、四角形コントロールを見つけて選択します。
四角形コントロールを画面の左上隅に配置し、画面の右側に達するまで拡大します。四角形の [プロパティ] パネルで、Height 入力フィールドを見つけて、「75」と入力します。

ヒント

[プロパティ] パネルのすべての項目には、対応する値が数式 (fx) バーに表示されます。 [プロパティ] パネルに値が見つからない場合は、数式バーの入力フィールドのすぐ左側にあるドロップダウンを選択できます。この場合、Height プロパティを検索/選択できます。
次に、ギャラリーとフォームコントロールのサイズを変更して、四角形の真下に収まるようにします。以降の手順については、以下の番号の付いた画像を参照してください。
テキストラベル コントロールを挿入します。 Text プロパティを「Contoso Coffee Machines」に変更します。
次に、ラベルコントロールの Size の値をフォントサイズ 24 に調整し、タイトルが 1 行に収まるようにコントロールのサイズを変更します。
さらに、フォントの色を変更します。コマンドバーの Color 設定を選択すると変更できます。 標準色の下で、白い円を選択します。
最後に、ラベルコントロールが四角形の中央で、画面の中央に配置されるように位置を調整します。画面の中央に近づけると、ラベルの位置を合わせやすくするために破線がどのように表示されるかに注意してください。