キャンバスコンポーネントとは、再利用可能なコントロール（部品）を作ることができる優れもので、今までPowerAppsで各画面ごとに作成していたメニューやポップアップ、ヘッダー部分などをあらかじめ部品にすることで使いまわしができます。変更が必要な場合は直接各画面を修正するのではなく、コンポーネントさえ修正してしまえば各画面にも反映されるため、ただでさえアプリが素早く作れるPowerAppsが今まで以上のスピードと生産性でアプリが作れるのです。しかも、このコンポーネントはアプリ毎に作る必要がなく、ほかのアプリでも再利用できます。

コンポーネントを使うべき理由

例えばメニュー機能を作ろうとしていたとしましょう。今までなら1つ作成し、各画面にそれを貼り付けていたと思います。そしてもし変更が必要だった場合、例えばアイコンや関数、色を変更したかった場合、各画面で同じ変更を行ったり、関数を設定したりといろいろと面倒でした。

細々とした修正が発生し、生産性もよくないですよね。そこでコンポーネントの出番です！


コンポーネントとは？

コンポーネントはキャンバスアプリのための、再利用可能な部品たちです。アプリで再利用したいコントロール（部品）の組み合わせをあらかじめ設定しておくことができます。作ったコンポーネントはほかのアプリでも再利用することができます。コンポーネントはテンプレートみたいな考え方で動くので、コンポーネントさえ修正すれば、そのコンポーネントを利用しているすべての画面にも同じように反映されます。

例えばアプリのヘッダー（よくアプリで見かける、名前や時間、ロゴなどが入っている上の部分）を作りたかったとします。その色を変えたいときは各画面ではなく、コンポーネントを修正すれば、アプリの全画面に反映できます。

高度なカスタマイズにも使える

コンポーネントが使えるのはコントロールを再利用するときだけではありません。カスタムプロパティを利用することで、さらに高度なことが実現することもできます。.

コントロール（部品）には色や幅、高さといったプロパティがありますよね？コンポーネントでは、自分の欲しいプロパティを作ることができるのです。しかも、そのプロパティはあらゆるタイプを設定できます。テキスト型、数値型、レコード型などすべてです。カスタムプロパティの使い方は無制限です！

例えば、アプリ経験者の方なら誰もが欲しいと思われるのはが、動的に設定サイズに合わせてその部品も同じようにサイズを合わせてくれる機能かと思います。こういう設定もコンポーネントで設定ができるのです。

コンポーネントを使い始めるには

コンポーネント機能は現在（2019年5月19日時点では）まだプレビュー機能となっているため、最初からアプリの作成画面には表示されておらず、有効化させる必要があります。

  • PowerApps Studioを開きます。
  • アプリの設定 > 詳細設定
  • 「コンポーネント」をONにします。.
  • スクリーンの画面にコンポーネントが追加されていることが確認できます。

コンポーネントをインポート・エクスポートする

新しい機能を学ぶにはサンプルを見るのが効果的ですよね。以下の動画ではどのように各画面の上部分に表示させるヘッダーが作れるかについてお話しています。

動画でご紹介したヘッダーコンポーネントはそのまま皆さんの環境でも利用できるようにダウンロード可能にしましたので、以下の手順でインポートしてください。

  1. Header Component. からヘッダーコンポーネントをダウンロードします。
  2. キャンバスアプリを一から作成します。
  3. 挿入タブ > コンポーネント > コンポーネントのインポート > ダウンロードしたファイルを選択します。


  4. インポートしたコンポーネントがメニューから追加できるようになります。
  5. 挿入タブ > コンポーネント > Header をクリックすることでアプリに挿入できます。.

コンポーネントでまだできないこと

このコンポーネント機能はまだプレビューということもあり、何でもできるわけではありません。そのため、いくつか制約があります。詳細はこちらのドキュメントから確認できますが、以下にまとめてあります。

  • あくまでも同じアプリ内で共通化されているだけなので、他のアプリでコンポーネントを修正しても、そのコンポーネントはアプリをまたいで変更は反映されません。.
  • 画像：現在メディアファイルをコンポーネントに含められません。
  • コレクション：コンポーネント内でコレクションを利用することができません。
  • データソース：コンポーネントと一緒にデータソースに設定は保存されません。