diff --git a/jp/components/ai/skills.md b/jp/components/ai/skills.md index 992752139b..4e4bb487dd 100644 --- a/jp/components/ai/skills.md +++ b/jp/components/ai/skills.md @@ -1,13 +1,18 @@ --- -title: Ignite UI for Angular スキル | AI スキル | AI 支援開発 | Ignite UI for Angular | インフラジスティックス -_description: エージェントのスキルを使用して、Ignite UI for Angular コンポーネント、グリッド、データ操作、テーマ設定を使った AI 支援開発を強化する方法について説明します。 -_keywords: ignite ui for angular, copilot skills, copilot スキル, ai assisted development, AI 支援開発, github copilot, cursor, windsurf, claude, jetbrains ai +title: エージェント スキル | AI スキル | AI 支援開発 | Ignite UI for Angular | Infragistics +_description: エージェント スキルを使用して、Ignite UI for Angular コンポーネント、グリッド、データ操作、テーマ設定を使った AI 支援開発を強化する方法について説明します。 +_keywords: Ignite UI for Angular, エージェント スキル, AI 支援開発, github copilot, cursor, windsurf, claude, gemini cli, junie +_license: MIT +mentionedTypes: [] _language: ja --- -# Ignite UI for Angular スキル +# Ignite UI for Angular エージェント スキル -Ignite UI for Angular には**エージェントのスキル**が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、JetBrains AI など) に Ignite UI for Angular の使用方法を教える構造化されたナレッジ ファイルです。これらのスキル ファイルは、コンポーネント、グリッド、データ操作、テーマ設定に関するコンテキスト対応のガイダンスを提供し、AI アシスタントがベスト プラクティスに従った正確で慣用的なコードを生成できるようにします。 +Ignite UI for Angular には **[エージェント スキル](https://agentskills.io/)** が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、Gemini CLI、JetBrains Junie など) に Ignite UI for Angular の使用方法を教える構造化されたナレッジ ファイルです。これらのスキル ファイルは、コンポーネント、グリッド、データ操作、テーマ設定に関するコンテキスト対応のガイダンスを提供し、AI アシスタントがベスト プラクティスに従った正確で慣用的なコードを生成できるようにします。 + +> [!NOTE] +> AI ツールのランドスケープは急速に進化しています。スキルの検出場所と配布オプションは、ツールや IDE の更新に伴って変更される可能性があります。最新情報については、使用しているツールやエージェントの公式ドキュメントを常に参照してください。 ## 利用可能なスキル @@ -19,138 +24,134 @@ Ignite UI for Angular には**エージェントのスキル**が付属してい | データ グリッド | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid、Tree Grid、Hierarchical Grid、Pivot Grid、ソート、フィルタリング、グループ化、ページング、リモート データ | | テーマ設定とスタイル設定 | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | -> **注:** Ignite UI for Angular **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。 - -AI アシスタントでスキルを使用する方法は 2 つあります。常に自動的に適用される[永続的な IDE エージェントを作成する](#方法-1-永続的な-ide-エージェントを作成する)か、必要に応じて優先する IDE に[手動でダウンロードして読み込む](#手順-2-スキルを-ide-に読み込む)かです。 - -## 方法 1: 永続的な IDE エージェントを作成する - -この方法では、スキルをプロジェクトに永続的に組み込むことで、すべての AI セッションが自動的に Ignite UI for Angular のガイドラインに従うようになります。ココピー＆ペースト は不要です。 - -### GitHub Copilot (VS Code) - -GitHub Copilot は、リポジトリのルートにある `.github/copilot-instructions.md` ファイルからカスタム指示を読み取ります。永続的なエージェントを作成するには: - -1. プロジェクト ルートに `.github/copilot-instructions.md` を作成 (または開く) します。 -2. そのファイルに、該当するスキル内容への参照を追加するか、スキル内容を貼り付けます。例: - - ```markdown - # Copilot Instructions +> [!NOTE] +> Ignite UI for Angular **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。 - This project uses Ignite UI for Angular. Follow the guidelines in the skill files below: +## スキルの場所 - - Components & Layout: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md - - Data Grids: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md - - Theming & Styling: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md - ``` +各 AI コーディング ツールは、特定のディレクトリからスキルを検出します。AI アシスタントがスキルを自動的に検出して使用できるように、スキル ファイルを適切な場所に配置します。一般的な `.agents/skills/` の規則は複数のツールでサポートされていますが、各ツールには独自の特定のディレクトリもあります。 -3. あるいは、完全にオフラインで自己完結した指示にするために、関連する `SKILL.md` ファイルの完全なコンテンツを `copilot-instructions.md` に直接貼り付けます。 -4. Copilot は、VS Code のすべてのチャットとインライン提案で、これらの指示を自動的に適用するようになります。 +### 一般 (`.agents/skills/`) -### Cursor - -Cursor は、`.cursorrules` ファイルまたは `.cursor/rules/` ディレクトリを介して永続的なプロジェクト ルールをサポートします。 +`.agents/skills/` ディレクトリは、[VS Code と Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills)、[OpenAI Codex](https://developers.openai.com/codex/skills)、[Cursor](https://cursor.com/docs/skills)、[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers)、[Antigravity](https://antigravity.google/docs/skills)、[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) など、複数のツールでサポートされているクロスエージェントの規則です。プロジェクト ルートの `.agents/skills/` にスキル ディレクトリをコピーします: -1. プロジェクト ルートに `.cursorrules` を作成します (または、名前付きルールの場合は `.cursor/rules/igniteui.md` を作成します)。 -2. 目的の `SKILL.md` ファイルのコンテンツをそのファイルに貼り付けます。例: - - ``` - # Ignite UI for Angular Rules +``` +.agents/ + skills/ + igniteui-angular-components/ + SKILL.md + igniteui-angular-grids/ + SKILL.md + igniteui-angular-theming/ + SKILL.md +``` - - - ``` +すべてのプロジェクトで利用可能なユーザー レベル (グローバル) スキルの場合は、代わりに `~/.agents/skills/` を使用します。 -3. Cursor は、すべての AI リクエストにこれらのルールを自動的に含めるようになります。チャットで `@rules` メンションを使用して、必要に応じて特定のルールを参照することもできます。 +### GitHub Copilot -### Windsurf +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) はスキルを以下から検出します: -Windsurf は、プロジェクト ルートにある `.windsurfrules` ファイルから永続的なルールを読み取ります。 +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.github/skills/`、`.claude/skills/` | +| パーソナル | `~/.copilot/skills/`、`~/.claude/skills/` (Copilot コーディング エージェントと GitHub Copilot CLI のみ) | -1. プロジェクト ルートに `.windsurfrules` を作成します。 -2. 関連する `SKILL.md` ファイルの内容を貼り付けます。 -3. Windsurf のすべての Cascade AI セッションに、これらが永続的な指示として含まれるようになります。 +> **ヒント:** [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) では、これらの場所に加えて一般的な `.agents/skills/` と `~/.agents/skills/` も含まれ、`chat.agentSkillsLocations` 設定を使用して追加のスキルの場所を構成できます。 -### JetBrains IDEs (WebStorm、IntelliJ) +### Claude -JetBrains AI Assistant は、すべての AI インタラクションに適用されるプロジェクト レベルのプロンプトをサポートします。 +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) はスキルを以下から検出します: -1. **[設定]** (macOS では **[Preferences]**) → **[ツール]** → **[AI Assistant]** → **[プロジェクト レベルのプロンプト]** を開きます。 -2. 関連する `SKILL.md` ファイルの内容をプロンプト フィールドに貼り付けます。 -3. **[適用]** をクリックします。AI Assistant は、プロジェクト内のすべてのリクエストに対してこれらの指示に従うようになります。 +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.claude/skills/` | +| パーソナル | `~/.claude/skills/` | -### Claude Code +### Cursor -Claude Code は、プロジェクト ルートにある `CLAUDE.md` ファイルを永続的なエージェント指示としてサポートします。 +[Cursor](https://cursor.com/docs/skills#skill-directories) はスキルを以下から検出します: -1. プロジェクト ルートに `CLAUDE.md` を作成します。 -2. 関連する `SKILL.md` ファイルの内容を貼り付けます。例: +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.agents/skills/`、`.cursor/skills/` | +| ユーザー (グローバル) | `~/.cursor/skills/` | - ```markdown - # Project Instructions +### Gemini CLI と Antigravity - This project uses Ignite UI for Angular. Always follow these guidelines: +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) と [Antigravity](https://antigravity.google/docs/skills) はスキルを以下から検出します: - - ``` +| スコープ | 場所 | +|:------|:---------| +| ワークスペース | `.gemini/skills/`、`.agents/skills/` | +| ユーザー | `~/.gemini/skills/`、`~/.agents/skills/` | -3. Claude Code はすべてのセッション開始時に `CLAUDE.md` を自動的に読み込むようになります。 +> **ヒント:** Gemini CLI で `/skills` スラッシュ コマンドを使用して、インストールされたスキルを表示および管理できます。 -### 一般的な AI エージェント +### Junie (JetBrains IDE) -あるいは、一般的なエージェントのスキル設定を使用して、エージェントがオンデマンドでスキルを簡単に検出して自動的に読み込めるようにすることもできます。 +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) はスキルを以下から検出します: -1. プロジェクト ルートに `.agents/skills/` ディレクトリを作成します。 -2. `igniteui-angular/skills/` リポジトリからスキル ディレクトリを `.agents/skills/` にコピーします。 +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.junie/skills/` | +| ユーザー | `~/.junie/skills/` | - ``` - .agents/ - skills/ - igniteui-angular-components/ - igniteui-angular-grids/ - igniteui-angular-theming/ - ``` +### Windsurf -3. エージェントはこれらのスキルを検出し、リクエストのコンテキストに基づいて関連するスキルを自動的に読み込むようになります。 +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) はスキルを以下から検出します: -> **ヒント:** VS Code はデフォルトで `.github/skills/`、`.claude/skills/`、`.agents/skills/` でスキルを検索します。`chat.agentSkillsLocations` 設定を使用して、追加の場所を構成できます。 +| スコープ | 場所 | +|:------|:---------| +| ワークスペース | `.windsurf/skills/`、`.agents/skills/` | +| グローバル | `~/.codeium/windsurf/skills/`、`~/.agents/skills/` | --- -## 方法 2: スキルをダウンロードして読み込む +## スキルのインストール -プロジェクトの設定ファイルを永続的に変更することなく、オンデマンドで特定のスキルを読み込みたい場合は、この方法を使用します。 +以下のオプションのいずれかを使用して、スキル ファイルをダウンロードし、AI アシスタントに適した[スキルの場所](#スキルの場所)に配置します。 -### 手順 1: スキル ファイルを取得する +### **オプション A — インストールされた npm パッケージを使用する** -#### **オプション A - 個別のファイルをダウンロードする** +Ignite UI for Angular がプロジェクトに既にインストールされている場合、スキル ファイルは `node_modules` の下で利用できます。それらをプロジェクトにコピーする (例: `.agents/skills/` の下での使用) には、次のコマンドを実行します: -各スキル ファイルは GitHub から直接ダウンロードできます。まず、プロジェクト ルートに `.agents/skills/` ディレクトリを作成してから、そこにファイルをダウンロードします。 +**macOS / Linux / Windows (PowerShell)** ```bash +cp -r node_modules/igniteui-angular/skills/. .agents/skills/ +``` + +**Windows (Command Prompt)** -# Define the base target directory -BASE_DIR=".agents/skills" +```cmd +robocopy node_modules\igniteui-angular\skills .agents\skills /E +``` -# Components & Layout -curl --create-dirs -o $BASE_DIR/igniteui-angular-components/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md +または、必要に応じて個別のスキル ディレクトリをコピーします: -# Data Grids -curl --create-dirs -o $BASE_DIR/igniteui-angular-grids/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md +**macOS / Linux / Windows (PowerShell)** -# Theming & Styling -curl --create-dirs -o $BASE_DIR/igniteui-angular-theming/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md +```bash +cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ ``` -スキル ファイルが `.agents/skills/` で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。 +**Windows (Command Prompt)** +```cmd +robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +``` -#### **オプション B - `gemini skills` CLI を使用する** +### **オプション B — `gemini skills` CLI を使用する** -`gemini skills install` コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします。 +`gemini skills install` コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします: -- **ユーザー スコープ** (デフォルト) - ユーザー アカウントにスキルをグローバルにインストールし、すべてのプロジェクトで利用できるようにします。スキルは `~/.gemini/skills/` または `~/.agents/skills/` に配置されます。 -- **ワークスペース スコープ** - 現在のプロジェクト ディレクトリの `.agents/skills/` にスキルをローカルにインストールし、そのプロジェクトのみにスコープします。 +- **ユーザー スコープ** (デフォルト) — ユーザー アカウントにスキルをグローバルにインストールし、すべてのプロジェクトで利用できるようにします。スキルは `~/.gemini/skills/` または `~/.agents/skills/` に配置されます。 +- **ワークスペース スコープ** — 現在のプロジェクト ディレクトリの `.agents/skills/` にスキルをローカルにインストールし、そのプロジェクトのみにスコープします。 **ユーザー スコープにインストールする (デフォルト):** @@ -170,66 +171,17 @@ gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-ang インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。 +### **オプション C — `npx skills` CLI を使用する** -#### **オプション C - インストールされた npm パッケージを使用する** - -Ignite UI for Angular がプロジェクトに既にインストールされている場合、スキル ファイルは `node_modules` の下で利用できます。それらをプロジェクトにコピーする (例: `.agents/skills/` の下での一般的な AI エージェントでの使用) には、次のコマンドを実行します。 +`skills` CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します: -```bash -# macOS / Linux -cp -r node_modules/igniteui-angular/skills/. .agents/skills/ -``` - -```powershell -# Windows (PowerShell) -Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills -``` - -または、必要に応じて個別のスキル ディレクトリをコピーします。 - -**macOS / Linux** - -```bash -cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ -cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ -cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ -``` - -**Windows (PowerShell)** - -```powershell -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming -``` - -**Windows (Command Prompt)** - -```cmd -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming -``` - -スキル ファイルは次の場所にあります: - -``` -node_modules/igniteui-angular/skills/igniteui-angular-components/SKILL.md -node_modules/igniteui-angular/skills/igniteui-angular-grids/SKILL.md -node_modules/igniteui-angular/skills/igniteui-angular-theming/SKILL.md -``` - -#### **オプション D - `npx skills` CLI を使用する** - -`skills` CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します。 - -```bash +```shell npx skills add IgniteUI/igniteui-angular ``` -CLI は、一連のプロンプトをガイドします。 +CLI は、一連のプロンプトをガイドします: -1. インストールするスキルを選択します (components、grids、theming)。 +1. インストールするスキルを選択します (components、theming など)。 2. プロジェクト内のスキル ファイルのターゲット場所を選択します (例: `.agents/skills/`、`.github/skills/`)。 3. 選択したスキル ファイルを自動的にダウンロードして書き込みます。 @@ -237,35 +189,22 @@ CLI は、一連のプロンプトをガイドします。 > **注:** Node.js とインターネット接続が必要です。コマンドは、[IgniteUI/igniteui-angular](https://github.com/IgniteUI/igniteui-angular) リポジトリから最新のスキル ファイルを取得します。 -### 手順 2: スキルを IDE に読み込む - -ファイルを取得したら、それらを開いて AI アシスタントに読み込みます。 - -| IDE / ツール | 読み込み方法 | -|:-----------|:------------| -| **VS Code + GitHub Copilot** | Copilot Chat 入力で `#file:path/to/SKILL.md` を使用して、そのセッションのコンテキストとして添付します。 | -| **Cursor** | `SKILL.md` ファイルをチャット ウィンドウにドラッグするか、`@file` と入力して選択します。 | -| **Windsurf** | Cascade チャット パネルの **[+]** ボタンを使用してファイルを添付します。 | -| **JetBrains AI Assistant** | AI チャットのクリップ アイコンをクリックして、ファイルをコンテキストとして添付します。 | -| **Claude Desktop** | ファイルをチャットにドラッグするか、**[Project] → [Add Content]** を介してプロジェクト ナレッジ ベースに追加します。 | -| **その他のアシスタント** | `SKILL.md` ファイルを開き、その完全なコンテンツをコピーして、システム プロンプトまたは最初のメッセージの上部に貼り付けます。 | - --- ## Theming MCP サーバー -**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成 などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md)を参照してください。 +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md)を参照してください。 -Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md)のドキュメントを参照してください。 +Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md) のドキュメントを参照してください。 ## その他のリソース
-- [Ignite UI で作業を開始](../general/getting-started.md) -- [Angular Schematics & Ignite UI CLI](../general/cli-overview.md) -- [スタンドアロン コンポーネントの使用方法](../general/how-to/how-to-use-standalone-components.md) -- [コード分割と複数のエントリ ポイント](../general/code-splitting-and-multiple-entry-points.md) + + +- Ignite UI for Angular で作業を開始 +- Angular Schematics & Ignite UI CLI
コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/ai/theming-mcp.md b/jp/components/ai/theming-mcp.md index d58213a5d1..fe00901ff9 100644 --- a/jp/components/ai/theming-mcp.md +++ b/jp/components/ai/theming-mcp.md @@ -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 --- @@ -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 ツールチェーンなしで**使用できます。サーバーがコンパイルを行います。 @@ -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 @@ -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 @@ -167,7 +175,7 @@ JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポー } ``` -5. **[OK]** をクリックし、AI Assistant を再起動します。 +5. **\[OK]** をクリックし、AI Assistant を再起動します。 > [!NOTE] > MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。 @@ -229,7 +237,7 @@ MCP サーバーは、プロンプトに基づいて AI が自動的に使用す 現在の完全なツール リストとそのパラメーターをいつでも確認するには、AI アシスタントに次のように尋ねてください。 -> 「What tools does the Ignite UI Theming MCP provide?」 (Ignite UI Theming MCP はどのようなツールを提供していますか?) +> 「Ignite UI Theming MCP はどのようなツールを提供していますか?」 各ツールの簡単な概要を以下に示します。 @@ -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 */ @@ -291,19 +299,19 @@ $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` を呼び出します。 @@ -311,7 +319,7 @@ AI は、カレンダー コンポーネントにスコープされた `set_spac **プラットフォームが検出されない** -`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 を使用して。」 **カラーの輝度警告** @@ -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) - -
- -コミュニティに参加して新しいアイデアをご提案ください。 - +- [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) diff --git a/jp/components/bullet-graph.md b/jp/components/bullet-graph.md index 9dc89431dc..77f6bc31f1 100644 --- a/jp/components/bullet-graph.md +++ b/jp/components/bullet-graph.md @@ -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) プロパティの設定で簡単にカスタマイズできます。 ブレット グラフの機能には構成可能な向きや方向、視覚要素やツールチップなどがあります。 - - ## 依存関係 gauge パッケージのインストール時に core パッケージもインストールする必要があります。 @@ -41,8 +39,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - ## モジュールの要件 [`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) を作成するには、以下のモジュールが必要です。 diff --git a/jp/components/charts/chart-overview.md b/jp/components/charts/chart-overview.md index cea3708009..b2443f4979 100644 --- a/jp/components/charts/chart-overview.md +++ b/jp/components/charts/chart-overview.md @@ -342,13 +342,11 @@ alt="Angular チャート マーカー、ツールチップ、およびテンプ - 24/5 対応しております。インフラジスティックスは、常にオンラインでグローバル サポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。 - チャートの他に、Angular には多くの UI コントロールもあります。アプリケーション構築のための完全な Angular ソリューションを提供します! - + - Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。 - Figma デザインからピクセル パーフェクトな Angular コントロールを生成する、UX デザイナー、ビジュアル デザイナー、開発者向けのコード プラットフォームに、世界初で唯一のエンドツーエンドの包括的なデザインを提供します。Indigo.Design を使用すると、Indigo Design System から Figma で作成するすべてのものが Ignite UI for Angular コントロールと一致します。 - - ## API リファレンス このトピックで言及されているすべてのチャート タイプは、次の API コンポーネントに実装されています: diff --git a/jp/components/charts/features/chart-axis-gridlines.md b/jp/components/charts/features/chart-axis-gridlines.md index ec734255f3..94ef8141c2 100644 --- a/jp/components/charts/features/chart-axis-gridlines.md +++ b/jp/components/charts/features/chart-axis-gridlines.md @@ -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 軸) に伸びる長い線であり、チャートのプロット領域を介して描画されます。軸の副グリッド線は、軸の主グリッド線の間に描画される線です。 diff --git a/jp/components/charts/features/chart-axis-layouts.md b/jp/components/charts/features/chart-axis-layouts.md index f9f06c8149..1517e93aff 100644 --- a/jp/components/charts/features/chart-axis-layouts.md +++ b/jp/components/charts/features/chart-axis-layouts.md @@ -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) コントロールに適用されます。 ## 軸位置の例 diff --git a/jp/components/charts/features/chart-data-aggregations.md b/jp/components/charts/features/chart-data-aggregations.md index 27120acd7d..a397182ff1 100644 --- a/jp/components/charts/features/chart-data-aggregations.md +++ b/jp/components/charts/features/chart-data-aggregations.md @@ -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 プロパティをフィルターするように設計されており、それらのプロパティは新しい集計されたコレクションには存在しません。 diff --git a/jp/components/charts/features/chart-data-annotations.md b/jp/components/charts/features/chart-data-annotations.md index de6b51fe84..04780eebf0 100644 --- a/jp/components/charts/features/chart-data-annotations.md +++ b/jp/components/charts/features/chart-data-annotations.md @@ -12,7 +12,7 @@ _language: ja Angular チャートでは、データ注釈レイヤーを使用して、データ チャートにプロットされたデータに、傾斜線、垂直/水平線 (軸スライス)、垂直/水平ストリップ (特定の軸をターゲットとする)、四角形、さらには平行四辺形 (バンド) で注釈を付けることができます。データ バインディングがサポートされているため、チャートをカスタマイズするために必要な数の注釈を作成できます。また、さまざまな注釈レイヤーを組み合わせて、プロット領域内にテキストをオーバーレイし、データ内の重要なイベント、パターン、領域に注釈を付けることもできます。 -> \[!Note] +> [!Note] > これらの機能はデカルト軸をサポートするように設計されており、現在は半径または角度の軸には対応していません。 たとえば、株式イベントやパターンを用いて株価に注釈を付けることができます。 diff --git a/jp/components/charts/features/chart-navigation.md b/jp/components/charts/features/chart-navigation.md index 8b08637fea..e21f0bfacc 100644 --- a/jp/components/charts/features/chart-navigation.md +++ b/jp/components/charts/features/chart-navigation.md @@ -76,7 +76,7 @@ Angular データ チャートのナビゲーションは、タッチ、マウ ## コードによるチャート ナビゲーション -> \[!Note] +> [!Note] > チャートのコード ナビゲーションは、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コントロールにのみ使用できます。 Angular データ チャートは、チャートでズームまたはパン操作が行われるたびに更新されるいくつかのナビゲーション プロパティを提供します。各プロパティは、チャートでズームやパンニングするためにコードで設定できます。以下は、これらのプロパティの一覧です。 diff --git a/jp/components/charts/features/chart-performance.md b/jp/components/charts/features/chart-performance.md index f23c3e8fef..62263daa69 100644 --- a/jp/components/charts/features/chart-performance.md +++ b/jp/components/charts/features/chart-performance.md @@ -181,7 +181,7 @@ this.LineSeries.Resolution = 10; データ ポイント間の時間間隔に基づくスペースが重要でない場合は、DateTime をサポートする x 軸の使用はお勧めしません。代わりに、順序/カテゴリ軸を使用する必要があります。これは、データを結合する方法がより効率的であるためです。また、順序/カテゴリ軸は、時間ベースの x 軸のようにデータのソートを実行しません。 -> \[!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) および [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コントロールで x 軸を順序付け/カテゴリ化する方法を示しています。 @@ -198,7 +198,7 @@ this.LineSeries.Resolution = 10; デフォルトでは、Angular チャートは、データの範囲に基づいて [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、[`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。 -> \[!Note] +> [!Note] > チャートのパフォーマンスが低下するため、軸の副間隔を設定することはお勧めしません。 このコード スニペットは、Angular チャートで軸の主間隔を設定する方法を示しています。 diff --git a/jp/components/charts/features/chart-user-annotations.md b/jp/components/charts/features/chart-user-annotations.md index cd3a363e8f..0d6f4a3c6b 100644 --- a/jp/components/charts/features/chart-user-annotations.md +++ b/jp/components/charts/features/chart-user-annotations.md @@ -20,7 +20,7 @@ Ignite UI for Angular では、ユーザー注釈機能を使用して、実行 -> \[!Note] +> [!Note] > この機能は X 軸と Y 軸をサポートするように設計されており、現在、ラジアル軸やアンギュラー軸はサポートされていません。 ## Toolbar でユーザー注釈を使用する diff --git a/jp/components/charts/types/data-pie-chart.md b/jp/components/charts/types/data-pie-chart.md index 6581918fe0..6417b96427 100644 --- a/jp/components/charts/types/data-pie-chart.md +++ b/jp/components/charts/types/data-pie-chart.md @@ -101,7 +101,7 @@ ItemLegend バッジを変更することもできます。デフォルトでは これらのプロパティは、「その他」のスライス (存在する場合) にのみ影響します。他のすべてのスライスは、通常のパレットと項目ごとの色付け動作を引き続き使用します。 -> \[!NOTE] +> [!NOTE] > 「その他」のスライスは、チャートがそれを作成するように構成されている場合にのみレンダリングされます (たとえば、[`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) が 0 より大きく、適切な [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) が設定されている場合)。「その他」のスライスが存在しない場合、`OthersCategoryBrush` と `OthersCategoryOutline` は表示上の効果はありません。 [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) に「その他」カテゴリが表示されないようにするには、[`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) を 0 に設定します。 diff --git a/jp/components/dashboard-tile.md b/jp/components/dashboard-tile.md index 3ec9d012d4..f298b59367 100644 --- a/jp/components/dashboard-tile.md +++ b/jp/components/dashboard-tile.md @@ -26,8 +26,6 @@ Angular Dashboard Tile は、データ ソース コレクション/配列また ## 依存関係 - - Ignite UI for Angular ツールセットに次のパッケージをインストールします: ```cmd @@ -61,8 +59,6 @@ import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGauge export class AppModule {} ``` - - ## 使用方法 コントロールはバインドしたデータを評価し、Ignite UI for Angular ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。 diff --git a/jp/components/excel-library-using-cells.md b/jp/components/excel-library-using-cells.md index 1450d5f3d4..d282536e0f 100644 --- a/jp/components/excel-library-using-cells.md +++ b/jp/components/excel-library-using-cells.md @@ -22,8 +22,6 @@ Excel ワークシートの [`WorksheetCell`]({environment:dvApiBaseUrl}/product
- - ## 参照 以下のコードは、以下のコード スニペットを使用するインポートを示します。 @@ -38,8 +36,6 @@ import { WorksheetCellComment } from "igniteui-angular-excel"; import { FormattedString } from "igniteui-angular-excel"; ``` - - ## セルと領域を参照 [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) オブジェクトの [`getCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getCell) または [`getRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getRegion) メソッドを呼び出して [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) オブジェクト または [`WorksheetRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) オブジェクトへアクセスできます。両メソッドはセルを参照する文字列パラメーターを許容します。書式設定を適用する場合または数式とセルのコンテンツで作業する場合にセル参照を取得すると便利です。 diff --git a/jp/components/excel-library-using-worksheets.md b/jp/components/excel-library-using-worksheets.md index d953b45760..f067912bc2 100644 --- a/jp/components/excel-library-using-worksheets.md +++ b/jp/components/excel-library-using-worksheets.md @@ -22,8 +22,6 @@ Angular Excel Engine の [`worksheet`]({environment:dvApiBaseUrl}/products/ignit
- - 以下のコードは、以下のコード スニペットを使用するインポートを示します。 ```ts @@ -41,8 +39,6 @@ import { SortDirection } from "igniteui-angular-excel"; import { WorkbookColorInfo } from "igniteui-angular-excel"; ``` - - ## ガイドラインの設定 グリッド線は、ワークシートでセルを視覚的に分離するために使用されます。グリッド線は表示または非表示にできます。また、色を変更することもできます。 diff --git a/jp/components/excel-library-working-with-charts.md b/jp/components/excel-library-working-with-charts.md index d7bb9c7dac..759ca4077c 100644 --- a/jp/components/excel-library-working-with-charts.md +++ b/jp/components/excel-library-working-with-charts.md @@ -20,7 +20,7 @@ Infragistics Angular Excel Engine の [`WorksheetChart`]({environment:dvApiBaseU -> \[!Note] +> [!Note] > XLSX 形式が必要です。他の形式は現在サポートされていません。
diff --git a/jp/components/excel-library-working-with-sparklines.md b/jp/components/excel-library-working-with-sparklines.md index a30c2a274f..fcbca21157 100644 --- a/jp/components/excel-library-working-with-sparklines.md +++ b/jp/components/excel-library-working-with-sparklines.md @@ -20,7 +20,7 @@ Infragistics Angular Excel Library は、Excel ワークシートにスパーク -> \[!Note] +> [!Note] > XLSX 形式は必要です。他の形式は現在サポートされていません。
diff --git a/jp/components/excel-library.md b/jp/components/excel-library.md index a5eb6b935a..13ab7ca6cd 100644 --- a/jp/components/excel-library.md +++ b/jp/components/excel-library.md @@ -20,13 +20,11 @@ Infragistics Angular Excel ライブラリは、[`workbook`]({environment:dvApiB -> \[!Note] +> [!Note] > XLSX 形式は必要です。他の形式は現在サポートされていません。
- - ## 依存関係 excel パッケージをインストールするときに core パッケージもインストールする必要があります。 @@ -64,8 +62,6 @@ Excel ライブラリには、アプリのバンドル サイズを制限する - **IgxExcelXlsxModule** – xlsx (および関連する) タイプ ファイルのロジックの読み込みと保存を含みます。これは Excel2007 関連および StrictOpenXml ANDWorkbookFormats です。 - **IgxExcelModule** – 他の 4 つのモジュールの参照ですべての機能の読み込み/使用を可能にします。 - - ## サポートされるバージョンの Microsoft Excel 以下は Excel のサポートされるバージョンのリストです。 @@ -86,8 +82,6 @@ Excel ライブラリには、アプリのバンドル サイズを制限する - Microsoft Excel 2016 - - ## ヒープの管理 Excel Library のサイズに因り、ソースマップの生成を無効にすることを推奨します。 @@ -120,8 +114,6 @@ architect => build => options から serve の options で `vendorSourceMap` オ } ``` - - ## API リファレンス - `Load` diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index 257e12ffcb..805a0ca7fc 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -11,7 +11,7 @@ _language: ja Ignite UI for Angular の各バージョンのすべての重要な変更は、このページに記載されています。 -> \[!Note] +> [!Note] > このトピックでは、igniteui-angular パッケージに含まれていないコンポーネントの変更についてのみ説明します。 > igniteui-angular コンポーネントに固有の変更については CHANGELOG.MD を参照してください。 @@ -24,12 +24,12 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 | バグ番号 | コントロール | 説明 | |------------|---------|-------------| | 2189 | IgxDataChart | ラベルがない場合に DataChart が軸のレンダリングをスキップする。 | -| 3055 | IgxDataPieChart | Others スライスに不足しているスタイリング プロパティを追加。 | -| 38668 | IgxDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor が上書きされる。 | -| 40238 | Excel | Excel の数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 | -| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリッピングの Excel サポートを追加。 | -| 41419 | Excel | VBA 署名済み Excel ファイルを保存しても署名/証明書が保持されない。 | -| 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems が null であるか、フラグメント シリーズのアイテムの更新が機能しない。 | +| 3055 | IgxDataPieChart | Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgxDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | +| 41594 | IgxDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。 | ## **21.0.0 (January 2026)** @@ -184,7 +184,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### igniteui-angular-maps 地理マップ -> \[!Note] +> [!Note] > 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 > 詳細は以下をご覧ください: @@ -424,7 +424,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - GroupSorts - 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) を使用している場合、チャートの[集計](charts/features/chart-data-aggregations.md)は機能しません。これらのプロパティは非集計データ用です。データを集計しようとすると、これらのプロパティは使用できなくなります。うまくいかない理由は、描画のためにチャートに渡されたコレクションを集計により置き換えるためです。include/exclude プロパティは、そのデータの in/out プロパティをフィルターするように設計されており、それらのプロパティは新しい集計されたコレクションには存在しません。 ## **13.2.0 (June 2022)** @@ -450,7 +450,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ## **13.1.0 (November 2021)** -> \[!Note] +> [!Note] > パッケージ「lit-html」を確認してください。最適な互換性のために、「^2.0.0」以降がプロジェクトに追加されます。 ### igniteui-angular-charts (チャート) @@ -543,7 +543,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### igniteui-angular-maps (GeoMap) -> \[!Note] +> [!Note] > これらの機能は CTP です。 - マップの表示を折り返すためのサポートが追加されました (水平方向に無限にスクロールできます)。 @@ -559,7 +559,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 Import ステートメントは、API クラスと列挙型へのフル パスではなくパッケージ名のみを使用するように簡素化されました。 -> \[!Note] +> [!Note] > これらの重大な変更は、これらのパッケージとコンポーネントでのみ導入されました: | 影響されるパッケージ | 影響されるコンポーネント | diff --git a/jp/components/geo-map-binding-multiple-shapes.md b/jp/components/geo-map-binding-multiple-shapes.md index b30081227d..b5b1f3846e 100644 --- a/jp/components/geo-map-binding-multiple-shapes.md +++ b/jp/components/geo-map-binding-multiple-shapes.md @@ -124,8 +124,6 @@ sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf"; sdsLocations.dataBind(); ``` - - ## ポリゴンの処理 世界の国々の [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) に読み込まれた形状データを処理し、[`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) オブジェクトに割り当てます。 @@ -217,8 +215,6 @@ public onPointsLoaded(sds: IgxShapeDataSource, e: any) { } ``` - - ## マップ背景 また形状ファイルがアプリケーションのために十分な地理的文脈 (国の形状など) を提供した際に、地図背景コンテンツで地理的画像を非表示にしたい場合があります。 diff --git a/jp/components/geo-map-shape-files-reference.md b/jp/components/geo-map-shape-files-reference.md index 7892b20379..4cedde338e 100644 --- a/jp/components/geo-map-shape-files-reference.md +++ b/jp/components/geo-map-shape-files-reference.md @@ -35,7 +35,7 @@ _language: ja ## シェイプ ファイルのフォーマット -Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html)コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、*.shp*、*.shx*、および *.dbf* の拡張子が付いています。 +Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html)コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、_.shp_、_.shx_、および _.dbf_ の拡張子が付いています。 以下の表は、シェープ ファイルの各タイプの基本情報および目的を提供しています。 diff --git a/jp/components/geo-map.md b/jp/components/geo-map.md index d17bbefa31..3476f6ec97 100644 --- a/jp/components/geo-map.md +++ b/jp/components/geo-map.md @@ -36,8 +36,6 @@ Map は、マウス、キーボード、またはコードビハインドを使 [Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) - - ## 依存関係 地理マップコンポーネントを使用するには、はじめにこれらのパッケージをインストールする必要があります。 @@ -48,8 +46,6 @@ npm install --save igniteui-angular-charts npm install --save igniteui-angular-maps ``` - - ## モジュールの要件 [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップ コンテンツのパンやズームなどのマウス操作にのみ必要です。 diff --git a/jp/components/inputs/color-editor.md b/jp/components/inputs/color-editor.md index 582f59863a..cb0e21ac2c 100644 --- a/jp/components/inputs/color-editor.md +++ b/jp/components/inputs/color-editor.md @@ -25,8 +25,6 @@ Ignite UI for Angular Color Editor は軽量のカラー ピッカー コンポ ## 依存関係 - - まず、次のコマンドを実行して Ignite UI for Angular をインストールする必要があります: ```cmd @@ -36,14 +34,10 @@ npm install igniteui-angular-inputs `ColorEditor` を使用する前に、次のモジュールを登録する必要があります: - - ## 使用方法 `ColorEditor` の使用を開始する最も簡単な方法は次のとおりです: - - ```html ``` - - ## イベントにバインド Color Editor コンポーネントは、次のイベントを発生させます: @@ -61,8 +53,6 @@ Color Editor コンポーネントは、次のイベントを発生させます: - valueChanged - valueChanging - - ```ts @ViewChild("colorEditor", { static: true } ) private colorEditor: IgxColorEditorComponent @@ -76,8 +66,6 @@ public onValueChanged = (e: any) => { } ``` - -
## API リファレンス diff --git a/jp/components/interactivity/accessibility-compliance.md b/jp/components/interactivity/accessibility-compliance.md index cc8f8c826e..ed0642209c 100644 --- a/jp/components/interactivity/accessibility-compliance.md +++ b/jp/components/interactivity/accessibility-compliance.md @@ -35,45 +35,45 @@ _language: ja |**コンポーネント/原則**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*||||||||||||||||| -| - Grid||||||||||*||||||| -| - HierarchicalGrid||||||||||*||||||| -| - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| +|_グリッド_||||||||||||||||| +| - Grid||||||||||_||||||| +| - HierarchicalGrid||||||||||_||||||| +| - TreeGrid||||||||||_||||||| +|_その他_||||||||||_||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| -| - Bottom navigation||||||||||*||||||| -| - Button||||||||||*||||||| -| - Button group||||||||||*||||||| -| - Calendar||||||||||*||||||| +| - Bottom navigation||||||||||_||||||| +| - Button||||||||||_||||||| +| - Button group||||||||||_||||||| +| - Calendar||||||||||_||||||| | - Card||||||||||||||||| -| - Carousel||||||||||*||||||| +| - Carousel||||||||||_||||||| | - Checkbox||||||||||||||||| -| - Chip||||||||||*||||||| -| - Circular progress||||||||||*||||||| -| - Combo||||||||||*||||||| -| - Date time input||||||||||*||||||| -| - Date picker||||||||||*||||||| +| - Chip||||||||||_||||||| +| - Circular progress||||||||||_||||||| +| - Combo||||||||||_||||||| +| - Date time input||||||||||_||||||| +| - Date picker||||||||||_||||||| | - Divider||||||||||||||||| -| - Dialog||||||||||*||||||| -| - Drop down||||||||||*||||||| -| - Expansion panel||||||||||*||||||| +| - Dialog||||||||||_||||||| +| - Drop down||||||||||_||||||| +| - Expansion panel||||||||||_||||||| | - Icon||||||||||||||||| | - Input||||||||||||||||| -| - Input group||||||||||*||||||| -| - Linear progress||||||||||*||||||| +| - Input group||||||||||_||||||| +| - Linear progress||||||||||_||||||| | - List||||||||||||||||| -| - Navbar||||||||||*||||||| -| - Navigation drawer||||||||||*||||||| +| - Navbar||||||||||_||||||| +| - Navigation drawer||||||||||_||||||| | - Radio group||||||||||||||||| | - Radio||||||||||||||||| -| - Select||||||||||*||||||| -| - Slider||||||||||*||||||| -| - Snackbar||||||||||*||||||| -| - Switch||||||||||*||||||| -| - Tabs||||||||||*||||||| -| - Time picker||||||||||*||||||| -| - Toast||||||||||*||||||| +| - Select||||||||||_||||||| +| - Slider||||||||||_||||||| +| - Snackbar||||||||||_||||||| +| - Switch||||||||||_||||||| +| - Tabs||||||||||_||||||| +| - Time picker||||||||||_||||||| +| - Toast||||||||||_||||||| **凡例** @@ -84,7 +84,7 @@ _language: ja ||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| |'空白'|この特定の規則はコントロールに適用されません。|| -> \[!WARNING] +> [!WARNING] > 上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 ### 法令遵守情報 @@ -112,49 +112,49 @@ _language: ja |**コンポーネント/ガイドライン**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*|||||||||||||| -| - Grid|||||||*||||*||| -| - HierarchicalGrid|||||||*||||*||| -| - TreeGrid|||||||*||||*||| -|*その他*|||||||*||||||| -| - Avatar|||||||||||*||| -| - Badge|||||||||||*||| -| - Banner||||||*|*||||*||| -| - Bottom navigation|||||||*||||*||| -| - Button|||||||*||||*||| -| - Button group|||||||*||||*||| -| - Calendar||||||*|*||||*||| -| - Card|||||||||||*||| -| - Carousel||||||*|*||||*||| -| - Checkbox|||||||||||*||| -| - Chip|||||||*||||*||| -| - Circular progress||||||*|*||||*||| -| - Combo||||||*|*||||*||| -| - Date time editor||||||*|*||||*||| -| - Date picker||||||*|*||||*||| -| - Divider|||||||||||*||| -| - Dialog||||||*|*||||*||| -| - Drop down||||||*|*||||*||| -| - Expansion panel||||||*|*||||*||| -| - Icon|||||||||||*||| -| - Input|||||||||||*||| -| - Input group|||||||*||||*||| -| - Label|||||||||||*||| -| - Linear progress||||||*|*||||*||| -| - List|||||||||||*||| -| - Month picker||||||*|*||||*||| -| - Navbar|||||||*||||*||| -| - Navigation drawer||||||*|*||||*||| -| - Radio group|||||||||||*||| -| - Radio|||||||||||*||| -| - Select||||||*|*||||*||| -| - Slider|||||||*||||*||| -| - Snackbar||||||*|*||||*||| -| - Switch|||||||*||||*||| -| - Tabs|||||||*||||*||| -| - Time picker||||||*|*||||*||| -| - Toast||||||*|*||||*||| -| - Tooltip||||||*|*||||*||| +|_グリッド_|||||||||||||| +| - Grid|||||||_||||_||| +| - HierarchicalGrid|||||||_||||_||| +| - TreeGrid|||||||_||||_||| +|_その他_|||||||_||||||| +| - Avatar|||||||||||_||| +| - Badge|||||||||||_||| +| - Banner||||||_|_||||_||| +| - Bottom navigation|||||||_||||_||| +| - Button|||||||_||||_||| +| - Button group|||||||_||||_||| +| - Calendar||||||_|_||||_||| +| - Card|||||||||||_||| +| - Carousel||||||_|_||||_||| +| - Checkbox|||||||||||_||| +| - Chip|||||||_||||_||| +| - Circular progress||||||_|_||||_||| +| - Combo||||||_|_||||_||| +| - Date time editor||||||_|_||||_||| +| - Date picker||||||_|_||||_||| +| - Divider|||||||||||_||| +| - Dialog||||||_|_||||_||| +| - Drop down||||||_|_||||_||| +| - Expansion panel||||||_|_||||_||| +| - Icon|||||||||||_||| +| - Input|||||||||||_||| +| - Input group|||||||_||||_||| +| - Label|||||||||||_||| +| - Linear progress||||||_|_||||_||| +| - List|||||||||||_||| +| - Month picker||||||_|_||||_||| +| - Navbar|||||||_||||_||| +| - Navigation drawer||||||_|_||||_||| +| - Radio group|||||||||||_||| +| - Radio|||||||||||_||| +| - Select||||||_|_||||_||| +| - Slider|||||||_||||_||| +| - Snackbar||||||_|_||||_||| +| - Switch|||||||_||||_||| +| - Tabs|||||||_||||_||| +| - Time picker||||||_|_||||_||| +| - Toast||||||_|_||||_||| +| - Tooltip||||||_|_||||_||| **凡例** @@ -165,7 +165,7 @@ _language: ja ||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| |'空白'|この特定の規則はコントロールに適用されません。|| -> \[!WARNING] +> [!WARNING] > 上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 ### 法令遵守情報 diff --git a/jp/components/linear-gauge.md b/jp/components/linear-gauge.md index 36c415c931..06f4cbde42 100644 --- a/jp/components/linear-gauge.md +++ b/jp/components/linear-gauge.md @@ -25,8 +25,6 @@ Ignite UI for Angular リニア ゲージ コンポーネントを使用する
- - ## 依存関係 Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -36,8 +34,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - ## モジュールの要件 [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) を作成するには、以下のモジュールが必要です。 diff --git a/jp/components/menus/toolbar.md b/jp/components/menus/toolbar.md index f5f7a01559..36cf20368d 100644 --- a/jp/components/menus/toolbar.md +++ b/jp/components/menus/toolbar.md @@ -22,8 +22,6 @@ Angular ツールバー コンポーネントは、主にチャート コンポ ## 依存関係 - - Ignite UI for Angular のレイアウト、入力、チャート、コア パッケージをインストールします。 ```cmd @@ -68,8 +66,6 @@ IgrDataChartInteractivityModule.register(); IgrDataChartCategoryTrendLineModule.register(); ``` - - ## 使用方法 ### ツール操作 @@ -206,24 +202,26 @@ public toolbarCustomIconOnViewInit(): void { @code { - protected override async Task OnAfterRenderAsync(bool firstRender) - { - var toolbar = this.toolbar; +``` +protected override async Task OnAfterRenderAsync(bool firstRender) +{ + var toolbar = this.toolbar; - if (firstRender) { - this.ToolbarCustomIconOnViewInit(); - } + if (firstRender) { + this.ToolbarCustomIconOnViewInit(); } +} - private IgbToolbar toolbar; +private IgbToolbar toolbar; - public void ToolbarCustomIconOnViewInit() +public void ToolbarCustomIconOnViewInit() +{ + this.toolbar.EnsureReady().ContinueWith(new Action((e) => { - this.toolbar.EnsureReady().ContinueWith(new Action((e) => - { - this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg"); - })); - } + this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg"); + })); +} +``` } diff --git a/jp/components/radial-gauge.md b/jp/components/radial-gauge.md index fc8eedf866..0d1314b3ff 100644 --- a/jp/components/radial-gauge.md +++ b/jp/components/radial-gauge.md @@ -25,8 +25,6 @@ Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラ
- - ## 依存関係 gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -36,8 +34,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - ## モジュールの要件 [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) を作成するには、以下のモジュールが必要です。 diff --git a/jp/components/spreadsheet-chart-adapter.md b/jp/components/spreadsheet-chart-adapter.md index 66eb4f6f89..b0020246ed 100644 --- a/jp/components/spreadsheet-chart-adapter.md +++ b/jp/components/spreadsheet-chart-adapter.md @@ -84,7 +84,7 @@ Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを ## 依存関係 -> \[!Note] +> [!Note] > > 以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) を保存およびロードしています。 diff --git a/jp/components/spreadsheet-overview.md b/jp/components/spreadsheet-overview.md index 3b097883fa..04c8694a3d 100644 --- a/jp/components/spreadsheet-overview.md +++ b/jp/components/spreadsheet-overview.md @@ -94,7 +94,7 @@ Angular スプレッドシート モジュールがインポートされたの ``` -> \[!Note] +> [!Note] > > 次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) を保存およびロードしています。 diff --git a/jp/components/zoomslider-overview.md b/jp/components/zoomslider-overview.md index 64fc9f57f3..cc74b77c7c 100644 --- a/jp/components/zoomslider-overview.md +++ b/jp/components/zoomslider-overview.md @@ -35,8 +35,6 @@ Angular ZoomSlider コントロールは、範囲対応コントロールにズ | 拡張性|ZoomSlider コントロールは、追加設定なしで DataChart コントロール をサポートします。 | | 構成可能なズーム範囲ウィンドウ|ズーム範囲ウィンドウの初期幅、初期位置、最小サイズは、構成可能です。 | - - ## 依存関係 Angular chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -46,8 +44,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts ``` - - ## モジュールの要件 [`IgxZoomSliderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) を作成するには、以下のモジュールが必要です。