キャンバスアプリ用のコンポーネントを作成するCreate a component for canvas apps

重要

この機能は引き続き試験段階であり、既定では無効になっています。This feature is still experimental and disabled by default. 詳細については、「試験機能とプレビュー機能」を参照してください。For more information, see Experimental and preview features.

コンポーネントは、アプリの開発者がアプリまたはアプリで使用するカスタムコントロールを作成できるように、キャンバスアプリの再利用可能な構成要素です。Components are reusable building blocks for canvas apps so that app makers can create custom controls to use in an app or across apps. カスタムプロパティなどの高度な機能により、コンポーネントの複雑な機能が有効になります。Advanced features, such as custom properties, enable complex capabilities in components. この記事では、コンポーネントの概念といくつかの例について説明します。This article introduces component concepts and some examples.

コンポーネントは、類似したコントロールパターンを持つ大規模なアプリを構築する場合に役立ちます。Components are useful in building larger apps that have similar control patterns. コンポーネント定義を更新すると、アプリ内のすべてのインスタンスに変更が反映されます。If you update a component definition, all instances in the app reflect your changes. また、コントロールをコピーして貼り付けるのではなく、オーバーヘッドが重複するため、1つ以上のコンポーネントを使用してパフォーマンスを向上させることもできます。You can also improve performance by using one or more components because you don't copy and paste controls, which duplicates overhead. また、コンポーネントは共同開発を促進し、組織内のルックアンドフィールを標準化します。Components also facilitates collaborative development and standardizes look-and-feel in an organization.

前提条件Prerequisite

[アプリの設定] 画面を開き、 [詳細設定] を選択して機能を有効にします。さらに、強化されたアプリのレンダリングも有効にします。Open the App Settings screen, select Advanced settings, and enable the feature, as well as ensuring that Improved app rendering is also enabled.

コンポーネントキャンバスComponent canvas

左側のナビゲーションバーでは、 [挿入] タブの [コンポーネント] メニューまたは次の図に示すように、コンポーネントを作成できます。You can create a component from the Components menu on the Insert tab or, as the next graphic shows, in the left navigation bar. この一覧には、アプリで定義されたコンポーネントが、作成時刻順に並べ替えて表示されます。This list shows components that are defined in the app, sorted by creation time.

コンポーネントリストビュー

どの方法を使用するかにかかわらず、空のキャンバスが表示され、コンポーネント定義の一部としてコントロールを追加できます。Regardless of which approach you take, an empty canvas appears, where you can add controls as part of the component definition. キャンバスでコンポーネントを編集する場合は、他のアプリ画面や他のアプリで同じコンポーネントのインスタンスを更新します。If you edit a component in the canvas, you'll update instances of the same component in other app screens and other apps.

画面を選択した場合は、左側のナビゲーションバーまたは [挿入] タブの [コンポーネント] メニューで、既存のコンポーネントの一覧からコンポーネントを選択できます。コンポーネントを選択すると、コントロールを挿入するのと同様に、コンポーネントのインスタンスが画面に挿入されます。If you select a screen, you can select a component from the list of existing components in the left navigation bar or the Components menu on the Insert tab. When you select a component, you insert an instance of that component onto the screen, just as you insert a control.

適用範囲Scope

コンポーネントは、インターフェイスとしてプロパティを持つカプセル化されたブラックボックスと考えることができます。Think of a component as an encapsulated black box with properties as the interface. コンポーネントの外部からコンポーネント内のコントロールにアクセスすることはできません。コンポーネント内からコンポーネントの外部にあるものを参照することはできません。You can't access controls in the component from outside of the component, and you can't refer to anything outside of the component from inside the component. 試行すると、エラーが表示されます。If you try, an error appears. スコープの制限により、コンポーネントのデータコントラクトをシンプルかつまとまったものに保ち、特にアプリ間でシームレスなコンポーネント定義の更新を可能にします。Scope restrictions keep the data contract of a component simple and cohesive, and it helps enable seamless component-definition updates, especially across apps. コンポーネントのデータコントラクトを更新するには、1つまたは複数のカスタムプロパティを作成します。You can update the data contract of the component by creating one or more custom properties.

環境Variables

コンポーネントはUpdatecontext関数をサポートしていませんが、 Set関数を使用して、コンポーネントの変数を作成および更新できます。Components don't support the UpdateContext function, but you can create and update variables in a component by using the Set function. これらの変数のスコープはコンポーネントに限定されますが、カスタム出力プロパティを利用してコンポーネントの外部からアクセスすることができます。The scope of these variables is limited to the component, but you can access them from outside the component by leveraging custom output properties.

インポートとエクスポートImport and export

1つ以上のコンポーネントを1つのアプリから別のアプリにインポートするには、コンポーネントのドロップダウンリストで [コンポーネントのインポート] を選択します。To import one or more components from one app into another, select Import components in the drop-down list of components. ダイアログボックスには、編集権限のあるコンポーネントが含まれているすべてのアプリが一覧表示されます。A dialog box lists all apps that contain components that you have permission to edit. アプリを選択し、 [インポート] を選択して、そのアプリ内のすべてのコンポーネントの最新の公開バージョンをインポートします。Select an app, and then select Import to import the most recent published version of all of the components in that app. 少なくとも1つのコンポーネントをインポートしたら、必要のないコピーを編集して削除することができます。After you import at least one component, you can edit your copy and delete any that you don’t need.

コンポーネントのインポート ダイアログボックスImport components dialog box

コンポーネントをエクスポートする場合は、別のアプリにインポートできるローカルファイルを作成します。If you export a component, you create a local file that you can import to a different app. 同じコンポーネントの変更バージョンがアプリに含まれている場合は、変更されたバージョンを置き換えるか、インポートをキャンセルするかを決定するように求められます。If the app contains a modified version of the same component, you're prompted to decide whether to replace the modified version or cancel the import.

カスタムプロパティCustom properties

1つ以上のカスタムプロパティを作成すると、コンポーネントは入力値を受け取り、データを出力できます。A component can receive input values and emit data if you create one or more custom properties. これらのシナリオは高度なものであり、数式やバインドコントラクトについて理解する必要があります。These scenarios are advanced and require you to understand formulas and binding contracts.

入力プロパティは、コンポーネントがコンポーネントで使用するデータを受け取る方法を示します。An input property is how a component receives data to be used in the component. コンポーネントのインスタンスが選択されている場合、右側のペインの [プロパティ] タブに入力プロパティが表示されます。Input properties appear in the Properties tab of the right-hand pane if an instance of the component is selected. 他のコントロールで標準プロパティを構成する場合と同様に、式または数式を使用して入力プロパティを構成できます。You can configure input properties with expressions or formulas, just as you configure standard properties in other controls. その他のコントロールには、テキスト入力コントロールの既定のプロパティなどの入力プロパティがあります。Other controls have input properties, such as the Default property of a Text input control.

出力プロパティは、データまたはコンポーネントの状態を出力できます。Output properties can emit data or component state. たとえば、ギャラリーコントロールで選択されたプロパティは、出力プロパティです。For example, the Selected property on a Gallery control is an output property. 出力プロパティを作成するときに、コンポーネントの状態を参照できる他のコントロールを指定できます。When you create an output property, you can determine what other controls can refer to the component state.

このチュートリアルでは、これらの概念について詳しく説明します。This walkthrough further explains these concepts.

サンプルコンポーネントの作成Create an example component

この例では、このグラフィックに似たメニューコンポーネントを作成します。ここでは、テキストを変更し、複数の画面、アプリ、またはその両方で使用できます。In this example, you'll create a menu component that resembles this graphic and in which you can change the text and use in multiple screens, apps, or both:

最終ギャラリー

  1. Power Apps Studio で、空のアプリを作成します。In Power Apps Studio, create a blank app.

  2. 左側のナビゲーションバーで、コンポーネントの一覧を開き、 [新しいコンポーネント] を選択します。In the left navigation bar, open the list of components, and then select New component.

    コンポーネントの一覧

  3. 新しいコンポーネントの上にカーソルを合わせて、省略記号ボタン (...) を選択し、名前の変更 を選択して、 menucomponentを入力するか貼り付けます。While hovering over the new component, select the ellipsis (...), select Rename, and then type or paste MenuComponent.

  4. 右側のウィンドウで、コンポーネントの 幅] を [150] 、[高さ を250に設定し、 [新しいカスタムプロパティ] を選択します。In the right-hand pane, set the component's width to 150 and its height to 250, and then select New custom property.

    新しいプロパティ

  5. [表示名][プロパティ名]、 [説明] の各ボックスに、項目を入力するか貼り付けます。In the Display name, Property name, and Description boxes, type or paste Items.

    表示名、プロパティ名、説明ボックス

    プロパティ名を指定する場合は、数式を記述するときにこの名前でコンポーネントを参照するので、スペースを含めないでください (たとえば、 ComponentName)。When you specify a property name, don't include spaces because you'll refer to the component by this name when you write a formula (for example, ComponentName.PropertyName).

    コンポーネントを選択すると、右側のウィンドウの [プロパティ] タブに表示名が表示されます。The display name appears on the Properties tab of the right-hand pane if you select the component. わかりやすい表示名は、このプロパティの目的を理解するのに役立ちます。A descriptive display name helps you and other makers understand the purpose of this property. [プロパティ] タブでこのプロパティの表示名をポイントすると、ツールヒントに説明が表示されます。The Description appears in a tooltip if you hover over the display name of this property in the Properties tab.

  6. [データ型] ボックスの一覧で [テーブル] を選択し、 [作成] を選択します。In the Data type list, select Table, and then select Create.

    プロパティのデータ型

    Itemsプロパティは、指定したデータ型に基づいて既定値に設定されますが、必要に応じて値を設定することもできます。The Items property is set to a default value based on the data type that you specified, but you can set it to a value that suits your needs. テーブルまたはレコードのデータ型を指定した場合は、コンポーネントに入力するデータスキーマと一致するようにItemsプロパティの値を変更することができます。If you specified a data type of Table or Record, you may want to change the value of the Items property to match the data schema that you want to input to the component. この場合は、文字列のリストに変更します。In this case, you'll change it to a list of strings.

    右側のペインの [プロパティ] タブでプロパティの名前を選択した場合は、数式バーでプロパティの値を設定できます。You can set the property's value in the formula bar if you select the name of the property on the Properties tab of the right-hand pane.

    [プロパティ] タブのカスタム入力プロパティ

    次の図に示すように、右側のウィンドウの [詳細設定] タブでプロパティの値を編集することもできます。As the next graphic shows, you can also edit the property's value on the Advanced tab of the right-hand pane.

  7. コンポーネントのItemsプロパティを次の数式に設定します。Set the component's Items property to this formula:

    Table({Item:"SampleText"})
    

    数式

  8. コンポーネントで、空の垂直ギャラリーコントロールを挿入します。In the component, insert a blank vertical Gallery control.

  9. プロパティリストにItemsプロパティが表示されていることを確認し (既定では)、そのプロパティの値を次の式に設定します。Make sure that the property list shows the Items property (as it does by default), and then set the value of that property to this expression:

    MenuComponent.Items
    

    このようにして、ギャラリーコントロールのitemsプロパティは、コンポーネントのitems input プロパティを読み取って依存します。This way, the Items property of the Gallery control reads and depends on the Items input property of the component.

  10. ギャラリーコントロールの [borderthickness] プロパティを1に設定し、そのtemplatesizeプロパティを50に設定します。Set the Gallery control's BorderThickness property to 1 and its TemplateSize property to 50.

  11. ギャラリーコントロールのテンプレートで、ラベルコントロールを追加します。In the template of the Gallery control, add a Label control.

    ラベルの追加とギャラリーの境界の設定

次に、コンポーネントを画面に追加し、表示するコンポーネントの文字列のテーブルを指定します。Next, you'll add the component to a screen and specify a table of strings for the component to show.

  1. 左側のナビゲーションバーで、画面の一覧を選択し、既定の画面を選択します。In the left navigation bar, select the list of screens, and then select the default screen.

    既定の画面

  2. [挿入] タブで、 [コンポーネント] メニューを開き、 [menucomponent] を選択します。On the Insert tab, open the Components menu, and then select MenuComponent.

    Insert

    新しいコンポーネントには、既定でMenuComponent_1という名前が付けられます。The new component is named MenuComponent_1 by default.

  3. MenuComponent_1Itemsプロパティを次の数式に設定します。Set the Items property of MenuComponent_1 to this formula:

    Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
    

    このインスタンスはこのグラフィックに似ていますが、各インスタンスのテキストおよびその他のプロパティをカスタマイズできます。This instance resembles this graphic, but you can customize the text and other properties of each instance.

    最終ギャラリー

ここまでで、コンポーネントを作成してアプリに追加しました。So far, you've created a component and added it to an app. 次に、ユーザーがメニューで選択した項目を反映する出力プロパティを作成します。Next, you'll create an output property that reflects the item that the user selects in the menu.

  1. コンポーネントの一覧を開き、 [Menucomponent] を選択します。Open the list of components, and then select MenuComponent.

  2. 右側のウィンドウで、 [プロパティ] タブを選択し、 [新しいカスタムプロパティ] を選択します。In the right-hand pane, select the Properties tab, and then select New custom property.

  3. [表示名][プロパティ名]、 [説明] の各ボックスに、「 Selected」と入力するか貼り付けます。In the Display name, Property name, and Description boxes, type or paste Selected.

  4. [プロパティの種類][出力] を選択し、 [作成] を選択します。Under Property type, select Output, and then select Create.

  5. [詳細設定] タブで、選択したプロパティの値を次の式に設定します。必要に応じて、ギャラリー名の数字を調整します。On the Advanced tab, set the value of the Selected property to this expression, adjusting the numeral in the gallery name if necessary:

    Gallery1.Selected.Item
    

    [詳細設定] ウィンドウ

  6. アプリの既定の画面で、ラベルを追加し、 Textプロパティを次の式に設定します。必要に応じて、コンポーネント名の数字を調整します。On the default screen of the app, add a label, and set its Text property to this expression, adjusting the numeral in the component name if necessary:

    MenuComponent_1.Selected
    

    MenuComponent_1は、コンポーネント定義の名前ではなく、インスタンスの既定の名前であることに注意してください。Note that MenuComponent_1 is the default name of an instance, not the name of the component definition. 任意のインスタンスの名前を変更できます。You can rename any instance.

  7. Alt キーを押しながら、メニューの各項目を選択します。While holding down the Alt key, select each item in the menu.

    ラベルコントロールには、最近選択したメニュー項目が反映されます。The Label control reflects the menu item that you selected most recently.

既知の制限Known limitations

  • このドキュメントの作成時点では、データソースはコンポーネントと共に保存されないため、フォームとデータテーブルは無効になります。As of this writing, data sources aren't saved with components, so forms and data tables are disabled.
  • Power Apps はコンポーネントのコレクションをサポートしていません。Power Apps doesn't support collections in components.
  • コンポーネントをギャラリー、フォーム、またはデータカードに挿入することはできません。You can't insert a component into a gallery, a form, or a data card.
  • コンポーネントのマスターインスタンスはローカルマスターで、アプリにスコープが設定されています。A master instance of a component is a local master and scoped to the app. マスターインスタンスを変更すると、アプリ内のコンポーネントのコピーだけが変更を反映します。If you change a master instance, only copies of the component within the app will reflect the change. コンポーネントライブラリを再度インポートしない限り、他のアプリのコピーは同じままです。Copies in other apps will remain the same unless you import the component library again. これらのアプリのすべてのマスターインスタンスが自動的に検出され、更新されます。All master instances in those apps will be automatically detected and updated.
  • コンポーネントをインポートするときに、メディアファイルをパッケージ化することはできません。You can't package media files when you import a component.