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

15 分

次の演習では、Excel テーブルをデータソースとして使用する最初のアプリを作成します。データがテーブルとしてフォーマットされ、OneDrive などの Microsoft Power Apps がアクセスできる場所に保存されている限り、任意の Excel テーブルを使用できます。

この演習は、2 つの部分で構成されています。

Excel テーブルから 3 画面アプリを生成します。
今後のユニットで拡張する空白のキャンバスアプリを作成します。

どちらのアプリも同じデータを使用します。 3 画面アプリケーションは、コントロールがデータを表示するためにどのように機能しているか理解するために参照として機能します。

データを入手する

この演習を完了するには、App in a Day ファイルをダウンロードする必要があります。リンクを選択してファイルをダウンロードします。次に、ダウンロードした zip ファイルからファイルを抽出します。ファイルを展開したら、Machine-Order-Data.xlsx という名前の Excel ファイルを見つけて開きます。

OneDrive をブラウザーで開きます。 + 新規追加>ファイルのアップロード を選択します。
[開く] ダイアログボックスで、ダウンロード フォルダーに移動し、Machine-Order-Data.xlsx を選択します。
開くを選択します。次に、OneDrive で "Machine-Order-Data" を検索して、アップロードが成功したことを確認します。

3 画面アプリを構築する

次に、3 画面モバイルアプリを作成します。

Power Apps メーカーポータル make.powerapps.com にアクセスしてサインインします。
左側のナビゲーションウィンドウで、アプリ を選択します。
アプリテンプレートで開始する を選択します。
データ中心のモバイルアプリで、Excel からを選択します。
テーブルの選択 で、OneDrive for Business を展開し、Machine-Order_Data.xlsx ファイルを見つけて、コーヒーメーカー テーブルを選択し、アプリの作成 を選択します。

Power Apps により、動作するモバイルアプリが生成されます。アプリが下の図のようになっている場合は、次の手順に進みます。そうでない場合、手順 17 にスキップします。
BrowseGallery1 を展開し、Title1 を選択します。 Title1 を選択した状態で、カーソルを プロパティ ドロップダウン (ツリービューヘッダーの上) に移動し、Text というプロパティを選択します。
数式バーで、既存の値を削除し、ThisItem. と入力します (ピリオドを必ず入力してください)。オートコンプリート機能では、ギャラリー内の現在のアイテムで使用可能なすべてのフィールドのリストが表示されます。
タイトルにコーヒーメーカー名を表示するため、ドロップダウンリストから 'コーヒーメーカー名' を選択します。数式バーに ThisItem.'Machine Name' と表示されていることに注目してください。これは Power Fx 式であり、ギャラリー内の各アイテムの "コーヒーメーカー" フィールドを表示するよう Power Apps に指示します。

ギャラリー内の各項目に独自のコーヒーメーカー名が表示されるようになったことに注目してください。これがギャラリーで ThisItem を使用する利点です。ThisItem は現在のレコードを動的に参照するため、ギャラリー内の各コントロールにはその項目に固有のデータが表示されます。
BrowseGallery1 の下のツリービューパネルに戻り、Subtitle1 を選択します。 Subtitle1 を選択したまま、Text プロパティを選択します。今回は、数式バーに ThisItem.Price と入力します。

ギャラリー内の各項目に項目の価格が表示されます。
次に、ギャラリー内の各項目にコーヒーメーカーの色を追加します。ツリービューで BrowseGallery1 内の Body1 を選択します。 Body1 を選択したまま、プロパティドロップダウンで Text を選択し、ThisItem.Color と入力します。
コーヒーメーカーの写真をギャラリーに追加することもできます。まず、画像のためのスペースを確保するため、タイトル、サブタイトル、本文のフィールドを少し右に移動する必要があります。キーボードの Shift キーを押しながら、ツリービューパネルまたはギャラリーキャンバスから Title1、Subtitle1、Body1 フィールドを選択します。画面は次の画像のようになります。
3 つのフィールドすべてが選択された状態で、プロパティドロップダウンから X を選択します。 X 値は、画面におけるフィールドの水平位置です。数式バーの値を 80 に設定します。 (または、キャンバス内でフィールドを右にドラッグすることもできます)。
Body1、Subtitle1、および Title1 フィールドの左側に作成した空白スペースを選択します。これにより、フィールドの選択が解除され、画面は下の図のようになります。
コマンドバーから + 挿入 を選択し、検索バーに画像と入力して、画像コントロールを選択します。
キャンバス内の一番上の項目にある画像のサイズを変更して移動し、タイトル、サブタイトル、本文フィールドの左側に適切に表示されるまで移動します。
ツリービューペインまたはキャンバスで画像を選択し、プロパティドロップダウンで Image を選択して、ThisItem.Photo と入力します。コーヒーメーカーの画像がギャラリー内に表示されます。

学習したスキルを使用して、アプリの他の画面 (DetailScreen1 と EditScreen1) を更新し、目的のフィールドを表示します。
アプリがモバイルデバイスでどのように表示されるかを確認するには、右上の ([保存] アイコンの近くにある) [再生] ボタンのようなプレビューボタンを使用します。 [再生] ボタンを選択して (または F5 を押して)、インターフェイスを試してください。

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

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

Power Apps によるアプリ作成を体験したので、独自のアプリをゼロから構築し始めることができます。

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

Power Apps メーカーポータル (make.powerapps.com) から始めて、作成タブを選択します。
作成ポップアップウィンドウの、空のキャンバスアプリで開始 を選択します。
表示された 空のキャンバスで開始 ポップアップウィンドウで、タブレットサイズ を選択します。
Power Apps 編集キャンバスに自動的に移動します。 Power Apps Studio へようこそが表示された場合、スキップを選択できます。
画面の右上から保存を選択し、名前を付けて保存 ウィンドウでアプリに Contoso Coffee Machines という名前を付けます。保存を選択します。
データレコードを表示するギャラリーを作成します。コマンドバーから挿入ボタンを選択し、垂直ギャラリー を見つけて選択します。これは、Power Apps がモバイルアプリで自動的に作成したのと同じ種類のギャラリーです。
Gallery1 というコントロールが画面に表示されます。この時点ではデータに接続されていないため、Power Apps はデータソースを選択するように求めるメッセージを表示します。さまざまな種類のデータすべてを使用して、接続先のデータの種類を Power Apps に通知する必要があります。この場合、OneDrive for Business 接続を使用して OneDrive に保存した Excel スプレッドシートに接続します。この接続により、ビジネスの OneDrive アカウントや、アクセス可能な任意の SharePoint ドキュメントライブラリからドキュメントにアクセスできるようになります。
OneDrive for Business を探して選択します。検索フィールドに「OneDrive」と入力すると、すぐに見つけることができます。次に、接続の追加を選択し、接続を認証する必要がある場合があります。
OneDrive for Business への接続が完了すると、画面の右側にパネルが表示され、Excel ファイルを選択するよう求められます。 OneDrive にコピーした "Machine-Order-Data.xlsx" という Excel ドキュメントを見つけて選択します。見つけるのが難しい場合は、検索フィールドにファイル名を入力して選択肢を絞り込むことができます。
"Machine-Order-Data.xlsx" を選択すると、パネルでテーブルを選択するよう求められます。 "Machines" と "MachineTypes" の 2 つのオプションがあります。"Machines" の横にあるボックスを選択し、パネルの下部にある接続ボタンを選択します。
データソースがアプリに追加されたという通知が表示されます。
もう一度ギャラリーを選択します。画面右側に、ギャラリーコントロールの プロパティ パネルがあります。 データソースが「Machines」に設定されていることを確認します。ギャラリーに写真、タイトル、価格が表示されていない場合、上記のモバイルアプリで使用したのと同じ手順に従って、ここで追加してください。 (ヒント: ThisItem.'Machine Name'、ThisItem.Price、ThisItem.Photo を使用)。
ギャラリーのサイズを変更して、画面の下部まで拡張し、画面の左側に触れるようにします。
次に、ギャラリーに表示されるデータを更新するためのフォームコントロールを追加できます。画面の空白部分を選択してギャラリーの選択を解除し、ヘッダーメニューから挿入ボタンを選択します。 フォームの編集 を見つけて選択します。
コントロール Form1 が画面に表示されます。これを画面の右半分にドラッグし、画面の右半分を占めるように位置とサイズを変更します。
新しいフォームではデータに接続するよう求められていることに注目してください。フォームコントロールが選択された状態で、画面の右側にプロパティ パネルが表示されます。 プロパティの直下に、データソースと、なしというドロップダウンが表示されます。ドロップダウンを選択し、コーヒーメーカー テーブルを選択します。
次に、現在のフォームは空白であるため、フォームにフィールドを追加できます。 プロパティ パネルで、フィールドを編集するためのリンクを選択します。 [データソース] ドロップダウンのすぐ下にあります。
フィールド ポップアップパネルで、フィールドの追加 ボタンを選択します。
フィールドの選択の下にある次の各フィールドの横にあるチェックボックスをオンにします (写真、コーヒーメーカー ID、コーヒーメーカー名、価格、色、説明、機能、コーヒーメーカータイプ、コーヒーメーカータイプ ID、平均カップ数/週、平均エスプレッソ数/週)。記載されている順序で確認してください。場合によっては、すべてを表示するために下にスクロールする必要があります。その後、追加を選択します。 フィールド パネルを閉じます。

これで、フォームに入力フィールドが 3 列の形式に配列されて表示されます。選択した順序でフィールドが追加されたことに注目してください。すべてのフィールドは空白にする必要があります。
次に、フォームに表示するデータ項目を指定できます。画面の左側に表示されるギャラリーコントロールを確認します。ギャラリーにはすべてのコーヒーメーカーが表示されているため、フォームにはそのうちの 1 つを表示したいと考えています。フォームを選択した状態で、画面上部の数式 (fx) バーに移動します。数式バーの左側には、フォームコントロールのプロパティを見つけるためのドロップダウンがあります。ドロップダウンを選択し、Item プロパティを見つけ、それを選択します。
fx 数式入力ボックスの "項目" フィールドに、Gallery1.Selected と入力します。フォームのフィールドにデータが入力された状態がすぐに表示されます。
写真画像は、画像コントロールではなくテキストボックスとして追加されました。このため、画像自体ではなく画像の URL を確認できます。これを修正するには、写真データカード (例では Photo_DataCard2) を選択します。写真データカード内で、データカードの値 (この例では DataCardValue12) を選択します。データカードの値を削除します。
データカードの値を削除すると、キャンバス上にいくつかの赤い x が表示され、数式エラーがあることが示されます。これらはすぐに修正することができます。ただし、最初に写真データカードをもう一度選択し、挿入を選択します。「画像」という単語を検索し、画像を選択します。
データカードがロックされていることを示すポップアップエラーメッセージが表示されます。画像コントロールを挿入する前に、データカードのロックを解除する必要があります。 ロック解除して追加を選択します。これで、画像コントロールが写真データカードに挿入されるはずです。
新しく挿入した画像コントロールを選択し、数式バーに ThisItem.Photo と入力します。画面は次の画像のようになります。
これで、画像テキスト入力データカードの値を削除したときに表示された数式エラーを修正できます。右端の赤い x を選択し、数式バーで編集を選択します。
数式バーには DataCardValue12.Y + DataCardValue12.Height (または以前に削除したデータカード値に相当する名前) が表示されます。 DataCardValue12 は削除したデータカードであることを思い出してください。数式を変更して、データカード値への参照を削除し、画像コントロールの名前を含めます。この例では、画像コントロールは Image2 なので、更新された数式は Image2.Y + Image2.Height になります。 (式には実際の画像名を含める必要があります)。最初のエラー警告が表示されなくなります。
残っているエラー警告 (赤い x) を選択し、もう一度数式バーで編集を選択します。数式バーには、Update プロパティが DataCardValue12.Text に設定されていることが示されています。数式内のデータカードの値を削除し、再度画像コントロールの名前に置き換えます。この例では、数式は Image2.Text に更新されます。

今回は画像に Text というプロパティがないため、エラーは消えませんでした。数式をさらに編集する必要があります。数式を Image2.Image に変更します。数式エラー警告が表示されなくなります。
コマンドバーの右上にある [再生] アイコンを選択するか、F5 ファンクションキーを押すか、Alt キーを押したままコントロールをクリックして、アプリをプレビューします。アプリをプレビューモードにして、ギャラリーをスクロールし、いくつかの異なるコーヒーメーカーを選択してみてください。選択した項目を使用してフォームにどのように入力されるかを確認します。
次に、データに加えた変更を保存するためのボタンコントロールを追加します。まず、ツリービューペインから Screen1 を選択します。コマンドバーから挿入ボタンを選択し、ボタン を見つけて選択します。
ボタンが画面の右側のフォームのすぐ下になるよう、ボタンとフォームのサイズと位置を調整します。
ボタンのテキストを「ボタン」から「変更の保存」に変更します。右側の [プロパティ] パネルで、最初の項目は Text プロパティです。「ボタン」を「変更の保存」に置き換えて入力します。
ボタンコントロールを選択した状態で、fx 数式バーに移動します。 OnSelect プロパティを "false" から SubmitForm(Form1) に変更します。 (フォームに Form1 という名前を付けなかった場合は、フォームの実際の名前を使用します)。
ここで、アプリを再びプレビュー モードにします。そして、フォーム内のフィールドの 1 つ (Machine Price など) を更新します。保存ボタンを押して、変更を記録します。
次に、アプリのヘッダーを追加します。ツリービューペインで Screen1 を選択します。もう一度挿入ボタンを選択し、四角形コントロールを見つけて選択します。
四角形コントロールを画面の左上隅に配置し、画面の左側から右側まで広がるよう引き伸ばします。四角形の [プロパティ] パネルで、Height 入力フィールドを見つけて、「75」と入力します。

ヒント

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