> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# デザイナー概要

> YiDA カスタムページデザイナーのレイアウトと機能モジュールを解説。コンポーネントパネル、キャンバス、プロパティ設定エリアの構成を理解し、ビジュアルなページ構築をすぐに始めるためのガイドです。

このドキュメントでは、YiDA カスタムページデザイナーの全体構成と各機能モジュールを解説し、YiDA カスタムデザイナーを活用してスムーズに業務開発を進められるようご案内します。

## 全体構成

YiDA カスタムデザイナーは、以下の 5 つの機能エリアで構成されています。

カスタムページデザイナーはフォームデザイナーとよく似ており、主に次の 5 つのエリアで構成されます。

* **上部ナビゲーションバー** — YiDA の共通ナビゲーション機能に加え、ページ名の編集、ページの保存、プレビューなどを素早く実行できます。
* **左側ツールバー** — ページ全体の設定に使用します。アウトラインツリー、コンポーネントライブラリパネルのほか、データソース管理やアクションパネルなど全体設定用のパネルを提供します。
* **上部ツールバー** — ビジュアル編集エリアの設定に使用します。国際化言語の切り替え、PC / モバイル表示の切り替え、会議履歴の確認などを行えます。
* **ビジュアル編集エリア** — デザイナーの主要な操作エリアです。構築中のページを WYSIWYG 形式で表示し、ドラッグアンドドロップやクリックといった操作でページ構築を支援します。
* **右側ツールバー** — 選択したコンポーネントのプロパティを設定するために使用します。属性、スタイル、プレミアムの 3 つのパネルに分かれており、それぞれコンポーネントプロパティ設定の異なる次元に対応します。

## 機能詳細

上図には、カスタムデザイナーのすべての機能モジュールが示されています。以下で 1 つずつご紹介します。

### 1. プラットフォームナビゲーションのクイックエントリ

アイコンにマウスをホバーすると、プラットフォームのショートカットメニューが展開されます。ここから、スタートページ、マイアプリ、アプリセンターなどへ素早く移動できます。

### 2. アプリ名

構築中のページのアプリ名を表示します。アプリ名をクリックすると、そのアプリのページ管理画面に移動します。

### 3. ページ名

構築中のページの名前を表示します。鉛筆アイコンをクリックすると、ページ名を素早く編集できます。

### 4. ページ設定ナビゲーション

ナビゲーションリンクをクリックすると、ページ設定画面やページ公開設定画面へ素早くアクセスできます。

### 5. 国際化言語の切り替え

ドロップダウンから言語を切り替えられます。現在は簡体字中国語と英語に対応しています。

### 6. 表示ビューポートの切り替え

PC 表示モードとモバイル表示モードを切り替えます。切り替え後は、ビジュアルデザイナーの表示もそれに応じて変化します。

### 7. 元に戻す / やり直し

YiDA デザイナーは操作履歴を記録しており、元に戻すおよびやり直し操作に対応しています。

### 8. 会議履歴

会議履歴アイコンをクリックすると、直近に保存された会議履歴がデザイナー右側に表示されます。特定のバージョンを選択してロールバックできます。

### 9. グローバル検索

YiDA デザイナーは高速なグローバル検索機能を提供します。キーワード検索により、特定の設定項目を素早く見つけられます。

### 10. ショートカットキー

ショートカットキーアイコンをクリックすると、ショートカットキーダイアログが開き、YiDA デザイナーが対応するショートカットキー一覧を確認できます。

### 11. ページ設定

ページ設定ボタンをクリックすると、右側ツールバーがページ設定パネルに切り替わり、ページ最外層コンテナのプロパティとスタイルを設定できます。

### 12. プレビュー

プレビューボタンをクリックすると、ページ情報が自動的に保存され、ページデザイナー内にプレビューオーバーレイが起動し、実際のページプレビューを確認できます。

### 13. 保存

編集したページ情報をサーバーサイドに保存します。

### 14. アウトラインツリー

アウトラインツリーパネルでは、現在のページのコンポーネント階層を明確に確認できます。アウトラインツリーパネルでは、以下の操作を行えます。

* クリックでコンポーネントを選択：コンポーネントツリー内のノードをクリックすると、キャンバス上の対応するコンポーネントがハイライト表示されます。
* ドラッグでコンポーネントを移動：コンポーネントをドラッグして位置を変更できます。コンポーネントツリーとキャンバス間のドラッグアンドドロップにも対応しています。
* コンポーネントの素早い非表示：コンポーネントツリー内のノードにホバーするとショートカットアクションアイコンが表示され、コンポーネントを素早く非表示にできます。

### 15. コンポーネントライブラリ

現在のページで利用可能なすべての公式コンポーネントを一覧で確認できます。名前検索やコンポーネントライブラリのフィルターを使えば、必要なコンポーネントを素早く見つけられます。また、ライブラリからコンポーネントをドラッグして、ビジュアル編集エリアの任意の位置に追加することもできます。

### 16. ブロックテンプレート

ブロックとは、業務ルールに従って組み合わされたコンポーネントの集合体です。そのため、ブロックは単一のコンポーネントよりも粒度の大きなマテリアルと見なせます。ブロックライブラリはコンポーネントライブラリと同様に動作し、ブロックマテリアルをキャンバスまたはコンポーネントツリーへドラッグできます。

### 17. データソース

ページのデータソース設定を行います。YiDA カスタムページは、次の 2 種類のデータソースに対応しています。

* 変数 — ページ全体のステート管理に使用します。
* リモート API — ページ内での非同期データリクエストの管理に使用します。

### 18. アクションパネル

JS コードで業務ロジックを記述するために使用します。ES6 構文に完全対応しており、以下の設定シナリオをカバーします。

* ページライフサイクルの設定
* アクションハンドラ関数の設定
* ページ共有関数の設定

### 19. 多言語テキスト管理

国際化のための多言語テキストライブラリを設定します。言語ライブラリを取得するための `i18n` API も提供されています。

### 20. プレミアム属性設定

選択済みコンポーネントのプレミアム属性を設定するために使用します。以下の項目が含まれます。

* レンダリングの可否：コンポーネントの動的な条件付きレンダリングを有効にします。
* ループ：コンポーネントのループレンダリング設定を有効にします。
* 固定値識別子：コンポーネントの一意な識別子で、React の `key` の概念に相当します。

### 21. スタイル属性設定

キャンバス上でコンポーネントを選択し、右側のスタイルパネルでそのスタイルを編集します（React コンポーネントの `style` プロパティに対応）。スタイルパネルの設定はすべてのコンポーネントで共通であり、標準的な CSS スタイル属性にマッピングされます。

### 22. コンポーネントプロパティ設定

ビジュアル編集エリアでコンポーネントを選択し、右側の属性パネルでプロパティを編集します（React コンポーネントの `props` に対応）。デザイナーは、コンポーネント統合時に定義されたプロパティ設定に基づいて、異なる属性設定パネルを表示します。

### 23. フィードバックセンター

サポートやコンサルティングへ素早くアクセスできます。以下のショートカットが含まれます。

* 販売前コンサルティング
* カスタム開発
* 公式アカウントをフォロー
* ユーザーエクスペリエンスに関するフィードバック
* ライブサポート

### 24. ビジュアル編集エリア

ビジュアル編集のメインエリアです。キャンバスでは、以下の操作を行えます。

* クリックでコンポーネントを選択：右側パネルでプロパティを設定するコンポーネントを選択します。
* ドラッグでコンポーネントを移動：マテリアルをコンポーネントツリーとキャンバス間でドラッグして位置を変更します。
* ドラッグでコンポーネントを追加：コンポーネントライブラリまたはブロックライブラリから、マテリアルインスタンスを編集エリアへドラッグします。