WebIDEからBusiness Application Studioへの引っ越し

##はじめに
SCP Neoのトライアル環境が今年11月に廃止されることになりました。WebIDEのトライアルも使えなくなってしまうので、引っ越し先を検討する必要があります。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/SAP?src=hash&amp;ref_src=twsrc%5Etfw">#SAP</a> is getting serious about <a href="https://twitter.com/sapcp?ref_src=twsrc%5Etfw">@sapcp</a> Neo environment. The trial for it will be closed on November 13th, 2020. <a href="https://t.co/hj1blYOjmz">https://t.co/hj1blYOjmz</a></p>&mdash; Gregor Wolf (@wolf_gregor) <a href="https://twitter.com/wolf_gregor/status/1293887659383951360?ref_src=twsrc%5Etfw">August 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

引っ越し先候補としては①ローカルIDE、②Business Application Studioがあります。今回は以下のブログを参考にBusiness Application Studioへの移行をしてみます。
[Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio](https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio/)

##移行するもの

- Destination
- UI5アプリ

##前提

- 移行対象のUI5アプリはGitで管理されている
- Cloud Foundryのトライアルアカウントを作成済
- Business Application Studioを有効化済
- Business Application StudioにFioriのDev Spaceを作成済

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/6caaf894-f130-64f7-2e2c-b0a14610f0d8.png)

##Destinationの移行
Neo環境でDestinationをエクスポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5c44e5b1-75cf-cb23-a1bb-2bb992c5f3be.png)
Cloud Foundry環境でDestinationをインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f9b658a0-d734-58c4-f8f5-6580d8854da3.png)

インポートした後以下を変更します。
Name: 大文字が入っているとdeployでエラーになってしまうので小文字に変更
Additional Properties: 以下を追加します。プルダウンで出てこないので、直接入力します。

- HTML5.DynamicDestination = true
- HTML5.Timeout = 60000

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/70a8150a-8f8b-0459-e33e-e2bee2d32d6e.png)

Cloud Foundryのアカウントの有効期間は最大90日なので、次回アカウントを作り直したときのためにここで設定したDestinationをエクスポートして保存しておくのが良いと思います。

##UI5アプリの移行
シンプルなフリースタイルアプリを使って移行の手順を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/bbd0e462-f344-7a49-0897-c3466b85fd68.png)

###Gitからアプリをクローン
ターミナルを開き、Gitからプロジェクトをクローンします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/40284315-38a0-791d-290f-18f703b1326a.png)

File>Open Workspaceから、クローンしたプロジェクトを選択して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/22b06deb-20d0-8302-7287-051eac03b734.png)

###xs-app.jsonファイルを作成
プロジェクト直下にxs-app.jsonファイルを作成します。Neo環境ではneo-app.jsonがDestinationへのルーティングを行っていましたが、Cloud Foundryではxs-app.jsonがその役割を担います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a810598b-76c2-213a-1718-5ca54bd98e02.png)

内容は以下の通りです。

```json:xs-app.json
{
"authenticationMethod": "none",
"routes": [
    {
    "authenticationType": "none",
    "csrfProtection": false,
    "source": "^/sap/opu/odata/",
    "destination": "<YourDestination>"
    },
    {
    "source": "^(.*)$",
    "target": "$1",
    "service": "html5-apps-repo-rt"
    }
]}
```
###package.jsonファイルの内容を置き換え
package.jsonの内容を以下に置き換えます。重要なのはapprouterを動かすために`@sap/approuter`がdevDependencyに追加されているところです。

```json:package.json
{
  "name": "<yourAppName>",
  "version": "0.0.1",
  "devDependencies": {
    "@sapui5/ts-types": "1.71.x",
    "@sap/ui5-builder-webide-extension": "1.0.x",
    "@sap/approuter": "8.1.x",
    "@sap/html5-repo-mock": "1.5.x"
  },
  "scripts": {
    "build": "ui5 build --include-task=generateManifestBundle generateCachebusterInfo",
    "start-local": "node node_modules/@sap/html5-repo-mock/index.js"
  },
  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension"
    ]
  }
}
```
###ui5.yamlの内容を置き換え
ui5.yamlの内容を以下に置き換えます。

```yaml:ui5.yaml
specVersion: '1.0'
metadata:
  name: <yourAppName>
type: application
resources:
  configuration:
    propertiesFileSourceEncoding: UTF-8
builder:
  customTasks:
    - name: webide-extension-task-updateManifestJson
      beforeTask: generateManifestBundle
      configuration:
        appFolder: webapp
        destDir: dist
    - name: webide-extension-task-resources
      afterTask: webide-extension-task-updateManifestJson
      configuration:
        nameSpace: <yourNamespace>
```

WebIDEでは`webide-extension-task-updateNeoApp`、および`webide-extension-task-lint`というタスクが入っていましたが、それらが不要になるので削除した形です。

###不要なファイルを削除
以下のファイルを削除します。
.che, neo-app.json, package-lock.json
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5709183b-ac86-0bdb-0814-e5588693b1f1.png)


###ローカルでテスト
.gitignoreファイルに`node_modules/`を追加したあとで、`npm install`を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/360ac0b0-2ff7-889c-b3b5-9e04c9fa8c1f.png)
次に、Run Configurationをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ccbf0976-f843-f851-2dd0-a5299007bbea.png)
+ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2612c8db-75a5-1159-333c-47f15bedc03f.png)
実行対象のプロジェクトを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d45a59df-4f45-4ecc-3b79-68401e60117f.png)
実行するファイルを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/32282e68-4ea4-7369-abc2-b62157091e9d.png)
UI5のバージョンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e943651a-39a8-7eed-cee8-6b5a172c9434.png)
設定の名前を確認し、Enterを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f2ac193f-07bc-4e78-3b9b-7d3694daa5dd.png)
Data Sourceにカーソルを合わせ、緑のアイコン(Bind)をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/84d8f1cf-17f1-7360-42fc-8aeec94938c2.png)
Destinationを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1d6628c9-f49e-ab7b-ebdc-630ed16a9c3a.png)
結果、以下の状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a0415a0a-6694-8b71-83ca-9148b3bece29.png)
.env2というファイルが作成されています。（途中で設定をやり直したので空の.env1もできていたが、削除した）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c07b2ad0-4858-a5b0-5d6f-28d9bc70f8f8.png)
緑の矢印を押して実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/4d27d6fd-0353-6787-18af-933f5a7a16cc.png)
ポップアップが出るので、Expose and Openをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/519a68b4-dab5-317b-a6d0-adc084e354f5.png)
ポートの名前を入力するダイアログが出てくるので、適当な名前を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/04b3a55b-8645-6678-3278-51a45730b171.png)
ブラウザが開きましたが、何も表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/502ccf46-0194-2a5c-8871-8bc73a0c38d6.png)
ネットワークタブを見ると、本来ロードされるはずのsap-ui-core.jsがロードされていませんでした。
そこで、index.htmlのbootstrapの部分を以下のように修正します。

```html:before
		<script id="sap-ui-bootstrap"
			src="resources/sap-ui-core.js"
```

```html:after
		<script id="sap-ui-bootstrap"
			src="./resources/sap-ui-core.js"
```
UI5のリソースはロードされましたが$metadataがロードされません。Internal Server Errorが起きています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c4d72351-4869-c7ee-9daa-da76a26fc1de.png)

解決方法がわからなかったので、邪道ですが.envをいじることにします。直接サーバのURLを指定してしまいます。ここはローカル実行用の設定なので、動けばよしとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/eaef18fe-0203-76c7-4141-80f306d684f7.png)
設定を変えたら一旦デバッガを停止して再度実行します。ようやく正常に実行できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d6a76eae-ebf3-0a7f-721c-fe4286809e67.png)

###ビルドとデプロイ
####ビルド
`npm run build`でビルドします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b05d4b1e-7d0a-7ed6-c7f3-4ece2a5c6b91.png)

####デプロイ
デプロイは色々とつまづいたところがあったので、最初に注意点を記載します。

- BSPアプリケーションの名前はZZ1_はじまりにする
- BPSアプリケーションの名前はpackage.jsonの"name"に設定する~~（デプロイ時に指定不可！）~~ →別の値を入力して上書きできます
- ABAPサーバ側でODataサービス"ABAP_REPOSITORY_SRV"を公開しておく
- Gatewayのウイルススキャンプロファイルの初期値が設定されていないとエラーになる（わからなければ Tr:/N/IWFND/VIRUS_SCANで一時的に無効化）

package.jsonのnameを以下のように変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d5c1adb8-2a1c-29c8-f814-f249d804c79c.png)

`abap-deploy --log-level=error`でデプロイします。`--log-level=error`オプションをつけるとエラーがあったときにログファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ef99f44b-d37f-6f1d-c16d-31c601ec6f16.png)
Bad Gatewayのエラーが出ているのでログファイルを見てみますが、あまり情報は得られません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/062a954a-95ab-4d41-838f-41348199e6c4.png)
Tr:SE80で見てみると、BSPアプリケーションは登録されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0875888a-d5d7-6d60-7d99-a006912ac032.png)
####動作確認
Tr:SICFでBSPアプリを検索し、右クリックして"Test Service"を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/03ee795d-76bb-9997-08bc-8637fd184166.png)
ブラウザでアプリが表示されました。BadGatewayエラーは謎ですが、とりあえずデプロイしてちゃんと動くところまでは確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b70e7045-e805-12c5-08af-83d09926f55a.png)

##ABAPサーバにデプロイ済の場合
上記の手順で気になったのは、「BSPアプリケーションの名前はZZ1_はじまりにする」という決まりです。すでにデプロイ済のアプリの場合はどうなるのでしょうか？

デプロイ済のアプリの場合、更新モードでのデプロイとなりBSPアプリケーションの名前の制約はありませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/7c9e3d6f-50a3-a366-da58-571e0842e514.png)

##Fiori elementsの場合
Business Application StudioではFiori Toolsを使ってFiori elementsアプリを作成します。ということは、既存のプロジェクトもFiori Toolの形式に合わせたほうがよいでしょう。
コマンドエリアで`Fiori`と打ってみたところ以下の機能を発見しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/235e9e21-2108-dbdf-3201-9766efe4609d.png)
[Fiori Toolsの説明](https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-application-modeler-extension)によるとこのコマンドは、ワークスペースにある既存のプロジェクトでApplication Modelerを使えるように、package.json, ui5*.yaml, test\*.htmlファイルを更新してくれるそうです。

喜んでMigrateを実行してみたのですが、何も起こらず・・・:sob:
VS Codeで実行したときは以下のエラーが出ました。ツールまたは環境に問題があるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/303adef3-83cd-0b19-cecb-659b92b900df.png)

###マニュアルでの移行
Fiori Toolsで生成したプロジェクトを参考に、マニュアルで各ファイルを更新していきます。

####package.json
"name"より下の部分を全て置き換えます。

```json:package.json
{
    "name": "<yourAppName>",
	"private": true,
	"sapux": true,
	"description": "",
	"keywords": [
		"ui5",
		"openui5",
		"sapui5"
	],
	"main": "webapp/index.html",
	"scripts": {
		"postinstall": "npm i @sap/ux-ui5-tooling@\"^1.0.0\" @sap/ux-specification@\"^1.76.12\" --save-dev --save-exact=false",
		"start": "ui5 serve --open test/flpSandbox.html#masterDetail-display --",
		"start-mock": "ui5 serve --open test/flpSandboxMockServer.html#masterDetail-display --",
		"build": "rimraf dist && ui5 build -a --include-task=generateManifestBundle generateCachebusterInfo",
		"deploy": "fiori add deploy-config"
	},
	"remarkConfig": {
		"plugins": [
			"remark-preset-lint-consistent"
		]
	},
	"devDependencies": {
		"@sap/ux-specification": "^1.78.5",
		"@sap/ux-ui5-tooling": "^1.0.12",
		"@ui5/cli": "2.0.3",
		"@ui5/fs": "2.0.1",
		"@ui5/logger": "2.0.0",
		"rimraf": "3.0.0"
	},
	"optionalDependencies": {
		"fsevents": "1.2.9"
	},
	"ui5": {
		"dependencies": [
			"@sap/ux-ui5-tooling"
		]
	}
}
```

####ui5.yaml
`type: application`より下を置き換えます。

```yaml:ui5.yaml
specVersion: '1.0'
metadata:
  name: '<yourAppName>'
type: application
ui5Theme: sap_fiori_3
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: /sap
            destination: <destination>
            url: <ABAP server url>
        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

```

####ui5-local.yaml
プロジェクト直下にui5-local.yamlファイルを作成します。

```yaml:ui5-local.yaml
specVersion: '2.0'
metadata:
  name: '<yourAppName>'
type: application
framework:
  name: SAPUI5
  version: "1.81.0"
  libraries:
    - name: sap.f
    - name: sap.m
    - name: sap.suite.ui.generic.template
    - name: sap.ui.comp
    - name: sap.ui.core
    - name: sap.ui.generic.app
    - name: sap.ui.table
    - name: sap.ui.unified
    - name: sap.ushell
    - name: themelib_sap_fiori_3
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /sap
            url: <ABAP server url>
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
```

####test*.html
testフォルダ配下にあるflpSandbox.html, flpSandboxMockServer.htmlを修正します。
*resourcesへのパスを書き換えます。

```html:before
	<script src="../test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>

	<!-- Bootstrap the UI5 core library -->
	<script id="sap-ui-bootstrap"
			src="../resources/sap-ui-core.js"
```

```html:after
	<script src="/test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>

	<!-- Bootstrap the UI5 core library -->
	<script id="sap-ui-bootstrap"
			src="/resources/sap-ui-core.js"
```
※アプリケーションのインテントが"masterDetail-display"以外になっている場合、"masterDetail-display"に変更します。

```html:after
			applications: {
				"masterDetail-display": {
					additionalInformation: "SAPUI5.Component=demo.listreport1",
					applicationType: "URL",
					url: "../",
					description: "List Report1"
				}
			}
```



####不要なファイルを削除
以下のファイルを削除します。
.che, neo-app.json, package-lock.json
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ace08f7d-4bdb-1783-97b8-72fcd2c2ee18.png)

.gitignoreファイルにnode_modules/を追加したあとで、npm installを実行します。

####ローカルで実行

`npm start`で実行します。

ポップアップが出るので"Expose and Open"をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0c6f3771-a4ec-a7ad-a18f-a8fd2c46a75f.png)
ポート名を入力しEnter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/85e1989b-3d01-c0ac-53c2-10f8b6f684bb.png)
ブラウザが立ち上がり、フォルダ階層が表示されます。testフォルダ配下のflpSandbox.htmlを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/27119ebf-d09a-bd66-b745-3dbbd82d5935.png)
ラウンチパッドが開くので、タイルをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1ba5408f-7c05-a12e-ef54-e86bdb707109.png)
List Reportが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/97906b86-b021-56a0-1912-60417f3e268d.png)

####デプロイ
Fiori Toolsからのデプロイ方法については、以下のブログに紹介されています。
-[SAP Fiori Tools: Deploy to ABAP server](https://blogs.sap.com/2020/08/10/sap-fiori-tools-deploy-to-abap-server/)

##移行してみて
以下は個人の感想です。

**フリースタイル方式とFiori Tools方式どっちがいい？**
Fiori Tools方式はコマンドラインで操作できるので、フリースタイル方式より使いやすいと感じました。VS Codeにも対応していることから、Business Application Studio独自の仕組みに依存していないところが気に入りました。
以下のブログで紹介されていますが、Fiori Tools方式でフリースタイルアプリを開発することも可能です。webappフォルダの中身をフリースタイルに変えれば動きます。
[SAP Fiori Tools: SAPUI5 Freestyle App](https://blogs.sap.com/2020/08/03/sap-fiori-tools-sapui5-freestyle-app/)
よって、Business Application Studioへ移行する場合はFiori Tools方式に統一してもいいのではないかと思っています。今回はうまくいきませんでしたがマイグレーションツールもありますし。

**Business Application Studioとローカル開発どっちがいい？**
今回移行をやってみて、個人的にはローカル開発のほうがいいかなと思いました。Fioriアプリを作るにあたっては特段、Business Application Studioのほうが便利ということもありません。Business Application Studioは毎回起動までにしばらく時間がかかるのに対し、ローカルならすぐに立ち上げられます。
Gitのリモートリポジトリに保存するのを忘れても、ローカルなら手元にあるので大丈夫です。Business Application Studioはトライアルアカウントの期限が切れたら消えてしまいます。

よってFioriアプリ開発に関しては私はローカル開発で行こうかなと考えています。
ローカル開発については以下の記事を書いています。今はこの記事を書いた時より`yo easy-ui5`で生成できるプロジェクトのタイプが増えて便利になっています。
[【SAPUI5】UI5 Toolingを使ってみる](https://qiita.com/tami/items/9f6b573aefce12dfc626)

##参考
ブログ

- [Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio](https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio/)
- [SAP Fiori Tools: Deploy to ABAP server](https://blogs.sap.com/2020/08/10/sap-fiori-tools-deploy-to-abap-server/)

ドキュメント

- [Developing an SAP Fiori Application Based on an SAP S/4HANA System](https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/22f3401b2e464344943f2a6abf05d092.html)
- [Deploy to the SAPUI5 ABAP Repository](https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/340cf0109ec6451c88f7a0129990de59.html)
- [https://help.sap.com/viewer/b98f42a4d2cd40a9a3095e9f0492b465/Cloud/en-US/349b778cd0364ef8ba23fb54dd3fdc61.html](https://help.sap.com/viewer/b98f42a4d2cd40a9a3095e9f0492b465/Cloud/en-US)