Power Apps には「コンポーネント」という、自社内でいつも使う決まったパーツを管理する機能があります。これを使うことで自社アプリの見た目デザインの統一や分散開発が（ある程度）可能になります。
Power Apps のキャンバスアプリはだれか一人が開発していると、別の人が同じアプリを編集することができません。
なのでできるだけ機能や画面数の少ない “Single Issue” なアプリケーションを作ることをお勧めしていますが、とはいえ複数名でメンテしたいですし、共通パーツ（ダイアログボックスやメニューなど）は使いまわしたいです。そんなときに コンポーネントを作りましょう。
コンポーネントギャラリーから作成する
サンプルとして、アプリケーションヘッダー(タイトルとユーザーアイコンと戻るボタン)をコンポーネントで作ってみます。
アプリメニュー の [コンポーネント ライブラリ] から [＋ 新しいコンポーネント ライブラリ] を選択して、アプリの名前を設定して [作成] しましょう。
見慣れた Canvas Studio が表示されましたが、ツリービューの [コンポーネント] が選択された状態で正方形のキャンバスが表示されます。
まずはキャンバスのサイズを設定します。
コンポーネントは必ず親アプリ（ホストアプリ）が存在します。ホストアプリ側に配置するときにどんなサイズでどの位置に配置するのかはわからないので大きさも動的に設定したいものです。
ヘッダーアプリというわけなので、横幅はホストアプリの横幅と同じにします。コンポーネントキャンバスの幅を アプリの幅とします。高さ(Height)は適当に100とかにしましょう。
width = App.Width
コンポーネントのプロパティを設定
アプリケーションタイトルと、戻るボタンの表示/非表示のプロパティを設定します。[＋新しい カスタム プロパティ]をクリックして、２つの入力プロパティを追加します。
プロパティなどの名前は英数字で設定したほうが、後々ホストアプリで設定するときにIMEの入力切替をせずに済むので良いでしょう。大文字小文字を混ぜたほうが入力補完機能を使ったときに確認の手間が省けます。
テキストラベルの配置
ラベルのサイズはコンポーネントキャンバスと同じにします。これでホストアプリ側でサイズを変更したら動的に変更してくれます。
X = 0
Y = 0
Width = Component1.Width
Height = Component1.Height
テキストラベルの text プロパティに先ほど作成したコンポーネントのカスタムプロパティ Comp_AppTitle を設定します。
これでホストアプリから受け取ったテキスト情報が表示できるようになりました。
ほかに文字サイズや配置を中央にしたりと微調整をしておきましょう。
戻るボタンの配置
アイコンで適当な[戻る]ボタンを配置してプロパティを設定します。 Visible(表示)プロパティにホストアプリから受け取るブール値をセットします。
OnSelect = Back()
Visible = Component1.Comp_BackSwitch
ログインユーザーアイコンの配置
コンポーネントには関係ないですが、アプリヘッダーといえばアイコンということで配置
image プロパティ には User().Image を設定すると、AzureADに登録されたアイコンを設定します。
サイズは コンポーネント本体の高さに収まるように正方形で 100 x 100 とします。
コンポーネントの高さを100に設定したので、高さを合わせます。
ヘッダーの右側に配置したいので X 座標 ＝ コンポーネントの幅 – 100 ぐらいに設定します。
カッコよく見せるためにパディングを上下左右ともに 5 ぐらいに設定してみました
※アイコンを丸くしたい場合は パディングを全部０に戻して、詳細設定の Radius～ の各プロパティを 50 ぐらいに設定するとそれっぽくなります。
保存
忘れちゃダメ ぜったい。
作成したコンポーネントをキャンバスアプリへ追加
動作テストをしましょう。
ツリービューを [画面] に戻して、 [挿入] ＞ [カスタム] ＞ [コンポーネント名] をクリックすると、先ほど作ったコンポーネントを追加することができます。
ここで注目すべきは右下のプロパティです。既存のコントロールのようにプロパティに先ほど自作したプロパティが表示されています。このプロパティを変更することで動作を変更することができました。
別の画面を追加して動作を確認してみる
新しい画面を追加して、コンポーネントを追加します。
戻るボタンは表示したまま。 タイトルプロパティは最初の画面のコンポーネントのテキストを参照すると、最初の画面を変更したら同時に変更されるので便利です。
Comp_AppTitle = Component1_1.Comp_AppTitle
最初の画面にはボタンを配置して画面遷移を設定しましょう
これで動作確認できるはずです。プレビューして、ボタンを押して次の画面に遷移して、戻るボタンで画面が戻ってくることを確認できます。
最後に保存/公開を再確認して、Canvas Studio は閉じても構いません（
コンポーネントとして、共有利用する
アプリメニューの [コンポーネント ライブラリ] に先ほど作成したアプリが存在することを確認します。
コンポーネントそのものを編集する場合はここから編集します。
ここに存在するコンポーネントは同一環境であればどんなアプリでも利用することができます。試しにタブレット用キャンバスアプリで確認するために適当にタブレットアプリを作成します。
左側の挿入メニューの一番下にある [コンポーネントをさらに取得] から、ライブラリに登録済みの先ほど追加したコンポーネントを、このアプリにインポートすることができます。
アプリ内にインポートされると挿入メニューに表示されたので、キャンバスに追加しましょう。
正しく追加され、幅もキャンバスサイズにフィットし、戻るボタンやユーザーアイコンも期待通り追加されています。
もちろん、プロパティもテストした時同様に利用できます♪
コンポーネント ＝ アプリの部品を独自開発
コンポーネントは Power Apps の生産性を高めることができます。
- アプリの機能を外部へ出すことで複数人開発が可能
- 部品の使いまわし
- zipファイルにエクスポートもできるので、他環境でも利用可能
アプリケーション開発会社は、汎用的なコンポーネントを開発すれば、自社の開発スピードをもっと早めることができるでしょうし、コンポーネントを販売することだって可能でしょう。夢が広がりますね。