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

# はじめに
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アプリをデプロイしてみた](https://qiita.com/yonekura-h/items/3c53d8129a2cf25ab939#sap-cloudplatform-trial%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%BA%96%E5%82%99%E3%82%92%E3%81%99%E3%82%8B)

# 2. SAP Fiori ElementsのList reportアプリを作成
作成したMTAプロジェクト内にList reportアプリを作成します。

アプリ作成手順は以下を参考にしてください。
[SAP Help Portal - How To Use List Report and Object Page Templates](https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.51.6/en-US/20de9506339949c7bd16b789e8352f26.html)
[SAP Blogs - SAP FIORI ELEMENT: List Report For Beginners](https://blogs.sap.com/2018/06/08/sap-fiori-element-list-report-for-beginners/)

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

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

## 現時点のプロジェクト
プロジェクト構成は以下のようになっています。
今回は自分で作成したODataを指定してプロジェクトを作成しました。
![スクリーンショット 2020-05-26 14.03.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/92acb671-5163-b2b9-5d99-e10d3efcbdcc.png)

実行するとLaunchpadが起動し、そこからアプリへ遷移します。
![スクリーンショット 2020-05-26 14.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/31ed8c51-f70a-e891-392a-151bf0d81f6c.png)

![スクリーンショット 2020-05-26 14.06.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/da48630e-7941-f301-6c6c-53ac35999d32.png)

## index.htmlを作成
webapp上で右クリック＞「New」＞「File」を選択します。
![スクリーンショット 2020-06-01 11.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/29028ac5-1c24-255a-21b8-a55b6b59eca1.png)

ファイル名に「index.html」と入力して「OK」をクリックします。
![スクリーンショット 2020-06-01 11.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/b352593a-dccd-7d5f-b8ce-613934b9ad95.png)

作成した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>
```

![スクリーンショット 2020-06-02 10.57.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/1d165578-4388-e2d7-5c23-ceb79f1675d5.png)

## welcomeFileの変更
List reportアプリプロジェクト直下にある```neo-app.json```と```xs-app.json```の```welcomeFile```を
上記で作成したindex.htmlに変更します。
![スクリーンショット 2020-06-02 11.20.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/064eb1b1-070b-e8a1-9389-15e5f2124d22.png)
![スクリーンショット 2020-06-02 11.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/71d20690-3955-e70d-ab0f-c9f6a6bad649.png)

# 4. プロジェクトのビルドとデプロイを実行
List reportアプリがスタンドアローンで実行できることを確認します。

## WebIDEで実行
まずはWebIDEで実行して確認します。
List reportアプリプロジェクト上で右クリック＞「Run」＞「Run Configurations」を選択します。
![スクリーンショット 2020-06-02 11.24.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/b6ea567f-a5e7-1985-2404-4e7bb73d2f14.png)

「＋」ボタンをクリック、「Run as Web Apprication」を選択します。
![スクリーンショット 2020-06-02 11.25.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/d786f7a4-b278-96db-dc80-669fe1988e67.png)

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

|    項目    |    設定値    |
|:------------------:|:------------------:|
|        Name        |        Run index.html（任意の名称で可）        |
|       File Name       |       作成したwebapp配下のindex.htmlを選択       |
※他は初期設定のまま

![スクリーンショット 2020-06-02 11.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/9a6fafb1-0a9b-c783-fd25-0ab1e974da8f.png)

Launchpadが起動せず、スタンドアローンで実行できました。
デプロイ後に必要なのでRunした際のパス（例：/jpcolistReportlistreportsample-1.0.0/index.html）をコピーしておきます。
![スクリーンショット 2020-06-02 11.28.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/1d3c6972-44f6-daa5-3211-2c3e7be5f5b6.png)

## ビルドとデプロイを実行
以下の手順を参考にビルドとデプロイを実行します。
[Qiita - 新しくなったSAP CloudPlatform Trial環境にSAPUI5アプリをデプロイしてみた](https://qiita.com/yonekura-h/items/3c53d8129a2cf25ab939#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AEbuild)

デプロイ後、CF環境上のアプリを立ち上げるとスタンドアローンで実行できていることが確認できます。
![スクリーンショット 2020-06-04 21.01.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/e22572bb-44f1-274f-a9f3-b139ce5a0e82.png)

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

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