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

  • 15 分

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

データを入手する

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

  1. OneDrive ブラウザー タブから、新規追加>ファイルのアップロードを選択します。

  2. [開く] ポップアップで、CoffeeMachineData.xlsx ファイルの場所 (通常はダウンロード フォルダー内) を選択します。

  3. CoffeeMachineData.xlsx ファイルを見つけて選択したら、開くを選択します。 OneDrive コマンド バーの中央上部にある検索フィールドに「CoffeeMachineData」と入力して、OneDrive にそのファイルが存在することを確認します。 OneDrive にデータ ファイルができたので、アプリを構築しましょう。

3 画面アプリを構築する

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

  1. Power Apps Maker Portal make.powerapps.com に戻り、組織のアカウントでサインインします。

  2. 左側のメニューから、作成タブを選択します。

  3. 開始 オプションの下にある Excel ボタンを選択します。

  4. 接続 に OneDrive の接続が表示されない場合は、+ 新しい接続 ボタン、作成 ボタンの順にクリックして接続を作成します。 新しい接続が作成できたら、OneDrive for Business 接続を選択します。

  5. Excel ファイルの選択の下で、CoffeeMachineData.xlsx ファイルを見つけて選択します。 右上隅の検索フィールドを使用してユーザーを検索します。

    [接続] の [Excel ファイルの選択] オプション画面のスクリーンショット。OneDrive の接続および CoffeeMachineData.xlsx が強調表示されています。

  6. テーブルの選択 で、「CoffeeMachines」を選択します。 CoffeeMachines は、アプリのデータが存在するテーブルです。

  7. 右下の接続ボタンを選択し、Power Apps で 3 画面アプリが構築されるのを見てください。

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

    Power Apps で作成された CoffeeMachines アプリのスクリーンショット。[再生] ボタンが強調表示されています。

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

    右上隅の [X] を押してプレビュー モードを終了し、このアプリを保存しましょう。

  8. 保存ボタンを選択して、名前を付けて保存ペインにこのアプリの名前を入力します。 次に、保存を選択します。

  9. コマンド バーの左上の戻るボタンを選択して、アプリを終了します。

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

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

  1. Power Apps Maker Portal (make.powerapps.com) から始めて、作成タブを選択し、空のアプリを選択します。

  2. 作成ポップアップ ウィンドウの、空白のキャンバス アプリの下で作成を選択します。

  3. アプリを「Contoso コーヒー メーカー」と名付け、形式トグルが タブレット PC に設定されたままにしておきます。 作成 を選択します。

  4. 「Power Apps Studio へようこそ」というポップアップが表示された空白の画面、または画面上にメッセージが表示されます。 「挿入ペインから項目を追加するか、データに接続する」ように求められます。まず、データ レコードを表示するためのギャラリーの作成から始めます。 ギャラリー オプションを選択します。 このポップアップが表示されない場合は、コマンド バーから挿入ボタンを選択し、垂直ギャラリーを検索して選択します。

  5. Gallery1 というコントロールが画面に表示されます。 この時点ではデータに接続されていないため、Power Apps はデータ ソースを選択するように求めるメッセージを表示します。 さまざまな種類のデータすべてを使用して、接続するデータの種類を Power Apps に通知する必要があります。 この場合、OneDrive に保存した Excel スプレッドシートに接続する必要があります。 これは、OneDrive for Business 接続を使用して行います。 この接続により、ビジネスの OneDrive アカウントや、アクセス可能な任意の SharePoint ドキュメント ライブラリからドキュメントにアクセスできるようになります。

  6. OneDrive for Business を検索して選択します。検索フィールドに「OneDrive」と入力すると、これをすばやく見つけることができます。 次に、接続の追加を選択し、接続を認証する必要がある場合があります。

  7. OneDrive for Business への接続が完了すると、画面の右側にパネルが表示され、Excel ファイルを選択するよう求められます。 OneDrive にコピーした「CoffeeMachineData.xlsx」という Excel ドキュメントを見つけて選択します。見つけるのが難しい場合は、検索フィールドにファイル名を入力して選択肢を絞り込むことができます。

  8. 「CoffeeMachineData.xlsx」を選択すると、パネルでテーブルを選択するよう求められます。 「CoffeeMachines」のオプションが 1 つだけあるはずです。[CoffeeMachines] の横のボックスを選択し、パネルの下部にある接続ボタンを選択します。

  9. もう一度ギャラリーを選択します。 画面右側に、ギャラリー コントロールのプロパティ パネルがあります。 データ ソースが「CoffeeMachines」に設定されていることを確認します。 ギャラリーに写真、タイトル、価格が既に表示されていない場合は、この時点で表示されるはずです。

  10. ギャラリーのサイズを変更して、画面の下部まで拡張し、画面の左側に触れるようにします。

  11. 次に、ギャラリーに表示されるデータを更新できるようにフォーム コントロールを追加しましょう。 ヘッダー メニューから挿入ボタンを選択します。 フォームの編集を見つけて選択します。

  12. コントロール Form1 が画面に表示されます。 これを画面の右半分にドラッグし、画面の右半分を占めるように位置とサイズを変更します。

  13. 新しいフォームではデータに接続するよう求められていることに注目してください。 フォーム コントロールが選択された状態で、画面の右側にプロパティ パネルが表示されます。 プロパティの直下に、データ ソースと、なしというドロップダウンが表示されます。 ドロップダウンを選択し、CoffeeMachines テーブルを選択します。

  14. 現在のフォームは空白であるため、フォームにフィールドを追加しましょう。 プロパティ パネルで、[データ ソース] ドロップダウンのすぐ下にあるフィールドの編集へのリンクを選択します。

  15. フィールド ポップアップ パネルで、フィールドの追加ボタンを選択します。

  16. フィールドの選択の下にある各フィールドの横にあるボックスをオンにします。 その後、追加を選択します。 これで、フォームに入力フィールドが 3 列のフォームに配列されて表示されます。 すべてのフィールドは空白にする必要があります。

  17. 次に、フォームに表示するデータ項目を指定する必要があります。 画面の左側に表示されるギャラリー コントロールを確認します。 ギャラリーにはすべてのコーヒー メーカーが表示されているため、フォームにはそのうちの 1 つを表示したいと考えています。 フォームを選択した状態で、画面上部の数式 (fx) バーに移動します。 数式バーの左側には、フォーム コントロールのプロパティを見つけるためのドロップダウンがあります。 ドロップダウンを選択し、Item プロパティを見つけ、それを選択します。

  18. fx 数式入力ボックスの "項目" フィールドに、Gallery1.Selected と入力します。 フォームのフィールドにデータが入力された状態がすぐに表示されます。

  19. コマンド バーの右上にある「再生」アイコンを選択するか、F5 ファンクション キーを押すか、キーボードの Alt キーを選択して押し続けることで、いつでもアプリをプレビューできます。 アプリをプレビュー モードにして、ギャラリーをスクロールし、いくつかの異なるコーヒー メーカーを選択してみてください。 選択した項目に基づいてフォームにどのように入力されるかを確認します。

  20. 次に、データに加えた変更を保存できるようにボタン コントロールを追加しましょう。 コマンド バーから 挿入 ボタンを選択し、ボタン を見つけて選択します。

  21. ボタンのテキストを「ボタン」から「変更の保存」に変更しましょう。右側の [プロパティ] パネルで、最初の項目は Text プロパティです。 「ボタン」を「変更の保存」に置き換えて入力します。

  22. 新しいボタン コントロールを画面下部のフォームの下に再配置します。

  23. ボタン コントロールを選択した状態で、fx 数式バーに移動します。 OnSelect プロパティを「false」から SubmitForm(Form1) に変更します。

  24. ここで、アプリを再びプレビュー モードにします。 そして、フォーム内のフィールドの 1 つ (Machine Price など) を更新します。 保存ボタンを押して、変更を記録します。

  25. 次に、アプリのヘッダーを追加しましょう。 もう一度 [挿入] ボタンを選択し、四角形コントロールを見つけて選択します。

  26. 四角形コントロールを画面の左上隅に配置し、画面の右側に達するまで拡大します。 四角形の [プロパティ] パネルで、Height 入力フィールドを見つけて、「75」と入力します。

    ヒント

    [プロパティ] パネルのすべての項目には、対応する値が数式 (fx) バーに表示されます。 [プロパティ] パネルに値が見つからない場合は、数式バーの入力フィールドのすぐ左側にあるドロップダウンを選択できます。 この場合、Height プロパティを検索/選択できます。

  27. 次に、ギャラリーとフォーム コントロールのサイズを変更して、四角形の真下に収まるようにします。

  28. テキスト ラベル コントロールを挿入します。 Text プロパティを「Contoso コーヒー メーカー」に変更します。

  29. 次に、ラベル コントロールの Size の値を 24 に調整し、タイトルが 1 行に収まるようにコントロールのサイズを変更します。

  30. さらに、フォントの色を変更します。 コマンド バーの Color 設定を選択すると変更できます。 標準色の下で、白い円を選択します。

  31. 最後に、ラベル コントロールが四角形の中央で、画面の中央に配置されるように位置を調整します。 画面の中央に近づけると、ラベルの位置を合わせやすくするために破線がどのように表示されるかに注意してください。

    演習終了時点での Contoso Coffee Machines アプリのスクリーン ショット。

説明は以上です。 空白の画面から、Coffee Machine データの任意のデータを更新して保存できる単一画面アプリを作成しました。 次のユニットでは、新しい概念を学びながら、このアプリを基にさらに構築していきます。