数日前、AWS は公式 Web サイトの公開を通じて、 Cloudscape デザイン システムは、直感的な Web アプリケーションを構築するためのオープン ソース ソリューションです。
Cloudscape Design System は、Web アプリケーションを構築するための包括的な一連のガイドラインと、展開を迅速化するための設計リソースとフロントエンド コンポーネントで構成されています。
「本日、魅力的で包括的なユーザー エクスペリエンスを大規模に作成するためのオープン ソース ソリューションである Cloudscape Design System を発表できることを嬉しく思います。 雲景
「AWS Web アプリケーションのユーザーエクスペリエンスを向上させ、チームがこれらのアプリケーションをより迅速にデプロイできるようにするために、2016 年に作成しました。 それ以来、お客様からのフィードバックと調査に基づいて継続的に改善してきました」と AWS は述べています。
Cloudscape Design System について
Cloudscape Web アプリケーションを構築するためのオープン ソースの設計システムです。 AWS のサービスに属するウェブ アプリケーションのユーザー エクスペリエンスを向上させ、チームがこれらのアプリケーションをより迅速にデプロイできるようにします。
各コンポーネントには作業環境があります 設計者と開発者は、コンポーネントの動作とサンプル コードを確認できます。 作成時の時間と労力を節約するために、AWS はアクセシビリティ オプションと設計ソリューションに関する段階的なガイダンスを提供します。
アプリケーションの自動テストを作成するときは、Cloudscape コンポーネントと対話します。 たとえば、Cloudscape ボタンを選択し、そのボタンに関連付けたアクションを反映するようにアプリが更新されることをアサートできます。 CSS クラス名を含む Cloudscape コンポーネントの内部 HTML 構造は、いつでも変更される可能性があります。
だからこそ AWS は各コンポーネントのテスト ユーティリティを作成しました。 テスト ユーティリティには安定した API があるため、どのセレクターを使用するかを気にすることなく、これらのコンポーネントの関連部分にアクセスできます。 Cloudscape のテスト ユーティリティはフレームワークに依存せず、任意のテスト スタック (Jest および jsdom から WebdriverIO まで) および次のもので使用できます。
- ユニットテスト、通常はドキュメント オブジェクト モデル (DOM) に直接アクセスできます。
- 統合テスト、文字列セレクターに依存するのが一般的です。 テスト ユーティリティは、メイン コンポーネント パッケージの一部です。
- 選択フィルター: これにより、ユーザーは XNUMX つまたは XNUMX つのプロパティを選択して、リソースのコレクション内の特定のアイテムを見つけることができます。
- コンテナ： コンテナを使用すると、コンテンツ要素のグループを表示して、要素が関連していることを示すことができます。 たとえば、配列はコンテナの一種です。
- 展開可能なセクション: これにより、ユーザーはセクションを展開または折りたたむことができます。 ページに複数のセクションがあり、ユーザーが一度に XNUMX つ以上のセクションを表示できるようにする場合は、展開可能なセクションを使用することをお勧めします。 展開可能なセクションはデフォルトで折りたたまれています。
- アクセスポイント: ハンズオン チュートリアルでは、ホットスポットは、ホットスポット アイコンを配置する場所を示す目に見えないコンテナーです。 ホットスポット アイコンは注釈コンテキストによって表され、注釈ポップアップの開閉に使用されます。
- 分割ペイン: これは、情報または二次コントロールへのアクセスを提供する調整可能なパネルです。 これは、コンテキスト リソースの詳細を含むリソースのコレクションを表示するためのテンプレートである分割ビューを実装するための主要なコンポーネントです。
- ウィザード： 複雑なフローまたは相互に関連する一連のタスクを通じてユーザーをガイドする複数ページのフォーム。 ウィザードは、ナビゲーション ペイン、ヘッダー、メイン コンテンツ領域、およびアクション ボタンで構成されます。
最後に あなたがそれについてもっと知りたいならCloudscape Design System は、AWS の製品とサービスのために作成され、使用されていることを知っておく必要があります。 クラウドで製品を構築するすべての人が AWS Design System の恩恵を受けることができるように、オープンソースとしてリリースされています。
で詳細を確認できます 次のリンク。