PowerApps でスクロール画面を追加するAdd a scrolling screen in PowerApps

スクロールするとさまざまな項目が表示される画面を作成します。Create a screen that users can scroll to show different items. たとえば、縦棒グラフや折れ線グラフにデータを表示するアプリを作成するとします。For example, you might want to create an app that displays data in a column chart and line chart. スクロール画面を追加すると、スクロールしたときに表示されるように複数のコントロールを追加できます。By adding a scrolling screen, you can add multiple controls, which users can display if they scroll.

1 つのセクションに複数のコントロールを追加すると、それがスマートフォン アプリであるか、タブレット アプリであるかに関係なく、そのセクション内でコントロールの相対位置が維持されます。When you add multiple controls in a section, the controls maintain their relative positions within that section, regardless if it's a phone app or a tablet app. 画面のサイズと方向によりセクションの配置が決まることがあります。Note that the screen size and orientation may determine how the sections are arranged.

前提条件Prerequisites

スクロール画面を作成するCreate a scrolling screen

  1. [ホーム] タブで、[新しい画面] をクリックまたはタップします。On the Home tab, click or tap New screen:

    アプリに画面を追加するオプション

  2. [ホーム] タブで [レイアウト] をクリックまたはタップし、無限スクロールのキャンバスを追加するオプションをクリックまたはタップします。On the Home tab, click or tap Layouts, and then click or tap the option to add an infinite scrolling canvas:

    無限スクロールのキャンバスを追加するオプション

    キャンバスが追加されます。The canvas is added:

    無限スクロールのキャンバスが追加された画面 (既定)

要素を追加するAdd elements

それでは、キャンバスにコントロールをいくつか追加し、スクロール画面の動作を確認しましょう。Now, let's add some controls to the canvas to see how the scrolling screen works.

  1. 追加したキャンバスで、[[挿入] タブから項目を追加] をクリックまたはタップします。In the canvas you added, click or tap Add an item from the Insert tab.

  2. [挿入] タブの [グラフ] をクリックまたはタップし、[縦棒グラフ] をクリックまたはタップします。On the Insert tab, click or tap Charts, and then click or tap Column Chart.

    縦棒グラフを追加するオプション

    画面の最初のカードに縦棒グラフが表示されます。A column chart appears in the first card on the screen:

    既定の縦棒グラフ

  3. [挿入] タブの [テキスト] をクリックまたはタップし、[ペン入力] をクリックまたはタップします。On the Insert tab, click or tap Text, and then click or tap Pen input:

    ペン コントロールを追加するオプション

  4. グラフの下にペン コントロールを移動し、ペン コントロールのサイズを変更してカードの下部を対象として含めます。Move the pen control below the chart, and resize the pen control to cover the bottom of the card:

    ペン コントロールを移動し、サイズを変更する

セクションを追加するAdd a section

それでは、別のコントロールで別のカードを追加してみましょう。Now, let's add another card with another control.

  1. 画面の下部の近くにある [セクションの追加] をクリックまたはタップします。Near the bottom of the screen, click or tap Add section:

    セクションを追加するオプション

    新しいカードが画面に追加されます。A new card is added to the screen:

    既定のセクションの下の新しいカード

  2. カードが選択されている状態のまま、[挿入] タブに移動し、[グラフ] をクリックまたはタップし、[折れ線グラフ] をクリックまたはタップします。With the card still selected, go to the Insert tab, click or tap Charts, and then click or tap Line chart.

    新しいグラフが大きすぎて他のコントロールがある画面に表示されません。The new chart is too big to appear on the screen with the other controls:

    新しいカードの下部に追加された折れ線グラフ

  3. F5 キーを押して (または右上隅の再生アイコンをクリックまたはタップして) プレビュー モードを開始します。Open Preview mode by pressing F5 (or by clicking or tapping the play icon near the upper-right corner).

    プレビュー モードを開始

  4. 下にスクロールし、新しい折れ線グラフを表示します。Scroll down to display the new line chart.

    プレビューに折れ線グラフが表示されます