【SAP UI5】SAP Build Work Zone（旧Fiori Launchpad）のアプリ名とmanifest.jsonとの相関関係

# 概要
受託開発企業で働くfussasyといいます。普段は、SAP BTP（PaaS）上でSAP Fioriアプリケーション開発をしています。SAP Build Work Zone（旧Launchpad）では、開発したFioriアプリケーシンをタイルとして表示させることができます。SAP UI5でFioriアプリケーションを開発し、デプロイする際はmanifest.jsonで設定内容を記述します。このタイル（Fioriアプリケーション）で設定される各種情報（アプリケーション名、説明、IDなど）と、manifest.jsonで記述した設定項目との関係について、よく忘れてしまうので整理して残しておきます。

# SAP Build Work Zone（旧SAP Fiori Launchpad）とは
SAP Build Work Zoneは、SAPが提供するデジタルワークスペース構築プラットフォームです。従業員が日常業務に必要な様々なアプリケーションや情報を、一つの統合されたインターフェースからアクセスできるようにすることで、生産性向上とユーザーエクスペリエンスの改善を目指しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1727556/deae5a4f-1665-3d8f-7d17-135a16a2273b.png)


https://experience.sap.com/fiori-design-web/launchpad/

SAP Build Work Zoneは、以前はSAP Launchpadと呼ばれていましたが、現在はSAP Build Work Zoneに名称変更されています。SAP Build Work Zoneには、標準版と拡張版があります。標準版は、SAP Fiori Launchpadの後継として位置付けられており、拡張版は、より高度なカスタマイズと開発機能を提供します。

|              | SAP Fiori Launchpad                                        | SAP Build Work Zone                                             | 
| :----------- | ---------------------------------------------------------- | --------------------------------------------------------------- | 
| 対象範囲     | SAPアプリケーションに特化                                  | SAPアプリケーション、サードパーティ製アプリケーション、サービス | 
| カスタマイズ | 比較的制限的                                               | 高度なカスタマイズが可能                                        | 
| 機能         | 	SAPアプリケーションへのアクセス、タイルベースのレイアウト | アプリケーション統合、パーソナライズ、AIによるインテリジェンス  | 
| 目的         | SAPアプリケーションのユーザーエクスペリエンス向上          | デジタルワークスペースの構築                                    | 

**SAP Build Work Zone, standard edition**

https://discovery-center.cloud.sap/protected/index.html#/serviceCatalog/sap-build-work-zone-standard-edition?region=all

**SAP Build Work Zone, advanced edition**

https://discovery-center.cloud.sap/protected/index.html#/serviceCatalog/sap-build-work-zone-advanced-edition?region=all

# manifest.jsonとは
manifest.jsonは、SAP UI5アプリケーションのメタデータを記述する重要なファイルです。アプリケーションの構成、依存関係、ルーティング、モデルなど、アプリケーション全体の情報をJSON形式で定義します。manifest.jsonの主な役割としては、以下のようなものがあります。
**アプリケーションの識別：**
アプリケーションの名前、バージョン、アイコンなどの基本情報を定義します。
**依存関係の管理：**
アプリケーションで使用するライブラリやモジュールを指定します。
**ルーティングの設定：**
アプリケーション内の各ビュー間のナビゲーションルールを定義します。
**モデルの定義：**
アプリケーションで使用されるデータモデルを定義します。
**テーマの設定：**
アプリケーションのテーマを定義します。
**デバイス依存の設定：**
異なるデバイス（デスクトップ、タブレット、スマートフォン）に対応するための設定を定義します。
**サードパーティサービスとの連携：**
ODataサービスやその他の外部サービスとの連携設定を定義します。

# SAP Build Work Zone（旧Launchpad）のアプリ名とmanifest.jsonとの相関関係
例えば、以下のmanifest.jsonについて、Fioriアプリケーションをデプロイするとします。

```json:manifest.json
  "_version": "1.58.0",
  "sap.app": {
    "id": "xxx",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "アプリ記述欄１",
    "description": "アプリ記述欄２",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:basic",
      "version": "1.11.4",
      "toolsId": "yyy"
    },
    "crossNavigation": {
      "inbounds": {
        "zzz-display": {
          "semanticObject": "zzz",
          "action": "display",
          "title": "アプリ記述欄３",
          "subTitle": "アプリ記述欄４",
          "icon": "sap-icon://add-document"
          "signature": {
            "parameters": {
              "department": {
                "required": true,
                "defaultValue": {
                    "format": "plain",
                    "value": "default"
                }
              }
            },
            "additionalParameters": "allowed"
          }
        }
      }
    }
  },
  "sap.ui": { ...

＜以下、割愛＞

```
以下の設定項目について着目し、それぞれFioriアプリケーションのどの設定値を対照となっているか、SAP Build Work Zone上コンテンツマネージャで確認しました。

①"sap.app" > "title"
②"sap.app" > "description"
③"sap.app" > "crossNavigation" > ... > "title"
④"sap.app" > "crossNavigation" > ... > "subTitle"
⑤"sap.app" > "id"
⑥"sap.app" > "crossNavigation" > ... > "semanticObject"
⑦"sap.app" > "crossNavigation" > ... > "action"
⑧"sap.app" > "crossNavigation" > ... > "icon"

【ナビゲーション】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1727556/b1655b29-b0f4-6c97-c19e-42ec8f0e2435.png)
【ビジュアライゼーション】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1727556/159f6f3b-17a1-7882-095d-d29033a172e0.png)
【翻訳】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1727556/7404b907-4833-8699-2f18-c6b12ec22947.png)

# 補足：i18nファイルを活用して定義
i18nファイルを利用して設定値を記述することができます。その場合、manifest.jsonについては、例えば「**"title": "{{appTitle}}"**」のように書き換えます。

```json:manifest.json
  "_version": "1.58.0",
  "sap.app": {
    "id": "xxx",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:basic",
      "version": "1.11.4",
      "toolsId": "yyy"
    },
    "crossNavigation": {
      "inbounds": {
        "zzz-display": {
          "semanticObject": "zzz",
          "action": "display",
          "title": "{{flpTitle}}",
          "subTitle": "{{flpSubtitle}}",
          "icon": "sap-icon://add-document"
          "signature": {
            "parameters": {
              "department": {
                "required": true,
                "defaultValue": {
                    "format": "plain",
                    "value": "default"
                }
              }
            },
            "additionalParameters": "allowed"
          }
        }
      }
    }
  },
  "sap.ui": { ...

＜以下、割愛＞

```


その後、i18nファイルでそれぞれの項目を定義します。

```properties:i18n.properties
appTitle=アプリ記述欄１
#YDES: Application description
appDescription=アプリ記述欄２
#XTIT: Main view title
# title=予備
flpTitle=アプリ記述欄３
flpSubtitle=アプリ記述欄４

 ```

# おわりに
SAP Build Work Zoneのタイル（Fioriアプリケーション）に設定されている各種情報（アプリケーション名、説明、IDなど）と、manifest.jsonで記述した設定項目との関係について、整理させていただきました。どの設定がどのように反映されるか、実際に触ってみないと分からないことが多いですね。引き続き、検証した結果について、備忘録的に残していきたいと思います。