Skip to content

Commit

Permalink
Updating JA for #205
Browse files Browse the repository at this point in the history
  • Loading branch information
@randriova
randriova committed Apr 12, 2024
1 parent 3dcf3d8 commit e3abb68
Show file tree
Hide file tree
Showing 18 changed files with 41 additions and 54 deletions.
4 changes: 2 additions & 2 deletions jp/app-builder-overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ _language: ja

# App Builder - 概要

App Builder は、デザインからコード生成を行うソリューションであり、デザインおよび開発チームが実際の Web アプリケーションを迅速かつ簡単にデザインおよび構築できるようにし、専門的に構築されたコンポーネントを使用してリリース可能な Angular コードを生成します。[Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) コントロールで作られた App Builder は [Indigo.Design]({environment:infragisticsBaseUrl}/products/indigo-design) への最新の追加です。
App Builder は、デザインからコードまでのソリューションです。設計および開発チームが実際の Web アプリケーションを迅速かつ簡単に設計および構築できるようにし、専門的に構築されたコンポーネントを使用してリリース可能な Angular、Blazor、Web Components および React コードを生成します。

[App Builder]({environment:infragisticsBaseUrl}/products/indigo-design/app-builder) を使用すると、ピクセル パーフェクトなアプリを驚くほど高速に構築でき、デザイン時間を大幅に節約し、アプリをデザインとまったく同じように見せることができます。これは新世代のデザイン ツールであり、デザイナーはデザイン システム アプローチとコンポーネント ライブラリを使用し、デザインされたものはすべて、高品質のアプリ コードを使用して、開発準備が整った状態でライブで実行されています。プロダクション レディなコードとは、デザインしたコンポーネント、スタイル、ビルドのセットアップなどがすべてリリース可能な Angular リポジトリになることを言います。したがって、あなたはデザインをして、インスタント リアル タイム プレビューをチェックし、App Builder がコードを実行します。App Builder は 100％ Web ベースであるため、何もダウンロードする必要はなく、重い IDE も、サード パーティの依存関係もありません。すべてが Web 上にあり、どのプラットフォームでもチーム全体がアクセスできます。
[App Builder]({environment:appbuilderBaseUrl}/platform) を使用すると、ピクセル パーフェクトなアプリを驚くほど高速に構築でき、デザイン時間を大幅に節約し、アプリをデザインとまったく同じように見せることができます。これは新世代のデザイン ツールであり、デザイナーはデザイン システム アプローチとコンポーネント ライブラリを使用し、デザインされたものはすべて、高品質のアプリ コードを使用して、開発準備が整った状態でライブで実行されています。プロダクション レディなコードとは、デザインしたコンポーネント、スタイル、ビルドのセットアップなどがすべてリリース可能な Angular リポジトリになることを言います。したがって、あなたはデザインをして、インスタント リアル タイム プレビューをチェックし、App Builder がコードを実行します。App Builder は 100％ Web ベースであるため、何もダウンロードする必要はなく、重い IDE も、サード パーティの依存関係もありません。すべてが Web 上にあり、どのプラットフォームでもチーム全体がアクセスできます。

すでに用意されているアプリ テンプレートの 1 つを使用するか、プリセットのレイアウト オプションのいずれかを使用して、アプリの作成エクスペリエンスをすばやく簡単に開始して、すぐにアプリを作成できます。アプリのデザインを微調整し、テーマを交換するだけで完了です。事前設定されたテーマとタイポグラフィを使用するか、コントロールごと、画面ごと、またはアプリごとに、独自のアプリ テーマと企業ブランドに一致するようにカスタマイズします。App Builder で新しいアプリを起動し、これまでになく高速にビルドし、新しい機能を繰り返して、リリース可能なコードを入手してください。

Expand Down
4 changes: 2 additions & 2 deletions jp/app-themes/app-themes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ _language: ja
</div>
</section>

[App Builder]({environment:infragisticsBaseUrl}/products/indigo-design/app-builder) は、UI 作成にデザイン システム アプローチを採用しており、アプリ レベルでテーマを適用できます。テーマを 1 回選択するだけで、そのテーマはアプリケーション全体に即座にグローバルに適用されます。これにより、メンテナンスが難しいローカル スタイルを作成する必要がなくなります。
[App Builder]({environment:appbuilderBaseUrl}) は、UI 作成にデザイン システム アプローチを採用しており、アプリ レベルでテーマを適用できます。テーマを 1 回選択するだけで、そのテーマはアプリケーション全体に即座にグローバルに適用されます。これにより、メンテナンスが難しいローカル スタイルを作成する必要がなくなります。

## App Builder テーマを切り替える

Expand Down Expand Up @@ -53,5 +53,5 @@ Material から Fluent に切り替えると、コンポーネントの外観が
* [Flex レイアウト](../flex-layouts/flex-layouts.md)
* [Ignite UI for Angular テーマ化]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/themes/index)
* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
* [Indigo.Design コンポーネント](https://jp.infragistics.com/products/indigo-design/help/components/components-overview)
* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components)

4 changes: 2 additions & 2 deletions jp/blazor-support.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,5 +84,5 @@ Blazor アプリケーションの生成には、次の制限があります:
* [App Builder コンポーネント](indigo-design-app-builder-components.md)
* [Flex レイアウト](flex-layouts/flex-layouts.md)
* [Desktop アプリの実行方法](running-desktop-app.md)
* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
* [Indigo.Design コンポーネント](https://jp.infragistics.com/products/indigo-design/help/components/components-overview)
* [はじめに]({environment:appbuilderBaseUrl}/help/getting-started)
* [コンポーネント]({environment:appbuilderBaseUrl}/components)
9 changes: 2 additions & 7 deletions jp/design-to-code-story.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ _language: ja

# デザインからコード作成の App Builder ストーリー

App Builder を使用して、ワンク リックでデザインからコードを作成できます。Figma、Sketch、Adobe XD ファイルをインポートしてアプリを簡単に作成できます。[Indigo.Design システム](https://jp.infragistics.com/products/appbuilder/ui-toolkit) プラグインを Figma、Sketch、Adobe XD 内で直接使用して、カスタム テーマの提供、画像アセットのインポート、そしてすべてのコンポーネントが App Builder ツールボックスのコントロールで 1 対 1 でマッピングされるようにします。
App Builder を使用して、ワンク リックでデザインからコードを作成できます。まず、Figma または Sketch 用の [Indigo.Design システム](https://jp.infragistics.com/products/appbuilder/ui-toolkit) を使用してデザインを作成します。その後、Figma プラグインを使用して、App Builder でアプリとして公開できます。Sketch の場合、新しいアプリを作成するときに、Sketch ファイルを App Builder に直接インポートできます。インポートすると、UI キット コンポーネントがツールボックスで使用可能なコンポーネントにマップされます。これにより、データと変数を使用してアプリを拡張し、動的なアプリ エクスペリエンスを作成できます。

<img class="box-shadow" src="./images/indigo-design-ui-kit.PNG" />
<p style="width: 100%; text-align:center;">Indigo.Design UI キット</p>
Expand Down Expand Up @@ -77,17 +77,12 @@ App Builder を使用して、ワンク リックでデザインからコード
- [Figma UI キット](https://www.figma.com/@infragistics)
- [Figma 用プラグイン](https://www.figma.com/community/plugin/1170035114372031474)
- [サンプル アプリ](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_Figma.zip)
- [Adobe XD UI キット](https://assets.adobe.com/public/c1a672c5-49e6-4df1-4d32-1c37fa234f1e)
- [Adobe XD 用プラグイン](https://exchange.adobe.com/creativecloud/plugindetails.html/app/cc/92c7dec5)
- [サンプル アプリ](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_XD.zip)
- [Sketch UI キット](https://dl.infragistics.com/products/Infragistics/Indigo.Design/ABECAC7231EE434C8CD3DC619BE6F75B/Infragistics_IndigoDesign_UI_Kit.zip)
- [Sketch 用プラグイン](https://dl.infragistics.com/products/Infragistics/Indigo.Design/9EB45F5BB4B3442F8B4CECB3EB403063/Infragistics_IndigoDesign_Sketch_Plugin.zip)
- [サンプル アプリ](https://dl.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps.zip)

## その他のリソース

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

* [Figma UI キット](ui-kits/figma.md)
* [Adobe XD UI キット](ui-kits/adobe-xd.md)
* [Sketch UI キット](ui-kits/sketch.md)
* [Sketch UI キット](ui-kits/sketch.md)
2 changes: 1 addition & 1 deletion jp/generate-app/generate-app-overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,4 +111,4 @@ Angular コード生成を備えた App Builder が市場に出てから数か
* [アプリケーションをローカルで実行する](run-application-locally.md)
* [アプリケーション コードのプレビュー](../preview-code.md)
* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
* [Indigo.Design コンポーネント](https://jp.infragistics.com/products/indigo-design/help/components/components-overview)
* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components)
2 changes: 1 addition & 1 deletion jp/generate-app/run-application-locally.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,4 @@ App Builder を使用すると、プロ級の Ignite UI コンポーネントを
* [アプリケーションを GitHub にアップロードする](upload-application-to-github.md)
* [アプリケーション コードのプレビュー](../preview-code.md)
* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
* [Indigo.Design コンポーネント](https://jp.infragistics.com/products/indigo-design/help/components/components-overview)
* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components)
2 changes: 1 addition & 1 deletion jp/generate-app/upload-application-to-github.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,4 @@ App Builder ではなく、コードを使用して外部でアプリケーシ
* [アプリケーションをローカルで実行する](run-application-locally.md)
* [アプリケーション コードをプレビューする](../preview-code.md)
* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
* [Indigo.Design コンポーネント](https://jp.infragistics.com/products/indigo-design/help/components/components-overview)
* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components)
24 changes: 10 additions & 14 deletions jp/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,18 @@ _language: ja


## App Builder を起動する
App Builder プロファイルに直接ログインするか、Indigo.Design でサインインします。ホーム画面が表示されます。ここから 3 つの主要な Indigo.Design 製品 (プロトタイプとユーザビリティ テスト)、および最新の App Builder ([アプリ] タブ) にアクセスできます。
App Builder にアクセスするには、[https://appbuilder.dev](https://appbuilder.dev) に移動してサインインします。または、[https://my.appbuilder.dev](https://my.appbuilder.dev) にアクセスして App Builder を直接起動することもできます。アプリを作成および編集するには、有効なトライアル版または有料サブスクリプションが必要です。

App Builder のホーム画面から、ユーザーは新しいアプリを起動し、既存のアプリをプレビューまたは編集できます。コンテキスト メニューを使用して、既存のアプリを名前変更、複製、またはアーカイブすることもできます。
## 新しいアプリの作成
[新しいアプリケーションの作成] ダイアログから新しいアプリケーションを作成するには、次の 3 つの方法があります。

App Builder サインイン
<img src="./images/Standalone-AB.PNG" srcset="./images/[email protected] 2x" />
1. **サンプル アプリ** - 入門アプリは、App Builder を使用して作成されたアプリケーションを探索するのに役立ち、独自のユーザー スペースでそれらを変更することもできます。また、独自のアプリを最初から作成しなくても、より大きなアプリケーション用に生成されたコードをプレビューするための優れたソースです。App Builder を初めて使用する場合は、[Sample Apps] オプションを開始点として使用することをお勧めします。これは、ツールのすばらしい機能を利用してアプリケーションの構築を開始するための最も簡単な方法です。
2. **アプリのレイアウト** - 定義済みレイアウトを使用して新しいアプリケーションを作成します。こちらには、空のテンプレートに基づいてアプリを作成するオプションもあります。
4. **デザインのインポート** - Figma または Sketch 用の Indigo.Design UI キットを使用して作成された既存のデザイン ファイルがある場合、これをアプリの開始点として使用できます。これを行うには、デザイン、UI キット、サンプル デザイン ファイルを公開するためのプラグインが含まれる Indigo.Design システムを取得してください。

Indigo.Cloud サインイン
![Indigo-Design-home-screen](./images/Indigo-Design-home-screen.gif)
<p style="text-align:center;">Indigo.Design ホーム画面</p>

[App Builder]({environment:infragisticsBaseUrl}/products/indigo-design/app-builder) を初めて起動したときに表示されるのは、簡単なオンボーディング ツアーを提案するポップアップ ウィンドウです。次に表示されるのは、[新しいプロジェクト] の作成ダイアログです。新しいアプリを開始する方法は 4 つあります:
1. <b>既存のデザインから作成</b> - Sketch の Indigo.Design UI キットを使用して作成された既存の Sketch ファイルがある場合、この時点でアップロードして App Builder でデザインを続行できます。Sketch の絶対レイアウトと App Builder の Flex レイアウトの違いにより、Sketch ファイルの解析後に追加の調整が必要になる場合があります。
2. <b>サンプル アプリ</b> - 入門アプリは、App Builder を使用して作成されたアプリケーションを探索するのに役立ち、独自のユーザー スペースでそれらを変更することもできます。また、独自のアプリを最初から作成しなくても、より大きなアプリケーション用に生成されたコードをプレビューするための優れたソースです。App Builder を初めて使用する場合は、[Sample Apps] オプションを開始点として使用することをお勧めします。これは、ツールのすばらしい機能を利用してアプリケーションの構築を開始するための最も簡単な方法です。
3. <b>既定のレイアウト</b> - 定義済みの基本レイアウトを使用して新しいアプリケーションを作成します。
4. <b>Blank (空白)</b> - 新しいアプリを最初から作成します。
<br>
> 注: Sketch の絶対レイアウトと App Builder の Flex レイアウトの違いにより、Sketch ファイルの解析後に追加の調整が必要になる場合があります。
<br>
<img src="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder.png" srcset="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder-@2x.png 2x" />
<p style="text-align:center;">[新しいプロジェクト] ダイアログ</p>
Expand Down Expand Up @@ -104,7 +100,7 @@ App Builder は、ソフトウェア製品の検出、ソフトウェア製品

## 問題の報告またはフィードバックの送信

[このリポジトリ](https://github.com/IgniteUI/app-builder)は、問題や機能リクエストの送信、および製品の全般的なディスカッション、質問、共有したいフィードバックを対象としています。<a href="mailto:[email protected]">メールを送信する</a>こともできます。
[このリポジトリ](https://github.com/IgniteUI/app-builder)は、問題や機能リクエストの送信、および製品の全般的なディスカッション、質問、共有したいフィードバックを対象としています。<a href="mailto:[email protected]">メールを送信する</a>こともできます。
## その他のリソース
<div class="divider--half"></div>

Expand Down
4 changes: 2 additions & 2 deletions jp/indigo-design-app-builder-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,5 @@ Mac でキーボード ショートカットの ctrl + E または cmd + E を
<div class="divider--half"></div>

* [テーマ](app-themes/app-themes.md)
* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
* [Indigo.Design コンポーネント](https://jp.infragistics.com/products/indigo-design/help/components/components-overview)
* [はじめに]({environment:appbuilderBaseUrl}/help/getting-started)
* [コンポーネント]({environment:appbuilderBaseUrl}/components)
Loading

0 comments on commit e3abb68

Please sign in to comment.