演習: キャンバス アプリを構築する

  • 20 分

このユニットでは、Microsoft OneDrive に格納されている Microsoft Excel ブックをデータ ソースとするキャンバス アプリを生成します。 この Excel ブックには、Contoso Manufacturing が所有するさまざまな建物のテーブルがあります。 現時点では、ユーザーは、別の場所に出張するときに共有ブックをメールで送信し合い、更新を行う必要があります。 Power Apps キャンバス アプリを使用すれば、ユーザーは電話から建物を直接見ることができます。 さらに、情報を編集したり、新しい建物を追加することもできます。

この例では Excel を使用しますが、次に示すデータは他の多くのソースから使用できることを念頭に置いてください。

  • Microsoft Dataverse
  • Microsoft SharePoint
  • Salesforce などのクラウド サービス
  • Microsoft SQL Server などのオンプレミス ソース

この広範なデータ ソースにより、データがどこに存在するかに関係なく、データからアプリを柔軟に構築できます。 また、Power Apps 内のデータ ソースを結合して、異なるデータ ソース間のアソシエーションを簡単に作成することもできます。 Power Apps アカウントを使用できない場合は、無料の Power Apps Community Plan にサインアップできます。 詳細とサインアップについては、https://powerapps.microsoft.com/communityplan/ を参照してください。

基本的なキャンバス アプリを構築する

データ ソースへの接続

データ ソースに接続するには、次の手順を実行します。

  1. Contoso-Site-Tracking.zip ファイルをダウンロードし、すべてのファイルを抽出して、OneDrive に保存します。

  2. https://make.powerapps.com に移動して、自分の組織アカウントでサインインします。

  3. 左側のウィンドウで、作成を選択します。

  4. データから開始セクションで、Excel を選択します。

  5. [接続] の下にある OneDrive を選択します。 接続を使用できない場合は、新しい接続を選択して作成します。

  6. 右側の Excel ファイルの選択 で、Contoso Site Tracking.xlsx ファイルを選択します。

  7. テーブルの選択 で、SiteInspectorを選択して、接続 を選択します。

Power Apps ではデータを検査し、データが Power Apps の機能に対応するようにアプリを生成するので、実際に機能するアプリを起点にすることができます。 生成されたアプリは常に 1 つのリストまたはテーブルを基にしていますが、後でアプリにデータをさらに追加できます。

公開されたアプリケーションのスクリーンショット。

生成されたアプリの確認

新しい 3 画面アプリが Power Apps Studio で開きます。 データから生成されたすべてのアプリには、[画面] ペインで表示できるものと同じ画面のセットが含まれています。

  • 閲覧画面 - 既定では、この画面が表示されます。 ここでは、データ ソースのデータの参照、並べ替え、検索、更新ができます。 閲覧画面では、プラス記号 (+) を選択して、データ ソースに項目を追加できます。

    注

    これは、UIで BrowseScreen1 として一覧表示されます。

  • 詳細画面 - 詳細画面には、1 つの項目に関するすべての情報が表示されます。 この画面では、項目を開いて編集または削除することができます。

    注

    これは、UIで DetailScreen1 として一覧表示されます。

  • 編集/作成画面 - この画面では、既存の項目を編集したり、新しい項目を作成したりできます。

    注

    これは、UIで EditScreen1 として一覧表示されます。

画像は App Studio で表示される 3 画面アプリの様子を示しています。

App Studio での 3 画面アプリケーションのスクリーンショット。

アプリを実際に使ってみるには、右上隅の再生 アプリ プレビューの開始矢印のスクリーンショット。 を選択します。 テーブルのすべてのデータが含まれていることと、既定で問題なく動作していることに注意してください。

Contoso Site Tracking アプリを生成できたので、数分間かけてアプリを選択し、デザインを確認する必要があります。 ギャラリーを使用して、Excel ファイルからレコードを参照する方法をメモします。 レコードを選択すると、フォーム コントロールにその他の詳細が表示される別の画面が表示されます。 このアプリには、これらの行を編集したり、新しい行を作成したりする機能も含まれています。 これで、ビルドの基盤となる機能的なアプリを作成しました。

アプリの内容を確認し終わったら、右上隅の [X] を選択して、プレビュー モードを終了します。 スマートフォンでアプリを表示するには、アプリを保存する必要があります。

アプリの保存

アプリを保存するには、[再生] ボタンの横にある保存ボタンを選択します。 現在のタイトル "App" を Contoso Site Tracking アプリに変更して、保存を選択します。 すべての変更が正常に保存されると、緑色のチェック マークが表示されます。 これで、スマートフォンでアプリを開けるようになります。 スマートフォンでアプリにアクセスする詳しい手順については後で説明します。

[保存] ボタンのスクリーンショット。

Power Apps のコントロール

コントロールは、アクションを生成したり、情報を表示したりする UI 要素です。 Power Apps のコントロールの多くは、他のアプリで使用したコントロールと似ており、ラベル、テキスト入力ボックス、ドロップダウン リスト、ナビゲーション要素などがあります。 コントロールを使用することで、実現したいことが最も反映されたユーザー エクスペリエンスを提供できます。

Power Apps のコントロールには、挿入タブでアクセスできます。

コントロール型のリストのスクリーンショット。

アプリの興味と効果を高めることができる一般的なコントロールをいくつか紹介します。

  • Galleries - これらのコントロールは、データ ソースからの行を表示する一連のコントロールを保持するレイアウト コンテナーです。 これらは、複数のレコードを一度に表示する場合によく使用されます。

  • Forms - これらのコントロールにはデータの詳細が表示され、レコードを作成したり、編集したりできます。

  • Media - これらのコントロールでは、背景画像を追加したり、ユーザーがアプリから写真を撮影するためのカメラ ボタンや、識別情報を簡単に取り込むためのバーコード リーダーを含めたりすることができます。

  • Charts - これらのコントロールでは、ユーザーが外出中に簡単な分析を実行できるようにグラフを追加できます。

使用できるコントロールを確認するには、挿入タブを選択してから、各オプションを選択します。

閲覧画面の確認 (BrowseScreen1)

使用可能なコントロールの一部についての確認は以上です。次に、サイト検査アプリでそれらがどのように使用されているかを見てみましょう。 アプリの最初の画面は、既定で BrowseScreen1 という名前の閲覧画面です。

閲覧画面には、複数のコントロールがあります。 閲覧画面で理解しておくとよいコントロールとしては、次のものがあります。

  • BrowseGallery1 - この Gallery コントロールは画面の多くを占有し、データ ソースからのデータが表示されます。

  • NextArrow1 - この Icon コントロールが選択されると、詳細画面が開きます。

  • IconNewItem1 - もう 1 つの Icon コントロール。選択されると、編集/作成画面が開きます。

コントロールが強調表示された公開済ビューのスクリーンショット。

詳細画面の確認

詳細画面の既定の名前は DetailScreen1 です。 このコントロールの一部は次のとおりです。

強調表示されたコントロールを含む詳細画面のスクリーンショット。

  1. DetailForm1 - このコントロールには、他のコントロールと、表示されている行の各列のデータ カードが含まれています。

  2. Address_DataCard1 - これはカード コントロールです。 各カードは、行の 1 つの列を表します。 この例では、前のユニットで示したように、Site Inspector テーブルの場所を表示します。

  3. IconEdit1 - このコントロールが選択されると、ユーザーが現在の項目を編集できるように、編集/作成画面が開きます。

編集/作成画面の確認

アプリの 3 番目の画面は EditScreen1 です。 含まれるコントロールの一部を次に示します。

強調表示されたコントロールを含む編集画面のスクリーンショット。

  1. EditForm1 - このコントロールには、他のコントロールと、編集されている行の各列のデータ カードが含まれています。

  2. Address_DataCard2 - このカード コントロールは、前のユニットで示したように、Site Inspector テーブルのアドレスを示します。

  3. IconAccept1 - このコントロールが選択されると、ユーザーが行った変更が保存されます。

デバイスへのアプリのインストール

Power Apps は、Power Apps Mobile アプリケーションがインストールされたモバイル デバイスで使用できます。 モバイル デバイスのようなエクスペリエンスが必要な場合、携帯電話に Power Apps Mobile アプリをインストールします。

  1. 使用するプラットフォームのアプリ ストアから Power Apps Mobile をダウンロードします。

  2. 自分のユーザー名とパスワードを使用してサインインします。

  3. スマートフォンまたはタブレット PC で、Contoso Site Tracking アプリを Power Apps Mobile で実行します。 アプリをインストールしない場合は、ブラウザーで実行できます。

できる限り優れたユーザー エクスペリエンスを実現するため、Power App がモバイル デバイス上でどのように表示され、どのように実行されるかを確認します。