From 77b33cfa8caa4a420cd189e86fed890c6e4e9a53 Mon Sep 17 00:00:00 2001
From: Rumyana Andriova <54146583+randriova@users.noreply.github.com>
Date: Thu, 20 Feb 2025 19:40:30 +0200
Subject: [PATCH] Update JA for #257 and #260
---
jp/ai/getting-started.md | 252 ++++++++++++++++++
jp/change-log.md | 6 +-
jp/images/ai/Replace content with AI.gif | Bin 0 -> 1063506 bytes
jp/images/ai/complex-page-example-preview.png | Bin 0 -> 92025 bytes
jp/images/ai/complex-page-example.png | Bin 0 -> 144265 bytes
jp/images/ai/content-generation-options.png | Bin 0 -> 204315 bytes
jp/images/ai/data-source-generation.png | Bin 0 -> 134003 bytes
jp/images/ai/gen-from-image-preview.png | Bin 0 -> 192675 bytes
jp/images/ai/gen-from-image.png | Bin 0 -> 122823 bytes
jp/images/ai/image-generation.png | Bin 0 -> 471709 bytes
jp/images/ai/login-screen-preview-blazor.png | Bin 0 -> 113109 bytes
jp/images/ai/login-screen-preview.png | Bin 0 -> 42625 bytes
jp/images/ai/login-screen.png | Bin 0 -> 49391 bytes
jp/images/ai/prompt-1.png | Bin 0 -> 229666 bytes
jp/images/ai/prompt-2.png | Bin 0 -> 147739 bytes
jp/images/ai/send-feedback.png | Bin 0 -> 110177 bytes
jp/images/ai/theme-generation.png | Bin 0 -> 149050 bytes
jp/sidebar-toc/toc.yml | 4 +
18 files changed, 261 insertions(+), 1 deletion(-)
create mode 100644 jp/ai/getting-started.md
create mode 100644 jp/images/ai/Replace content with AI.gif
create mode 100644 jp/images/ai/complex-page-example-preview.png
create mode 100644 jp/images/ai/complex-page-example.png
create mode 100644 jp/images/ai/content-generation-options.png
create mode 100644 jp/images/ai/data-source-generation.png
create mode 100644 jp/images/ai/gen-from-image-preview.png
create mode 100644 jp/images/ai/gen-from-image.png
create mode 100644 jp/images/ai/image-generation.png
create mode 100644 jp/images/ai/login-screen-preview-blazor.png
create mode 100644 jp/images/ai/login-screen-preview.png
create mode 100644 jp/images/ai/login-screen.png
create mode 100644 jp/images/ai/prompt-1.png
create mode 100644 jp/images/ai/prompt-2.png
create mode 100644 jp/images/ai/send-feedback.png
create mode 100644 jp/images/ai/theme-generation.png
diff --git a/jp/ai/getting-started.md b/jp/ai/getting-started.md
new file mode 100644
index 0000000..d56ce58
--- /dev/null
+++ b/jp/ai/getting-started.md
@@ -0,0 +1,252 @@
+---
+title: App Builder AI を使用した作業の開始
+_description: 想像できるものなら、App Builder AI が作成します。単純で繰り返しの多い作業を 自動化し、開発チームがカスタム機能に集中できるようにして、実際のアプリを迅速に提供できます。
+_keywords: App Builder AI, Infragistics, Ignite UI
+_language: ja
+---
+
+# App Builder AI を使用した作業の開始
+このガイドでは、App Builder で新しく導入された AI を活用したコンテンツ生成について説明します。
+
+AI 機能は現在**プレビュー**としてのみ利用可能であり、まだ最終的なデザインではありません。これらの AI 機能は現在も改善中であり、フィードバックを収集することを目的としています。そのため、完全に洗練されておらず、ユーザーの入力に基づいて進化する可能性があります。**プレビュー**機能にはここからアクセスできます: https://preview.appbuilder.dev/
+
+## ビューの生成
+App Builder の AI を活用したビューの生成機能は、従来のレイアウト ピッカーに代わる強力な選択肢を提供します。フリーテキストのユーザー プロンプトと複数のプロンプト パターンを活用することで、ユーザーは高度にカスタマイズされたビューを生成し、それを完全に機能するアプリケーションに自動的に変換できます。このアプローチは、アプリ ビューの作成を加速するだけでなく、UI デザインを簡素化し、さまざまなレベルの技術レベルのユーザーがインターフェースを生成できるようにします。
+
+
+
ログイン画面
+ +### プロンプト ベースの生成 +**手順 1**: GenAI ダイアログにフリーテキスト プロンプトを入力します。 + +**手順 2**: 生成された結果を **[プレビュー]** セクションで表示します。 + +**手順 3**: [プレビュー] セクションのプラス ボタンを使用して操作を適用します。 +- **コンテンツの追加** – 現在のビューの最後にコンテンツを追加します。 +- **新しいビューの作成** – 新しく生成されたコンテンツを別のビュー ページに追加します。 +- **コンテンツの置換** – 現在のビューで選択されたコンポーネントを生成された出力に置き換えます。別のものに変換したいセクション/レイアウト/コンポーネントを選択し、もう一度 GenAI ダイアログを開いてプロンプトを配置し、[追加] ボタン -> [コンテンツの置換] オプションをクリックします。 + +**プレースホルダー値と幅 200px を指定して、要素を「検索」タイプの入力に置き換える例:** + +コンテンツの置換の置換
+ +ユーザーは、さまざまなコンテキスト メニュー オプションを使用して、ビューを繰り返し生成および調整できます。動作は**現在のビューの状態**と**選択されたコンポーネント**に依存します。 + +| コンテキスト | コンポーネントが選択されていません | レイアウト コンテナーが選択されています | コンテナー以外のコンポーネントが選択されています | +| ------------------- | ----------------------------------------- | ----------------------------------------------- | --------------------------------------------------- | +| **コンテンツの追加** | ビューの末尾にコンテンツを追加します | 選択したコンテナーにコンテンツを追加します | 最初に選択されたコンポーネントの前にコンテンツを挿入します | +| **コンテンツの置換** | 現在のビューのコンテンツを完全に置き換えます | 選択されたコンテナーの内容を完全に置き換えます | 選択されたすべてのコンポーネントを置き換えます | +| **新しいビューの作成** | 新しいマスター ビューを作成します | 新しいマスター ビューを作成します | 新しいマスター ビューを作成します | + +> [!NOTE] +> **元に戻す/やり直し**は、**追加**および**置換**アクションではサポートされていますが、新しいビューの作成では**サポートされていません**。 +> 生成されたコンテンツにビュー コンテナーが含まれる場合は、**子ビューを作成できます**。 +> **AI によって生成されたビュー**と**手動で作成されたビュー**の両方を売り返し改良できます。 + +### 画像ベースの生成 + +GenAI ダイアログの [表示] タブのボタンを使用して画像をアップロードします。 + +画像アップロード ビューの生成
+ +> [!NOTE] +> 画像ベースの生成では、参照に完全に準拠することが保証されるわけではなく、AI によって一部のコンポーネントまたはレイアウトは異なる解釈をされる場合があります。 + +### ユース ケースの例 + +#### 例 1: ログイン画面 + +プロンプト: +``` +Create a detailed login screen +``` + +ログイン画面
+ +AI 出力 - Angular テンプレート: + +```html +Enter your username and password to log in.
+ +Blazor コードを使用したログイン画面
+ +#### 例 2: カーサービス ビュー + +プロンプト: + +``` +Design a booking screen for an auto-service shop app that allows customers to schedule common car services. The screen should include sections for vehicle selection, available services, appointment scheduling, and a booking summary. Users first select their car make, model, and year from dropdown menus. Then, they choose a service from a grid of six cards, each displaying the service name, price, description, and a "Select" button. Next, they pick a date from a calendar and select an available time slot from a grid of eight buttons. Finally, the booking summary lists the selected services and provides "Confirm Booking" and "Cancel" buttons. The layout should follow a structured column and row format, ensuring a seamless flow from vehicle selection to appointment confirmation. +``` + +自動車整備工場
+ +AI 出力 - Angular テンプレート: + +```html +