diff --git a/docs/angular/src/content/en/components/general/cli/auth-template.mdx b/docs/angular/src/content/en/components/general/cli/auth-template.mdx index d0a3bcae88..720b3fa748 100644 --- a/docs/angular/src/content/en/components/general/cli/auth-template.mdx +++ b/docs/angular/src/content/en/components/general/cli/auth-template.mdx @@ -5,46 +5,80 @@ keywords: igniteui for angular | angular schematics | templates | infragistics --- import { Image } from 'astro:assets'; -import cliIgxSideAuth from '../../../images/general/cli-igx-side-auth.png'; -import igxSideAuthLoginBar from '../../../images/general/igx-side-auth-login-bar.png'; -import igxSideAuthLoginDialogs from '../../../images/general/igx-side-auth-login-dialogs.png'; +import igxSideAuthSteps from '../../../images/general/igx-side-auth-steps.png'; +import igxSideAuthQuestion from '../../../images/general/igx-side-auth-question.png'; +import igxSideAuthLoginButton from '../../../images/general/igx-side-auth-login-button.png'; +import igxSideAuthProfileAvatar from '../../../images/general/igx-side-auth-profile-avatar.png'; +import igxSideAuthLoginDialog from '../../../images/general/igx-side-auth-login-dialog.png'; +import igxSideAuthRegisterDialog from '../../../images/general/igx-side-auth-register-dialog.png'; import igxSideAuthLoginGoogle from '../../../images/general/igx-side-auth-login-google.png'; -import igxSideAuthLoginSocial from '../../../images/general/igx-side-auth-login-social.png'; +import igxSideAuthLoginSocials from '../../../images/general/igx-side-auth-login-socials.png'; # Authentication Project Template -There are multiple versions of a project (called project templates) to choose from when using either the [`new` command with Ignite UI CLI](/general/cli/getting-started-with-cli#create-a-new-project), [with Ignite UI for Angular Schematics](/general/cli/getting-started-with-angular-schematics#create-a-new-project) or the [Step by step mode using Ignite UI CLI](/general/cli/step-by-step-guide-using-cli) or [Ignite UI for Angular Schematics](/general/cli/step-by-step-guide-using-angular-schematics). - -When creating Ignite UI for Angular project with Angular Schematics or Ignite UI CLI you can select a template with an basic implementation of a client-side authentication module that require as little additional setup as possible to jump-start apps with user management. +When creating an Ignite UI for Angular project with Angular Schematics or Ignite UI CLI, authentication is available as an add-on option when you select a supported navigation template. It provides a basic implementation of a client-side authentication module that requires as little additional setup as possible to jump-start apps with user management. ## Create Authentication Project -You can select an authentication project either when going through the Step by step experience after selection 'Ignite UI for Angular' project type: +### Interactive wizard + +Authentication is offered as an extra step in the interactive wizard after selecting a navigation template. The flow is: + +1. Choose a project template: **Empty Project**, **Side Navigation**, or **Side Navigation Mini**. +2. If **Side Navigation** or **Side Navigation Mini** is selected, the wizard prompts: _"Would you like to add authentication to this project?"_ +3. If **Empty Project** is selected, the authentication prompt is not shown. + +Step by step experience + +Answering yes generates one of two authenticated variants: -Step by step experience +- **Side Navigation + Authentication** - a side navigation shell extended with the authentication module +- **Side Navigation Mini + Authentication** - a compact side navigation shell extended with the authentication module -Or through the new command: +Auth question + +For a full walkthrough of the wizard steps, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli) or [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics). + +### Direct command (advanced) + +The authentication template IDs can also be passed directly to `ig new` or `ng new` for non-interactive project creation. These IDs are not shown in the interactive wizard because authentication is presented as a follow-up option there. + +**Side Navigation + Authentication - Ignite UI CLI:** ```bash ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth ``` -If you are using the Schematics collection run: +**Side Navigation + Authentication - Angular Schematics:** ```bash ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth ``` +**Side Navigation Mini + Authentication - Ignite UI CLI:** + +```bash +ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-mini-auth +``` + +**Side Navigation Mini + Authentication - Angular Schematics:** + +```bash +ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-mini-auth +``` + ## Description -This template builds upon the Side Navigation default and adds a profile page and a login section to the app's nav bar that will display a login button or an avatar of the logged in user: +Both the Side Navigation + Authentication and Side Navigation Mini + Authentication variants build upon their respective navigation base and add a profile page and a login section to the app's nav bar that will display a login button or an avatar of the logged in user: -Login bar +Login bar +Profile bar The login bar also integrates dialogs to sign in or up: -Login dialogs +Login dialog +Register dialog The project also supports various [external authentication providers](#add-a-third-party-social-provider). @@ -67,10 +101,9 @@ The project is setup for a single page app with REST API services, so the `Authe - `/register` - register with user details - `/extlogin` - passes along user info from external source -All endpoints are expected to return an JSON Wen Token(JWT) - or an error state with message. +All endpoints are expected to return a JSON Web Token (JWT) or an error state with message. -> **Note:** For demonstration purposes the project has a `services/fake-backend.service.ts` that intercepts requests . The `BackendProvider` in `authentication.module.ts` should **not** be used in production. Both the provider and the file should be removed when development starts. +> **Note:** For demonstration purposes the project has a `services/fake-backend.service.ts` that intercepts requests. The `BackendProvider` in `authentication.module.ts` should **not** be used in production. Both the provider and the file should be removed when development starts. As with any authentication model, using JWT-s requires security considerations. Particularly, the tokens received from the REST API are stored on the client. For seamless app reloads during development, the user data is stored in the browser local storage, which is potentially vulnerable to XSS attacks. @@ -81,7 +114,12 @@ As usual, always evaluate security aspects and adjust accordingly, the project s ## Add a third-party (social) provider -Your project's main module `src/app/app.module.ts` should be generated with the external authentication service injected and commented out initialization similar to: +The external authentication service is initialized in your project's app entry point. The exact location depends on the bootstrapping type selected during project creation: + +- **Standalone projects** (default) — initialization is in `src/app/app.config.ts` via a provider function. +- **NgModule projects** (`igx-ts-legacy`) — initialization is in `src/app/app.module.ts` via the `AppModule` constructor. + +In both cases the pattern is the same: the social provider calls are commented out and ready to be enabled. For example, in an NgModule project: ```ts // in app.module.ts @@ -94,7 +132,7 @@ export class AppModule { } ``` -To enable user login with a specific third-party provider all that is required is to un-comment the specific line and replace the `` with your app's client ID. +To enable user login with a specific third-party provider all that is required is to un-comment the specific line and replace the `` with your app's client ID. If you need to obtain one, for example for Google Account sign in, follow the provider-specific guide at: - [Obtain credentials](https://developers.google.com/identity/protocols/OpenIDConnect#getcredentials) @@ -131,7 +169,7 @@ https://developers.facebook.com/docs/apps/#register As you enable providers, all buttons will become active: -Social login options +Social login options ### Provider details diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx index 43e88ff780..a35ea5f552 100644 --- a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx +++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx @@ -65,13 +65,20 @@ By default, the project uses standalone components. To use NgModule-based bootst ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy ``` -The project is created in a directory named after the project. The following project templates are available: +The project is created in a directory named after the project. The following base project templates are available: | Template ID | Description | | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------ | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with a side navigation drawer | -| side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. | +| empty | Project structure with routing and a home page. Authentication is not available for this template. | +| side-nav | Project structure with a side navigation drawer. Supports authentication as an add-on (see below). | +| side-nav-mini | Project structure with a compact side navigation drawer. Supports authentication as an add-on (see below). | + +When using the interactive wizard, selecting `side-nav` or `side-nav-mini` triggers an additional prompt asking whether to add authentication. The following template IDs are generated and can also be used directly with `ng new` for non-interactive creation - they are not shown in the wizard's template list: + +| Template ID | Description | +| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- | +| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. | +| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. | The following arguments are available when creating a project: diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx index 16ec92998f..85b4cddccb 100644 --- a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx +++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx @@ -98,13 +98,20 @@ ig new my-app --framework=angular --type=igx-ts --assistants none --agents none As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project with standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`. -The new application is created in a directory named after the project. The following project templates are available for Angular: +The new application is created in a directory named after the project. The following base project templates are available for Angular: | Template ID | Description | | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------- | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with a side navigation drawer | -| side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. | +| empty | Project structure with routing and a home page. Authentication is not available for this template. | +| side-nav | Project structure with a side navigation drawer. Supports authentication as an add-on (see below). | +| side-nav-mini | Project structure with a compact side navigation drawer. Supports authentication as an add-on (see below). | + +When using the interactive wizard, selecting `side-nav` or `side-nav-mini` triggers an additional prompt asking whether to add authentication. The following template IDs are generated and can also be used directly with `ig new` for non-interactive creation - they are not shown in the wizard's template list: + +| Template ID | Description | +| :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | +| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. | +| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. | The following arguments are available when creating a project: diff --git a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx index 7781e2ad9d..e21d421b21 100644 --- a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx +++ b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx @@ -11,8 +11,9 @@ import play from '../../../images/general/play.svg'; import buildCLIappGif from '../../../images/general/buildCLIapp.gif'; import igStepByStepProjectType from '../../../images/general/ig-step-by-step-project-type.png'; import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png'; -import igStepByStepNewProjectTemplate from '../../../images/general/ig-step-by-step-new-project-template.png'; -import igStepByStepNewProjectTheme from '../../../images/general/ig-step-by-step-new-project-theme.png'; +import igStepByStepNewProjectTemplate from '../../../images/general/igx-side-auth-steps.png'; +import igStepByStepNewProjectQuestion from '../../../images/general/igx-side-auth-question.png'; +import igStepByStepNewProjectTheme from '../../../images/general/igx-side-auth-theme.png'; import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-step-new-project-action.png'; import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png'; import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png'; @@ -41,7 +42,7 @@ ng new --collection="@igniteui/angular-schematics" ## Create a New Project -The wizard guides you through four configuration steps before scaffolding the project. +The wizard guides you through the following configuration steps before scaffolding the project. When **Side Navigation** or **Side Navigation Mini** is selected as the template, an additional authentication step appears. ### Step 1: Choose a bootstrapping type @@ -59,14 +60,18 @@ Enter a name for the new application. The project is created in a directory with ### Step 3: Choose a project template -Navigate the available project templates using the arrow keys and press ENTER to confirm. Three templates are available: +Navigate the available project templates using the arrow keys and press ENTER to confirm. Three base templates are available: - **empty** - a project structure with routing and a home page, no pre-built navigation - **side-nav** - a project structure with a pre-built side navigation drawer -- **auth** - a side navigation project extended with a basic authentication module (see [Authentication Project Template](auth-template) for details) +- **side-nav-mini** - a project structure with a pre-built compact side navigation drawer Step by step prompt: choose project template +If you select **side-nav** or **side-nav-mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](auth-template) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **empty**, the authentication prompt is skipped. + +Step by step prompt: auth question + ### Step 4: Choose a theme Two theme options are available: @@ -76,7 +81,7 @@ Two theme options are available: Step by step prompt: choose default or custom theme -After completing these four steps, the wizard generates the project structure, then prompts you to [configure AI coding assistants](#ai-assistant-integration). Once AI configuration is complete, a Git repository is initialized and the initial state is committed. The wizard then asks whether to finish or continue by adding a component view. +After completing the above steps, the wizard generates the project structure, then prompts you to [configure AI coding assistants](#ai-assistant-integration). Once AI configuration is complete, a Git repository is initialized and the initial state is committed. The wizard then asks whether to finish or continue by adding a component view. Step by step prompt: finish or add a view diff --git a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx index 29b3da7f85..a5ae94c87a 100644 --- a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx +++ b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx @@ -12,8 +12,9 @@ import buildCLIappGif from '../../../images/general/buildCLIapp.gif'; import igStepByStepProjectTypeCli from '../../../images/general/ig-step-by-step-project-type-cli.png'; import igStepByStepScenarioTemplates from '../../../images/general/ig-step-by-step-scenario-templates.png'; import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png'; -import igStepByStepNewProjectTemplate from '../../../images/general/ig-step-by-step-new-project-template.png'; -import igStepByStepNewProjectTheme from '../../../images/general/ig-step-by-step-new-project-theme.png'; +import igStepByStepNewProjectTemplate from '../../../images/general/igx-side-auth-steps.png'; +import igStepByStepNewProjectQuestion from '../../../images/general/igx-side-auth-question.png'; +import igStepByStepNewProjectTheme from '../../../images/general/igx-side-auth-theme.png'; import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-step-new-project-action.png'; import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png'; import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png'; @@ -56,10 +57,14 @@ After selecting `Angular` as a framework, you will be prompted to choose the typ Step by step project type selection -Then you will be guided to choose one of the available project templates. You can create an empty project, a project with side navigation, or an [authentication project](auth-template) with a basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: +Then you will be guided to choose one of the available project templates. Three base templates are available: **Empty Project**, **Side Navigation**, and **Side Navigation Mini**. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: Step by step new project template selection +If you select **Side Navigation** or **Side Navigation Mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](auth-template) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **Empty Project**, the authentication prompt is skipped. + +Step by step auth question prompt + The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme in your project's `angular.json`. The custom option generates a color palette and theme configuration using the [Theming API](../../themes) in `app/styles.scss`. Step by step new project theme selection @@ -84,7 +89,7 @@ Use the arrow keys to navigate through the options and ENTER to select. For some Step by step component feature toggles -If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](/general/cli/component-templates#scenario-templates): +If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](component-templates#scenario-templates): Step by step scenario template selection diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-bar.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-bar.png deleted file mode 100644 index e05c68a291..0000000000 Binary files a/docs/angular/src/content/en/images/general/igx-side-auth-login-bar.png and /dev/null differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-button.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-button.png new file mode 100644 index 0000000000..6d389c13b8 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-login-button.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-dialog.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-dialog.png new file mode 100644 index 0000000000..c9ac5dbab3 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-login-dialog.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-dialogs.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-dialogs.png deleted file mode 100644 index 07867fc9fa..0000000000 Binary files a/docs/angular/src/content/en/images/general/igx-side-auth-login-dialogs.png and /dev/null differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-google.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-google.png index 109b65b07c..de5f51742a 100644 Binary files a/docs/angular/src/content/en/images/general/igx-side-auth-login-google.png and b/docs/angular/src/content/en/images/general/igx-side-auth-login-google.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-social.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-social.png deleted file mode 100644 index 241c0955ec..0000000000 Binary files a/docs/angular/src/content/en/images/general/igx-side-auth-login-social.png and /dev/null differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-login-socials.png b/docs/angular/src/content/en/images/general/igx-side-auth-login-socials.png new file mode 100644 index 0000000000..1c167446c2 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-login-socials.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-profile-avatar.png b/docs/angular/src/content/en/images/general/igx-side-auth-profile-avatar.png new file mode 100644 index 0000000000..b4e9910e75 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-profile-avatar.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-question.png b/docs/angular/src/content/en/images/general/igx-side-auth-question.png new file mode 100644 index 0000000000..4150445985 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-question.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-register-dialog.png b/docs/angular/src/content/en/images/general/igx-side-auth-register-dialog.png new file mode 100644 index 0000000000..57926b3b19 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-register-dialog.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-steps.png b/docs/angular/src/content/en/images/general/igx-side-auth-steps.png new file mode 100644 index 0000000000..3062e9a7d3 Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-steps.png differ diff --git a/docs/angular/src/content/en/images/general/igx-side-auth-theme.png b/docs/angular/src/content/en/images/general/igx-side-auth-theme.png new file mode 100644 index 0000000000..0c93ba4b7b Binary files /dev/null and b/docs/angular/src/content/en/images/general/igx-side-auth-theme.png differ diff --git a/docs/angular/src/content/jp/components/general/cli/auth-template.mdx b/docs/angular/src/content/jp/components/general/cli/auth-template.mdx index 64c2a061c4..bb04bc700f 100644 --- a/docs/angular/src/content/jp/components/general/cli/auth-template.mdx +++ b/docs/angular/src/content/jp/components/general/cli/auth-template.mdx @@ -6,46 +6,80 @@ _language: ja --- import { Image } from 'astro:assets'; -import cliIgxSideAuth from '../../../images/general/cli-igx-side-auth.png'; -import igxSideAuthLoginBar from '../../../images/general/igx-side-auth-login-bar.png'; -import igxSideAuthLoginDialogs from '../../../images/general/igx-side-auth-login-dialogs.png'; +import igxSideAuthSteps from '../../../images/general/igx-side-auth-steps.png'; +import igxSideAuthQuestion from '../../../images/general/igx-side-auth-question.png'; +import igxSideAuthLoginButton from '../../../images/general/igx-side-auth-login-button.png'; +import igxSideAuthProfileAvatar from '../../../images/general/igx-side-auth-profile-avatar.png'; +import igxSideAuthLoginDialog from '../../../images/general/igx-side-auth-login-dialog.png'; +import igxSideAuthRegisterDialog from '../../../images/general/igx-side-auth-register-dialog.png'; import igxSideAuthLoginGoogle from '../../../images/general/igx-side-auth-login-google.png'; -import igxSideAuthLoginSocial from '../../../images/general/igx-side-auth-login-social.png'; +import igxSideAuthLoginSocials from '../../../images/general/igx-side-auth-login-socials.png'; # 認証プロジェクト テンプレート -[Ignite UI CLI](getting-started-with-cli.md#create-a-new-project) (または [Ignite UI for Angular Schematics](getting-started-with-angular-schematics.md#create-a-new-project)) で `new` コマンドを使用する場合、または [Ignite UI CLI を使用したステップ バイ ステップ モード](step-by-step-guide-using-cli.md)/[Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md) を使用する場合は、プロジェクトの複数のバージョン (プロジェクト テンプレート) から選択できます。 - -Angular Schematics または Ignite UI CLI を使用して Angular プロジェクト作成する場合は、ユーザー管理でアプリを開始するために追加セットアップをできるだけ必要としないクライアント側認証モジュールの基本的な実装を含むテンプレートを選択できます。 +Angular Schematics または Ignite UI CLI を使用して Angular プロジェクトを作成する場合、認証はナビゲーション テンプレートを選択した後にアドオン オプションとして利用できます。ユーザー管理でアプリを素早く開始できるよう、追加セットアップをできるだけ必要としないクライアント側認証モジュールの基本的な実装を提供します。 ## 認証プロジェクトの作成 -'Ignite UI for Angular' プロジェクト タイプを選択した後、ステップバイステップの手順を実行する際に認証プロジェクトを選択できます。 +### インタラクティブ ウィザード + +認証はナビゲーション テンプレートを選択した後、インタラクティブ ウィザードの追加ステップとして提供されます。フローは次のとおりです。 + +1. プロジェクト テンプレートを選択します: **Empty Project**、**Side Navigation**、または **Side Navigation Mini**。 +2. **Side Navigation** または **Side Navigation Mini** を選択した場合、ウィザードが「このプロジェクトに認証を追加しますか?」というプロンプトを表示します。 +3. **Empty Project** を選択した場合、認証のプロンプトは表示されません。 + +Step by step experience + +「はい」と回答すると、次の 2 つの認証バリアントのいずれかが生成されます。 -Step by step experience +- **Side Navigation + 認証** - 認証モジュールで拡張されたサイド ナビゲーション シェル +- **Side Navigation Mini + 認証** - 認証モジュールで拡張されたコンパクトなサイド ナビゲーション シェル -または新しいコマンドを使用します。 +Auth question + +ウィザードの手順の完全なガイドは、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)または [Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)をご覧ください。 + +### 直接コマンド (上級者向け) + +認証テンプレート ID を `ig new` または `ng new` に直接渡して、非インタラクティブなプロジェクト作成を行うこともできます。認証はウィザードではフォローアップ オプションとして提供されるため、これらの ID はインタラクティブ ウィザードのテンプレート リストには表示されません。 + +**Side Navigation + 認証 - Ignite UI CLI:** ```bash ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth ``` -Schematics コレクションを使用する場合は、以下のコマンドを実行します。 +**Side Navigation + 認証 - Angular Schematics:** ```bash ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth ``` +**Side Navigation Mini + 認証 - Ignite UI CLI:** + +```bash +ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-mini-auth +``` + +**Side Navigation Mini + 認証 - Angular Schematics:** + +```bash +ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-mini-auth +``` + ## 説明 -このテンプレートはサイドナビゲーションのデフォルトに基づいて作成され、ログイン ページまたはログインユーザーのアバターを表示するプロファイル ページとログイン セクションをアプリのナビゲーションバーに追加します。 +Side Navigation + 認証バリアントと Side Navigation Mini + 認証バリアントはいずれも、それぞれのナビゲーション ベースに基づいて構築され、ログイン ボタンまたはログイン ユーザーのアバターを表示するプロファイル ページとログイン セクションをアプリのナビゲーション バーに追加します。 -Login bar +Login button +Profile avatar -ログインバーは、サインインまたはサインアップするためのダイアログも統合されます。 +ログイン バーには、サインインまたはサインアップするためのダイアログも統合されます。 -Login dialogs +Login dialog +Register dialog このプロジェクトは、さまざまな[外部認証プロバイダー](#サードパーティ-ソーシャル-プロバイダーを追加する)もサポートしています。 @@ -58,7 +92,7 @@ ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=sid - `authentication-routing.module.ts` は、ログイン関連のルートを設定します。 - `services/user.service.ts` の `UserService` は現在のユーザー状態を保持します。 - `services/authentication.service.ts` の `AuthenticationService` は、バックエンド API との通信に使用されます。 -- `Services/external-auth.service.ts` の `ExternalAuthService` は、サードパーティ ログインのプロバイダーを処理します。 +- `services/external-auth.service.ts` の `ExternalAuthService` は、サードパーティ ログインのプロバイダーを処理します。 ## 構成の要件 @@ -67,7 +101,7 @@ ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=sid - `/register` - ユーザー情報で登録します。 - `/extlogin` - 外部ソースからユーザー情報を渡します。 -すべてのエンドポイントは、JSON Wen Token (JWT) またはメッセージとともにエラー状態を返す必要があります。 +すべてのエンドポイントは、JSON Web Token (JWT) またはメッセージとともにエラー状態を返す必要があります。 > **注:**デモンストレーションの目的で、プロジェクトには要求をインターセプトする `services/fake-backend.service.ts` があります。`authentication.module.ts` の `BackendProvider` は、本番環境では使用しないでください。開発の開始時に、プロバイダーとファイルの両方を削除する必要があります。 @@ -77,12 +111,15 @@ ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=sid 常にセキュリティ面を評価し、状況に応じて調整します。提供されるプロジェクト構造は単なる出発点です。 -As usual, always evaluate security aspects and adjust accordingly, the project structure provided is merely a starting point. - ## サードパーティ (ソーシャル) プロバイダーを追加する -プロジェクトのメイン モジュール `src/app/app.module.ts` は、外部認証サービスを挿入して生成し、次のような初期化をコメントアウトします。 +外部認証サービスの初期化は、プロジェクト作成時に選択したブートストラップの種類によって場所が異なります。 + +- **スタンドアロン プロジェクト** (デフォルト) — `src/app/app.config.ts` のプロバイダー関数で初期化します。 +- **NgModule プロジェクト** (`igx-ts-legacy`) — `src/app/app.module.ts` の `AppModule` コンストラクターで初期化します。 + +どちらの場合も、ソーシャル プロバイダーの呼び出しはコメントアウトされた状態で生成されます。例えば、NgModule プロジェクトの場合: ```ts // in app.module.ts @@ -132,7 +169,7 @@ https://developers.facebook.com/docs/apps/#register プロバイダーを有効にすると、すべてのボタンがアクティブになります。 -Social login options +Social login options ### プロバイダーの詳細 diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx index 509615173e..3ab3e07c40 100644 --- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx +++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx @@ -7,57 +7,78 @@ last_updated: "2026-04-21" --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -## Ignite UI for Angular Schematics を使用した作業の開始 +# Ignite UI for Angular Schematics を使用した作業の開始 -はじめに [Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) をグローバルにインストールします。 +Ignite UI for Angular Schematics コレクションは、Ignite UI for Angular 用に事前設定された Angular プロジェクトとコンポーネント ビューをスキャフォールドするための Angular CLI schematics セットです。ネイティブの Angular CLI ワークフローに統合されており、プロジェクト作成には `ng new`、コンポーネント スキャフォールドには `ng g` を使用します。別のグローバル ツールをインストールする必要はありません。このコレクションは `@igniteui/angular-schematics` パッケージとして配布され、既存の Angular プロジェクトで `ng add igniteui-angular` を実行すると自動的に追加されます。 + +Schematics コレクションは MCP サーバーを実行しません。MCP サーバー プロセスは Ignite UI CLI によって提供され、`npx -y igniteui-cli mcp` で起動します。`ai-config` schematic は、別の CLI インストールなしで MCP クライアント接続を設定し Agent Skills をコピーします。このコレクションは Angular 専用です。React、Web Components、Blazor の同等機能については、各フレームワークのドキュメントを参照してください。 + +## Schematics コレクションのインストール + +npm を使用してグローバルにインストールします: ```cmd npm i -g @igniteui/angular-schematics ``` -上記のインストールにより、schematics が `ng new` コマンドのコレクション パラメーターを使用できるようになります。 - -`yarn` パッケージ マネージャーを使用している場合: +または、yarn を使用する場合: ```cmd yarn global add @igniteui/angular-schematics ``` -### ガイドの使用 +グローバル インストール後、コレクションは `ng new` の `--collection` 引数として利用可能になります。新しいプロジェクトをスキャフォールドせずに既存の Angular プロジェクトに Ignite UI for Angular を追加する場合は、次のコマンドを使用します: + +```cmd +ng add igniteui-angular +``` + +これにより、`igniteui-angular` パッケージがインストールされ、`@igniteui/angular-schematics` コレクションが登録され、依存関係、スタイル、テーマのインポートが自動的に設定されます。 -アプリケーションを最短でブートストラップする最も簡単な方法は、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)を使用する方法です。 +## 新しいプロジェクトの作成 -Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。 +Schematics コレクションにはプロジェクト作成のために 2 つのモードがあります: ガイド付きインタラクティブ ウィザードと引数を指定した直接 `ng new` コマンドです。 + +### ガイドを使用する + +ガイド付きウィザードは新しいプロジェクトの出発点として推奨されています。次のコマンドでアクティブにします: ```cmd ng new --collection="@igniteui/angular-schematics" ``` -## 新しいプロジェクトを作成します。 +ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)を参照してください。 -Ignite UI for Angular コントロールを使用するように設定されたアプリケーションを作成するには、コレクション オプションに `@igniteui/angular-schematics` を提供する `ng new` コマンドを実行します。 +### 直接プロジェクトを作成する + +Angular プロジェクトを非インタラクティブに作成するには、コレクションとテンプレートの引数を `ng new` に指定します: ```cmd ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav ``` -さらに、`--type=igx-ts-legacy` のようにプロジェクトの `type` を設定することで、モジュール ベースのブートストラップを使用してプロジェクトを生成することを指定できます。これを指定しないと、デフォルトでスタンドアロン コンポーネントを使用するプロジェクトが使用されます。 - -上記のように `@igniteui/angular-schematics` コレクションを提供せずに作成された Angular プロジェクトが既にある場合、以下のコマンドを使用して Ignite UI for Angular 製品を追加できます。 +デフォルトではスタンドアロン コンポーネントを使用します。NgModule ベースのブートストラップを使用するには、`--type=igx-ts-legacy` を追加します: ```cmd -ng add igniteui-angular +ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy ``` -新しいアプリケーションが同じ名前でディレクトリに作成されます (`newAngularProject`)。Ignite UI for Angular アプリケーションを作成するときに選択できるいくつかのプロジェクト テンプレートがあります。 +新しいアプリケーションがプロジェクト名のディレクトリに作成されます。利用できるベース プロジェクト テンプレートは以下のとおりです。 | テンプレートの ID | テンプレートの説明 | | --- | --- | -| empty | ルーティングとホーム ページを備えたプロジェクト構造 | -| side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造 | -| side-nav-auth | ユーザー認証モジュールで拡張されたサイド ナビゲーション プロジェクト
プロジェクト テンプレートの詳細は、[Angular 認証プロジェクト テンプレート](auth-template.md)トピックをご覧ください。 | +| empty | ルーティングとホーム ページを備えたプロジェクト構造。このテンプレートでは認証は利用できません。 | +| side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造。認証のアドオンをサポートします (以下参照)。 | +| side-nav-mini | コンパクトなサイド ナビゲーション ドロワーを備えたプロジェクト構造。認証のアドオンをサポートします (以下参照)。 | + +インタラクティブ ウィザードで `side-nav` または `side-nav-mini` を選択すると、認証を追加するかどうかを確認するプロンプトが表示されます。次のテンプレート ID が生成され、非インタラクティブな作成用に `ng new` に直接渡すこともできます。これらの ID はウィザードのテンプレート リストには表示されません。 -さらに、**引数**を指定してテーマを制御したり、パッケージのインストールをスキップしたりできます。 +| テンプレートの ID | テンプレートの説明 | +| :----------------- | --- | +| side-nav-auth | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 | +| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 | + +プロジェクトを作成する際に以下の**引数**を指定できます。
name @@ -73,29 +94,14 @@ ng add igniteui-angular
- framework (Ignite UI CLI only) - - - --framework (alias: -f) default value: "jquery" - - - - - プロジェクトの対象フレームワーク。サポートされるフレームワークは jQuery、Angular、および React です。 -
- - - -
- type (Ignite UI CLI only) + type --type (alias: -t) - - 使用可能なプロジェクト タイプは、選択したフレームワークによって異なります。 + プロジェクトのブートストラップ タイプ。NgModule ベースのブートストラップには igx-ts-legacy を使用します。省略するとスタンドアロン コンポーネントがデフォルトになります。
@@ -130,9 +136,7 @@ ng add igniteui-angular - - 特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。 - 現在、このオプションは、Angular igx-ts プロジェクトタイプの Ignite UI でのみ使用できます。 + プロジェクト作成時の npm パッケージの初期インストールをスキップします。 @@ -142,27 +146,21 @@ ng add igniteui-angular --template - - - - Use this option if there are different project templates for a specific framework type. - Currently this option is available only for Ignite UI for Angular igx-ts project types. + プロジェクト テンプレートを指定します。現在、Ignite UI for Angular の igx-ts プロジェクト タイプで使用できます。 -## テンプレートの追加 +## コンポーネント テンプレートの追加 -[利用可能な Ignite UI Angular テンプレート](component-templates.md)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定するか、[ステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md#add-view)を使用する必要があります。Angular Schematics、Ignite UI CLI で作成された既存のプロジェクト内、または Ignite UI for Angular が [`ng add` でインストールされている](../getting-started.md#ignite-ui-for-angular-のインストール)場合にのみサポートされます。 - -Schematics には、Ignite UI for Angular コレクションと `component [template] [name]` の `ng generate` を使用します。 +[利用可能な Ignite UI Angular テンプレート](component-templates.md)を追加するには、Ignite UI for Angular コレクションと `component` schematic を使用して `ng generate` を実行し、テンプレート ID と新しいコンポーネントの名前を指定します: ```cmd ng g @igniteui/angular-schematics:component grid newGrid ``` -すべての[利用可能なテンプレート](component-templates.md)のリスト。 +テンプレートの追加は、Angular Schematics、Ignite UI CLI で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md#ビューの追加)を参照してください。 -また、コンポーネントを登録するモジュールを指定するか、アプリ ナビゲーション ルートの自動生成をスキップできます。 +テンプレートを追加する際に以下の**引数**を指定できます。
module @@ -180,13 +178,8 @@ ng g @igniteui/angular-schematics:component grid newGrid 新しいコンポーネントを登録するモジュールの、/src/app/ folder を基準とした module.ts ファイルのパス。 ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts -
- - ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts -
-
skip-route @@ -208,13 +201,131 @@ ng g @igniteui/angular-schematics:start ## AI アシスタント統合 -Ignite UI for Angular Schematics コレクションには、Ignite UI for Angular Agent Skills と Ignite UI MCP サーバーをプロジェクトに一括設定する `ai-config` schematic が含まれています。Ignite UI for Angular パッケージをインストールした後、プロジェクト ルートから以下のコマンドを実行してください。 +Ignite UI for Angular Schematics コレクションには、プロジェクトの AI コーディング アシスタント統合を設定する `ai-config` schematic が含まれています。1 つのコマンドで次のことを行います: + +- **MCP サーバーの設定** - 選択したコーディング アシスタント用の MCP 設定ファイルに Ignite UI および Angular CLI MCP サーバー エントリを書き込みます +- **スキル ファイルのコピー** - Angular 固有のスキル ガイドをエージェント ディレクトリに追加します +- **手順ファイルの設定** - 各エージェントの手順ファイルにプロジェクト固有のガイダンスを書き込みます + +Ignite UI for Angular パッケージをインストールした後、プロジェクト ルートから実行します: ```cmd ng generate @igniteui/angular-schematics:ai-config ``` -これにより、Ignite UI for Angular Agent Skills が `.claude/skills/` にコピーされ、`@angular/cli`、`igniteui mcp`、`igniteui-theming-mcp` の 3 つの MCP サーバー エントリが `.vscode/mcp.json` に書き込まれます。ファイルが既に存在していて最新の状態であれば、コマンドは何も行いません。 +### フラグ リファレンス + +| フラグ | 値 | デフォルト | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | インタラクティブ モードでは対話形式; 非インタラクティブ モードでは `generic` | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | インタラクティブ モードでは対話形式; 非インタラクティブ モードでは `generic` + `claude` | + +### サポートされているコーディング アシスタント + +| コーディング アシスタント | 選択値 | 設定ファイル パス | ルート キー | +|-----------------|--------------|-------------|----------| +| Generic (Claude Code、VS Code など) | `generic` | `.mcp.json` | `mcpServers` | +| VS Code (GitHub Copilot) | `vscode` | `.vscode/mcp.json` | `servers` | +| Cursor | `cursor` | `.cursor/mcp.json` | `mcpServers` | +| Gemini | `gemini` | `.gemini/settings.json` | `mcpServers` | +| JetBrains Junie | `junie` | `.junie/mcp/mcp.json` | `mcpServers` | + +### サポートされている AI エージェント + +| エージェント | スキル ディレクトリ | 手順ファイル | +|-------|------------------|------------------| +| Generic | `.agents/skills` | `AGENTS.md` | +| Claude | `.claude/skills` | `.claude/CLAUDE.md` | +| Copilot | `.github/skills` | `.github/copilot-instructions.md` | +| Cursor | `.cursor/skills` | `.cursor/rules/cursor.mdc` | +| Codex | `.codex/skills` | `.codex/instructions.md` | +| Windsurf | `.windsurf/skills` | `.windsurf/rules/guidelines.md` | +| Gemini | `.gemini/skills` | `.gemini/GEMINI.md` | +| Junie | `.junie/skills` | `.junie/guidelines.md` | + +### 使用例 + +インタラクティブ - コーディング アシスタントとエージェントのプロンプトが表示されます: + +```bash +ng generate @igniteui/angular-schematics:ai-config +``` + +非インタラクティブ - アシスタントとエージェントを直接指定: + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot +``` + +MCP 設定のみスキップ: + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants none --agents claude generic +``` + +スキル ファイルと手順のみスキップ (MCP サーバーは設定されます): + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants vscode --agents none +``` + +この schematic は `ng add igniteui-angular` の一部としてもデフォルト (エージェント `["claude", "generic"]`、アシスタント `["generic"]`) で自動実行されます。 + +### MCP サーバー設定 + +この schematic は選択したコーディング アシスタントの設定ファイルに書き込み (またはマージし) ます。既存のサードパーティ MCP サーバー エントリは常に保持されます。Angular schematic 経由で実行した場合、Ignite UI サーバーと並んで `angular-cli` MCP サーバー エントリが自動的に追加されます。 + +**Generic、Cursor、Gemini、Junie** (`.mcp.json` およびその同等物、ルート キー `mcpServers`): + +```json +{ + "mcpServers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + }, + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +**VS Code / GitHub Copilot** (`.vscode/mcp.json`、ルート キー `servers`): + +```json +{ + "servers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + }, + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### スキル ファイル + +スキル ファイルは各エージェントのスキル ディレクトリにコピーされる Angular 固有のガイドです。インストール済みの Ignite UI パッケージから取得され、schematic を実行するたびに同期されます。既存のファイルはコンテンツが変更された場合のみ更新されます。 + + +パッケージのインストール前 (`--skip-install` などの場合) に `ai-config` を実行すると、schematic は組み込みのテンプレートにフォールバックします。インストール後にコマンドを再実行すると、インストールされたバージョンのスキル ファイルが反映されます。 + + +### 代わりに Ignite UI CLI を使用する Ignite UI CLI がグローバルにインストールされている場合、同等のコマンドは次のとおりです。 @@ -223,7 +334,7 @@ ig ai-config ``` -`ig ai-config` コマンドは `igniteui mcp` と `igniteui-theming-mcp` の 2 つの Ignite UI エントリのみを設定し、`@angular/cli` は登録しません。3 つのサーバーをすべて一括設定するには `ng generate @igniteui/angular-schematics:ai-config` を使用してください。 +`ig ai-config` コマンドは `igniteui-cli` と `igniteui-theming` の 2 つの Ignite UI エントリのみを設定し、`angular-cli` は登録しません。3 つのサーバーをすべて一括設定するには `ng generate @igniteui/angular-schematics:ai-config` を使用してください。 すべての AI クライアントおよび Agent Skills の設定手順の詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx index 093e2a0b99..c0f129da75 100644 --- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx +++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx @@ -11,33 +11,47 @@ import { Image } from 'astro:assets'; import play from '../../../images/general/play.svg'; import buildCLIappGif from '../../../images/general/buildCLIapp.gif'; -## Ignite UI CLI を使用した作業の開始 +# Ignite UI CLI を使用した作業の開始 -新しい Angular アプリケーションを最初から作成する場合、ユーザー フレンドリな付きエクスペリエンスを提供するため、以下に説明する方法を使用することをお勧めします。このガイドでは、すべてのセットアップ オプションについて説明します。 +Ignite UI CLI はスタンドアロンのグローバル コマンドライン ツールで、Ignite UI コンポーネント用に事前設定された Angular、React、jQuery プロジェクトをスキャフォールドします。ガイド付きウィザードによる初回セットアップ、スクリプト ワークフロー用の非インタラクティブな `new` および `add` コマンド、開発サーバー、そして AI コーディング アシスタントをリアルタイムの Ignite UI ドキュメントに接続するための組み込み MCP サーバーを提供します。 -はじめに [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) をグローバルにインストールします。 +Ignite UI CLI は Angular CLI の代替ではなく、並行して機能します。Ignite UI CLI で作成されたプロジェクトは標準の Angular ワークスペースであり、スキャフォールド後に `ng` コマンドと完全に互換性があります。 + +## Ignite UI CLI のインストール + +npm を使用してグローバルにインストールします: ```cmd npm install -g igniteui-cli ``` -`yarn` パッケージ マネージャーを使用している場合: +または、yarn を使用する場合: ```cmd yarn global add igniteui-cli ``` -### ガイドの使用 +インストールを確認します: + +```cmd +ig version +``` + +## 新しいプロジェクトの作成 + +Ignite UI CLI にはプロジェクト作成のために 2 つのモードがあります: ガイド付きインタラクティブ ウィザードと引数を指定した直接コマンドです。 + +### ガイドを使用する -アプリケーションを最短でブートストラップする最も簡単な方法は、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)を使用する方法です。 +ガイド付きウィザードは新しいプロジェクトの出発点として推奨されています。プロジェクト タイプ、名前、テンプレート、テーマの選択をガイドし、プロジェクトを自動的にスキャフォールドしてコミットします。 -Ignite UI for Angular CLI を使用してガイドをアクティブにするには、次のコマンドを実行します。 +ウィザードをアクティブにするには: ```cmd ig ``` -または +または: ```cmd ig new @@ -51,27 +65,54 @@ ig new

最初の Ignite UI CLI アプリを作成

-## 新しいプロジェクトを作成します。 +ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)を参照してください。 -[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) を使用する場合、`angular` をフレームワークとして提供し、`igx-ts` を `new` コマンドのプロジェクト タイプ引数として提供する必要があります。 +### 直接プロジェクトを作成する + +Angular プロジェクトを非インタラクティブに作成するには、フレームワークとして `angular`、プロジェクト タイプとして `igx-ts` を指定します。 + +```cmd +ig new my-app --framework=angular --type=igx-ts --template=side-nav +``` + +プロジェクト作成時に AI アシスタントとエージェントの設定を指定することもできます。 ```cmd -ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav +ig new my-app --framework=angular --type=igx-ts --template=side-nav --assistants generic --agents claude copilot ``` +AI 設定を完全にスキップするには: + +```cmd +ig new my-app --framework=angular --type=igx-ts --assistants none --agents none +``` + +**`ig new` 実行時の順序:** +1. プロジェクト ファイルが生成されます +2. AI 設定が新しいプロジェクト ディレクトリ内で実行されます (フラグが指定されていない場合はアシスタントとエージェントのプロンプトが表示されます) +3. Git が初期化されます (`--skip-git` を指定しない場合) +4. 依存関係がインストールされます (`--skip-install` を指定しない場合) + -`v13.1.0` 以降、`igx-ts` プロジェクト タイプはデフォルトでスタンドアロン コンポーネントを使用するプロジェクトを生成します。代わりにモジュールベースのブートストラップを使用したい場合は、`type` を `igx-ts-legacy` に設定できます。 +Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォルトでスタンドアロン コンポーネントを使用するプロジェクトを生成します。代わりにモジュールベースのブートストラップを使用するには、`--type=igx-ts-legacy` を設定してください。 -新しいアプリケーションが同じ名前でディレクトリに作成されます (`newAngularProject`)。Ignite UI for Angular アプリケーションを作成するときに選択できるいくつかのプロジェクト テンプレートがあります。 +新しいアプリケーションがプロジェクト名のディレクトリに作成されます (`newAngularProject`)。Ignite UI for Angular アプリケーションを作成するときに選択できるベース プロジェクト テンプレートは次のとおりです。 | テンプレートの ID | テンプレートの説明 | | --- | --- | -| empty | ルーティングとホームページを備えたプロジェクト構造 | -| side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造 | -| side-nav-auth | ユーザー認証モジュールで拡張されたサイド ナビゲーション プロジェクト
プロジェクト テンプレートの詳細は、[Angular 認証プロジェクト テンプレート](auth-template.md)トピックをご覧ください。 | +| empty | ルーティングとホームページを備えたプロジェクト構造。このテンプレートでは認証は利用できません。 | +| side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造。認証のアドオンをサポートします (以下参照)。 | +| side-nav-mini | コンパクトなサイド ナビゲーション ドロワーを備えたプロジェクト構造。認証のアドオンをサポートします (以下参照)。 | + +インタラクティブ ウィザードで `side-nav` または `side-nav-mini` を選択すると、認証を追加するかどうかを確認するプロンプトが表示されます。次のテンプレート ID が生成され、非インタラクティブな作成用に `ig new` に直接渡すこともできます。これらの ID はウィザードのテンプレート リストには表示されません。 + +| テンプレートの ID | テンプレートの説明 | +| :----------------- | --- | +| side-nav-auth | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 | +| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 | -さらに、**引数**を指定してテーマを制御したり、パッケージのインストールをスキップしたりできます。 +プロジェクトを作成する際に以下の**引数**を指定できます。
name @@ -140,8 +181,7 @@ ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav - 特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。 - 現在、このオプションは、Angular igx-ts プロジェクトタイプの Ignite UI でのみ使用できます。 + プロジェクト作成時の npm パッケージの初期インストールをスキップします。
@@ -151,13 +191,12 @@ ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav --template - Use this option if there are different project templates for a specific framework type. - Currently this option is available only for Ignite UI for Angular igx-ts project types. + 特定のフレームワーク タイプに複数のプロジェクト テンプレートがある場合にプロジェクト テンプレートを指定します。現在、Ignite UI for Angular の igx-ts プロジェクト タイプで使用できます。
-## テンプレートの追加 +## コンポーネント テンプレートの追加 -[利用可能な Ignite UI Angular テンプレート](component-templates.md)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定するか、[ステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md#add-view)を使用する必要があります。Angular Schematics、Ignite UI CLI で作成された既存のプロジェクト内、または Ignite UI for Angular が [`ng add` でインストールされている](../getting-started.md#ignite-ui-for-angular-のインストール)場合にのみサポートされます。 +[利用可能な Ignite UI Angular テンプレート](component-templates.md)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定します。 `ig add [template] [name]` コマンドを使用します。 @@ -167,7 +206,9 @@ ig add grid newGrid すべての[利用可能なテンプレート](component-templates.md)のリストを取得するには、プロジェクトディレクトリで [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) コマンドを実行することもできます。 -また、コンポーネントを登録するモジュールを指定するか、アプリ ナビゲーション ルートの自動生成をスキップできます。 +テンプレートの追加は、Ignite UI CLI、Angular Schematics で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md#add-view)を参照してください。 + +テンプレートを追加する際に以下の**引数**を指定できます。
module @@ -185,8 +226,6 @@ ig add grid newGrid ig add combo newCombo --module=myModule/myModule.module.ts
- ig add combo newCombo --module=myModule/myModule.module.ts -
skip-route @@ -210,12 +249,30 @@ ig start Ignite UI CLI には、AI コーディング アシスタント (GitHub Copilot、Claude、Cursor など) を最新の Ignite UI コンポーネント ドキュメントおよび API リファレンスに接続する組み込みの MCP (Model Context Protocol) サーバーが含まれています。設定後、AI アシスタントはコンポーネント API を照会したり、セットアップ ガイドを取得したり、コンテキストを切り替えずに正確な Ignite UI for Angular コードを生成したりできます。 -`ig new` でプロジェクトを作成した場合、スキャフォールディング時に VS Code MCP 設定が `.vscode/mcp.json` に生成され、Ignite UI for Angular Agent Skills が `.claude/skills/` にコピーされます。これらのファイルのいずれかまたは両方が欠けている既存のプロジェクトで作業している場合は、プロジェクト ルートから `ig ai-config` を実行して MCP 設定とスキルを一括セットアップしてください。 +`ig new` でプロジェクトを作成した場合、スキャフォールディング時に MCP 設定と Agent Skills が生成されます。既存のプロジェクトで作業している場合は、プロジェクト ルートから `ig ai-config` を実行して MCP サーバー、スキル ファイル、手順ファイルを一括セットアップしてください。 ```cmd ig ai-config ``` +このコマンドは複数のコーディング アシスタントと AI エージェントをサポートしています。 + +```cmd +ig ai-config --assistants generic vscode --agents claude copilot +``` + +| フラグ | 値 | デフォルト | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | インタラクティブ モードでは対話形式; 非インタラクティブ モードでは `generic` | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | インタラクティブ モードでは対話形式; 非インタラクティブ モードでは `generic` + `claude` | + +フラグを指定せずに実行すると、`ig ai-config` はインタラクティブ モードに入り、スペース キーで切り替え ENTER で確認しながらコーディング アシスタントとエージェントを選択するプロンプトを表示します。このプロンプトは `ig new` 実行時のウィザードのステップと同じです。 + +1. **コーディング アシスタントの選択** - MCP サーバー設定の対象を 1 つ以上選択 (Generic、VS Code、Cursor、Gemini、Junie)、またはスキップするには None。 +2. **AI エージェントの選択** - スキル ファイルと手順ファイルのエージェントを 1 つ以上選択 (Generic、Claude、Copilot、Cursor、Codex、Windsurf、Gemini、Junie)、またはスキップするには None。 + +インタラクティブ モードのデフォルトは、アシスタントは **Generic**、エージェントは **Generic + Claude** です。ウィザードのプロンプトの詳細については、[Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI コーディング アシスタントの設定](step-by-step-guide-using-cli.md#ai-コーディング-アシスタントの設定)を参照してください。 + AI クライアントを手動で設定する場合、または VS Code 以外のクライアントを使用する場合は、以下のコマンドで MCP サーバーを直接起動してください。 ```cmd @@ -233,7 +290,7 @@ ig mcp | [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | アプリケーションをビルドしてウェブ サーバーを開始、次にアプリケーションをデフォルト ブラウザーで開きます。 | [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | アプリケーションをアプトプット ディレクトリへビルドします。 | [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | サポートされるフレームワークおよびプロジェクト タイプのための新しいカスタム テンプレートを生成します。 -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | 使用可能なコマンドをリストして手順の簡単な説明を示います。 +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | 使用可能なコマンドをリストして手順の簡単な説明を示します。 | [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Ignite UI CLI 構成設定の読み取り / 書き込み操作を実行します。 | [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | 検索した用語についてインフラジスティックスのサポート情報を検索します。 | [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | 指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクト フォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。 diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx index ab99321a76..66364ce1fa 100644 --- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx +++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx @@ -11,12 +11,15 @@ import play from '../../../images/general/play.svg'; import buildCLIappGif from '../../../images/general/buildCLIapp.gif'; import igStepByStepProjectType from '../../../images/general/ig-step-by-step-project-type.png'; import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png'; -import igStepByStepNewProjectTemplate from '../../../images/general/ig-step-by-step-new-project-template.png'; -import igStepByStepNewProjectTheme from '../../../images/general/ig-step-by-step-new-project-theme.png'; +import igStepByStepNewProjectTemplate from '../../../images/general/igx-side-auth-steps.png'; +import igStepByStepNewProjectQuestion from '../../../images/general/igx-side-auth-question.png'; +import igStepByStepNewProjectTheme from '../../../images/general/igx-side-auth-theme.png'; import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-step-new-project-action.png'; import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png'; import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png'; import igStepByStepScenarioTemplates from '../../../images/general/ig-step-by-step-scenario-templates.png'; +import igStepByStepAiConfigAssistants from '../../../images/general/ig-step-by-step-ai-config-assistants.png'; +import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-ai-config-agents.png'; # Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド @@ -44,29 +47,52 @@ ng new --collection="@igniteui/angular-schematics" ## 新しいプロジェクトの作成 -まず、アプリケーションをブートストラップする方法として、モジュールとスタンドアロン コンポーネントのどちらを使用するのかを選択するように求められます。 +ウィザードはプロジェクトをスキャフォールドする前に、以下の設定手順を案内します。テンプレートとして **Side Navigation** または **Side Navigation Mini** を選択した場合、認証に関する追加手順が表示されます。 -Step by step project type +### ステップ 1: ブートストラップ タイプの選択 -次に、アプリケーションの名前を入力します。 +最初のプロンプトでは、スタンドアロン コンポーネントまたは NgModule のどちらを使用してアプリケーションをブートストラップするかを選択します。 -Step by step new project name +Step by step prompt: standalone components or NgModules -次に、利用可能なプロジェクト テンプレートのいずれかを選択します。空のプロジェクト、サイド ナビゲーションのあるプロジェクト、または基本認証モジュールのある[認証プロジェクト](auth-template.md)を作成できます。矢印キーを使用して使用可能なオプションをナビゲートし、ENTER を押して選択を確認します。 +スタンドアロン コンポーネントは Angular 17+ のデフォルトであり、新しいプロジェクトに推奨されます。既存の NgModule ベースのコードベースと統合する場合のみ NgModule を選択してください。 -Step by step new project template +### ステップ 2: プロジェクト名の入力 -次のステップでは、アプリケーションのテーマを選択します。デフォルトのオプションを選択すると、Ignite UI for Angular のデフォルト テーマの Ignite UI がプリコンパイルされた CSS ファイル (`igniteui-angular.css`) がプロジェクトの `angular.json` に含まれます。カスタムオプションは、`app/styles.scss` の [Theming API](../../themes.md) を使用して、カラーパレットとテーマのコードを生成します。 +新しいアプリケーションの名前を入力します。プロジェクトは同じ名前のディレクトリに作成されます。 -Step by step new project theme +Step by step prompt: enter project name -上記の手順を完了すると、アプリケーション構造が生成され、git リポジトリが初期化され、プロジェクトがコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。 +### ステップ 3: プロジェクト テンプレートの選択 + +矢印キーを使用して利用可能なプロジェクト テンプレートを移動し、ENTER を押して確認します。3 つのベース テンプレートが利用可能です。 + +- **empty** - ルーティングとホームページを備えたプロジェクト構造。ナビゲーションは事前構築されていません。 +- **side-nav** - 事前構築されたサイド ナビゲーション ドロワーを備えたプロジェクト構造。 +- **side-nav-mini** - 事前構築されたコンパクトなサイド ナビゲーション ドロワーを備えたプロジェクト構造。 + +Step by step prompt: choose project template + +**side-nav** または **side-nav-mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.md)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**empty** を選択した場合、認証のプロンプトはスキップされます。 + +Step by step prompt: auth question + +### ステップ 4: テーマの選択 + +2 つのテーマ オプションが利用可能です。 + +- **default** - `angular.json` に Ignite UI for Angular Material ベースのデフォルト テーマのプリコンパイル済み CSS ファイル (`igniteui-angular.css`) を含めます。 +- **custom** - `app/styles.scss` にカスタマイズ可能な [Theming API](../../themes.md) を使用したカラーパレットとテーマ設定を生成します。 + +Step by step prompt: choose default or custom theme + +上記の手順を完了すると、アプリケーション構造が生成されます。次に、ウィザードは [AI コーディング アシスタントの設定](#ai-アシスタント統合)を求めるプロンプトを表示します。AI の設定が完了すると、git リポジトリが初期化され、初期状態がコミットされます。次に、プロセスを完了するか、コンポーネント ビューを追加するかのプロンプトが表示されます。 Step by step new project action ## ビューの追加 -Ignite UI CLI は、プロジェクトに追加できる複数のコンポーネント テンプレート、およびより詳細なシナリオ テンプレートをサポートしています。このモードは、プロジェクトの作成が完了した後、または以下のコマンドを使用して既存のプロジェクト内でアクティブにできます。 +Ignite UI for Angular Schematics コレクションは、プロジェクトに追加できる複数のコンポーネント テンプレート、およびより詳細なシナリオ テンプレートをサポートしています。このモードは、プロジェクトの作成が完了した後、または以下のコマンドを使用して既存のプロジェクト内でアクティブにできます。 Schematics コレクションを使用してステップバイステップ モードをアクティブにするには、`component`(alias:`c`) schematic を実行します。 @@ -88,6 +114,55 @@ ng g @igniteui/angular-schematics:component Scenario templates -アプリケーションにテンプレートを追加した後、プロセスを完了するかコントロールの追加を続行するかどうかを選択します。プロセスの完了を選択すると、必要なパッケージが (プロジェクト作成時に) インストールされ、アプリケーションがデフォルトのブラウザーで開かれます。 +アプリケーションにテンプレートを追加した後、さらにビューを追加するかプロセスを完了するかを選択します。プロセスの完了を選択すると、残りのパッケージ依存関係がインストールされ、アプリケーションがデフォルトのブラウザーで開かれます。 + +ウィザードを使用せずに後から Ignite UI for Angular ビューをプロジェクトに追加するには、直接 schematic コマンドを使用します。 + +```cmd +ng g @igniteui/angular-schematics:c [template] [name] +``` + +## AI アシスタント統合 + +ブートストラップ タイプ、プロジェクト名、テンプレート、テーマを選択した後、ウィザードは AI コーディング アシスタント統合の設定を求めるプロンプトを表示します。このステップは `ng generate @igniteui/angular-schematics:ai-config` と同じロジックを実行しますが、プロジェクト作成フローに組み込まれています。 + +### コーディング アシスタントの選択 + +MCP サーバーを設定するコーディング アシスタントを選択するように求められます。スペース キーで選択を切り替え、ENTER で確認します。 + +Step by step prompt: choose coding assistants for MCP configuration + +- **Generic** (Claude Code、VS Code など) - `.mcp.json` に書き込み +- **VS Code** (GitHub Copilot) - `.vscode/mcp.json` に書き込み +- **Cursor** - `.cursor/mcp.json` に書き込み +- **Gemini** - `.gemini/settings.json` に書き込み +- **JetBrains Junie** - `.junie/mcp/mcp.json` に書き込み +- **None** - MCP 設定をスキップ + +デフォルトの選択は **Generic** です。**None** を選択すると、MCP サーバーの設定が完全にスキップされます。 + +### AI エージェントの選択 + +次に、スキル ファイルと手順を設定する AI エージェントを選択するように求められます。 + +Step by step prompt: choose AI agents for skill files and instructions + +- **Generic** - `.agents/skills/` および `AGENTS.md` +- **Claude** - `.claude/skills/` および `.claude/CLAUDE.md` +- **Copilot** - `.github/skills/` および `.github/copilot-instructions.md` +- **Cursor** - `.cursor/skills/` および `.cursor/rules/cursor.mdc` +- **Codex** - `.codex/skills/` および `.codex/instructions.md` +- **Windsurf** - `.windsurf/skills/` および `.windsurf/rules/guidelines.md` +- **Gemini** - `.gemini/skills/` および `.gemini/GEMINI.md` +- **Junie** - `.junie/skills/` および `.junie/guidelines.md` +- **None** - スキル ファイルと手順をスキップ + +デフォルトの選択は **Generic** と **Claude** です。**None** を選択すると、エージェントの設定が完全にスキップされます。 + +Angular schematic 経由で実行した場合、Ignite UI サーバーと並んで `angular-cli` MCP サーバー エントリが自動的に追加されます。 + + +非インタラクティブなプロジェクト作成時に AI 設定のプロンプトを完全にスキップするには、`ng new` に `--assistants none --agents none` を渡します。後で AI 設定を再実行するには、プロジェクト ルートから `ng generate @igniteui/angular-schematics:ai-config` を使用してください。 + -`ng g @igniteui/angular-schematics:c [template] [name]` コマンドを使用して、後からいつでも、Ignite UI for Angular ビューをアプリケーションに追加できます。 +MCP クライアント設定と利用可能なツールの詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx index 29d8d3008a..1cc90a4e08 100644 --- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx +++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx @@ -12,11 +12,14 @@ import buildCLIappGif from '../../../images/general/buildCLIapp.gif'; import igStepByStepProjectTypeCli from '../../../images/general/ig-step-by-step-project-type-cli.png'; import igStepByStepScenarioTemplates from '../../../images/general/ig-step-by-step-scenario-templates.png'; import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png'; -import igStepByStepNewProjectTemplate from '../../../images/general/ig-step-by-step-new-project-template.png'; -import igStepByStepNewProjectTheme from '../../../images/general/ig-step-by-step-new-project-theme.png'; +import igStepByStepNewProjectTemplate from '../../../images/general/igx-side-auth-steps.png'; +import igStepByStepNewProjectQuestion from '../../../images/general/igx-side-auth-question.png'; +import igStepByStepNewProjectTheme from '../../../images/general/igx-side-auth-theme.png'; import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-step-new-project-action.png'; import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png'; import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png'; +import igStepByStepAiConfigAssistants from '../../../images/general/ig-step-by-step-ai-config-assistants.png'; +import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-ai-config-agents.png'; # Ignite UI CLI を使用したステップ バイ ステップ ガイド @@ -57,15 +60,19 @@ ig new フレームワークとして `Angular` を選択すると、生成するプロジェクトのタイプを選択するように求められます。 -次に、利用可能なプロジェクト テンプレートのいずれかを選択します。空のプロジェクト、サイド ナビゲーションのあるプロジェクト、または基本認証モジュールのある[認証プロジェクト](auth-template.md)を作成できます。矢印キーを使用して使用可能なオプションをナビゲートし、ENTER を押して選択を確認します。 +次に、利用可能なプロジェクト テンプレートのいずれかを選択します。3 つのベース テンプレートが利用可能です: **Empty Project**、**Side Navigation**、**Side Navigation Mini**。矢印キーを使用して使用可能なオプションをナビゲートし、ENTER を押して選択を確認します。 Step by step new project template selection +**Side Navigation** または **Side Navigation Mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.md)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**Empty Project** を選択した場合、認証のプロンプトはスキップされます。 + +Step by step auth question prompt + 次のステップでは、アプリケーションのテーマを選択します。デフォルトのオプションを選択すると、Ignite UI for Angular のデフォルト テーマの Ignite UI がプリコンパイルされた CSS ファイル (`igniteui-angular.css`) がプロジェクトの `angular.json` に含まれます。カスタムオプションは、`app/styles.scss` の [Theming API](../../themes) を使用して、カラーパレットとテーマのコードを生成します。 Step by step new project theme selection -上記の手順を完了すると、アプリケーション構造が生成され、git リポジトリが初期化され、プロジェクトがコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。 +上記の手順を完了すると、アプリケーション構造が生成されます。次に、AI コーディング アシスタントの設定を求めるプロンプトが表示されます。AI の設定が完了すると、git リポジトリが初期化され、プロジェクトがコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。 Step by step new project action prompt @@ -95,5 +102,49 @@ ig add アプリケーションにテンプレートを追加した後、プロセスを完了するかコントロールの追加を続行するかどうかを選択します。プロセスの完了を選択すると、必要なパッケージが (プロジェクト作成時に) インストールされ、アプリケーションがデフォルトのブラウザーで開かれます。 -以下の構文を使用して [`add`](getting-started-with-cli.md#add-template) コマンドを使用すると、後からいつでも、Ignite UI for Angular ビューをアプリケーションに追加できます。 -`ig add [template] [name]`. +ウィザードを使用せずに後から Ignite UI for Angular ビューをプロジェクトに追加するには、直接 `add` コマンドを使用します。 + +```bash +ig add [template] [name] +``` + +## AI コーディング アシスタントの設定 + +フレームワーク、プロジェクト タイプ、テンプレート、テーマを選択した後、ウィザードは AI コーディング アシスタント統合の設定を求めるプロンプトを表示します。このステップは `ig ai-config` と同じロジックを実行しますが、プロジェクト作成フローに組み込まれています。 + +### コーディング アシスタントの選択 + +MCP サーバーを設定するコーディング アシスタントを選択するように求められます。スペース キーで選択を切り替え、ENTER で確認します。 + +Step by step AI config coding assistants prompt + +- **Generic** (Claude Code、VS Code など) - `.mcp.json` に書き込み +- **VS Code** (GitHub Copilot) - `.vscode/mcp.json` に書き込み +- **Cursor** - `.cursor/mcp.json` に書き込み +- **Gemini** - `.gemini/settings.json` に書き込み +- **JetBrains Junie** - `.junie/mcp/mcp.json` に書き込み +- **None** - MCP 設定をスキップ + +デフォルトの選択は **Generic** です。**None** を選択すると、MCP サーバーの設定が完全にスキップされます。 + +### AI エージェントの選択 + +次に、スキル ファイルと手順を設定する AI エージェントを選択するように求められます。 + +Step by step AI config agents prompt + +- **Generic** - `.agents/skills/` および `AGENTS.md` +- **Claude** - `.claude/skills/` および `.claude/CLAUDE.md` +- **Copilot** - `.github/skills/` および `.github/copilot-instructions.md` +- **Cursor** - `.cursor/skills/` および `.cursor/rules/cursor.mdc` +- **Codex** - `.codex/skills/` および `.codex/instructions.md` +- **Windsurf** - `.windsurf/skills/` および `.windsurf/rules/guidelines.md` +- **Gemini** - `.gemini/skills/` および `.gemini/GEMINI.md` +- **Junie** - `.junie/skills/` および `.junie/guidelines.md` +- **None** - スキル ファイルと手順をスキップ + +デフォルトの選択は **Generic** と **Claude** です。**None** を選択すると、エージェントの設定が完全にスキップされます。 + + +非インタラクティブなプロジェクト作成時に AI 設定のプロンプトを完全にスキップするには、`ig new` に `--assistants none --agents none` を渡します。後で AI 設定を再実行するには、プロジェクト ルートから `ig ai-config` を使用してください。 + diff --git a/docs/angular/src/content/jp/images/general/ig-step-by-step-ai-config-agents.png b/docs/angular/src/content/jp/images/general/ig-step-by-step-ai-config-agents.png new file mode 100644 index 0000000000..0da02cc710 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/ig-step-by-step-ai-config-agents.png differ diff --git a/docs/angular/src/content/jp/images/general/ig-step-by-step-ai-config-assistants.png b/docs/angular/src/content/jp/images/general/ig-step-by-step-ai-config-assistants.png new file mode 100644 index 0000000000..2b4300b667 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/ig-step-by-step-ai-config-assistants.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-bar.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-bar.png deleted file mode 100644 index e05c68a291..0000000000 Binary files a/docs/angular/src/content/jp/images/general/igx-side-auth-login-bar.png and /dev/null differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-button.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-button.png new file mode 100644 index 0000000000..6d389c13b8 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-login-button.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-dialog.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-dialog.png new file mode 100644 index 0000000000..c9ac5dbab3 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-login-dialog.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-dialogs.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-dialogs.png deleted file mode 100644 index 07867fc9fa..0000000000 Binary files a/docs/angular/src/content/jp/images/general/igx-side-auth-login-dialogs.png and /dev/null differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-google.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-google.png index 109b65b07c..4dc717f8bb 100644 Binary files a/docs/angular/src/content/jp/images/general/igx-side-auth-login-google.png and b/docs/angular/src/content/jp/images/general/igx-side-auth-login-google.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-social.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-social.png deleted file mode 100644 index 241c0955ec..0000000000 Binary files a/docs/angular/src/content/jp/images/general/igx-side-auth-login-social.png and /dev/null differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-login-socials.png b/docs/angular/src/content/jp/images/general/igx-side-auth-login-socials.png new file mode 100644 index 0000000000..447de4b31e Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-login-socials.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-profile-avatar.png b/docs/angular/src/content/jp/images/general/igx-side-auth-profile-avatar.png new file mode 100644 index 0000000000..b4e9910e75 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-profile-avatar.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-question.png b/docs/angular/src/content/jp/images/general/igx-side-auth-question.png new file mode 100644 index 0000000000..4150445985 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-question.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-register-dialog.png b/docs/angular/src/content/jp/images/general/igx-side-auth-register-dialog.png new file mode 100644 index 0000000000..57926b3b19 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-register-dialog.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-steps.png b/docs/angular/src/content/jp/images/general/igx-side-auth-steps.png new file mode 100644 index 0000000000..3062e9a7d3 Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-steps.png differ diff --git a/docs/angular/src/content/jp/images/general/igx-side-auth-theme.png b/docs/angular/src/content/jp/images/general/igx-side-auth-theme.png new file mode 100644 index 0000000000..0c93ba4b7b Binary files /dev/null and b/docs/angular/src/content/jp/images/general/igx-side-auth-theme.png differ diff --git a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx index c93f0a272d..4a1e1d190f 100644 --- a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx +++ b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx @@ -136,13 +136,13 @@ npx ig new my-app --framework=angular --type=igx-ts --template=empty ```bash -ig new my-app --framework=react --type=igr-ts --template=top-nav +ig new my-app --framework=react --type=igr-ts --template=side-nav ``` Matching `npx` form: ```bash -npx ig new my-app --framework=react --template=top-nav +npx ig new my-app --framework=react --template=side-nav ``` diff --git a/docs/xplat/src/content/en/components/general-cli-overview.mdx b/docs/xplat/src/content/en/components/general-cli-overview.mdx index 1f14544815..1025f5d413 100644 --- a/docs/xplat/src/content/en/components/general-cli-overview.mdx +++ b/docs/xplat/src/content/en/components/general-cli-overview.mdx @@ -68,16 +68,23 @@ For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Us To create a React project non-interactively, provide `react` as the framework and `igr-ts` as the project type: ```cmd -ig new --framework=react --type=igr-ts --template=top-nav +ig new --framework=react --type=igr-ts --template=side-nav ``` -The following project templates are available for React: +The following base project templates are available for React: -| Template ID | Description | -| :---------- | :------------------------------------------------- | -| empty | Minimal project structure with no predefined views | -| base | Project structure with a home page | -| top-nav | Project structure with a top navigation bar | +| Template ID | Description | +| :------------ | :-------------------------------------------------------------------------- | +| empty | Minimal project structure with no predefined views. Authentication is not available for this template. | +| side-nav | Project structure with a side navigation drawer. Supports authentication as an add-on (see below). | +| side-nav-mini | Project structure with a compact side navigation drawer. Supports authentication as an add-on (see below). | + +When using the interactive wizard, selecting `side-nav` or `side-nav-mini` triggers an additional prompt asking whether to add authentication. Selecting `empty` skips the authentication prompt. The following template IDs are generated and can also be used directly with `ig new` for non-interactive creation - they are not shown in the wizard's template list: + +| Template ID | Description | +| :----------------- | :----------------------------------------------- | +| side-nav-auth | Side navigation extended with authentication. | +| side-nav-mini-auth | Side navigation mini extended with authentication. | @@ -88,13 +95,20 @@ To create a Web Components project non-interactively, provide `webcomponents` as ig new --framework=webcomponents --type=igc-ts --template=side-nav ``` -The following project templates are available for Web Components: +The following base project templates are available for Web Components: + +| Template ID | Description | +| :------------ | :-------------------------------------------------------------------------- | +| empty | Minimal project structure with no predefined views. Authentication is not available for this template. | +| side-nav | Project structure with a side navigation drawer. Supports authentication as an add-on (see below). | +| side-nav-mini | Project structure with a compact side navigation drawer. Supports authentication as an add-on (see below). | + +When using the interactive wizard, selecting `side-nav` or `side-nav-mini` triggers an additional prompt asking whether to add authentication. Selecting `empty` skips the authentication prompt. The following template IDs are generated and can also be used directly with `ig new` for non-interactive creation - they are not shown in the wizard's template list: -| Template ID | Description | -| :---------- | :------------------------------------------------- | -| empty | Minimal project structure with no predefined views | -| base | Project structure with a home page | -| side-nav | Project structure with a side navigation drawer | +| Template ID | Description | +| :----------------- | :----------------------------------------------- | +| side-nav-auth | Side navigation extended with authentication. | +| side-nav-mini-auth | Side navigation mini extended with authentication. | @@ -144,13 +158,13 @@ Navigate through the options using the arrow keys, toggle selections with SPACE, To skip the AI configuration prompts entirely during project creation, pass `--assistants none --agents none`: ```cmd -ig new my-app --framework=react --type=igr-ts --template=top-nav --assistants none --agents none +ig new my-app --framework=react --type=igr-ts --template=side-nav --assistants none --agents none ``` To auto-configure AI tools without prompting, specify the desired values: ```cmd -ig new my-app --framework=react --type=igr-ts --template=top-nav --assistants vscode --agents copilot claude +ig new my-app --framework=react --type=igr-ts --template=side-nav --assistants vscode --agents copilot claude ``` diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx index 5f29ab52aa..cb7fbedd64 100644 --- a/docs/xplat/src/content/en/components/general-getting-started.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started.mdx @@ -69,15 +69,15 @@ If you want to get a guided experience through the available options, you can in ig ``` -Then choose `React` as the framework and `Ignite UI for React TS` as the project type. Select the `Default Top Navigation` project template, add a specific component/view, or select `Complete & Run`. +Then choose `React` as the framework and `Ignite UI for React TS` as the project type. Select **Side Navigation** or **Side Navigation Mini** to start with a navigation layout. After either navigation template is selected, the wizard asks whether to add authentication. The **Empty** template does not show the authentication option. You can then add a specific component/view or select `Complete & Run`. Or create a project directly in one command, for example: ```cmd -ig new --framework=react --type=igr-ts --template=top-nav +ig new --framework=react --type=igr-ts --template=side-nav ``` -For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). +For a step-by-step walkthrough of the wizard and the authentication add-on flow, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands, template IDs, and direct authentication template usage, see the [CLI Overview](general-cli-overview.md). If you added a Grid component during the prompts, once the application is running you should see something similar to the following: @@ -193,7 +193,7 @@ If you want to get a guided experience through the available options, you can in ig ``` -Then choose Web Components as framework, select `Base` project template, add a specific component/view or select `Complete & Run`. +Then choose Web Components as framework. Select **Side Navigation** or **Side Navigation Mini** to start with a navigation layout. After either navigation template is selected, the wizard asks whether to add authentication. The **Empty** template does not show the authentication option. You can then add a specific component/view or select `Complete & Run`. Or create a project directly in one command, for example: @@ -201,7 +201,7 @@ Or create a project directly in one command, for example: ig new --framework=webcomponents --type=igc-ts --template=side-nav ``` -For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). +For a step-by-step walkthrough of the wizard and the authentication add-on flow, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands, template IDs, and direct authentication template usage, see the [CLI Overview](general-cli-overview.md). ## Install Polyfills diff --git a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx index e776dd304f..1b24d1f79d 100644 --- a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx +++ b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx @@ -65,19 +65,21 @@ Choose one of the available project templates. Navigate through the options usin | Template | Description | | :--------------- | :-------------------------------------------------- | -| Empty | Minimal project structure with no predefined views | -| Base | Project structure with a home page | -| Top Navigation | Project structure with a top navigation bar | +| Empty | Minimal project structure with no predefined views. Authentication is not available for this template. | +| Side Navigation | Project structure with a side navigation drawer | +| Side Navigation Mini | Project structure with a compact side navigation drawer | | Template | Description | | :--------------- | :-------------------------------------------------- | -| Empty | Minimal project structure with no predefined views | -| Base | Project structure with a home page | +| Empty | Minimal project structure with no predefined views. Authentication is not available for this template. | | Side Navigation | Project structure with a side navigation drawer | +| Side Navigation Mini | Project structure with a compact side navigation drawer | +If you select **Side Navigation** or **Side Navigation Mini**, the wizard prompts you with an additional step asking whether to add authentication to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **Empty**, the authentication prompt is skipped. + ### Select a theme Choose a theme for your application: @@ -118,7 +120,7 @@ Navigate through the options using the arrow keys, toggle selections with SPACE, To bypass these prompts in non-interactive mode, pass `--assistants` and `--agents` flags directly to `ig new`: ```cmd -ig new my-app --framework=react --type=igr-ts --template=top-nav --assistants vscode --agents copilot claude +ig new my-app --framework=react --type=igr-ts --template=side-nav --assistants vscode --agents copilot claude ``` For more details on the available flag values, see [Ignite UI CLI Overview](general-cli-overview.md#ai-configuration-during-project-creation). diff --git a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx index 91f8a802ab..68bd4f677b 100644 --- a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx +++ b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx @@ -72,19 +72,19 @@ npx -y igniteui-cli mcp Ignite UI CLI MCP を開始するには 3 つの方法があります。 > **推奨 - CLI ファースト** - 最初に `ig new` または `npx --package igniteui-cli igniteui new` コマンドにより Ignite UI CLI を使ってプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、VS Code 用の `.vscode/mcp.json` を自動的に作成するため、これが最も簡単なセットアップです。その後、生成された MCP 構成を確認し、AI クライアントでプロジェクトを開くだけです。 + 最初に `ig new` または `npx --package igniteui-cli igniteui new` コマンドにより Ignite UI CLI を使ってプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、構成する AI クライアントとエージェントを選択するプロンプトを表示するため、これが最も簡単なセットアップです。その後、生成された MCP 構成を確認し、AI クライアントでプロジェクトを開くだけです。 > **空のフォルダー** 完全に空のフォルダーから始め、MCP 構成を手動で追加してから、アシスタントにチャットを通じてプロジェクトを作成するよう依頼します。このパスは、最初に CLI を自分で実行するのではなく、MCP でプロジェクト作成フローを最初から動かしたい場合に便利です。 > **既存プロジェクト** - 既存のプロジェクトに MCP 構成を追加し、現在のコードベースで作業を続けます。このパスは、プロジェクトが既に存在し、プロジェクトの変更、コンポーネント作業、ドキュメントへの質問を、何も再生成することなくアシスタントに支援させたい場合に便利です。 + 既存のプロジェクトに MCP 構成を追加し、現在のコードベースで作業を続けます。`ig ai-config` (Angular プロジェクトの場合は `ng generate @igniteui/angular-schematics:ai-config`) をプロジェクト ルートから実行して、選択した AI クライアント向けに MCP 構成を書き込み、エージェント スキルをプロジェクトにコピーします。コマンドはどのクライアントとエージェントを構成するかを選択するプロンプトを表示します。 3 つのパスはすべて同じ MCP サーバーを使用します。違いは、プロンプトを開始する前にプロジェクトがどのように準備されるかだけです。 - **CLI ファースト**の手順では、Ignite UI CLI がプロジェクトを作成し、最初の MCP 構成を準備します - **空のフォルダー**の手順では、最初に MCP 構成を作成し、その後アシスタントにプロジェクトを作成させます -- **既存プロジェクト**の手順では、MCP を現在のコードベースにアタッチし、既存のものから続行します +- **既存プロジェクト**の手順では、`ig ai-config` を実行して選択したクライアント向けに MCP 構成を書き込み、エージェント スキルを自動的にコピーします いずれの場合も、MCP サーバーが接続されて AI クライアントで表示されたら、アシスタントは同じセッションで作業を続けることができます。 @@ -137,26 +137,26 @@ npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts ```bash -ig new my-app --framework=react +ig new my-app --framework=react --type=igr-ts --template=side-nav ``` `npx` で実行する場合: ```bash -npx --package igniteui-cli igniteui new my-app --framework=react +npx ig new my-app --framework=react --template=side-nav ``` ```bash -ig new my-app --framework=webcomponents +ig new my-app --framework=webcomponents --template=side-nav ``` `npx` で実行する場合: ```bash -npx --package igniteui-cli igniteui new my-app --framework=webcomponents +npx ig new my-app --framework=webcomponents --template=side-nav ``` @@ -172,7 +172,7 @@ npx --package igniteui-cli igniteui new my-app --framework=webcomponents ### VS Code -VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します。 +VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートから `ig ai-config` (Angular の場合は `ng generate @igniteui/angular-schematics:ai-config`) を実行するとこのファイルを自動的に生成できます。手動で構成する場合は、プロジェクト ルートの `.vscode/mcp.json` を作成または編集します。 ```json { @@ -362,8 +362,8 @@ MCP サーバーは、AI がプロンプトに基づいて自動的に使用す | `get_doc` | ケバブ ケース名 (例: `grid-editing`、`combo-overview`) で特定のコンポーネント ドキュメントの完全なマークダウン コンテンツを取得します。コード サンプル、テーブル、リンクを含みます。 | | `search_docs` | フレームワークの Ignite UI ドキュメント全体でフルテキスト検索を実行します。抜粋付きで最大 20 件のランク付けされた結果を返します。 | | `get_project_setup_guide` | CLI 手順とインストール手順を含む、特定のフレームワークで新しいプロジェクトを作成するためのプロジェクト セットアップ ガイドを返します。 | -| `search_api` | Angular、React、Web Components 全体でキーワードまたはコンポーネント名によって API エントリを検索します。 | -| `get_api_reference` | プロパティ、メソッド、イベントを含む、特定のコンポーネントまたはクラスの完全な API リファレンスを返します。Angular、React、Web Components をサポートします。 | +| `search_api` | Angular、React、Blazor、Web Components 全体でキーワードまたはコンポーネント名によって API エントリを検索します。 | +| `get_api_reference` | プロパティ、メソッド、イベントを含む、特定のコンポーネントまたはクラスの完全な API リファレンスを返します。Angular、React、Blazor、Web Components をサポートします。 | まとめると、CLI MCP ツールは以下を支援します。 @@ -389,7 +389,7 @@ MCP サーバーは、AI がプロンプトに基づいて自動的に使用す ### CLI ファーストセットアップ -最も速いガイド付きセットアップが必要で、`.vscode/mcp.json` を自動生成したい場合は、最初に Ignite UI CLI でプロジェクトを作成します。 +最も速いガイド付きセットアップが必要な場合は、最初に Ignite UI CLI でプロジェクトを作成します。`ig new` は、MCP 向けに構成する AI クライアントとスキル ファイルをセットアップするエージェントを選択するプロンプトを表示します。 シナリオの例: @@ -432,9 +432,9 @@ Node.js がインストールされていないか、現在のターミナル環 構成コンテンツがキー名と引数の順序を含めて例と正確に一致していることを確認します。 -**プロジェクトは作成されたが、MCP 構成は VS Code のみで利用可能** +**プロジェクトは作成されたが、MCP がいずれかの AI クライアント用に構成されていない** -Ignite UI CLI は CLI ファースト手順のプロジェクト新規作成において `.vscode/mcp.json` を書き込みます。Cursor、Claude Desktop、Claude Code、JetBrains、GitHub、または別の MCP クライアントを使用している場合は、同じサーバー エントリをそのクライアントの構成形式と場所にコピーします。 +`ig new` はどのクライアントを構成するか選択するプロンプトを表示します。プロジェクト作成時にクライアントをスキップした場合は、`ig ai-config` を実行して、プロンプトが表示されたときに欠けているクライアントを選択します。 **アシスタントが間違ったフォルダーで作業しているか、プロジェクト ファイルが見つからない** diff --git a/docs/xplat/src/content/jp/components/general-cli-overview.mdx b/docs/xplat/src/content/jp/components/general-cli-overview.mdx index f36315be1c..8f13472fd8 100644 --- a/docs/xplat/src/content/jp/components/general-cli-overview.mdx +++ b/docs/xplat/src/content/jp/components/general-cli-overview.mdx @@ -38,34 +38,51 @@ Ignite UI CLI を使用して、{ProductName} コントロールを使用する +React プロジェクトを非対話的に作成するには、フレームワークとして `react`、プロジェクト タイプとして `igr-ts` を指定します。 ```cmd -ig new "[name_of_project]" --framework=[target_framework] --type=[project_type] +ig new --framework=react --type=igr-ts --template=side-nav ``` -上記のテンプレートを使用して、TypeScript をターゲットとする「My Project」という名前の **React** アプリケーションを作成する場合は、次のコマンドを実行します。 +React で使用できる基本プロジェクト テンプレートは次のとおりです。 -```cmd -ig new "My Project" --framework=react --type=igr-ts -``` +| テンプレート ID | 説明 | +| :------------ | :-------------------------------------------------------------------------- | +| empty | 事前定義されたビューのない最小プロジェクト構造。このテンプレートでは認証は使用できません。 | +| side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造。認証をアドオンとして追加できます (以下を参照)。 | +| side-nav-mini | コンパクトなサイド ナビゲーション ドロワーを備えたプロジェクト構造。認証をアドオンとして追加できます (以下を参照)。 | + +インタラクティブなウィザードを使用する場合、`side-nav` または `side-nav-mini` を選択すると認証を追加するかどうかを確認する追加のプロンプトが表示されます。`empty` を選択すると認証プロンプトはスキップされます。以下のテンプレート ID が生成され、非対話的な作成に `ig new` で直接使用することもできます。これらはウィザードのテンプレート一覧には表示されません。 + +| テンプレート ID | 説明 | +| :----------------- | :----------------------------------------------- | +| side-nav-auth | 認証機能付きのサイド ナビゲーション。 | +| side-nav-mini-auth | 認証機能付きのサイド ナビゲーション ミニ。 | - -TypeScript のサポートは、Ignite UI CLI バージョン 13 以降で利用可能になります。 - +Web Components プロジェクトを非対話的に作成するには、フレームワークとして `webcomponents`、プロジェクト タイプとして `igc-ts` を指定します。 ```cmd -ig new "[name_of_project]" --framework=[target_framework] +ig new --framework=webcomponents --type=igc-ts --template=side-nav ``` -上記のテンプレートを使用して、「My Project」という名前の **Web Components** アプリケーションを作成する場合は、次のコマンドを実行します。 +Web Components で使用できる基本プロジェクト テンプレートは次のとおりです。 -```cmd -ig new "My Project" --framework=webcomponents -``` +| テンプレート ID | 説明 | +| :------------ | :-------------------------------------------------------------------------- | +| empty | 事前定義されたビューのない最小プロジェクト構造。このテンプレートでは認証は使用できません。 | +| side-nav | サイド ナビゲーション ドロワーを備えたプロジェクト構造。認証をアドオンとして追加できます (以下を参照)。 | +| side-nav-mini | コンパクトなサイド ナビゲーション ドロワーを備えたプロジェクト構造。認証をアドオンとして追加できます (以下を参照)。 | + +インタラクティブなウィザードを使用する場合、`side-nav` または `side-nav-mini` を選択すると認証を追加するかどうかを確認する追加のプロンプトが表示されます。`empty` を選択すると認証プロンプトはスキップされます。以下のテンプレート ID が生成され、非対話的な作成に `ig new` で直接使用することもできます。これらはウィザードのテンプレート一覧には表示されません。 + +| テンプレート ID | 説明 | +| :----------------- | :----------------------------------------------- | +| side-nav-auth | 認証機能付きのサイド ナビゲーション。 | +| side-nav-mini-auth | 認証機能付きのサイド ナビゲーション ミニ。 | @@ -105,25 +122,45 @@ ig add grid MyGridComponent 現在、CLI は次の Web コンポーネントで使用できます。 -| 名前 | コンポーネント テンプレート | -| ------------------|---------------------| -| アバター | avatar | -| カード | card | -| バッジ | badge | -| ボタン | button | -| チェックボックス | checkbox | -| フォーム | form | -| アイコン | icon | -| アイコン ボタン | icon-button | -| 入力 | input | -| ラジオ グループ | radio-group | -| スイッチ | switch | -| カレンダー | calendar | -| リスト | list | -| ナビゲーション バー | navbar | -| リップル | ripple | -| 円チャート | pie-chart | -| ドック マネージャ | dock-manager | +| 名前 | コンポーネント テンプレート | +| :---------------- | :----------------- | +| アコーディオン | accordion | +| アバター | avatar | +| バッジ | badge | +| バナー | banner | +| ボタン | button | +| ボタン グループ | button-group | +| カレンダー | calendar | +| カード | card | +| チェックボックス | checkbox | +| チップ | chip | +| 円形プログレス | circular-progress | +| 日付ピッカー | date-picker | +| 日時入力 | date-time-input | +| 区切り線 | divider | +| ドック マネージャー | dock-manager | +| ドロップダウン | dropdown | +| 展開パネル | expansion-panel | +| ファイナンシャル チャート | financial-chart | +| フォーム | form | +| グリッド | grid | +| アイコン | icon | +| アイコン ボタン | icon-button | +| 入力 | input | +| リニア ゲージ | linear-gauge | +| リニア プログレス | linear-progress | +| リスト | list | +| ナビゲーション バー | navbar | +| 円チャート | pie-chart | +| ラジアル ゲージ | radial-gauge | +| ラジオ グループ | radio-group | +| レーティング | rating | +| リップル | ripple | +| スライダー | slider | +| スイッチ | switch | +| タブ | tabs | +| テキスト エリア | text-area | +| ツリー | tree | @@ -158,4 +195,7 @@ Ignite UI CLI によって生成された React アプリケーションは、 | [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | 検索した用語についてインフラジスティックスのサポート情報を検索します。 | [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | 指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクト フォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。 | [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | 現在のプロジェクトのテストを実行します。 +| ig upgrade-packages | | プロジェクトの Ignite UI パッケージをトライアルからライセンス版にアップグレードします。 +| ig mcp | | AI コーディング アシスタントを {ProductName} コンポーネント ドキュメントに接続するための組み込み MCP サーバーを起動します。 +| [ig ai-config](https://github.com/IgniteUI/igniteui-cli/wiki/ai-config) | | MCP サーバーを構成し、エージェント スキル ファイルを各エージェントのスキル ディレクトリにコピーします。`--assistants` および `--agents` フラグまたはインタラクティブ モードをサポートします。 | [ig version](https://github.com/IgniteUI/igniteui-cli/wiki) | -v | ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。 | diff --git a/docs/xplat/src/content/jp/components/general-getting-started.mdx b/docs/xplat/src/content/jp/components/general-getting-started.mdx index 86e0b191dd..bb155d0ec1 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started.mdx @@ -58,8 +58,15 @@ npm install -g igniteui-cli ig ``` -次に、フレームワークとして `React` を選択し、プロジェクト タイプとして `Ignite UI for React TS` を選択します。`Default Top Navigation` プロジェクト テンプレートを選択するか、特定のコンポーネント/ビューを追加するか、`Complete & Run` を選択します。 -Ignite UI CLI の詳細については、[CLI の概要](general-cli-overview.md)を参照してください。 +次に、フレームワークとして `React` を選択し、プロジェクト タイプとして `Ignite UI for React TS` を選択します。ナビゲーション レイアウトで始めるには **Side Navigation** または **Side Navigation Mini** を選択します。これらのナビゲーション テンプレートを選択すると、認証を追加するかどうかを確認するプロンプトが表示されます。**Empty** テンプレートでは認証プロンプトは表示されません。その後、特定のコンポーネント/ビューを追加するか、`Complete & Run` を選択します。 + +または、プロジェクトを直接作成することもできます。例: + +```cmd +ig new --framework=react --type=igr-ts --template=side-nav +``` + +ウィザードのステップごとのウォークスルーと認証 アドオン フローについては、[Ignite UI CLI を使用したステップバイステップ ガイド](general-step-by-step-guide-using-cli.md)を参照してください。コマンド、テンプレート ID、直接認証テンプレートの全リファレンスについては、[CLI の概要](general-cli-overview.md)を参照してください。 プロンプト中にグリッド コンポーネントを追加した場合、アプリケーションが実行されると、次のようなものが表示されます。 @@ -170,8 +177,15 @@ npm install -g igniteui-cli ig ``` -次に、フレームワークとして Web Components を選択し、`Base` プロジェクト テンプレートを選択し、特定のコンポーネント / ビューを追加するか、`Complete & Run` を選択します。 -さらに、Ignite UI CLI の詳細については[こちら](general-cli-overview.md)を参照してください。 +次に、フレームワークとして Web Components を選択します。ナビゲーション レイアウトで始めるには **Side Navigation** または **Side Navigation Mini** を選択します。これらのナビゲーション テンプレートを選択すると、認証を追加するかどうかを確認するプロンプトが表示されます。**Empty** テンプレートでは認証プロンプトは表示されません。その後、特定のコンポーネント / ビューを追加するか、`Complete & Run` を選択します。 + +または、プロジェクトを直接作成することもできます。例: + +```cmd +ig new --framework=webcomponents --type=igc-ts --template=side-nav +``` + +ウィザードのステップごとのウォークスルーと認証 アドオン フローについては、[Ignite UI CLI を使用したステップバイステップ ガイド](general-step-by-step-guide-using-cli.md)を参照してください。コマンド、テンプレート ID、直接認証テンプレートの全リファレンスについては、[CLI の概要](general-cli-overview.md)を参照してください。 ## ポリフィルのインストール