# コンポーネントライブラリの概要
コンポーネントとは、ヒーロー画像やタスクカードのような個々の構成要素で、ウィジェットやマイクロサイトを構成するものです。現在のテンプレートはすべて、Mint と Bedrock のコンポーネントライブラリによって提供されています。
Mint コンポーネント
Mint コンポーネントで作成されたウィジェットやマイクロサイトでは、顧客擁護者に最新の Advocate 体験を提供できます。現在のテンプレートの多くは Mint コンポーネントを使用しています。現在のコンポーネントライブラリを使用しているかどうか不明な場合は、手動で確認し、必要に応じてライブラリを更新できます。
Mint コンポーネントにアップグレードするには **プログラムウィジェット**:
1. 左側のナビゲーションメニューから、  **\[Engage] → Content**.
2. を選択します **ウィジェットを編集** の *ウィジェット* カードを選択します。
3. 編集したいウィジェットの名前を選択します。
4. 左側のサイドバーメニューで、 **パッケージ**.
5. を選択します  **パッケージを追加**.
6. を選択します **追加** の *Mint コンポーネント* カードを選択します。
Mint コンポーネントにアップグレードするには **マイクロサイト**:
1. 左側のナビゲーションメニューから、  **\[Engage] → Content。**
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] → Content**.
2. を選択します **ウィジェットを編集** をウィジェットカードで。
3. 編集したいウィジェットの名前を選択します。
4. 左側のサイドバーメニューで、 **パッケージ**.
5. を選択します  **パッケージを追加**.
6. を選択します  **NPM から追加**.
7. パッケージの *名前*, *バージョン* および *ファイルパス*.
8. を選択します **追加**.