Additional updates, new SDK topic

Author: randriova

jp/generate-app/generate-app-overview.md

@@ -100,7 +100,8 @@ Angular コード生成を備えた App Builder が市場に出てから数か
 | Snackbar               | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
 | Reveal Dashboard       | :heavy_check_mark: | :x:                | :x:                |
 
-> 注: 部分的に生成されたコンポーネントは :construction: でマークされます。Blazor コンポーネントの既知の問題および制限の詳細については、[Blazor サポート](../blazor-support.md#既知の問題点および制限事項)を参照してください。
+> [!NOTE]
+> 部分的に生成されたコンポーネントは :construction: でマークされます。Blazor コンポーネントの既知の問題および制限の詳細については、[Blazor サポート](../blazor-support.md#既知の問題点および制限事項)を参照してください。
 
 ## その他のリソース
 

jp/generate-app/run-application-locally.md

@@ -6,21 +6,16 @@ _language: ja
 ---
 # アプリケーションをローカルで実行する
 
-> [!NOTE]
-><b>アプリケーション ファイルはパッケージとしてダウンロードして、お好みの IDE で実行できます。
-
-
-### トピック コンテンツ:
-* <a href="#Run-the-app-locally">アプリをローカルで実行する</a>
-
 ### アプリをローカルで実行する
 最終的にアプリを開発するために、コードをコピーしてを貼り付ける必要はありません。代わりに、ツールバーの [アプリの生成] ボタンを使用してください。これにより、Angular または Blazor アプリケーション (プラットフォーム ピッカー ドロップダウンで選択されたフレームワークに依存) を含むパッケージをすばやく作成できます。このアプリを実行するには、Visual Studio Code のような IDE でフォルダーを開きます。
 
 * Node.js がインストールされていることを確認してください。<br>
 * 次に、コンソールで `npm install` と入力して依存関係をインストールします。必要なすべてのパッケージをインストールするのに時間がかかる場合があります。<br>
 * それが完了したら、`npm start` と入力して、アプリをコンパイルして起動します。<br>
 
- 
+> [!NOTE]
+><b>アプリケーション ファイルはパッケージとしてダウンロードして、お好みの IDE で実行できます。
+
 <img src="../images/App-VSCode-Indigo-Design-App-Builder2.PNG" srcset="../images/App-VSCode-Indigo-Design-App-Builder @2x.png 2x" />
 <p style="text-align:center;">VS Code で実行されるアプリケーション</p>
 

jp/getting-started.md

@@ -7,13 +7,31 @@ _language: ja
 
 # App Builder を使用した作業の開始
 
-### トピック コンテンツ:
-* <a href="#app-builder-を起動する">Indigo.Design から App Builder を起動する</a>
-* <a href="#コードの取得">コードの取得</a>
-* <a href="#作成したアプリをローカルで実行する">アプリをローカルで実行する</a>
+App Builder は、すべてのコードを記述することなく、デザインを機能的な Web アプリにすばやく変換できるローコード プラットフォームです。空の状態から始めたり、テンプレートを使用したり、Figma デザインをインポートしたりすることができ、ドラッグ アンド ドロップ コンポーネント、実際のデータとの接続、レイアウトのカスタマイズを使用して視覚的にアプリを構築します。Angular、React、Blazor、Web Components の実稼働環境に対応するコードを生成し、ワンクリックで GitHub または Azure にエクスポートまたは配置できます。
 
-> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]
+## すべての仕組みを理解するために
+
+以下の図は、App Builder がデザインおよび開発ツールのの広範なエコシステムの中でどのように機能しているかを高い視点から示した概要です。
+
+<img class="box-shadow" src="images/platform-ecosystem.png" />
+<p style="width: 100%; text-align:center;">プラットフォーム エコシステム</p>
 
+### 簡単に言うと:
+
+* **デザインシ ステム → UI キットとアダプター**:
+  それは、UI キット (Figma の Indigo.Design など) として実装されたデザイン システムから始まります。アダプターはデザインを App Builder が使用できる形式に変換します。
+* **App Builder + 統合**:
+  App Builder を使用して、アプリを視覚的に作成します。REST データ、Reveal SDK ウィジェット (ダッシュボード用)、Slingshot タスク (プロジェクト管理用) をサポートしています。
+* **共通アプリ モデル**:
+  すべてが中央の**共通アプリ モデル**に集約されます。共通アプリ モデルは、開始方法 (デザインのインポートまたは手動ビルド) に関係なく、アプリを記述する統一された形式です。
+* **コード生成 (Codegen)**:
+  次に、モデルは**コード ジェネレーター**によって使用され、次のような実際の使用可能なコードが出力されます。
+  * **Angular**
+  * **React**
+  * **Web Components**
+  * **Blazor**
+* **配置対象**:
+  最後に、生成されたコードは、**GitHub** や **Microsoft Azure** などのプラットフォームに直接配置できます。
 
 ## App Builder を起動する
 App Builder にアクセスするには、[https://appbuilder.dev](https://appbuilder.dev) に移動してサインインします。または、[https://my.appbuilder.dev](https://my.appbuilder.dev) にアクセスして App Builder を直接起動することもできます。アプリを作成および編集するには、有効なトライアル版または有料サブスクリプションが必要です。
@@ -26,7 +44,9 @@ App Builder にアクセスするには、[https://appbuilder.dev](https://appbu
 4. **デザインのインポート** - Figma または Sketch 用の Indigo.Design UI キットを使用して作成された既存のデザイン ファイルがある場合、これをアプリの開始点として使用できます。これを行うには、デザイン、UI キット、サンプル デザイン ファイルを公開するためのプラグインが含まれる Indigo.Design システムを取得してください。
 
 <br>
-> 注: Sketch の絶対レイアウトと App Builder の Flex レイアウトの違いにより、Sketch ファイルの解析後に追加の調整が必要になる場合があります。
+
+> [!NOTE]
+> 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" />
@@ -37,7 +57,6 @@ App Builder にアクセスするには、[https://appbuilder.dev](https://appbu
 <img src="./images/Indigo-Design-side-menu.png" srcset="./images/Indigo-Design-side-menu-@2x.png 2x" />
 <p style="text-align:center;">サイド メニュー</p>
 
-
 ## コードの取得
 App Builder は、常にライブ実行中の Web アプリケーションをデザイン画面とプレビュー ウィンドウの両方に表示します。基になるコードとアプリケーション モデルは、デザイン画面でアプリケーションに変更を加えると、リアルタイムで更新されます。生成されたアプリケーション コードはプレビュー ウィンドウでいつでも表示できます。また、生成されたアプリケーションを完全なアプリケーション コード リポジトリとしてダウンロードして、選択したコード エディターで開くこともできます。次に、App Builder を使用してデザインしたアプリケーションをマシン上でローカルにビルドして実行し、生成されたコードに追加の変更を加えることができます。
 
@@ -91,9 +110,15 @@ App Builder は、ソフトウェア製品の検出、ソフトウェア製品
 </div>
 <div class="divider--half"></div>
 
+## ビデオ チュートリアル
+
+
+> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]
+
 ## 問題の報告またはフィードバックの送信
 
 [このリポジトリ](https://github.com/IgniteUI/app-builder)は、問題や機能リクエストの送信、および製品の全般的なディスカッション、質問、共有したいフィードバックを対象としています。<a href="mailto:appbuilder@infragistics.com">メールを送信する</a>こともできます。
+
 ## その他のリソース
 <div class="divider--half"></div>
 

jp/images/how-to-create-angular-host-app.png

@@ -7,17 +7,17 @@ _language: ja
 
 # App Builder コンポーネント
 
+左側の**ツールボックス** タブでは、使用可能なすべての [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) のリストと、Absolute、Row、Column Layout、Views Container などの App Builder  の一般的なコンポーネントを順番に表示できます。コンポーネント リストの上部にある検索入力により、特定のコンポーネントを簡単に見つけることができます。すべてのコンポーネントは、使用法に基づいてグループに簡単に分散されます。グレーアウトされたコンポーネントはまだ追加されていないため無効になっていますが、間もなく次のアップデートで利用できるようになります。コンポーネントは、**ツールボックス**からドラッグアンドドロップすることで**デザイン キャンバス**に追加できます。
+
+App Builder コンポーネントの使用:
 <section class="video-container">
     <div>
         <div class="video-container__item">
             <iframe src="https://www.youtube.com/embed/omlSzOuvFlM" frameborder="0" allowfullscreen></iframe>
         </div>
-        <p>App Builder コンポーネントの使用</p>
     </div>
 </section>
 
-左側の**ツールボックス** タブでは、使用可能なすべての [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) のリストと、Absolute、Row、Column Layout、Views Container などの App Builder  の一般的なコンポーネントを順番に表示できます。コンポーネント リストの上部にある検索入力により、特定のコンポーネントを簡単に見つけることができます。すべてのコンポーネントは、使用法に基づいてグループに簡単に分散されます。グレーアウトされたコンポーネントはまだ追加されていないため無効になっていますが、間もなく次のアップデートで利用できるようになります。コンポーネントは、**ツールボックス**からドラッグアンドドロップすることで**デザイン キャンバス**に追加できます。
-
 ## クイック追加のコンポーネント 
 
 Mac でキーボード ショートカットの ctrl + E または cmd + E を使用してコンポーネントを検索および追加することにより、クイック追加機能を使用することもできます。「E」 はすべてを表すことを覚えておいてください。クイック追加は、最近使用したコンポーネントを追跡し、頻繁に使用するコンポーネントをすばやく追加できるようにします。**ツールボックス**でコンポーネントをダブルクリックすると、そのコンポーネントも**デザイン キャンバス**に追加されます。 
@@ -29,7 +29,6 @@ Mac でキーボード ショートカットの ctrl + E または cmd + E を
 
 すべてのコンポーネントには、Indigo.Design システムに一致する一連のプリセット タイプが付属しています。たとえば、Indigo.Design システムには、Raised、Outline、Flat の 3 つのプリセット タイプのボタンがあります。
 
-
 ![component-presets-Indigo-Design-App-Builder](./images/component-presets-Indigo-Design-App-Builder.gif)
 <p style="text-align:center;">コンポーネントのプリセット</p>
 

jp/images/platform-ecosystem.png

@@ -0,0 +1,17 @@
+# App Builder SDK を使用した作業の開始
+
+## SDK の概要
+App Builder SDK は、フロントエンドとバックエンドの両方の機能をアプリケーションに統合するための包括的なツールキットを提供します。まず、[ヘルプ ドキュメントを使用して](https://github.com/IgniteUI/appbuilder-sdk-sample/blob/main/Documentation/Consuming-AB-SDK-all-in-one-doc.md)、フロントエンド SDK パッケージを使用する Angular ホスト アプリケーションを作成し、シームレスな UI 統合を可能にします。サーバー側では、Visual Studio Code や Visual Studio などの開発環境をサポートする App Builder Backend SDK を使用して、カスタム バックエンドを構築できます。これらの基本的な手順により、アプリケーションは、フロントエンドとバックエンドの両方から SDK の機能を十分に活用できるようになります。
+
+<img class="box-shadow" src="../images/how-to-create-angular-host-app.png" />
+<p style="width: 100%; text-align:center;">SDK の実行</p>
+
+このドキュメントでは、SDK のセットアップにおける認証および認可の主要な コンポーネントについても詳しく説明します。[OpenID 認証](../on-premises/auth-with-openid-connect-o-auth.md)を構成すると、ユーザーが外部 ID プロバイダーを使用してログインできるようになり、デフォルトの IAM プロバイダーを超える柔軟性が提供されます。さらに、SDK は認可コード + PKCE (Proof Key for Code Exchange) などの外部認証フローをサポートしており、ホスト アプリケーションが認証を直接管理できます。より高度なシナリオでは、IAuthUserService および IPermissionsService インターフェイスをカスタマイズして、ユーザーのロールとアクセス許可に合わせた独自のロジックを実装できます。オプションのガイドは、ロールベースのアクセス制御を適用した、安全でスケーラブルな統合を保証するバックエンド エンドポイントを構成するのに役立ちます。
+
+## その他のリソース
+<div class="divider--half"></div>
+
+* [App Builder インターフェイスの概要](../interface-overview.md)
+* [単一ページとナビゲーション](../single-page-apps-and-navigation.md)
+* [App Builder コンポーネント](../indigo-design-app-builder-components.md)
+* [Desktop アプリの実行方法](../running-desktop-app.md)