開発ガイド全体構成
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. ビジュアル編集エリア
ビジュアル編集のメインエリアです。キャンバスでは、以下の操作を行えます。- クリックでコンポーネントを選択：右側パネルでプロパティを設定するコンポーネントを選択します。
- ドラッグでコンポーネントを移動：マテリアルをコンポーネントツリーとキャンバス間でドラッグして位置を変更します。
- ドラッグでコンポーネントを追加：コンポーネントライブラリまたはブロックライブラリから、マテリアルインスタンスを編集エリアへドラッグします。