diff --git a/jp/codegen/after-codegen.md b/jp/codegen/after-codegen.md deleted file mode 100644 index 03ed0a7aa..000000000 --- a/jp/codegen/after-codegen.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: コード生成後の手順 -_description: コード生成後のアプリケーションへの変更を説明します。 -_keywords: デザイン システム, デザイン システム UX, UI キット, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular デザイン システム, Sketch からコードをエクスポート, Angular 用のデザイン キット, Sketch HTML, Sketch to HTML, Sketch UI キット -_language: ja ---- - -# コード生成後の手順 - -## 概要 - -このトピックは、コードが Sketch デザインから生成され、Infragistics VS Code 拡張機能でプロジェクトに追加された後に実行するタスクを説明します。このトピックの前提条件は新しい Angular プロジェクトです。新しいプロジェクトに存在するファイル名を使用するために新しいプロジェクトを使用します。このトピックは、複雑なプロジェクトでの作業に役立つ情報を提供します。新しい Angular プロジェクトの作成方法: - -``` -ng new my-app --style=scss -``` - -> 注: コード ジェネレーターは [SCSS](https://sass-lang.com/) を生成するため、このコマンドは Angular でデフォルトの .css ファイルの代わりに .scss ファイルを使用するために設定します。 - -## ルーティング - -Infragistics VS Code 拡張機能を使用してプロジェクトを更新した場合、基本のルートが生成されたモジュールに追加されました。このルートは生成されたコンポーネントをナビゲーション用に準備します。ただし、新しい Angular アプリケーションでナビゲートされたコンテンツへ移動する場所がないため、最初に [RouterOutlet](https://angular.io/api/router/RouterOutlet) をアプリケーションに追加する必要があります。このコードをアプリケーションのメイン ページである **app.component.html** ファイルに追加します。 - -例: - -```html -
-

Hello World!

- -
-``` - -メイン ページでの `` はナビゲートされたコンテンツをホストします。このルートを **AppModule** および各生成されたモジュールにて、例えば以下の様に設定します。 - -```typescript -const routes: Routes = [{ path: "dashboard", component: DashboardComponent }]; - -RouterModule.forChild(routes); -``` - -[RouterOutlet](https://angular.io/api/router/RouterOutlet) を追加した後、ターミナルで `npm start` を使用してアプリケーションを実行します。ブラウザーで URL にコンポーネント名を追加してサイトに移動します。 - - - -ここが開発の開始ポイントとなります。ここから開発者がアプリケーション要件に合わせるためにルートを変更できます。ボタン クリックなどの操作に基づいてナビゲーションをトリガーするコードを追加します。 - -## 必要なテーマ - -Ignite UI for Angular を Angular プロジェクトで使用するために Ignite UI テーマをインポートする必要があります。最も簡単な方法は適切な SCSS をアプリケーションのメイン スタイル ファイルに含み方法です。このトピックの上に指定されたコマンドを使用して Angular アプリケーションを生成した場合、アプリケーションのルートに `styles.scss` ファイルがあります。このファイルに以下のコードを追加します。 - -```scss -@import "~igniteui-angular/lib/core/styles/themes/index"; -@include igx-core(); -@include igx-theme($default-palette); -``` - -また Google のマテリアル アイコン セットを含む必要があります。複数の Ignite UI for Angular コントロールはこのアイコンを使用します。 - -```scss -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); -``` - -すべての Sketch コンポーネントは [Titillium Web](https://fonts.google.com/specimen/Titillium+Web) フォントを使用するため、このフォントを含む必要があります。 - -```scss -@import url("https://fonts.googleapis.com/css?family=Titillium+Web"); -``` - -Infragistics VS Code 拡張機能をプロジェクトを更新するために使用した場合は、自動的に追加されます。このインポートが `styles.scss` ファイルに存在しない場合、拡張機能はプロジェクトで `ig.scss` と呼ばれる新しいファイルを含み、プロジェクトはこのファイルおよび `styles.scss` ファイルに参照します。 - -## その他のリソース - -関連トピック: - -- [Category Chart](../components/chart-category.md) -- [VS Code の Indigo.Design コード ジェネレーター](vscode-plugin.md) -
- -外部のリンク: - -- [Ignite UI for Angular](https://jp.infragistics.com/products/ignite-ui-angular) -- [Angular ルーティングおよびナビゲーション](https://angular.io/guide/router) - -コミュニティに参加して新しいアイデアをご提案ください。 - - diff --git a/jp/codegen/installing-vs-code-extension.md b/jp/codegen/installing-vs-code-extension.md deleted file mode 100644 index fdc3847aa..000000000 --- a/jp/codegen/installing-vs-code-extension.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Visual Studio Code 拡張機能のインストール -_description: Indigo.Design で Angular コード生成の Visual Studio Code ジェネレーター拡張機能のインストール方法。 -_keywords: デザイン システム, デザイン システム UX, UI キット, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular デザイン システム, Sketch からコードをエクスポート, Angular 用のデザイン キット, Sketch HTML, Sketch to HTML, Sketch UI キット -_language: ja ---- - -# Visual Studio Code 拡張機能のインストール - -VS Code 拡張機能をインストールする前に、Visual Studio Code がインストールされていることを確認してください。コードを生成し、Angular アプリケーションを実行するには、Node.js もインストールしてください。このリンクから取得できます。 - -1. NodeJS: [ダウンロード](https://nodejs.org/ja/download/)してインストール -2. Visual Studio Code: [ダウンロード](https://code.visualstudio.com/download)してインストール - -## 詳細手順 - -1. パッケージをハード ドライブに解凍します。 - -
- -
-
-
-
-
- -2. [拡張機能] ペインの [Marketplace で拡張機能を検索する] フィールドに、「Infragistics Indigo.Design」 と入力します。 - -3. 「Infragistics Indigo.DesignCode Generator」拡張機能を選択し、「インストール」をクリックしてください。 - -
- -
-
-
-
-
- -拡張機能がコンピューター上でインストール済みになりました。 - - - -## その他のリソース - -コミュニティに参加して新しいアイデアをご提案ください。 - diff --git a/jp/codegen/vscode-plugin.md b/jp/codegen/vscode-plugin.md deleted file mode 100644 index 2b029661e..000000000 --- a/jp/codegen/vscode-plugin.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: VS Code の Indigo.Design コード ジェネレーター -_description: 拡張機能の概要および使用方法の説明。 -_keywords: デザイン システム, コード生成, Ignite UI for Angular, コンポーネント, UI ライブラリ, ウィジェット, ルーティング, VS Code, 拡張機能 -_language: ja ---- - -# コード ジェネレーター プラグインの使用 - -このトピックは、コードを簡単に生成できる Visual Studio Code 拡張機能を説明します。Visual Studio Code でこの拡張機能を使用して実行可能な Angular プロジェクトのコードを直接生成できます。デザイナーは Sketch ファイルを [Indigo.Design](https://cloud.indigo.design) でクラウドに公開し、共有リンクを開発者に送信します。次に開発者がこの共有リンクを拡張機能に入力し、デザインからコードを生成します。手動でコンポーネントのモジュール、HTML、CSS、および TypeScript を書く必要はありません。 - - -## 要件 - -Indigo.Design UI キットのコンポーネントを含む Sketch ファイルが必要です。Sketch ファイルで見つかった Indigo.Design UI キットのコンポーネントにのみコードを生成します。 - -この拡張機能は、以下の依存関係があります。使用する前に依存関係をインストールしてください。 - -- [Node.js](https://nodejs.org/) -- [npm](https://www.npmjs.com/) -- [Angular CLI](https://cli.angular.io/) (グローバル インストール) - -この拡張機能もワークスペースのルートにあるワークスペースに開いている Angular プロジェクトが必要です。つまり、`angular.json` または `.angular-cli.json` (Angular のバーションに基づいて) ファイルはワークスペースのルートにある必要があります。 - -コード ジェネレーターは [SCSS](https://sass-lang.com/) を出力するため、Angular プロジェクトを SCSS を使用するために構成します。新しい Angular プロジェクトを作成する場合、以下のコマンドを使用して構成できます: - -``` -ng new my-app --style=scss -``` - -既存の Angular プロジェクトを使用する場合、Angular json ファイルでデフォルト スタイル拡張属性を更新できます。 - -**angular.json** - -```json -"@schematics/angular:component": { - "styleext": "scss" -} -``` - -**.angular-cli.json** - -```json -"defaults": { - "styleExt": "scss", -} -``` - -Angular CLI が拡張機能に使用するコンポーネントの生成で CSS の代わりに SCSS を生成することを構成します。 - -既存の Angular プロジェクトを使用し、既に [Ignite UI for Angular](https://www.npmjs.com/package/igniteui-angular) パッケージを使用する場合、そのパッケージのバーションを 6.1.0 以上にアップデートします。以前のバージョンを使用する場合、この拡張機能はプロジェクトを正しく更新しないことが可能です。 - -## 操作方法 - -Sketch ファイルから開始します。デザイナーが Sketch ファイルを完了した後、[Indigo.Design](https://cloud.indigo.design) サイトにアップロードします。アップロード後にファイルを公開し、ユーザビリティ スタディの作成やコメントを有効にできます。ファイルの公開時に Indigo.Design は共有リンクを提供します。この拡張機能はそのリンクを使用できます。 - - - -> [!Note] -> この拡張機能を**はじめて**実行する場合、セットアップがバックグラウンドで実行されます。このセットアップは 45 秒程かかる場合があります。通常より時間がかかる場合、以下の 「トラブルシューティング」セクションを参照してください。 - -共有リンクからアプリケーションのデザインのさまざまな画面を表示できます。ここから開発者が画面の部分を選択し、コードを生成できます。通常デザイン時に各画面に複製した要素があるため、画面全体は生成されません。この複製した要素はアプリケーションの「クローム」と呼ばれます。クロームは、ページの上側にあるナビゲーション メニューまたは右左からスライドインするメニューなどのアプリケーションの画面間で変更しない要素です。 - - - - -アプリケーションのすべての画面間で変更しないため、この要素を生成されません。この要素を書くのは一度のみです。`` によって変更しているアプリケーション領域の周りに配置します。開発者は Angular で `` を使用し、ページでコンテンツが変更する領域を指定します。この変更コンテンツは、コードが生成される要素です。以下は選択の例です。 - - - - -設定が完了したらコードを生成します。[Generate Code Assets] ボタンをクリックして処理を開始します。 - -拡張機能は以下のようにプロジェクトをアップデートします。 - -- [Ignite UI for Angular](https://jp.infragistics.com/products/ignite-ui-angular) などの必要な NPM パッケージをインストールします。 -- 選択した Sketch コンポーネントから Angular コンポーネントを作成します。 - - このコンポーネントには生成されたコードがあります。 -- このコンポーネントの周りにモジュールを作成します。 -- ナビゲーションを有効にするためにモジュールで基本ルートを作成します。ルートの構成の詳細については、以下の「設定」セクションで `basicRoutes` 構成を参照してください。 -- プロジェクトを [Ignite UI for Angular](https://jp.infragistics.com/products/ignite-ui-angular) のデフォルト テーマを使用するためにアップデートします。 - -## コード生成後の手順 - -コードをプロジェクトに生成後したら実行まであと少しです。コード生成後の手順の詳細については、この[トピック](after-codegen.md)を参照してください。 - -## 設定 - -この設定は`ユーザー設定`ウィンドウにアクセスできます。 - -| 名前 |説明 |デフォルト | -| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | -| `infragistics.codegen.sharedModule` | 共有モジュールを Ignite UI for Angular モジュール用に生成するかどうかを制御します。 | `true` | -| `infragistics.codegen.routingModules` | ルーティング モジュールを生成するかどうかを指定します。'inferRoutingModules' が false の場合のみ適用されます。 | `false` | -| `infragistics.codegen.inferRoutingModules`| 現在のプロジェクトでルーティング モジュールを使用しているかに基づいて拡張が生成するかを決定するかどうか。true の場合、AppModule がある場合はルーティング モジュールが作成されます。| `true` | -| `infragistics.codegen.basicRoutes` | true の場合、ルートがアプリケーションに追加されます。新しいプロジェクトを開始する場合便利です。ルートがすでに設定されている既存のプロジェクトを無効にします。 false | - -## トラブルシューティング - -### 拡張機能が初期設定でフリーズした。 - -VS Code のプラットフォームをサポートするために Sketch アートボードを選択するための UI を表示するには Electron を使用します。ただし、各利用可能なプラットフォームの Electron バイナリ ファイルはパッケージに含まれません。代わりに[npm](https://www.npmjs.com/) を使用して拡張機能のディレクトリにホスト プラットフォームの正しいバージョンをインストールします。これで拡張機能のファイル サイズを縮小します。最初の構成通知が表示されたときに `npm install` コマンドを `electron` 引数とともに実行します。インストールに時間がかかりますが、完了しない場合、インストールのサブプロセスをキャンセルするために VS Code を閉じます。閉じた後、手動的に `npm install` コマンドを実行します。空のフォルダーでターミナルを開いて、以下を実行します。 - -``` -npm install electron -``` - -出力でエラーがないことを確認します。このコマンドはすべての拡張機能が実行されているプロセスで、正しく完了した場合は拡張機能も正しく動作します。成功した場合、VS Code をもう一度開いて拡張機能を再実行します。 - -### コードはプロジェクトに生成されていません。 - -Angular アプリケーションはテスト用に `e2e` フォルダーを含みます。通常は問題ありませんが `e2e` プロジェクトの `angular.json` で `sourceFolder` を指定した場合、これが Angular CLI を中断するため、結果的にこの拡張機能がプロジェクトにコードを生成しない、あるいはコードを `e2e` フォルダーに生成することになります。この拡張機能は、`angular.json` に `sourceFolder` プロパティが指定される単一のプロジェクトのみがあることを前提としています。以下の例を参照してください。 - -```json -{ - ... - "projects": { - "my-app": { - "root": "", - "sourceRoot": "src", - ... - }, - "my-app-e2e": { - "root": "", - "sourceRoot": "e2e", - ... - } - } -} -``` - -この `angular.json` で my-app および my-app-e2e の 2 つのプロジェクトがあります。`angular.json` がこの例のような場合、拡張機能はプロジェクトのアップデートに失敗します。`sourceRoot` が指定した複数のプロジェクトがあるため、コードに追加するプロジェクトを決定できないためです。 - -解決するには、`sourceRoot` 値を `root` プロパティに移動し、`sourceRoot` プロパティを削除します。このプロパティは、CLI を使用して新しい Angular プロジェクトの作成で設定されません。以下のようになります。 - -```json -{ - ... - "projects": { - "my-app": { - "root": "", - "sourceRoot": "src", - ... - }, - "my-app-e2e": { - "root": "e2e", - ... - } - } -} -``` - -## その他のリソース - -関連トピック: - -- [コード生成後の手順](after-codegen.md) -
- -外部のリンク: - -- [Ignite UI for Angular](https://jp.infragistics.com/products/ignite-ui-angular) -- [Angular モジュール](https://angular.io/guide/ngmodules) -- [Angular コンポーネント](https://angular.io/guide/architecture-components) -- [Angular ルーティングおよびナビゲーション](https://angular.io/guide/router) - -コミュニティに参加して新しいアイデアをご提案ください。 - - diff --git a/jp/getting-started.md b/jp/getting-started.md index e07b6c0f5..9f43bb214 100644 --- a/jp/getting-started.md +++ b/jp/getting-started.md @@ -64,5 +64,4 @@ Indigo.Design クラウドで公開されたプロトタイプから直接 Angul 関連トピック: -- [Indigo.Design App Builder のアプリケーションからコードを生成](https://jp.infragistics.com/products/appbuilder/help/generate-app/generate-app-overview) -- [プロトタイプからコードを生成](codegen/installing-vs-code-extension.md) \ No newline at end of file +- [Indigo.Design App Builder のアプリケーションからコードを生成](https://jp.infragistics.com/products/appbuilder/help/generate-app/generate-app-overview) \ No newline at end of file diff --git a/jp/sidebar-toc/toc.yml b/jp/sidebar-toc/toc.yml index 7d1c82d01..21ffe5f47 100644 --- a/jp/sidebar-toc/toc.yml +++ b/jp/sidebar-toc/toc.yml @@ -268,12 +268,6 @@ - name: コード生成 header: true -- name: VS Code 拡張機能のインストール - href: ../codegen/installing-vs-code-extension.md -- name: コード ジェネレーター プラグインの使用 - href: ../codegen/vscode-plugin.md -- name: コード生成後の手順 - href: ../codegen/after-codegen.md - name: レイアウトの生成 href: ../codegen/layout-codegen.md diff --git a/jp/sync-themes-plugin.md b/jp/sync-themes-plugin.md index c74967597..805245061 100644 --- a/jp/sync-themes-plugin.md +++ b/jp/sync-themes-plugin.md @@ -110,7 +110,7 @@ Indigo.Design クラウドにプロトタイプを公開する準備ができた - ホットスポットとインタラクションの強調表示を選択 - デザインにコメントを許可 -[公開] ボタンをクリックするとプロジェクトが Indigo.Design Cloud へアップロードされます。これによりフィードバックをもらったり[コードを生成](codegen/vscode-plugin.md)したりすることができます。 +[公開] ボタンをクリックするとプロジェクトが Indigo.Design Cloud へアップロードされます。これによりフィードバックをもらうことができます。