Pega CosmosデザインシステムによるUIデザイン

Cosmosは、Pegaの前世代のデザインシステムであるPega UI-Kitの後継製品です。 どちらも顧客の従業員エクスペリエンスを向上させ、本番アプリケーションに焦点を置いています。 しかし、Cosmosデザインシステムは、UI-Kitよりもさらに進化し、アクセシビリティとローカリゼーションをサポートするコンポーネントが完璧に実装された集合体からなる完全なプレゼンテーションレイヤーを提供します。

Pega Cosmosデザインシステムは、決められた一貫性のある、直感的で理解しやすいユーザーインターフェイスを提供することで、チームがビジネスアプリケーションにおいて理想的なユーザーエクスペリエンスを迅速に実現できるようにします。 Pega CosmosクライアントはREACT Web-Standard上に構築され、Pega Developer Experience (DX) APIを使用してPegaサーバーを操作し、オープンなモジュール形式のAPIベースのアーキテクチャを提供します。  Pega Cosmosでは、ビジネスロジックとプレゼンテーションロジックの間に関心の分離（SoC）が適用されます。

この図は、Cosmosの各箇所がModel View Controller（MVC）アーキテクチャを表現する方法を示しています。 Reactコンポーネントは、MVCでいうビューに該当します。 ランタイムオーケストレーションレイヤーであるConstellationは、MVCでいうControllerに該当します。  Pega ServerやPega Engineは、MVCでいうModelに該当します。

Pega Cosmosデザインシステムは、AI、ケースマネジメント、およびコラボレーション用に、またそれらを中心に構築され、エンタープライズ特有の指標でテストされます。 Pegaのすぐに使えるエクスペリエンスを使用して、迅速なビジネス成果を得ることができます。 Cosmosデザインシステムは、ビルディングキットとしてレンダリングされたUXパターンのライブラリで、Pega ExpressおよびCenter-Outの方法をサポートします。

Pega Cosmos UXフレームワークは、ローコードアプリケーションを構築する開発者向け、日々のワークフローを管理するビジネスユーザー向け、さらには直接関与する顧客向けの3つの異なるエクスペリエンスに特化したものです。

Cosmosは、App Studioで設定可能な（ローコード）、アプリケーション開発者向けの完全なフロントエンドシステムです。 Pega Cosmosは、情報アーキテクチャ、インタラクション、および適切なアクセシビリティを備えた、すべてにおいてプロフェッショナルなプレゼンテーションレイヤーを提供します。 これは、大規模な組織のニーズに対応した完全なUXツールキットで、ケースマネジメントアプリケーションのユースケースを中心に構築されています。

Cosmosでは、従来のPega UI、iOS、Android、およびReactの4つの異なるテクノロジーでレンダリングを実行できます。 Cosmos React UIは、本番システム用Pega v8.6で利用できることに注意してください。

Cosmosデザインのメリット、新しいワークの方法には以下の内容があります。

• ワークパフォーマンスの向上
• オブジェクトリレーションシップエクスペリエンスの向上
• エクスペリエンスに統合されたAI
• 社内のコラボレーションツール使用時のユーザーエクスペリエンスの向上
• モニターやデバイスの大型化への対応

設計上、Theme-Cosmosには1つのユーザーポータルしかありません。 ユーザーポータルのランディングページは、大きく3つのパートに分かれます。

• サマリーパネル：オブジェクトメタデータ、オブジェクトデータ、関連オブジェクトが含まれます。 
• ワークエリア：ライフサイクルタスク、アドホックタスク、（AI経由で）提案されたタスク、コラボレーション、完了タスクが含まれます。 
• ウィジェット：参加者、ユーティリティ、添付ファイル、見積もり、パートナーが含まれます。 

Cosmos UIのカスタマイズ方法については、「Customizing a Cosmos Rules application」を参照してください。

UI-KitとCosmosはまったく別のデザインシステムです。  あらゆるデザインシステム間の移行と同様に、移行には開発工数が必要であり、その労力のレベルはアプリケーションの複雑さによって異なります。 

• 労力レベルの把握
• 移行に向けたアプローチとヒント
• ベストプラクティス

労力レベルの把握

労力のレベルは、以下の条件によって異なります。

• ケースタイプの数
• UI-Kitからオーバーライドされたルールの数
• スキンオーバーライドとカスタムスキンフォーマット
• Cosmosスキンに存在しないスキンフォーマットの使用
• セクションルールの考慮事項は以下のとおりです。
  • UI-Kitからオーバーライドされるセクションの量
  • デザインテンプレートに基づかないセクション
  • スタイリング用のセクションヘルパークラス
  • カスタムセクション、HTML、コントロールの非互換性

移行に向けたアプローチとヒント

UI-Kitで構築されたアプリケーションをCosmos UIに移行するためのステップごとの手順の詳細については、「Migrating an existing application from UI-Kit to Cosmos UI」を参照してください。

ベストプラクティス

Cosmos UIの移行に向けた準備を行うには、以下のベストプラクティスに取り組んでください。

Cosmosでアプリケーションを設計する方法を学ぶ

1. アプリケーションの主な目的を明確化します。 
   業界用語や専門用語を排除し、アプリケーションの主な目的を可能な限りシンプルに説明します。 この概念はPega Express™の方法論に結びついています。 
2. 実際のビジネスオブジェクトを特定し、それがCosmosシステムのどこにあるのかを明らかにします。
   必要なデータ、データの移動先、およびUIに必要なアクセス方法を明確にする必要があります。
3. 具体的なユースケースの例を見てみましょう。
   アクション、ワーク、およびアクティビティの内容と実施する必要がある場所を明確にする必要があります。  また、AI、コラボレーション、およびナビゲーションがシステム内でどのように機能するかを特定します。

この3つの項目を特定できれば、Cosmosシステム内での設計は非常に容易になります。

Case Designerへのコンプライアンス

Case Designerを使用してケースタイプを設定し、シームレスなケースとサブケースのリレーションシップを採用します。 App Studio Data Designerを使用して、データリレーションシップを管理します。

デザインテンプレートベースのUI

Cosmosは、完全にテンプレート化されたシステムであるため、テンプレートを最大限に活用しています。 今すぐアプリでデザインテンプレートに移行しておくと、後でCosmosに移行するときに役立ちます。 

カスタムHTML、カスタムコントロール、カスタムセクションの回避

以前にリリースされたPegaで開発されたアプリには、JSPやその他のテクノロジーを用いて構築された多くのカスタムコンポーネントが残っています。 それらのコンポーネントは、ReactベースのUI内では動作しません。 代わりに、すぐに使えるReactの同等品を含む、すぐに使えるコントロールを使用するのが最適な方法です。

PegaのUIとUXのアプローチに関する詳細については、UI/UX Excellence Webinarをご覧ください。