# コンポーネントライブラリの解説
コンポーネントとは、ヒーロー画像やタスクカードのような個々の構成要素で、ウィジェットやマイクロサイトを構成します。現在のテンプレートはすべて、Mint と Bedrock のコンポーネントライブラリによって提供されています。
Mint コンポーネント
Mint コンポーネントで作成されたウィジェットとマイクロサイトは、最新の Advocate 体験を顧客アドボケイトに提供します。現在のテンプレートのほとんどは Mint コンポーネントを使用しています。現在のコンポーネントライブラリを使用しているかどうか不明な場合は、手動で確認し、必要に応じてライブラリを更新してください。
Mint コンポーネントにアップグレードするには、 **プログラムウィジェット**:
1. 左側のナビゲーションメニューから、次を選択します  **\[Engage] → コンテンツ**.
2. 次を選択します **ウィジェットを編集** として *ウィジェット* カード。
3. 編集したいウィジェットの名前を選択します。
4. 左側のサイドバーメニューで、 **パッケージ**.
5. 次を選択します  **パッケージを追加**.
6. 次を選択します **追加** として *Mint コンポーネント* カード。
Mint コンポーネントにアップグレードするには、 **マイクロサイト**:
1. 左側のナビゲーションメニューから、次を選択します  **［Engage］→［コンテンツ］を選択します。**
2. を選択 **設定を編集** ボタンの *マイクロサイト* カード。
3. 下の *サイトホスティング* 見出しで、次へ移動します。 *パッケージ* セクション。
4. 次を選択します  **パッケージを追加**.
5. 次を選択します **追加** として *Mint コンポーネント* カード。
6. 次を選択します **保存**.
Bedrock コンポーネント
Mint コンポーネントで提供されるすべてのテンプレートには、Bedrock コンポーネントパッケージもインストールされています。Bedrock コンポーネントは参加者には表示されませんが、デザインに高度なロジックを追加する機能を提供します。ほかのコンポーネントを条件付きで表示したり、コンポーネントがどのプログラムからデータを取得するかを定義したりできます。Bedrock コンポーネントパッケージは、ウィジェットまたはマイクロサイトエディタの *高度なコンポーネント* セクション内の *追加* タブで確認できます。
Bedrock コンポーネントパッケージには、次の 2 つのコンポーネントがあります。
**条件付きセクション**
この *条件付きセクション* コンポーネントを使用すると、参加者のメール、国、セグメント、またはカスタムフィールドに基づいた条件付きコンテンツを含めることができます。 *条件* ボックスに JSONata 式を入力して表示条件を設定します。その後、条件付きセクション内で、特定の参加者グループに表示したいコンテンツを移動します。
**プログラムセクション**
この *プログラムセクション* コンポーネントを使用すると、子コンポーネントのプログラム ID を上書きできます。特定のプログラムに関連付けられていないコンテンツを表示するために使用します。 *プログラムセクション* コンポーネントは、ほとんどのウィジェットおよびマイクロサイトテンプレートにデフォルトで含まれています。
カスタムコンポーネントライブラリ
独自のコンポーネントパッケージを構築して使用し、Advocate 体験をさらにカスタマイズできます。これらのコンポーネントは任意のテンプレートに追加でき、Advocate が提供するコンポーネントと併用できます。
Advocate のウィジェットは標準の HTML と [Web コンポーネント](https://www.webcomponents.org/) を使用します。ウィジェットエディタで独自のコンポーネントを使用するには、Web コンポーネントとして作成する必要があります。
カスタムコンポーネントを使ってウィジェットの作成を開始するには、カスタムパッケージをインストールします。
1. 左側のナビゲーションメニューから、次を選択します  **\[Engage] → コンテンツ**.
2. 次を選択します **ウィジェットを編集** ウィジェットカード上で。
3. 編集したいウィジェットの名前を選択します。
4. 左側のサイドバーメニューで、 **パッケージ**.
5. 次を選択します  **パッケージを追加**.
6. 次を選択します  **NPM から追加**.
7. パッケージを入力 *名前*, *バージョン* および *ファイルパス*.
8. 次を選択します **追加**.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.