はじめに
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で実行するか、スタンドアローンで実行するかが選択可能だったようですので
生成されたソースを編集すれば技術的には動作しますが、不具合があってもサポート対象外となる可能性があるのでお気をつけください。
作業手順
- Trial環境でMTAプロジェクトの作成
- SAP Fiori ElementsのList reportアプリを作成
- List reportアプリ内にindex.htmlを作成
- プロジェクトのビルドとデプロイを実行
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に以下のソースを記載します。
<!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アプリに関する内容でもかなり特殊な内容になってしまったので、今後はもっと概要的な記事も書いていきたいと思います。