SharePoint からアプリを作成Creating an app from SharePoint

Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Update app screens, controls, and fields; and use formulas to further customize app behavior.

これから学習する内容

アプリを生成するGenerate an app

コースのこのセクションでは、SharePoint リストの Flooring Estimates (床材見積もり) からアプリを作成します。In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. 作成するアプリは、リストを参照したりリストを最新に保ったりするために、客先にいる見積もり担当者などが使用することが考えられます。The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. 概要のセクションで、同じリストからアプリを生成する方法を説明しました。それでは、なぜもう一度確認するのでしょうか。In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? まずは、PowerApps Studio で開始せずに、PowerApps がどのように SharePoint Online に統合されているかを説明します。First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. 次に、アプリの構造をさらに掘り下げ、カスタマイズする方法を説明します。Second, we dig deeper into how the app is put together, and show you how to customize it. このセクションを読み進めれば新しい情報を手に入れることができます。では、はじめましょう。You'll definitely get some new information going through this section, so let's jump in!

アプリを生成するGenerate the app

下図に、SharePoint リストの Flooring Estimates (床材見積もり) を示します。このリストには、名前、価格、各床材タイプの画像などの基本情報が含まれています。The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. PowerApps と Microsoft Flow がどのように SharePoint Online に統合されているか確認することができるので、リストから簡単にアプリとフローを構築できます。You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

Flooring Estimates (床材見積もり) リスト

アプリを構築するには、[PowerApps] > [Create an app] (アプリの作成) の順にクリックします。To build an app, click PowerApps, then Create an app. 右側のウィンドウで、アプリの名前を入力して、[Create] (作成) をクリックします。In the right hand pane, enter a name for the app, then click Create. [Create] (作成) をクリックすると、PowerApps がアプリの生成を開始します。After you click Create, PowerApps starts to generate the app. PowerApps は、データに関するあらゆる推論を行うため、開始点として便利なアプリが生成されます。PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

リストからアプリを生成する

PowerApps Studio でアプリを表示するView the app in PowerApps Studio

新しい 3 画面アプリが PowerApps Studio で開きます。Your new three-screen app opens in PowerApps Studio. データから生成されたすべてのアプリには、同じ画面セットが含まれています。All apps generated from data have the same set of screens:

  • ブラウズ画面: リストから取得したデータを参照、並べ替え、フィルター処理、更新し、(+) アイコンをクリックして項目を追加する画面。The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • 詳細画面: 項目の詳細を表示し、項目の削除または編集ができる画面。The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • 編集/作成画面: 既存の項目を編集したり、新規に作成する画面。The edit/create screen: where you edit an existing item or create a new one.

左側のナビゲーション バーで、右上のアイコンをクリックまたはタップしてサムネイル表示に切り替えます。In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

表示の切り替え

各サムネイルをクリックまたはタップすると、その画面上のコントロールが表示されます。Click or tap each thumbnail to view the controls on that screen.

生成されたアプリ

アプリをプレビュー モードで実行するRun the app in preview mode

右上にあるClick or tap アプリのプレビューを開始する矢印を クリックまたはタップしてアプリを実行します。in the top-right corner to run the app. アプリ全体を見ると、アプリにリストのすべてのデータが含まれていて、アプリが既定で良いエクスペリエンスを提供していることが分かります。If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

アプリをプレビュー モードで実行する

次は、アプリをさらに詳しく確認した後で、ニーズに合うようにアプリをカスタマイズします。Next we'll explore the app in more detail and later customize the app so it better suits our needs.

生成されたアプリの詳細Explore a generated app

このトピックでは、生成されたアプリをさらに詳しく説明します。画面とアプリの動作を定義するコントロールを確認しましょう。In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. すべての詳細は確認しませんが、このアプリの仕組みを詳しく確認しておくと、独自のアプリを構築する際に役立ちます。We won't go through all the details, but seeing more about how this app works will help you to build your own apps. この後のトピックで、画面とコントロールを操作する数式について説明します。In a later topic, we'll look at the formulas that work with screens and controls.

PowerApps のコントロールの詳細Understanding controls in PowerApps

コントロールは、動作が関連付けられている UI 要素にすぎません。A control is simply a UI element that has behaviors associated with it. PowerApps のコントロールの多くは、ラベル、テキスト入力ボックス、ドロップダウン リスト、ナビゲーション要素など、他のアプリで使用したことのあるコントロールと同じです。Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. ただし、PowerApps には、ギャラリー (要約データを表示します) やフォーム (詳細データを表示して項目を作成および編集できるようにします) などのより特殊なコントロールがあります。But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). 他にも、イメージカメラバーコードなど非常に優れたコントロールもいくつかあります。And also some other really cool controls like Image, Camera, and Barcode. 利用可能なコントロールを確認するには、リボンの [挿入] をクリックまたはタップして、[テキスト] から [アイコン] までの各オプションをクリックまたはタップします。To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

PowerApps Studio のリボンの [Controls] (コントロール) タブ

ブラウズ画面の詳細Explore the browse screen

アプリの 3 つの画面それぞれには、メインのコントロールとその他の追加コントロールが含まれています。Each of the three app screens has a main control and some additional controls. アプリの最初の画面は、既定で BrowseScreen1 という名前のブラウズ画面です。The first screen in the app is the browse screen, named BrowseScreen1 by default. この画面のメインのコントロールは、BrowseGallery1 という名前のギャラリーです。The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 には、NextArrow1 (アイコン コントロール。クリックまたはタップすると詳細画面に移動します) のような他のコントロールが含まれています。BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). この画面には、IconNewItem1 (アイコン コントロール。クリックまたはタップすると編集/作成画面で項目を作成できます) のような別のコントロールも含まれています。There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

複数のコントロールで構成されるブラウズ画面

PowerApps にはさまざまなタイプのギャラリーがあり、アプリのレイアウト要件に最適なものを使用することができます。PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. レイアウトを制御する他の方法については、このセクションの後半で説明します。You will see more ways to control layout later in this section.

PowerApps のギャラリーのオプション

詳細画面の詳細Explore the details screen

次は、既定で DetailScreen1 という名前の詳細画面です。Next is the details screen, named DetailScreen1 by default. この画面のメインのコントロールは、DetailForm1 という名前の表示フォームです。The main control on this screen is a display form named DetailForm1. DetailForm1 には、DataCard1 (カード コントロール。ここでは床材のカテゴリを表示します) のような他のコントロールが含まれています。DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). この画面には、IconEdit1 (アイコン コントロール。クリックまたはタップすると編集/作成画面で現在の項目を編集できます) のような別のコントロールも含まれています。There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

複数のコントロールで構成される詳細画面

ギャラリーには多くのオプションがありますが、フォームはもっとわかりやすく、編集フォームか表示フォームのどちらかです。There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

PowerApps のフォームのオプション

編集/作成画面の詳細Explore the edit/create screen

アプリの 3 番目の画面は、既定で EditScreen1 という名前の編集/作成画面です。The third screen in the app is the edit/create screen, named EditScreen1 by default. この画面のメインのコントロールは、EditForm1 という名前の編集フォームです。The main control on this screen is an edit form named EditForm1. EditForm1 には、DataCard8 (カード コントロール。ここでは床材のカテゴリを編集できます) のような他のコントロールが含まれています。EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). この画面には、IconAccept1 (アイコン コントロール。クリックまたはタップすると編集/作成画面で行った変更を保存できます) のような別のコントロールも含まれています。There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

複数のコントロールで構成される編集画面

アプリが画面とコントロールで構成される仕組みを理解したところで、次のトピックでは、アプリをカスタマイズする方法を見てみましょう。Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

アプリのカスタマイズCustomize the app

このセクションの最初の 2 つのトピックで、SharePoint リストからアプリを生成し、生成したアプリを詳しく確認して 3 画面アプリの構造について学習しました。In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. PowerApps に生成されるアプリは便利ですが、多くの場合は、生成された後でアプリをカスタマイズします。The app that PowerApps generated is useful, but you will often customize an app after it's generated. このトピックでは、アプリの各画面の基本的な変更点の概要を説明します。In this topic, we'll walk through some basic changes for each screen in the app. 他にもアプリをカスタマイズする方法はたくさんありますが、それらについては後のトピックで説明します。There is a lot more you can do to customize an app - we'll get to that in later topics. ひとまずはこのトピックの内容を理解し、足掛かりとしてください。In the meantime, you can take what you learn in this topic and build on it. リスト、Excel ファイル、またはその他のソースから生成した任意のアプリを取り上げ、カスタマイズ方法を確認しましょう。Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. これが本当にアプリの構造を学習するベストな方法なのです。It really is the best way to learn how apps are put together.

ブラウズ画面Browse screen

ブラウズ画面からはじめます。We'll start with the browse screen. SharePoint リストには、各製品のイメージが含まれていますが、既定ではイメージは表示されません。The SharePoint list contains an image for each product but the image isn't displayed by default. これを修正しましょう。Let's fix that. 右側のウィンドウの [Layout] (レイアウト) タブで、ブラウズ画面とは異なるレイアウトを選択します。In the right-hand pane, on the Layout tab, select a different layout for the browse screen. 変更と同時に PowerApps がアプリを更新するので、結果はすぐに表示されます。You see the results right away because PowerApps updates the app as you make changes.

ブラウズ画面のレイアウトを変更する

右の基本レイアウトを使用して、表示されるフィールドを変更しましょう。With the right basic layout, now change the fields that are displayed. 最初の項目のフィールドをクリックまたはタップして、右側のウィンドウで項目ごとに表示されるデータを変更します。Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. これにより、リストの各項目の概要が分かりやすくなります。This provides a better summary of each item in the list.

ブラウズ画面のフィールドを変更する

詳細画面Details screen

詳細画面では、フィールドの順序を変更し、イメージも表示してみます。On the details screen, we want to change the order of the fields and display the image also. この画面にはさまざまなコントロールがあるため、プロセスは参照画面とは少し異なります。There are different controls on this screen, so the process is a little different from the browse screen. フィールドをクリックまたはタップして、右側のウィンドウで、[Title] (タイトル) フィールドを一番上にドラッグします。Click or tap a field, then in the right-hand pane, drag the Title field to the top. 次に、[Image] (イメージ) フィールドをクリックまたはタップして、表示します。Then click or tap the Image field to display it.

詳細画面のフィールドを変更する

編集/作成画面Edit/create screen

最後に、エントリを編集したり作成したりする画面で、テキストを入力しやすいようにフィールドを変更してみます。Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. [概要] フィールドのドロップダウン リストをクリックまたはタップして、複数行テキストの編集コントロールをクリックまたはタップします。Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

編集画面のフィールドを変更する

いくつかの基本的な手順で、生成されたアプリの使い勝手と外観をどれほど改善できるかが分かりました。You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. このトピックでは、PowerApps Studio の UI に重点を置きました。PowerApps Studio の UI にはアプリをカスタマイズするための多くのオプションがあることがわかりました。In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. 次のトピックでは、数式について説明します。数式は、アプリを動作させるうえで重要な役割を果たします。In the next topic, we'll get into formulas, which play an important role in driving app behavior.

アプリの数式の詳細Explore app formulas

PowerApps の主な利点の 1 つは従来のアプリケーション コードを記述する必要がないことです。開発者でなくてもアプリを作成できるということです。One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! とはいえ、アプリのロジックを表現して、アプリのナビゲーション、フィルター処理、並べ替えなどの機能を制御する方法は必要です。But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. そのために数式が取り入れられています。This is where formulas come in. Excel の数式を使用したことがあれば、PowerApps のアプローチは理解しやすいでしょう。If you have used Excel formulas, the approach that PowerApps takes should feel familiar. このトピックでは、テキストを書式設定する基本的な数式をいくつか示してから、PowerApps が生成されたアプリに含める数式を 3 つ説明します。In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. 数式が実行できる内容を体験しましょう。You will get a taste of what formulas can do. 時間をとって、生成されたアプリに含まれる他の数式をいくつか確認した後で、ご自分の数式を作成してみてください。Then you can spend some time looking at other formulas in the generated app and writing your own.

数式とプロパティの詳細Understanding formulas and properties

前のトピックで、[Price](価格) フィールドをブラウズ画面のギャラリーに含めましたが、通貨記号が表示されず、数字だけが表示されました。In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. ドル記号を追加し、品目の価格に応じてテキストの色を変更することにします (たとえば、$5 より高い場合は赤、それ以外は緑にします)。Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). 次の図に、考え方を示します。The following image shows the idea.

色と通貨のテキストの書式設定

通貨の書式設定から始めましょう。Let's start with the currency formatting. 既定では、PowerApps は各品目の Price (価格) の値だけを取得します。この動作は、価格を表示するラベルの Text プロパティとして設定されています。By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

Price (価格) の既定の書式設定

米国の通貨記号を追加するには、ラベル コントロールをクリックまたはタップして、数式バーで Text プロパティを次の数式に設定します。To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Price (価格) の通貨の書式設定

数式 Text(Price, "[$-en-US]$ ##.00" では、Text 関数を使用して、数値を書式設定する方法を指定しています。The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. 数式は Excel の数式のようですが、PowerApps の数式はスプレッドシート内のセルではなくコントロールおよびその他のアプリの要素を参照します。The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. コントロールをクリックまたはタップして、プロパティのドロップダウン リストをクリックまたはタップすると、コントロールに関連するプロパティのリストが表示されます。If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. たとえば、これはラベルのプロパティのリストの一部です。For example, here is a partial list of the properties for a label. さまざまなコントロールに関連するプロパティもあれば、特定のコントロールにしか関連しないコントロールもあります。Some properties are relevant across a broad range of controls and others only for a specific control.

プロパティの設定

価格に基づいて条件付きで色を書式設定するには、ラベルの Color プロパティに次のような数式を使用します。If(Price > 5, Color.Red, Color.Green)To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

Price (価格) の色の書式設定

生成されたアプリに含まれる数式Formulas included in the generated app

プロパティと組み合わせて数式を使用する方法を理解したところで、生成されたアプリで PowerApps が使用する数式の例を 3 つ紹介します。Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. 例はすべてブラウズ画面の数式で、OnSelect プロパティで動作します。OnSelect プロパティは、ユーザーがアプリのコントロールをクリックまたはタップしたときの動作を定義します。The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • 最初の数式は IconNewItem1 コントロール: 新しい項目アイコン に関連付けられています。The first formula is associated with the IconNewItem1 control: New item icon. このコントロールをクリックまたはタップして、ブラウズ画面から編集/作成画面に移動して項目を作成します。You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • 数式は NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None) です。The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • この数式は、新しい編集フォームをインスタンス化してから、新しい項目を作成できるように編集/作成画面に移動します。The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. ScreenTransition.None という値は、画面間の遷移 (フェードなど) がないことを意味します。A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • 2 番目の数式は IconSortUpDown1 コントロール: 並べ替えギャラリー アイコン に関連付けられています。The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. このコントロールをクリックまたはタップして、ブラウズ画面ギャラリーの項目リストを並べ替えます。You click or tap this control to sort the list of items in the browse screen gallery.

    • 数式は UpdateContext({SortDescending1: !SortDescending1}) です。The formula is UpdateContext({SortDescending1: !SortDescending1})
    • この数式は、UpdateContext を使用して SortDescending1 という変数を更新します。The formula uses UpdateContext to update a variable called SortDescending1. 変数の値によって、コントロールをクリックしたときの移動の方向が切り替わります。The value of the variable switches back and forth as you click the control. これにより、この画面のギャラリーに、項目をどう並べ替えるかが指示されます (詳細はビデオをご覧ください)。This tells the gallery on this screen how to sort the items (watch the video for more details).
  • 3 番目の数式は NextArrow1 コントロール: 詳細に移動矢印アイコン に関連付けられています。The third formula is associated with the NextArrow1 control: Go to details arrow icon. このコントロールをクリックまたはタップして、ブラウズ画面から詳細画面に移動します。You click or tap this control to go from the browse screen to the details screen.

    • 数式は Navigate(DetailScreen1, ScreenTransition.None) です。The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • この数式は、詳細画面に移動します。ここでも遷移はありません。The formula navigates to the details screen, again with no transition.

アプリには他にも多くの数式があります。コントロールをクリックして、設定どのような数式がさまざまなプロパティに設定されているか確認してみてください。There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

まとめWrapping it all up

ここまで、生成されたアプリおよび、アプリの機能を実現している画面、コントロール、プロパティ、数式の仕組みを概観しました。This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. ここまで学習を進めてきたら、生成されたアプリのしくみをよく理解できたはずです。If you've followed along, you should have a better understanding of how a generated app works. 今度は、この理解をご自分のアプリ作成に応用してください。Now you can take this understanding into creating your own apps.

次のセクションに進む前に、SharePoint を振り返って、アプリにリスト エクスペリエンスがどのように統合されたか確認しましょう。Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. ご覧のとおり、FlooringApp はリストのビューとして機能するようになりました。アプリは [Open] (開く) をクリックすると起動します。As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. これにより、使いやすくカスタマイズされたエクスペリエンスでリストを簡単に管理できるようになりました。This provides a simple way to manage your lists with a friendly customized experience.

Sharepoint リストのビューとしてのアプリ

これで SharePoint のアプリ セクションが終了しました。ここからは学習内容をお選びいただけます。Now that you've gone through the SharePoint app section, you have a choice about where to go next:

管理のセクションでは、アプリを共有しバージョン管理する方法を示し、アプリ、データ、およびその他のリソースのコンテナーとなる環境について説明します。The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. 管理のセクションには、ある時点ですべての方が目を通すことをお勧めしますが、Common Data Service のセクションにもアプリのカスタマイズの詳細など多くの情報があります。We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

おめでとうございます

You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

これまでに学習した内容

次のチュートリアル

Creating an app from the Common Data Service

共同作成者

  • Michael Blythe
  • olprod
  • Alisha-Acharya