Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 104 additions & 165 deletions jp/components/ai/skills.md

Large diffs are not rendered by default.

63 changes: 29 additions & 34 deletions jp/components/ai/theming-mcp.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
---
title: Ignite UI Theming MCP | Ignite UI for Angular
title: Angular Theming MCP | Infragistics
_description: Ignite UI for Angular には Ignite UI Theming MCP サーバーが付属しており、Angular アプリケーション用のカスタム テーマ、パレット、タイポグラフィ、エレベーションを作成できます。MCP サーバーを使用してブランドおよび設計要件に合わせたカスタム テーマを生成および適用する方法について説明します。
_keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, 人工知能, AI, MCP, Model Context Protocol, テーマ設定, カスタム テーマ, パレット, タイポグラフィ, エレベーション
_keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, コンポーネント スイート, 人工知能, AI, MCP, Model Context Protocol, テーマ設定, カスタム テーマ, パレット, タイポグラフィ, エレベーション
_license: MIT
mentionedTypes: []
_language: ja
---

Expand All @@ -13,9 +15,9 @@ _language: ja

## 概要

Sass テーマ コードを手動で記述する代わりに、テーマの意図を自然言語で説明し、AI アシスタントに正しいコードを生成させることができます。MCP サーバーは、適切なシェード生成を備えたパレット、タイポグラフィ、エレベーション、コンポーネント デザイン トークン オーバーライドなどを含む、正確なテーマ コードを生成するために必要な知識とツールを AI に提供します。
スタイルを手動で記述する代わりに、テーマの意図を自然言語で説明し、AI アシスタントに正しいコードを生成させることができます。MCP サーバーは、適切なシェード生成を備えたパレット、タイポグラフィ、エレベーション、コンポーネント デザイン トークン オーバーライドなどを含む、正確なテーマ コードを生成するために必要な知識とツールを AI に提供します。

このサーバーは、4 つすべての Ignite UI デザイン システム (**Material**、**Bootstrap**、**Fluent**、**Indigo**) をライトとダークの両方のバリアントでサポートします。このガイドでは Angular に焦点を当てていますが、MCP サーバーは **Ignite UI for Web Components**、**React**、**Blazor** でも動作します。`detect_platform` ツールは `package.json` を読み取り、正しいインポート パスとセレクターを自動的に選択します。
このサーバーは、4 つすべての Ignite UI デザイン システム (**Material**、**Bootstrap**、**Fluent**、**Indigo**) をライトとダークの両方のバリアントでサポートします。このガイドでは Angular に焦点を当てていますが、MCP サーバーは Infragistics のすべての Ignite UI コンポーネント ライブラリでも動作します。`detect_platform` ツールは `package.json` を読み取り、正しいインポート パスとセレクターを自動的に選択します。

ほとんどのツールは、**Sass** または **CSS** 出力のいずれかを生成できます。Sass 出力がデフォルトで、`igniteui-theming` Sass モジュールと統合されます。CSS 出力は、すぐに使用できる CSS カスタム プロパティを生成し、**ローカル Sass ツールチェーンなしで**使用できます。サーバーがコンパイルを行います。

Expand All @@ -33,11 +35,14 @@ Sass テーマ コードを手動で記述する代わりに、テーマの意

MCP サーバーを構成する前に、次のものがあることを確認してください。

- **Node.js** (v18 以降) がインストールされていること - これにより、サーバーの起動に使用される `npx` コマンドが提供されます。
- `package.json` に依存関係として **Ignite UI パッケージ**がリストされているプロジェクト。Angular の場合、これは `igniteui-angular` (v15.0 以降) です。サーバーは、`igniteui-webcomponents`、`igniteui-react`、`igniteui-blazor` もサポートします。
- **MCP サポートを備えた AI クライアント** - 例: VS Code と GitHub Copilot、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。
- **Node.js** (v18 以降) がインストールされていること — これにより、サーバーの起動に使用される `npx` コマンドが提供されます。
- `package.json` に依存関係として **Ignite UI パッケージ**がリストされているプロジェクト。

`igniteui-angular` はまだインストールされていない場合は、次のコマンドを実行します。
Angular の場合、これは `igniteui-angular` (v15.0 以降) です。サーバーは、`igniteui-webcomponents`、`igniteui-react`、`igniteui-blazor` もサポートします。

- **MCP サポートを備えた AI クライアント** — 例: VS Code と GitHub Copilot、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。

`igniteui-angular` がまだインストールされていない場合は、次のコマンドを実行します。

```bash
ng add igniteui-angular
Expand Down Expand Up @@ -151,9 +156,12 @@ Claude Code 内で `/mcp` コマンドを使用して、サーバーが接続さ

JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポートします。

1. **[Settings]** (macOS では **[Preferences]**) を開きます。
2. **[Tools] → [AI Assistant] → [Model Context Protocol (MCP)]** に移動します。
3. **[+ Add]** をクリックし、**[As JSON]** を選択するか、フォーム フィールドを使用します。
1. **\[Settings]** (macOS では **\[Preferences]**) を開きます。

2. **\[Tools] → \[AI Assistant] → \[Model Context Protocol (MCP)]** に移動します。

3. **\[+ Add]** をクリックし、**\[As JSON]** を選択するか、フォーム フィールドを使用します。

4. 以下の構成を入力します。

```json
Expand All @@ -167,7 +175,7 @@ JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポー
}
```

5. **[OK]** をクリックし、AI Assistant を再起動します。
5. **\[OK]** をクリックし、AI Assistant を再起動します。

> [!NOTE]
> MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。
Expand Down Expand Up @@ -229,7 +237,7 @@ MCP サーバーは、プロンプトに基づいて AI が自動的に使用す

現在の完全なツール リストとそのパラメーターをいつでも確認するには、AI アシスタントに次のように尋ねてください。

> 「What tools does the Ignite UI Theming MCP provide?」 (Ignite UI Theming MCP はどのようなツールを提供していますか?)
> 「Ignite UI Theming MCP はどのようなツールを提供していますか?

各ツールの簡単な概要を以下に示します。

Expand Down Expand Up @@ -263,7 +271,7 @@ MCP サーバーは、プロンプトに基づいて AI が自動的に使用す

> 「Ignite UI を使用して新しい Angular プロジェクトを開始しています。プライマリ #2563eb、セカンダリ #f97316、Roboto フォントで完全な Material Design ライト テーマを作成して。」

AI は `create_theme` を呼び出し、すぐに使用できる `styles.scss` ファイルを返します。生成される出力は次のようになります:
AI は `create_theme` を呼び出し、すぐに使用できる `styles.scss` ファイルを返します。生成される出力は次のようになります

```scss
/* styles.scss */
Expand Down Expand Up @@ -291,27 +299,27 @@ $my-typography: typography(

### ブランド固有のカラー シェード

> 「デザイン システムでは、プライマリ グリーンの 14 個すべてのシェードに正確な 16 進数値が指定されています。値を貼り付けます - カスタム パレットを作成して」
> 「デザイン システムでは、プライマリ グリーンの 14 個すべてのシェードに正確な 16 進数値が指定されています。値を貼り付けます カスタム パレットを作成して

AI は、プライマリ カラーに `mode: "explicit"` を使用して `create_custom_palette` を呼び出し、残りは自動生成します。シェード生成の詳細については、[パレット](./palettes.md)を参照してください。
AI は、プライマリ カラーに `mode: "explicit"` を使用して `create_custom_palette` を呼び出し、残りは自動生成します。

### コンポーネント レベルのカスタマイズ

> 「フラット ボタンを紫の背景 #8b5cf6 と白いテキストでスタイル設定し、ホバー時にはより明るい紫 #a78bfa にして」
> 「フラット ボタンを紫の背景 #8b5cf6 と白いテキストでスタイル設定し、ホバー時にはより明るい紫 #a78bfa にして

AI は最初に `get_component_design_tokens` を呼び出して有効なトークン名を検出し、次に正しい値で `create_component_theme` を呼び出します。

### レイアウト調整

> 「カレンダーが場所を取りすぎている感じがします — 間隔を減らして、すべてのコンポーネントを少し小さくして」
> 「カレンダーが場所を取りすぎている感じがします — 間隔を減らして、すべてのコンポーネントを少し小さくして

AI は、カレンダー コンポーネントにスコープされた `set_spacing` と `:root` レベルで `set_size` を呼び出します。

## トラブルシューティング

**プラットフォームが検出されない**

`detect_platform` が `null` または `generic` を返す場合は、`package.jso`n に Ignite UI パッケージ (例: `igniteui-angular`、`igniteui-webcomponents`) が依存関係としてリストされていることを確認してください。AI に明示的に伝えることもできます: 「Angular プラットフォームを使用して
`detect_platform` が `null` または `generic` を返す場合は、`package.json` に Ignite UI パッケージ (例: `igniteui-react`) が依存関係としてリストされていることを確認してください。AI に明示的に伝えることもできます: 「Ignite UI for Angular を使用して。

**カラーの輝度警告**

Expand All @@ -329,23 +337,10 @@ AI がカラーの輝度について警告した場合、選択したカラー
ng add igniteui-angular
```

また、`styles.scss` で他のテーマ mixin の前に `core()` が呼び出されていることを確認してください。正しいファイル設定については、[Sass を使用したテーマ](./sass/index.md)を参照してください。
また、`styles.scss` で他のテーマ mixin の前に `core()` が呼び出されていることを確認してください。

## その他のリソース

関連トピック:

- [テーマの概要](../themes/index.md)
- [パレット](../themes/palettes.md)
- [タイポグラフィ](../themes/typography.md)
- [エレベーション](../themes/elevations.md)
- [スペーシング](../themes/spacing.md)
- [丸み](../themes/roundness.md)
- [Sass を使用したテーマ](../themes/sass/index.md)

<div class="divider--half"></div>

コミュニティに参加して新しいアイデアをご提案ください。

- [Ignite UI for Angular スキル](./skills.md)
- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
4 changes: 0 additions & 4 deletions jp/components/bullet-graph.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ Angular Bullet Graph コンポーネントは、目盛り上でメジャーの
このゲージは、スケール、針、目盛 (1 組)、ラベル (1 組) をサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、[`transitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#transitionDuration) プロパティの設定で簡単にカスタマイズできます。
ブレット グラフの機能には構成可能な向きや方向、視覚要素やツールチップなどがあります。

<!-- Angular, React, WebComponents -->

## 依存関係

gauge パッケージのインストール時に core パッケージもインストールする必要があります。
Expand All @@ -41,8 +39,6 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
```

<!-- end: Angular, React, WebComponents -->

## モジュールの要件

[`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) を作成するには、以下のモジュールが必要です。
Expand Down
4 changes: 1 addition & 3 deletions jp/components/charts/chart-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -342,13 +342,11 @@ alt="Angular チャート マーカー、ツールチップ、およびテンプ
- 24/5 対応しております。インフラジスティックスは、常にオンラインでグローバル サポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。
- チャートの他に、Angular には多くの UI コントロールもあります。アプリケーション構築のための完全な Angular ソリューションを提供します!

<!-- Angular -->
<!---->

- Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
- Figma デザインからピクセル パーフェクトな Angular コントロールを生成する、UX デザイナー、ビジュアル デザイナー、開発者向けのコード プラットフォームに、世界初で唯一のエンドツーエンドの包括的なデザインを提供します。Indigo.Design を使用すると、Indigo Design System から Figma で作成するすべてのものが Ignite UI for Angular コントロールと一致します。

<!-- end: Angular -->

## API リファレンス

このトピックで言及されているすべてのチャート タイプは、次の API コンポーネントに実装されています:
Expand Down
2 changes: 1 addition & 1 deletion jp/components/charts/features/chart-axis-gridlines.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ _language: ja

すべての Ignite UI for Angular チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。

> \[!Note]
> [!Note]
> 次の例は、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) および [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) コントロールに適用されます。

軸の主グリッド線は、軸ラベルの位置から水平 (Y 軸) または垂直 (X 軸) に伸びる長い線であり、チャートのプロット領域を介して描画されます。軸の副グリッド線は、軸の主グリッド線の間に描画される線です。
Expand Down
2 changes: 1 addition & 1 deletion jp/components/charts/features/chart-axis-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ _language: ja

すべての Ignite UI for Angular チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。

> \[!Note]
> [!Note]
> 次の例は、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) および [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) コントロールに適用されます。
## 軸位置の例
Expand Down
2 changes: 1 addition & 1 deletion jp/components/charts/features/chart-data-aggregations.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,5 @@ Ignite UI for Angular [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/p
- [`groupSorts`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSorts)
- [`groupSortDescriptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSortDescriptions)

> \[!Note]
> [!Note]
> [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) を使用する場合、チャート集計は機能しません。チャートのこれらのプロパティは非集計データ用です。データを集計しようとすると、これらのプロパティは使用できなくなります。うまくいかない理由は、描画のためにチャートに渡されたコレクションを集計により置き換えるためです。include/exclude プロパティは、そのデータの in/out プロパティをフィルターするように設計されており、それらのプロパティは新しい集計されたコレクションには存在しません。
2 changes: 1 addition & 1 deletion jp/components/charts/features/chart-data-annotations.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ _language: ja

Angular チャートでは、データ注釈レイヤーを使用して、データ チャートにプロットされたデータに、傾斜線、垂直/水平線 (軸スライス)、垂直/水平ストリップ (特定の軸をターゲットとする)、四角形、さらには平行四辺形 (バンド) で注釈を付けることができます。データ バインディングがサポートされているため、チャートをカスタマイズするために必要な数の注釈を作成できます。また、さまざまな注釈レイヤーを組み合わせて、プロット領域内にテキストをオーバーレイし、データ内の重要なイベント、パターン、領域に注釈を付けることもできます。

> \[!Note]
> [!Note]
> これらの機能はデカルト軸をサポートするように設計されており、現在は半径または角度の軸には対応していません。

たとえば、株式イベントやパターンを用いて株価に注釈を付けることができます。
Expand Down
Loading
Loading