こんにちは。アーティサン株式会社の伊礼（いれい）です。
伊礼 圭吾いれい けいご
得意領域
Power Platformの設計・開発・コンサルティングを担当しています。既存システムからの移行検証や、Power Platformの特性に合わせた再設計はお任せください！
保有資格
皆さん、Power Appsでアプリを作っているときに実現が難しそうな機能があった場合はどうされていますか？
多くの場合は、
必須の要件でない場合は機能の実装を断念する
どうしても必須の要件の場合はPower Appsでの構築を断念する
といった選択肢になると思います。
ですがPower Appsには、標準で提供されているコントロール以外にも
PowerApps Component Framework(以下PCF)
といったフレームワークを活用することで、自作のカスタムコンポーネントを構築しアプリに使用することができるんです。
PCFでは主にJavascriptというプログラミング言語でのコーディングが必要となってしまい、ローコードという枠からは出てしまうのですが、
その分実現できる機能の幅をかなり広げることが可能になります。
そこで今回は、PCFによるカスタムコンポーネントの構築について解説してみたいと思います。
環境構築編とカスタムコンポーネント構築編の2回に分けて解説させていただきますので、どうぞよろしくお願いいたします。
弊社はPower Platform（Power Apps・Power Automate）に関するアプリ開発や、
皆様が内製化を行う際の支援サービスを提供しておりますので、
Power Platformに関する内容でお悩みがある場合は、以下からぜひお問い合わせください。
完成イメージ
今回は以下のような、渡された文字列が横幅を超える場合に自動でスクロールされるラベルコントロールを構築していきたいと思います！
余談ですが、画面のベースは前回の記事で解説したファイルサイズ取得アプリの画面をベースにしています。
ご興味のある方は是非コチラも併せてお読みいただければと思います。
環境構築
PCFを利用してカスタムコンポーネントを構築するためには、まず最初に開発環境を構築してあげる必要があります。
ローコードをメインに開発しているとあまり聞き馴染みのない工程ですが、今回の内容であればそこまで難しい手順ではないので怖がらずに行きましょう！
今回私はWindows11でVisual Studio Code(以下、VScode)というコーディングエディターを使用する想定で進めます。
LinuxやMac OSなどの場合はまた手順が変わってくる場合もございますのでご了承いただきますようお願いいたします。
1. 必要なツールのインストール
まず、PCF開発に必要なツールをインストールします。
1.1 Visual Studio Codeのインストール
Visual Studio Code(以下VScode) はMicrosoftが開発しているコーディングエディターです。
軽量で拡張機能によるカスタマイズ性も高く、今回のPCF開発との親和性も高いため利用します。
-
Visual Studio Code公式サイトにアクセスし、インストーラーをダウンロードしてインストールします。
-
必要に応じて以下のような拡張機能をインストールしておくと、構築を快適に進めることができて便利です。
ESLint: JavaScript/TypeScriptのコード品質を向上させるツール
Prettier: コードフォーマットツール
Power Platform Tools: Power Platformに関連する作業を支援する拡張機能
1.2 Node.js のインストール
PCFの開発ではJavaScriptという言語でコーディングを行う必要があるのですが、その際にはNode.jsという「JavaScriptの実行環境」が必要になります。
さっそくインストールしていきましょう。
-
Node.js公式サイトにアクセスします。
LTS（Long Term Support）バージョンをダウンロードしてインストールします。
インストール後、以下のコマンドを実行し、バージョンを確認します。
node -v
npm -v
1.3 Power Platform CLI のインストール
続いて、Microsoftから提供されているPowerApps用のCLIツールであるPower Platform CLIをインストールします。
公式ドキュメント：Microsoft Power Platform CLI – Power Platform | Microsoft Learn
同じくPowerShellからの実行です。
以下のコマンドでCLIをインストールします。
npm install -g pac
インストール後、バージョンを確認します。
pac --version
無事インストールが完了していれば、2行目にバージョン情報が表示されます。
2. PCFプロジェクトの作成
環境が整ったら、続いてPCFプロジェクトを作成します。
2.1 プロジェクトフォルダの準備
PC内に作業用のフォルダを作成し、ターミナルでそのフォルダに移動します。
mkdir MyPCFComponent
cd MyPCFComponent
2.2 PCFプロジェクトの生成
以下のコマンドを実行して新しいPCFプロジェクトを作成します。
pac pcf init --namespace MyNamespace --name MyPCFComponent --template field
namespace: 組織やプロジェクト名を反映した名前空間（例: MyNamespace）
name: コンポーネント名
-
template: プロジェクトテンプレートの種類
field: 1つの列を受け取って動作するコンポーネント
dataset: 複数行のデータを受け取って動作するコンポーネント
コマンドが成功すると、指定した名前のフォルダにプロジェクトが作成されます。
2.3 必要なパッケージのインストール
作成したプロジェクトフォルダに移動し、必要なパッケージをインストールします。
cd MyPCFComponent
npm install
3. プロジェクトのビルドと動作確認
それではここまでの環境構築が問題なく進めているか、プロジェクトをビルドして確かめてみましょう。
3.1 ビルド
以下のコマンドを実行してプロジェクトをビルドします。
npm run build
3.2 開発サーバーの起動
開発中のコンポーネントをブラウザで確認するため、開発サーバーを起動します。
このサーバーでは端末内にあるコンポーネントの動作をブラウザ上で確認することができます。
npm start
上記のコマンドを実行すると…
このように、ブラウザでテスト環境が立ち上がり、コンポーネントの見た目やプロパティへの入力値による変化などを確認することが可能です。
この画面まで確認できれば、PCFを利用したカスタムコンポーネント開発の環境構築は完了です！
おわり
今回はPCFを構築するための前準備として、環境構築についての解説でした。
環境構築と聞くとどうしても難しい、
特に初心者は環境構築の段階でつまづいてしまって、コードも書く前に挫折してしまうイメージを持たれる方も多いと思います。
ですが今回のPCFでの開発については、Windows上で実行可能かつVisual Studio Codeなども利用したので思いのほか難しいことはなく、気軽に始めることができる印象です。
さて、それでは次回より、いよいよカスタムコンポーネントの構築に入っていきます。
近日公開となりますので、ぜひそちらもお読みいただければと思います。
それでは！
【参考】PCFギャラリーについて
参考情報としてPCFギャラリーについても紹介させていただきます。
PCFギャラリーとは、世界中の有志によるカスタムコンポーネントが公開されているプラットフォームです。
今日までに様々なユーザーから、標準のPower Appsでは実現できないような様々な機能を持ったコントロールがアップされています。
まずはPCFギャラリー内を探ってみて、あなたが実現したい機能は既に開発されていないか確認して、要件に沿うようであれば使ってみるのも良いでしょう！