はじめに

この記事は、「CAPで作ったODataをUI5アプリで使う」シリーズの4回目です。
前回の記事ではCAPのOData V4のサービスElementsアプリから利用しました。今回は、V2のサービスをElementsアプリから利用する方法について調べます。

V2版ElementsアプリをMTA + Approuter方式で作るには？

Cloud Foundry用のアプリとして作成するので、前回までと同様にMTA + Approuter方式を採用したいと思いました。

私は通常、ABAPのODataサービスを使ってElementsアプリを作るときはWebIDEのテンプレートを使用しています。CAPのサービスも、Neo環境にDestinationを作ってやればWebIDEから利用することができるようです。
参考：Developing Fiori Element Application (List Report and Object Page) consuming the OData service created using SAP Cloud Application Programming model

ですが、CAPサービスがCloud FoundryにあるのにわざわざNeoにDestinationを作るのもな～～と思い、別の方法でできないか検討してみました。

Fiori Toolsは使える？

そこで浮かんだのがFiori Toolsです。Fiori Toolsは2020年6月に公開されたツールで、SAP Business Application StudioやVS CodeでFiori Elementsのテンプレートを選んでアプリを作成できます。ただ現在のところ、ABAPシステム（クラウド or オンプレ）へのデプロイにしか対応していません。そこで、Fiori Toolsで生成したアプリを色々いじってCloud Foundryにデプロイするという作戦で行くことにしました。
あまりきれいなやり方ではないし、これがベストではないと思いますが、「やってみた」シリーズということでご容赦ください。

今回やること

Elementsプロジェクトを作成
Fiori ToolsでUIモジュールを生成
Cloud Foundryで動かすための調整
Cloud Foundryにデプロイするための調整
デプロイ
ローカルアノテーションを追加

前提

開発環境はVS Codeです。
以下からFiori Toolsをインストールしておきます。
https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack

1. Elementsプロジェクトを作成

おなじみのyomanのgeneratorを使ってプロジェクトを生成します。

yo easy-ui5

uimoduleをFiori Toolsで生成するプロジェクトに置き換えたいので、uimoduleフォルダはバッサリと削除してしまいます。

2. Fiori ToolsでUIモジュールを生成

Ctrl + Shift + Pでコマンドパレットを出して、SAP Fiori tools - Application Generator: Launchを選択します。

SAP Fiori tools - Application Generatorを選択して次に進みます。

List Report Object Page V2を選択します。

Data Sourceに"Connect to an OData Service"を選択します。URLには、CAPで作ったODataサービスのURLを入力します。Main EntityにはProductsを指定します。

モジュール名、タイトル、名前空間、説明を入力し、最後にプロジェクトフォルダを選択します。ここではステップ1で作成したフォルダを指定します。

結果、以下のようにプロジェクトフォルダが生成されました。

フォルダ名をuimoduleに変更します。

実行してみる

uimoduleに移動して、npm startと入力します。
すると、ブラウザが立ち上がりFiori Elementsアプリが表示されました。

3. Cloud Foundryで動かすための調整

ローカルで実行した場合、uimoduleの中の設定だけで動いている状態なので、Cloud Foundryに持って行ったときにちゃんと動くように調整します。

3.1. Approuterの設定

まず、webappフォルダの中にxs-app.jsonファイルを作成します。

以下を入力します。UIモジュールはHTML5リポジトリにデプロイされるので、実行時にそこを見に行くための設定です。welcomeFileとして指定したindex.htmlはこのあと作ります。

uimodule/webapp/xs-app.jton

{
  "welcomeFile": "/index.html",
  "routes": [
    {
      "source": "^(.*)",
      "target": "$1",
      "authenticationType": "xsuaa",
      "service": "html5-apps-repo-rt"
    }
  ]
}

続いて、このアプリの入り口になるほうのApprouterの設定です。ここでは、ODataサービスへのルーティングの設定を行います。

その前に、manifest.jsonを見てみましょう。ODataのuriが/v2/product/となっています。

uimodule/webapp/manifest.json

        "dataSources": {
            "mainService": {
                "uri": "/v2/product/",
                "type": "OData",
                "settings": {
                    "annotations": [
                        "annotation"
                    ],
                    "localUri": "localService/metadata.xml"
                }
            },

以下はui5.yamlの設定です。ローカルで実行した場合、/v2で始まるurlがfiori-tools-proxyというミドルウェアによって本来の宛先に中継されるようになっています。

Approuterでも同様に、/v2/で始まるurlを中継するように設定します。ルーティングされる際にv2をつけたままにしたいので、targetを"/v2/$1"としています。

approuter/xs-app.json

{
  "welcomeFile": "demoproductsv2elements/",
  "authenticationMethod": "none",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/v2/(.*)$",
      "target": "/v2/$1",
      "authenticationType": "xsuaa",
      "destination": "cap-products",
      "csrfProtection": false
    }
  ]
}

3.2. index.htmlファイルの作成

webapp直下にindex.htmlファイルを作成します。これがアプリ実行時に呼ばれる画面になります。内容はV4版Elementsアプリと同じです。

webapp/index.html

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bookshop</title>

    <script>
        window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",
            applications: {
                "browse-products": {
                    title: "Browse Products",
                    description: "list",
                    additionalInformation: "SAPUI5.Component=demo.productsv2elements",
                    applicationType : "URL",
                    url: ".",
                    navigationMode: "embedded"
                }
            }
        };
    </script>

    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-theme="sap_fiori_3"
        data-sap-ui-frameOptions="allow"
    ></script>
    <script>
        sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
    </script>

</head>
<body class="sapUiBody" id="content"></body>
</html>

4. Cloud Foundryにデプロイするための調整

そのままビルド、デプロイしようとしたところ色々なエラーが起きました。問題は結局、ui5.yamlファイルの設定に起因していました。修正後のui5.yamlは以下のようになりました。

uimodule/ui5.yaml

specVersion: '2.0'
metadata:
  name: 'productsv2elements'
type: application
resources:
  configuration:
    paths:
      webapp: uimodule/webapp
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        backend:
          - path: /v2
            url: https://65d11c82trial-mio-trial-dev-products-srv.cfapps.eu10.hana.ondemand.com
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
          version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
builder:
  customTasks:
    - name: "ui5-task-zipper"
      afterTask: "uglify"
      configuration:
        archiveName: "uimodule"
        additionalFiles:
        - approuter/xs-app.json

5. デプロイ

プロジェクトのルートに移動し、以下のコマンドでデプロイします。

npm run deploy

全てうまくいけば、アプリケーションのURLが表示されます。

実行結果

6. ローカルアノテーションを追加

せっかくFiori Toolsを使っているので、ツールを使ってローカルアノテーションをでテーブル列を追加してみましょう。

Ctrl + Shift + Pでコマンドパレットを出して、SAP Fiori tools - Service Modeloer選択します。（対象のプロジェクトが複数でてきたら、今のプロジェクトのuimoduleフォルダを選択します）

ProductService.Productsの横にある@マークをクリックしてアノテーションを表示します。

Ui.LineItemの横にあるコピーボタンを押すと、アノテーションがローカルにコピーされます。

productTypeの列を追加します。入力中にCtrl + Shiftを押すと候補を表示してくれます。

                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="product"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="description"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="productType"/>
                        </Record>
                    </Collection>
                </Annotation>

以下はローカル実行の結果ですが、Product Typeが追加されました。

おわりに

これまで、CAPで作ったODataサービスをフリースタイルのUI5アプリ、V4版Elementsアプリ、そしてV2版Elementsアプリから利用する方法について見てきました。UI編の最後として、次回はCAPプロジェクトの中にUIモジュールがあるMTAのパターンを実装してみたいと思います。
UIはやはりODataとの結びつきが強いので、CAPプロジェクトの中で作ったほうがいいかも、と思い始めています。CAPプロジェクトの中にFiori ToolsでUIモジュールを作るのが最強な気がしています。（アノテーションを活用するという意味で）