Skip to main content

 

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

OutSystemsでのフロントエンドアーキテクチャの構築

この記事では、OutSystems UIに基づいてOutSystemsでフロントエンドアーキテクチャを構築する方法について説明しています。また、このアーキテクチャを進化させる方法の例とユースケースも示します。

シンプルなプロジェクトのアーキテクチャ

このセクションでは、シンプルなプロジェクトのアーキテクチャのストラクチャについて説明します。

シンプルなプロジェクトのアーキテクチャ

OutSystems UIは、ベースアプリケーションです。これに基づいて、プロジェクトテーマ(OutSystemsパターンに基づく他のプロジェクトパターンのみを追加可能)を作成し、最終的にプロジェクトアプリケーションを作成します。 プロジェクトスタイルガイドもプロジェクトテーマに基づきます。 テンプレートプロジェクトは、アプリケーションのテンプレートです。

フロントエンドアーキテクチャのパターン

以下の図は、OutSystems UIでフロントエンドアーキテクチャを構成する方法を示しています。

フロントエンドアーキテクチャのパターン

OutSystems UIはベースアプリケーションであり、すべてのUIパターンとすぐに使用できる画面テンプレートが含まれています。

赤色の四角形は、OutSystems UIパターンを表しています。 ライトブルーの四角形は変更されたスタイルを表しており、Corporate Stylesをカスタマイズするためのルールが含まれています。これらは、OutSystems UIに基づきます。 ライトブルーの三角形は、新しいパターンを表しています。 Corporate Stylesで定義されたこれらの四角形と三角形のパターンはすべてのアプリケーションで使用され、特定のテーマで変更することができます。たとえば、左側のAppsテーマには新しい円形のパターンが含まれ、Internal Appsテーマには新しい五角形のパターンが含まれ、Partners Appsテーマには新しいひし形のパターンが含まれます。

これらのテーマに基づく複数のアプリケーションを作成することができます。この例では、Appsテーマで定義された同じプロパティを共有する外部アプリ、同じInternal Appsテーマを共有する社内アプリ、Partner Appsテーマを共有するパートナーアプリがあり、これらはすべてCorporate Stylesに基づいています。

フロントエンドのユースケースのアーキテクチャ

以下の図は、フロントエンドアーキテクチャを構成する方法を示しています。

フロントエンドのユースケースのアーキテクチャ

OutSystems UIに基づき、組織のブランディングや広範なスタイル定義を設定することができます。これらには、コアスタイルシートに基づいた共通のパターンやウィジェットが含まれます。 OutSystems UIには、最新のベストプラクティスによって最適化された高度なコードが含まれており、テスト済みの幅広いデバイスとブラウザで使用できます。

ケーススタディ

以下の図は、OutSystems UIに基づくテーマを使用してパートナー用のB2Cカスタムアプリケーションを作成した会社で、このアプリケーションを拡張したり、別のB2Cアプリケーションを作成したり、異なるテーマでB2Bアプリケーションや社内アプリケーションを作成したりする場合のアーキテクチャの例を示しています。

既存のB2Cフロー → 企業と消費者間(例: 警備会社のWebサイト) 新しいB2Bフロー → 企業間(例: 警備会社のパートナー専用Webサイト) 新しい社内フロー → (例: 警備会社のイントラネットアプリケーション)

フロントエンドのユースケースのアーキテクチャ

この会社ではOutSystems UIに基づいて、B2Cアプリケーション用と社内アプリケーション用の2種類のテーマを作成しました。固有のスタイルとレイアウトを含むPartner Themeを作成し、これを使用して、パートナーのブランディング(レイアウト、色、フォントなど)がすべて設定されたパートナー用のCustom Themeスタイルガイドを作成しました。このスタイルガイドで定義されたスタイルとテーマを使用して、エンドユーザー用のカスタムアプリケーションを作成しました。 一方で、会社のスタイルとレイアウトを定義するCorporate Themeを別に作成し、店舗向けのStore Themeスタイルガイドを作成しました。

現在この会社では、この種のアプリケーション向けのスタイルガイドであるB2C Theme 1を使用して、顧客用のアプリケーションの構築を検討しています。このスタイルガイドでは、作成する各B2Cアプリ(この例では、B2C App 1B2C App 2)で使用するすべてのスタイルとレイアウトを定義します。 パートナー専用WebサイトなどのB2Bアプリケーションの開発を開始します。このためには、固有のB2B ThemeとB2B Style Guideを作成して、新しいB2B Appsで使用するすべてのスタイルとパターンを定義する必要があります。 また、既存のCorporate Themeに基づき、既存のStore Themeスタイルガイドを使用してStore Appを作成し、社内アプリケーション用の新しいスタイルガイドCorp Theme 2を作成する予定です。

店舗アプリケーションのフロントエンドアーキテクチャ

以下の図は、前の例の店舗アプリケーションのアーキテクチャに注目したものです。

店舗アプリのフロントエンドアーキテクチャ

新しい店舗アプリケーションでは、Store Style Guideで前に定義されたパターンとテンプレートを利用し、Corporate Baseスタイルで定義された会社のパターンとリソースも利用します。

パートナーアプリケーションのフロントエンドアーキテクチャ

以下の図は、前の例のパートナーアプリケーションのアーキテクチャに注目したものです。

パートナーアプリのフロントエンドアーキテクチャ

パートナーのB2Cアプリケーションでは、カスタムリソース、B2C Style GuidesPartner Baseで定義されたパートナーパターンとリソース、B2C Baseスタイルで定義されているB2Cパターンとリソースを利用します。