---
title: Power Apps で利用できるオリジナルのPCFコントロールのソリューションを出力する
url: "https://www.geekfujiwara.com/tech/powerplatform/5509/"
author: ギークフジワラ
published: "2024-10-29T07:02:46+00:00"
updated: "2024-10-31T22:47:53+00:00"
categories: [Power Platform]
tags: [Component Framework, PCF, Power Apps, TypeScript, XML]
description: "Power Apps にはローコード開発だけでなく、オリジナルのコントロールをプロ開発の言語を利用して開発することができます。 その仕組みとしてPower Apps Component Framework (PCF) が提供されています。今…"
---

# Power Apps で利用できるオリジナルのPCFコントロールのソリューションを出力する

Power Apps にはローコード開発だけでなく、オリジナルのコントロールをプロ開発の言語を利用して開発することができます。

その仕組みとしてPower Apps Component Framework (PCF) が提供されています。今回はその方法について解説します。

## 公式ドキュメント

以下のような公式ドキュメントが提供されています。

| カテゴリ | リンク |
| --- | --- |
| 概要 | [Microsoft Dataverse の Power Apps component ](https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/overview)  <br>[framework の概要 - Power Apps \\| Microsoft Learn](https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/overview) |
| ガイド | [Microsoft Dataverse の Power Apps Component ](https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/implementing-controls-using-typescript?tabs=before)  <br>[Framework を使用して最初のコンポーネントを作成する - Power Apps \\| Microsoft Learn](https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/implementing-controls-using-typescript?tabs=before)  <br>  <br>[モデル駆動型アプリの列またはテーブルに](https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/add-custom-controls-to-a-field-or-entity)  <br>[コードコンポーネントを追加する - Power Apps \\| Microsoft Learn](https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/add-custom-controls-to-a-field-or-entity) |

## コミュニティで開発されたコントロールをすぐに利用する

PCFを使って作成された多くのコンポーネントはコミュニティで公開されています。

これにより、自分で開発しなくてもダウンロードしてソリューションをインポートすればすぐに使えるので、自前で開発を着手する前に、すでにコミュニティにコントロールが存在しているかどうか確認すると良いでしょう。

[PCF Gallery](https://pcf.gallery%20)

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-26-1024x362.png)

## 前提条件

PCFという手法はローコード開発ではなく、プロ開発でのPower Apps の拡張です。以下のような知識が必要となります。

{.circle}
- フロントエンド開発の知識
- TypeScript での開発
- XML の内容を見て理解できる知識
- Power Platform CLI の知識

フュージョン開発という考え方があります。ご自身で開発しなくても、プロ開発ができる人にプロコードの部分 = PCFを開発してもらい、市民開発者は利用して、ユーザー側が使いやすい「画面側の開発をする」という役割分担もPower Apps は非常に親和性が高いです。

そういった、チームでの開発も考えてみましょう。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-27.png)

> - プロ開発ができる人にプロコードの部分 = PCFを開発する
> - 市民開発者は利用して、ユーザー側が使いやすいような画面側の開発をローコードで行う

[Power Platform でのフュージョン開発 - Power Platform \| Microsoft Learn](https://learn.microsoft.com/ja-jp/power-platform/developer/fusion-development)

[1: フュージョン開発アプローチとは? - Power Apps \| Microsoft Learn](https://learn.microsoft.com/ja-jp/power-apps/guidance/fusion-dev-ebook/01-what-is-fusion-dev-approach)

## 事前準備

各種環境の準備を整える必要があります。ローコードがメインの方は、いきなり面食らう方もいるかもしれません。

> [!TIP]
> プロ開発ではこういった開発前の準備が多く必要なのはよくあることです。今回が初めて、という方はぜひCopilot に教えてもらいながら試してみてください。

| 必要な項目 | 説明 |
| --- | --- |
| [Visual Studio Code](https://apps.microsoft.com/detail/xp9khm4bk9fz7q?hl=ja-jp&gl=JP) | Visual Studio Code はPower Platform CLI を実行するために必要 |
| [Power Platform Tools ](https://learn.microsoft.com/ja-jp/power-platform/developer/howto/install-vs-code-extension)  <br>[Visual Studio Code 拡張機能の](https://learn.microsoft.com/ja-jp/power-platform/developer/howto/install-vs-code-extension)  <br>[インストール](https://learn.microsoft.com/ja-jp/power-platform/developer/howto/install-vs-code-extension) | Visual Studio Code にて、 Visual Studio 拡張機能から Microsoft Power Platform CLI をインストールする  <br>![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-28-1024x416.png) |
| [Visual Studio 2022 IDE](https://visualstudio.microsoft.com/ja/vs/) | プロジェクトの確認やNuget パッケージ管理を行うために必要 |
| PCFを環境で有効にする | [Power Platform 管理センター](https://aka.ms/PPAC) &gt; 環境 &gt; \[環境名\] &gt; 設定 &gt; 機能  <br>以下の項目をオンにする  <br>![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-18.png) |
| [Visual Studio Tools ](https://visualstudio.microsoft.com/ja/downloads/) | Build Toolをダウンロードする。Build する際にDeveloper Command Prompt を利用するため必要  <br>![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-8-1024x192.png) |
| [Visual Studio用 ](https://dotnet.microsoft.com/ja-jp/download/visual-studio-sdks)  <br>[.NET SDK](https://dotnet.microsoft.com/ja-jp/download/visual-studio-sdks) | Build Tool を利用する場合は不要だが、必要に応じて.NET SDK も利用する  <br>![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-9-1024x354.png) |
| Nuget をパッケージ  <br>マネージャーに追加する | Visual Studio &gt; ツール &gt; Nuget パッケージマネージャーの設定にて、以下のソースが登録されていることを確認します。  <br>登録されていなかった場合登録します。  <br>`<strong>名前</strong>: nuget.org<br></br><strong>パッケージソース</strong>: https://api.nuget.org/v3/index.json `  <br>  <br>![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-11-1024x697.png) |

## 開発の全体像

このようなフォルダ階層を作成し、最終的にはPower Platform にZip形式で取り込むことができるソリューションを作成します。ソリューションは以下の図では一番右に位置しているStarRatingView です。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/cb58ef07da6f7102f2e6e5d7efd7a26e-1024x576.png)

### 作成手順概要

以下のようなステップで開発を行います。今回は以前作成した`Star Rating View` プロジェクトを参考にソリューションの出力方法を紹介します。

https://www.geekfujiwara.com/tech/powerplatform/5548/

:::raw
<!-- wp:sgb/timeline -->
<div class="wp-block-sgb-timeline"><div class="sgb-tl"><!-- wp:sgb/timeline-item {"itemTitle":"PCFプロジェクトの作成"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">PCFプロジェクトの作成</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>PCFを作成するフォルダを作成し、そこにプロジェクトを作成します。</p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item -->

<!-- wp:sgb/timeline-item {"itemTitle":"開発"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">開発</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>作りたいコントロールを開発します。</p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item -->

<!-- wp:sgb/timeline-item {"itemTitle":"CDS プロジェクトの作成"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">CDS プロジェクトの作成</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>Power Platform に取り込めるソリューションを出力するためにプロジェクトを作成します。</p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item -->

<!-- wp:sgb/timeline-item {"itemTitle":"ソリューションのインポート"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">ソリューションのインポート</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>Power Platform をソリューションを取り込み動作を確認します。</p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item --></div></div>
<!-- /wp:sgb/timeline -->
:::

## プロジェクト初期化

PCFのプロジェクトを作成し初期化します。この時、`GeekNamespace` と `StarRatingControl` の部分は開発するテーマに応じて設定します。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"pac pcf init \u002d\u002dnamespace GeekNamespace \u002d\u002dname StarRatingControl \u002d\u002dtemplate field \u002d\u002drun-npm-install","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>pac pcf init --namespace GeekNamespace --name StarRatingControl --template field --run-npm-install</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

## 開発

コードは別途開発する必要があります。今回利用している私が開発したサンプルコンポーネントは以下の記事でソースコードを確認できます。

https://www.geekfujiwara.com/tech/powerplatform/5548/

### 補足: リアルタイムにプレビューする方法

以下のコマンドを利用することでリアルタイムでプレビューを見ながら開発することができます。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"npm start watch","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>npm start watch</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

### ビルドの実行

データ型を更新します。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"npm run refreshTypes","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>npm run refreshTypes</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

ビルドを実行します。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"npm run build","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>npm run build</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

## **コンポーネントをCDSプロジェクトに登録**

PCFプロジェクト作成時に作成したプロジェクトのディレクトリに移動します。今回参考にしているコントロールのプロジェクトは`StarRatingControl` としており、こちらに移ります。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-25.png)

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"cd StarRatingControl","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>cd StarRatingControl</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

CDSプロジェクトを格納するディレクトリを作成します。今回は、`StarRatingControl` のディレクトリにて、ソリューションのフォルダ `StarRatingView`を作成し、そのディレクトリに移ります。

> [!TIP]
> Dataverse ソリューション名としたい名前をディレクトにつけるとわかりやすく便利です。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"mkdir StarRatingView\ncd .\u005cStarRatingControl\u005cStarRatingView","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>mkdir StarRatingView
cd .\StarRatingControl\StarRatingView</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

CDSプロジェクトを初期化します。これによりCDSプロジェクトが作成されます。

> [!TIP]
> 発行者は自分のものを利用するようにしてください。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"PowerShell","source":"pac solution init \u002d\u002dpublisher-name geekfujiwara \u002d\u002dpublisher-prefix geek","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>pac solution init --publisher-name geekfujiwara --publisher-prefix geek</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

作成されたCDSプロジェクトファイルは、以下のようにフォルダ名を自動的に継承されて作成されます。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-32.png)

開発したPCFソリューションをリファレンスに追加します。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>PowerShell</span><pre class="js-sng-highlight"><code>pac solution add-reference --path ..\..\</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

### ソリューションの出力

ソリューションのメタデータの設定を行うため、以下の階層に存在している`Solution.xml`を編集します。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-33.png)

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-34.png)

> [!TIP]
> 自動作成された状態から、以下の情報の更新がおすすめです。必要に応じてメタデータを更新してください。

それぞれの情報は以下のように使われますが、既定では作成したディレクトリ名が利用されます。

| XML での見え方 | ソリューションでの見え方 |
| --- | --- |
| ![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-21-1024x570.png) | ![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-29-1024x428.png) |

Developer Command Prompt を起動します。Windows キーをクリックし、`Developer Command Prompt` と検索して起動します。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-10.png)

CDSプロジェクトの存在しているディレクトリにて作業するため、テキストとしてクリップボードにコピーします。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-35-1024x265.png)

クリップボードにコピーしたディレクトリに移動します。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-36-1024x210.png)

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"Developer Command Prompt","source":"cd C:(..)StarRatingControl\u005cStarRatingView","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>Developer Command Prompt</span><pre class="js-sng-highlight"><code>cd C:(..)StarRatingControl\StarRatingView</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

パッケージを利用して更新します。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"Developer Command Prompt","source":"msbuild /t:build /restore","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>Developer Command Prompt</span><pre class="js-sng-highlight"><code>msbuild /t:build /restore</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

CDSプロジェクトをビルドしてソリューションを出力します。

:::raw
<!-- wp:group {"metadata":{"categories":["sgb/content-block"],"patternName":"sgb/4682","name":"CodeCopy"},"className":"parent","css":".parent {\n\tposition: relative;\t\n}","scopedCSS":"#id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb .parent {\n\tposition: relative;\t\n}","js":"let btn = block.querySelector(\u0022.code-btn\u0022);\n\nbtn.addEventListener(\u0022click\u0022, () =\u003e {\n  let txt = block.querySelector(\u0022code\u0022).innerText;\n  navigator.clipboard.writeText(txt);\n\n  let copied = block.querySelector(\u0022.copied\u0022);\n  copied.style.display = \u0022block\u0022;\n  setTimeout(function () {\n    copied.style.display = \u0022none\u0022;\n  }, 1500);\n});","blockId":"id-62ea580b-0406-4cfe-9f42-58a7d1c3c0fb"} -->
<div class="wp-block-group parent"><!-- wp:paragraph {"css":"i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n.fa-copy {\n\tcolor:#777;\n}\n\n.copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","scopedCSS":"#id-fab7264f-72ac-4b45-abc2-25f671f065af i {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 2.5em;\n\tright: 1em;\n\tz-index:98;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .fa-copy {\n\tcolor:#777;\n}\n\n#id-fab7264f-72ac-4b45-abc2-25f671f065af .copied{\n\tdisplay:none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tz-index:99;\n\tbackground:#222;\n\tcolor:#fff;\n\tborder-radius: 5px;\n\tpadding:3px;\n}","blockId":"id-fab7264f-72ac-4b45-abc2-25f671f065af"} -->
<p><i class="fas fa-copy code-btn"></i><span class="copied">コピーしました！</span></p>
<!-- /wp:paragraph -->

<!-- wp:sgb/codebox {"title":"Developer Command Prompt","source":"msbuild","highlight":true,"className":"parent","css":"pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\ncode,\n.hljs-tag {\n\tcolor:#fff;\n}\n\n.pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","scopedCSS":"#id-210d261f-144e-4171-a55d-dc3811b52a71 pre {\n    background: #3c3c3c;\n\tcolor:#ddd;\n\tfont-size: 0.9em;\n\tborder: none;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 code,\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .hljs-tag {\n\tcolor:#fff;\n}\n\n#id-210d261f-144e-4171-a55d-dc3811b52a71 .pre_tag\u003espan {\n    background-color: #3c3c3c;\n}","blockId":"id-210d261f-144e-4171-a55d-dc3811b52a71"} -->
<div class="wp-block-sgb-codebox pre_tag parent"><span><i class="fa fa-code"></i>Developer Command Prompt</span><pre class="js-sng-highlight"><code>msbuild</code></pre></div>
<!-- /wp:sgb/codebox --></div>
<!-- /wp:group -->
:::

出力が完了すると、==ビルドに成功しました==というメッセージが表示されます。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-38.png)

`bin` フォルダが作成されていますので、この中に移ります。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-37-1024x408.png)

さらに、Debug フォルダが内包されております。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-39.png)

このフォルダの中に、Power Platform にインポートできるソリューションファイルが出力されています。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-40-1024x368.png)

## Power Platform でソリューションをインポートする

[Power Apps 作成者ポータル](https://make.powerapps.com) で開発したソリューションをインポートします。

暫く待つとインポートされます。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-23-1024x415.png)

カスタムコントロールが一つだけ含まれているソリューションがインポートされました。

![](https://www.geekfujiwara.com/wp-content/uploads/2024/10/image-16-1024x482.png)

## Star Rating View ソリューションの入手

### GitHub にソリューションが公開

今回紹介したソリューションはGitHub に公開されております。ご興味がございましたらご利用ください。

[geekfujiwara/PCF-StarRatingView: 星印で表示するPCFコントロール](https://github.com/geekfujiwara/PCF-StarRatingView)

以上

ご参考になれば幸いです。