SAP CloudPlatform CF環境でSAP Fiori Elementsアプリをスタンドアローンで実行する

8805 ワード
cloudfoundry Fiori SAP KYOSO SAPCloudplatform cloudfoundry テキストリンク

はじめに

SAP Cloud Platform上でFioriアプリ開発をしています。
これまでNeo環境で開発を行っていましたが、今回Cloud Foundry環境で開発を行うことになったためいろいろ調査をしています。

今回は「CF環境でSAP Fiori Elementsアプリをスタンドアローンで実行する」方法について調査しましたので、その手順についてまとめました。

SAP Fiori Elementsとは

ノンコーディングでアプリの作成が可能で、アノテーションを設定すれば統一されたUIで表示される便利な開発ツールです。

SAP Fiori Elementsで作成したアプリは、Launchpadへの登録を前提として動作します。
なのでアプリ単体で実行はできません。

スタンドアローンで実行するとは

上記で「SAP Fiori Elementsで作成したアプリは、Launchpadへの登録を前提として動作します。」と書きました。
しかし、SAP Fiori Elementsで作成したアプリをLaunchpadを使用せずに単体で実行したい。

ということでSAP Fiori Elementsで作成したアプリを、Launchpadを使用せずにスタンドアローンで実行する方法について調査しました。
古いバージョンではLaunchpadで実行するか、スタンドアローンで実行するかが選択可能だったようですので
生成されたソースを編集すれば技術的には動作しますが、不具合があってもサポート対象外となる可能性があるのでお気をつけください。

作業手順

  1. Trial環境でMTAプロジェクトの作成
  2. SAP Fiori ElementsのList reportアプリを作成
  3. List reportアプリ内にindex.htmlを作成
  4. プロジェクトのビルドとデプロイを実行

1. Trial環境でMTAプロジェクトの作成

以下の手順を参考にMTAプロジェクトを作成します。
Qiita - 新しくなったSAP CloudPlatform Trial環境にSAPUI5アプリをデプロイしてみた

2. SAP Fiori ElementsのList reportアプリを作成

作成したMTAプロジェクト内にList reportアプリを作成します。

アプリ作成手順は以下を参考にしてください。
SAP Help Portal - How To Use List Report and Object Page Templates
SAP Blogs - SAP FIORI ELEMENT: List Report For Beginners

作成手順はプロジェクトを作成する際に「New→HTML5 Module」を選択する以外は、Neo環境と同様です。

3. List reportアプリ内にindex.htmlを作成

スタンドアローンで実行するため、List reportアプリ内にindex.htmlを作成していきます。

現時点のプロジェクト

プロジェクト構成は以下のようになっています。
今回は自分で作成したODataを指定してプロジェクトを作成しました。

実行するとLaunchpadが起動し、そこからアプリへ遷移します。

index.htmlを作成

webapp上で右クリック＞「New」＞「File」を選択します。

ファイル名に「index.html」と入力して「OK」をクリックします。

作成したindex.htmlに以下のソースを記載します。

index.html
<!DOCTYPE HTML>
<html style="height: 100%;">
<head>  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>

  <script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-modules="sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-compatversion="edge"
    data-sap-ui-resourceroots='{"demo": "./"}'
  ></script>

</head>
<body id="content" class="sapUiBody">
  <div style="height: 100%"
    data-sap-ui-component
    data-name="demo" 
    data-height="100%"
  ></div>
</body>
</html>

welcomeFileの変更

List reportアプリプロジェクト直下にあるneo-app.jsonとxs-app.jsonのwelcomeFileを
上記で作成したindex.htmlに変更します。

4. プロジェクトのビルドとデプロイを実行

List reportアプリがスタンドアローンで実行できることを確認します。

WebIDEで実行

まずはWebIDEで実行して確認します。
List reportアプリプロジェクト上で右クリック＞「Run」＞「Run Configurations」を選択します。

「＋」ボタンをクリック、「Run as Web Apprication」を選択します。

以下の項目を設定し、「Save and Run」をクリックします。

項目 設定値
Name Run index.html（任意の名称で可）
File Name 作成したwebapp配下のindex.htmlを選択

※他は初期設定のまま

Launchpadが起動せず、スタンドアローンで実行できました。
デプロイ後に必要なのでRunした際のパス（例：/jpcolistReportlistreportsample-1.0.0/index.html）をコピーしておきます。

ビルドとデプロイを実行

以下の手順を参考にビルドとデプロイを実行します。
Qiita - 新しくなったSAP CloudPlatform Trial環境にSAPUI5アプリをデプロイしてみた

デプロイ後、CF環境上のアプリを立ち上げるとスタンドアローンで実行できていることが確認できます。

終わりに

冒頭にも書きましたが、今回の手順でSAP Fiori Elementsアプリをスタンドアローンで実行することはできますが、本来はLaunchpadへの登録を前提として動作します。
なので不具合が起きた場合はサポート対象外になる可能性があるのでお気をつけください。

今回はSAP Fiori Elementsアプリに関する内容でもかなり特殊な内容になってしまったので、今後はもっと概要的な記事も書いていきたいと思います。