デザイナー機能紹介

この文書の主な目的は、ユーザーが宜搭カスタムページデザイナーの全体的なフレームワークおよび具体的な機能モジュールを理解し、ユーザーが宜搭カスタムデザイナーを使用して迅速にビジネス開発を行うのを支援することです。

全体的なフレームワーク

宜搭カスタムデザイナーの全体的なフレームワークには、以下の5つの機能領域が含まれます：

カスタムページデザイナーはフォームデザイナーと非常によく似ており、主に5つの領域で構成されます：

• トップナビゲーションバー- 宜搭の汎用ナビゲーション機能を提供するだけでなく、ページ名のクイック編集、ページの保存およびプレビューなどの機能も実現しています；
• 左ツールバー- 主にページのグローバル構成に使用され、アウトラインツリー、コンポーネントライブラリ関連パネル、その他のグローバル構成パネル（データソース管理、アクションパネルなど）を提供します；
• トップツールバー- 主にビジュアル編集エリアの構成に使用され、国際化言語切替、PC&スマホ端末表示切替、履歴記録などがあります；
• ビジュアル編集エリア- デザイナーの主操作エリアであり、ユーザーが構築するページを「見えるものが得られる」方式で表示し、ドラッグアンドドロップ、クリックなど複数のインタラクティブ方式を提供してユーザーがページ構築を行うのを支援します；
• 右ツールバー- 主に選択したコンポーネントの属性構成に使用され、属性、スタイル、高度の3つのパネルに分かれ、コンポーネントの異なる次元の属性構成に対応しています；

機能の詳細

上図にはカスタムデザイナーのすべての機能モジュールが標記されており、以下で順に紹介します：

1. プラットフォームナビゲーションクイックアクセス

アイコンにマウスをホバーするとプルダウンでプラットフォームのショートカットメニューバーが表示され、スタートページ、マイアプリケーション、アプリケーションセンターなどのページに素早くジャンプできます。

2. アプリケーション名

現在構築しているページが属するアプリケーション名を表示し、このアプリケーション名をクリックするとアプリケーションのページ管理ページにジャンプできます。

3. ページ名

現在構築しているページのページ名を表示し、小さな鉛筆アイコンをクリックするとページ名のクイック編集がサポートされます。

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

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

5. 国際化言語切替

プルダウン方式で異なる国際化言語に切り替えることをサポートしており、現在は簡体字中国語と英語がサポートされています。

6. 表示ウィンドウ切替

PCおよびスマホビューモードへの切替をサポートしており、切替後ビジュアルデザイナーはこれに応じた適応表示を行います。

7. 進む&戻る

宜搭デザイナーはユーザーの操作記録を記録し、進む戻る操作をサポートします。

8. 履歴記録

履歴記録アイコンをクリックすると、デザイナーは右側に最近のユーザー保存履歴を表示し、ユーザーは特定のバージョンの履歴記録を選択してロールバックできます。

9. グローバル検索

宜搭デザイナーは迅速なグローバル検索機能を提供し、ユーザーはキーワードで検索して特定の設定位置にすばやくジャンプできます。

10. ショートカットキー

ショートカットキーのアイコンをクリックするとショートカットキー表示ポップアップが呼び出され、ユーザーは宜搭デザイナーがサポートするショートカットキーリストを確認できます。

11. ページ設定

ページ設定ボタンをクリックすると、右ツールバーはページの設定パネルに切り替わり、ユーザーはページの最も外側のコンテナの属性構成およびスタイル構成を行うことができます。

12. プレビュー

プレビューボタンをクリックすると、ページ情報が自動的に保存され、ページデザイナーでプレビューフロートウィンドウが呼び出され、ページの実際のプレビューが表示されます。

13. 保存

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

14. アウトラインツリー

アウトラインツリーパネルを通じて、ユーザーは現在編集しているページのコンポーネント階層構造を明確に確認できます。アウトラインツリーパネルでは以下の操作が可能です：

• コンポーネントの選択：ユーザーがコンポーネントツリーのノードをクリックすると、キャンバスでそのノードに対応するコンポーネントがハイライト表示されます；
• コンポーネントのドラッグ移動：ユーザーはコンポーネントをドラッグしてその位置を変更でき、ドラッグ操作はコンポーネントツリー&キャンバス間の相互ドラッグをサポートしています；
• コンポーネントのクイック非表示：マウスをコンポーネントツリーノードの上に置くと、ユーザーはクイック操作アイコンを見ることができ、コンポーネントを素早く非表示にすることができます；

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

ユーザーは現在のページで使用可能なすべての公式コンポーネントリストを表示できます。ユーザーは名前で検索したり、コンポーネントライブラリのフィルターなどの操作で必要なコンポーネントを素早く検索できます。またユーザーはコンポーネントライブラリのコンポーネントを操作してドラッグし、ビジュアル編集エリアの指定位置に追加できます。

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

ブロックはコンポーネントをビジネスルールで組み合わせたものであり、コンポーネントより粒度の大きい素材であると理解できます。ブロックライブラリの使用方法はコンポーネントライブラリと似ており、ユーザーはドラッグ方式でブロック素材をキャンバスまたはコンポーネントツリーに追加することをサポートしています。

17. データソース

ページデータソース構成。宜搭のカスタムページは2つのタイプのデータソースをサポートしています：

• 変数 - ページのグローバル状態管理に使用；
• リモート API - ページの非同期データリクエスト管理に使用；

18. アクションパネル

JSコードを使用してビジネスロジックを記述するためのもので、構文は完全なES6構文をサポートしています。具体的には以下の設定シナリオがあります：

• ページライフサイクル構成；
• アクション処理関数構成；
• ページ共通関数構成；

19. 多言語文言管理

国際化の多言語文言ライブラリを構成するためのもので、i18n APIを提供して言語ライブラリの取得を行います。

20. 高度な属性構成

選択したコンポーネントの高度な属性を構成するためのもので、具体的には以下が含まれます：

• レンダリングの有無：コンポーネントの動的条件レンダリングを実現；
• ループ：コンポーネントのループレンダリングを構成して実現；
• 一意識別子：コンポーネントの一意識別子。Reactのkeyの概念に似ています；

21. スタイル属性構成

ユーザーはキャンバスのコンポーネントを選択し、右側のスタイルパネルで選択したコンポーネントのスタイル（対応するReactコンポーネントのstyle属性）を編集できます。すべてのコンポーネントのスタイルパネル構成は同じであり、対応するCSSスタイル属性があります。

22. コンポーネント属性構成

ユーザーはビジュアル編集エリアのコンポーネントを選択し、右側の属性パネルで選択したコンポーネント属性（対応するReactコンポーネントのprops）を編集できます。デザイナーはコンポーネントが接続される際の属性構成に応じて異なる属性構成パネルを表示します。

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

サポートの迅速な検索または相談に使用され、以下のクイックアクセスがあります：

• 営業前相談；
• カスタム開発；
• 公式アカウントをフォロー；
• エクスペリエンスフィードバック；
• 人工サービス；

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

ビジュアル編集の主体エリアであり、ユーザーはキャンバスで以下の操作を行うことができます：

• コンポーネントの選択：右側の構成パネルで構成が必要なコンポーネントを選択；
• コンポーネントのドラッグ移動：コンポーネントツリーおよびキャンバスの相互素材ドラッグ移動；
• コンポーネントのドラッグ追加：コンポーネントライブラリおよびブロックライブラリから素材インスタンスを選択し、編集エリアにドラッグ追加；