Help us understand the problem. What is going on with this article?

【SAPUI5】Component.jsとmanifest.json

More than 1 year has passed since last update.

はじめに

SAPUI5を学んでいて、アプリケーションを構成する色々なファイルの役割を理解する必要があると感じました。そこで今回は、Component.jsと、manifest.jsonの役割について整理します。

これまでのフォルダ構成

前回までに作成したアプリケーションでは、フォルダ構成は以下のようになっていました。Component.js とmanifest.jsonはなくても動いていました。
WS000007.JPG

Component.jsとmanifest.jsonの役割は?

私は、Component.js とmanifest.jsonは、index.htmlから機能を細分化して独立させたものと理解しました。では、具体的にどのような役割分担となっているのでしょうか。

ファイル 役割
index.html Bootstrapの定義、コンテンツを配置する場所(body)の定義
Component.js 初期処理の定義
manifest.json ライブラリのバージョン、モデルなど、アプリケーションに必要な設定を定義

Component.jsはロジックを書くところで、manifest.jsonは値を指定するところ、と言うことができそうです。
もともとこれらはComponent.js一本で記述していましたが、SAPUI5 version 1.30からウェブアプリマニフェストを参考にmanifest.jsonを外に出すようになったそうです。
各ファイルの関係については、SAP公式ドキュメントの図がわかりやすいので参考にしてください。

実装してみる

ゴール

実行結果の見た目は前回と変わりません。
フォルダ構成は以下のようになります。
WS000009.JPG

ステップ

  1. Component.jsを作成する
  2. manifest.jsonを作成する
  3. index.htmlを変更する
  4. アプリを実行する

1. Component.jsを作成する

index.htmlと同じ階層にComponent.jsファイルを新規作成します。
以下のコードを入力します。

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";

    return UIComponent.extend("test.helloworld.Component", {

        metadata : {
            manifest: "json"
        },

        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            // additional initialization can be done here
        }

    });
});

ここで行っているのは、以下の2点です。

  • manifest.jsonを参照することを宣言(metadata:の部分)
  • 初期処理の定義

2. manifest.jsonを作成する

index.htmlと同じ階層にmanifest.jsファイルを新規作成します。
以下のコードを入力します。
※以下は一例で、実装内容はアプリケーションにより変わります

{
    "_version": "1.3.0",
    "sap.app": {
        "_version": "1.3.0",
        "id": "test.helloworld",
        "type": "application",
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "applicationVersion": {
            "version": "1.0.0"
        }
    },
    "sap.ui": {
        "_version": "1.3.0",
        "technology": "UI5",
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": [
            "sap_bluecrystal"
        ]
    },
    "sap.ui5": {
        "_version": "1.2.0",
        "rootView": {
            "viewName": "test.helloworld.view.App",
            "type": "XML",
            "id": "app"
        },
        "autoPrefixId": true,
        "dependencies": {
            "minUI5Version": "1.34",
            "libs": {
                "sap.ui.core": {
                    "minVersion": "1.34.0"
                },
                "sap.m": {
                    "minVersion": "1.34.0"
                },
                "sap.ui.layout": {
                    "minVersion": "1.34.0"
                }
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        }
    }
}

ここでは大きく分けて3つのことを定義しています。共通しているのは、アプリケーションを実行するのに必要なバージョンを指定しているということです。

  • sap.appに関する設定:アプリケーションのid、タイトルなど
  • sap.uiに関する設定:サポートするデバイスの種類、UIのテーマなど
  • sap.ui5に関する設定:最初に表示するビュー(rootView)、従属するライブラリのバージョンなど

それぞれの属性の詳細については、以下のヘルプを参考にしてください。
Descriptor for Applications, Components, and Libraries

3. index.htmlを変更する

attachInitメソッドを以下のように変更します。
もともとビューを直接表示していましたが、Component.jsを呼び出す設定に変更します。初期表示するビューはmanifest.jsonで指定しましたね。

        <script>
           sap.ui.getCore().attachInit(function () {
            /* コメントアウト
              sap.ui.xmlview({
                 viewName : "test.helloworld.view.App"
            */
                new sap.ui.core.ComponentContainer({
                    name : "test.helloworld"
              }).placeAt("content");
           });
        </script>

4. アプリを実行する

実行結果は以下のようになります。
WS000004.JPG

(補足)ファイルの呼び出し順について

デバッグツールで見てみると、index.html⇒Component.js⇒manifest.jsonの順に呼ばれていることがわかります。一方、Fiori Launchpadから実行する場合はindex.htmlは使用せずにComponent.jsが直接呼ばれるそうです。(つまり、Component.jsが必須ということ)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away