mPaaS 統合コンポーネントライブラリ（AntUI）は、標準化されたビジュアル仕様に基づいて、抽象的なビジュアル仕様の概念をコントロールエンティティに変換します。開発者は、統合コンポーネントライブラリを使用することで、コントロールアクセス時にクライアント上でビジュアル仕様を統一できます。
統合コンポーネントライブラリアーキテクチャ
AntUI の全体的なアーキテクチャは、ブロックビルディングに似ています。 AntUI 統合コントロールシステムは、下から上に構築されます。
次の表は、アーキテクチャのレイヤーを下から上に説明しています。
アーキテクチャレイヤー | 説明 |
Foundation レイヤーは、モジュール式のビジュアル仕様を表します。これは、AntUI システムを構築するための基盤であり、アトミックリソース、アトミックウィジェット、および Iconfont で構成されています。 Foundation レイヤーは、ビジュアル仕様の最小単位で構成されています。 | |
Common レイヤーは、AntUI のコア統合モジュールであり、ビジネス側で最も頻繁に使用される統合ウィジェットモジュールです。このレイヤーは、共通リソース、基本ウィジェット、およびテーママネージャーで構成されています。 Common レイヤーは、Foundation レイヤーの組み合わせと可視化に基づいて構築されています。このレイヤーは、クライアント上のすべての一般的なシナリオで使用できます。 | |
このレイヤーは、資金ウィジェット、ビジネスウィジェット、コミュニティウィジェットなど、シーン指向のウィジェットのセットを構築します。 mPaaS はスーパー アプリケーションであるため、そのボリュームによって、大量のビジネスでパーソナライズされた処理が必要になります。したがって、AntUI は Scene レイヤーを設定し、Foundation レイヤーに基づいてビジネスを処理するためのパーソナライズされたシーン指向のウィジェットを構築します。 | |
Application レイヤーは、差別化された処理や HTML5 コンテナーのサポートなどの機能を提供します。このレイヤーは、統合とプラットフォームのパーソナライゼーションの競合を解決します。 アトミックリソース、組み合わせ、およびシーンは、AntUI 構築の基礎となります。ただし、実際のアプリケーションシナリオでは、Android、iOS、および HTML5 の要件を同時に考慮する必要があります。したがって、統合コンポーネントライブラリは、プラットフォームのパーソナライズされた差別化された API、つまりアプリケーションレイヤーを構築します。 |
Foundation レイヤー
モジュール式のビジュアル仕様を表します。これは、AntUI システムを構築するための基盤であり、主にアトミックリソース、アトミックコントロール、および Iconfont アイコンが含まれています。
アトミックリソースは、色、サイズ、間隔など、ウィジェットで使用されるリソースを一意性を確保するためにアトマイズされた方法で定義します。たとえば、色は赤、黄、青を含み、フォントサイズは 1、2、3 を含みます。
アトミックウィジェットは、プラットフォームフレームワークの組み込みウィジェットをパッケージ化して、基本的なアトミックウィジェットライブラリを構築します。
Iconfontは、一般的なシーンのアイコンを収集し、Iconfont 形式を構築して、使用可能なウィジェットアイコンライブラリを提供します。
Common レイヤー
Common レイヤーは、AntUI のコア統合モジュール、つまりクライアントで最も一般的に使用される統合コントロールモジュールです。共通リソース、基本コントロール、およびスタイルマネージャーが含まれています。
共通リソースは、タイトルの色、コンテンツの色、リンクの色など、アプリケーションシナリオに基づいてアトミックリソースの二次定義に使用されます。
基本ウィジェットは、ビジュアルドラフトで定義されているウィジェットに対して 1 対 1 のビジュアルプレゼンテーションを実行し、Android と iOS で一貫した命名と実装を保証します。これにより、クライアントでの開発と使用が容易になります。
テーママネージャーは、スタイルを抽象的な方法で定義し、一元的に管理します。特定のウィジェットは、複数のスキンのセットを切り替えることができます。スタイルの抽象化は、増分定義方式で実装されます。したがって、ビジネスに必要な一部の要素のスタイルにのみ焦点を当てる必要があります。
Scene レイヤー
このレイヤーは、資金コントロール、ビジネスコントロール、ソーシャルコントロールなど、シーンベースのコントロールのセットを構築します。
Application レイヤー
Application レイヤーは、差別化された処理や HTML5 コンテナーのサポートなどの機能を提供します。このレイヤーは、統合とプラットフォームのパーソナライゼーションの競合を解決します。
Android プラットフォームと iOS プラットフォームでは、ビジュアル仕様が異なります。アクションシートを例にとると、AntUI はプラットフォームごとに異なる処理を実行します。
iOS プラットフォームの場合は、下部のフライアウトを保持します。
Android プラットフォームの場合は、中央のリスト [ポップアップウィンドウ] を保持します。
H5 には、[ポップアップウィンドウ] や [タイトルバー] など、さまざまなシーンがあります。 HTML5 でのビジュアルエクスペリエンスでプラットフォームの機能を維持するために、AntUI は HTML5 コンテナー用の統合 JSAPI を定義しています。これにより、Android および iOS 上の HTML5 ページの差別化された処理のために、プラットフォームウィジェットの呼び出しが容易になります。
連携
デザイナーと開発者の間のコミュニケーションコストを削減し、コントロールの開発とビジュアルデザインの繰り返しを避けるために、統合コンポーネントライブラリ（AntUI）は開発とビジュアル作業を集約します。
デザイナーは仕様を策定し、開発者は仕様をコントロールに解釈します。完全な開発ガイドラインは、開発の実装を促進し、ワンストップコントロールシステムを形成します。
統一された命名規則により、デザイナーと開発者は統一された認識を実現できます。詳細については、「コンポーネントの仕様と原則」セクションをご参照ください。
デザイナーは、デザインパネルを通じて既存のコントロールを認識し、簡単なドラッグアンドドロップ操作でページの基本構造を構築できます。
開発者は、ポータル集約開発ドキュメントとビジュアル仕様を参照し、デモをダウンロードすることで、コントロールの視覚効果を直感的に確認できます。
コンポーネントの仕様と原則
命名規則
同じタイプのウィジェットは、Android と iOS で同じ名前を付ける必要があります。ウィジェット名には、AU というプレフィックスを付ける必要があります。ウィジェットのカスタムプロパティは、キャメルケースで名前を付ける必要があります。
説明プラットフォームの違いにより、一部のウィジェットは一方のプラットフォームで実装する必要がある場合がありますが、もう一方のプラットフォームでは実装する必要がない場合があります。
基本ウィジェットとビジュアル/インタラクション仕様のマッチング
仕様で指定されていないコントロールは、標準コントロールでは配信できません。
仕様で指定されていないが、既に複数の場所でで使用されているコントロールは、候補コントロールセットで配信する必要があります。
[タイトルバー] 仕様などの単一の仕様は、単一のコントロールとして実装するために強制的に要求されるわけではありません。
使いやすさ
commonui とは異なり、統合コントロールライブラリは、システムコントロール（APImageView や APTextView など）を単純にカプセル化するわけではありません。システムコントロールを使用する必要がある場合は、ネイティブコントロールを使用することをお勧めします。
コントロール名は正確で明確である必要があります。
同様の関数は、異なるコントロールで一貫している必要があります。
ユーザーの習慣を尊重する必要があります。
拡張性
ラベル数の動的な変更など、ウィジェット機能を実装するためにハードコーディングを使用しないでください。
[ダイアログボックス] や [ナビゲーションバー] など、一部のウィジェットは、レイアウトの外部変更をサポートする必要があります。
新規性
最新のプラットフォーム機能を試すことができます。たとえば、Android 用に RecyclerView を使用できます。