SAPUI5アプリで再利用可能なライブラリを作る（ABAPリポジトリ）

#目的

以前SAP CP上にデプロイするアプリケーションでアプリ間（タイル間）で共通カスタムライブラリを参照する方法を調査した
↓↓
[SAP Cloud Platform 上のSAP UI5でアプリ（プロジェクト）間で共有できる関数を作る](https://qiita.com/yonekura-h/items/01588954b9a8a7ba9ae1)

追加調査した内容＋ABAPリポジトリにデプロイしたSAPUI5のカスタムアプリではどうするのかについて記載します。


**以下、途中までは以前の記事と同じ内容を含みます**

#カスタムライブラリの作り方
###ライブラリの作成
New Project from Templateを押下
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/c6bf081a-b49f-1d24-9a52-9ccd6b5e4b63.png)


テンプレートのCategoryを選ぶ
SAP Fiori Libraryがあるのでそれを選択
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/89daa10c-7719-d969-c606-71b96716aceb.png)


プロジェクト名等は適当に作成
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/e5762576-b2b7-cb15-18e1-ab20dd8c7f8a.png)

Template Customization画面ではTitleとNamespaceを入力
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/02f49090-f0a8-e19d-b165-228b23ebcba9.png)


画像とは少し違うが、以下を設定した

| key | val |
|:-:|:-:|
|  Priject名 |  customLibrary |
|  Title |  customLib |
|  Namespace |  common |
|  Description(任意) |  common lib test |

Finishを押下

###作成されたプロジェクト配下に共通関数用のファイルを用意する
functionsフォルダを作成
functions/commonfunction.jsを作成する

<img width="330" alt="スクリーンショット 2019-07-23 16.15.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/e7a14dd9-f21f-048b-543a-31f8e9d83d04.png">

commonfunction.jsの中身は以下の通り

```commonfunction.js
sap.ui.define([
    "sap/ui/base/Object"
], function (Object) {
    "use strict";
    return Object.extend("common.customlibrary.functions.commonfunction", {
        onTestFunc: function () {
            // とりあえずコンソールログする
            console.log("common Function!");
        },

    });
});
```

#カスタムライブラリの使用方法
###ライブラリを使用するプロジェクトを作成

callLIbraryというプロジェクトを作成

| key | val |
|:-:|:-:|
|  Priject名 |  callLIbrary |
|  Namespace |  test |


<img width="323" alt="スクリーンショット 2019-07-23 16.35.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/010ac19d-7b84-8b71-d961-e2bac1b213d9.png">

###ライブラリの読み込み設定をする
プロジェクトを右クリック→Project→Add Reference to Libraryを押下

![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/eaa215da-ace3-1a0b-9611-e15181d8ae9e.png)


Repository項目にWorkSpaceを指定する
先程作成した`common.customlibrary`が表示されるので、
includeにチェックを入れてAddを押下

![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/ce955ad0-dc4a-5ed2-169f-0fca2ac6e05f.png)

上記の設定をすると`neo-app.json`に以下の設定が追記される

```neo-app.json
{
	"welcomeFile": "/webapp/index.html",
	"routes": [{
		"path": "/webapp/resources/common/customlibrary",
		"target": {
			"type": "application",
			"name": "commoncustomlibrary"
		},
		"description": "common lib test"
	}, {
		"path": "/resources/common/customlibrary",
		"target": {
			"type": "application",
			"name": "commoncustomlibrary"
		},
		"description": "common lib test"
	}, 
        //省略
],
	"sendWelcomeFileRedirect": true
}
```

また、自動生成のままカスタムライブラリを実行するとライブラリのCSSがなくても読もうとするので、
不要であればLibrary.jsの以下の部分を修正

```javascript:Library.js
		sap.ui.getCore().initLibrary({
			name: "common.customlibrary",
			version: "1.0.0",
			dependencies: ["sap.ui.core"],
			types: [],
			interfaces: [],
			controls: [
				"common.customlibrary.controls.Example"
			],
			elements: [],
                        //↓追記　CSS読み込みをさせない
			noLibraryCSS: true
		});

```

###ライブラリに記載した処理を実行

View1.controller.js（ルートViewのController）に関数の呼び出しを記載

```javascript:View1.controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"common/customlibrary/functions/commonfunction"
], function (Controller, commonfunction) {
	"use strict";

	return Controller.extend("test.callLibrary.controller.View1", {
		onInit: function () {
			var common = new commonfunction();
			
			common.onTestFunc();
		}
	});
});
```

そのままWebIDE上で実行しても読み込めないので、
Run configurationsから設定変更をする
![図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f7b41d42-7c2f-2859-54dc-46fe3cc0319c.png)

`Use my workspace first`にチェック
WebIDE上で実行する際はWebIDE上のライブラリを参照するように設定
![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/c2f0ce2e-cd6e-42b6-2ba5-4ee3a944a4f0.png)

このまま実行すればコンソールに`common Function!`が表示される
（ライブラリの処理が実行されてる）

![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0dc361c0-5013-5c95-2864-77f510f1475f.png)


###ABAPリポジトリへデプロイして実行

デプロイ手順は別途
ライブラリとライブラリを使用するプロジェクトの2つをABAPリポジトリにデプロイする

#####トラブルシューティング
今回作成したものが`console.log()`をするだけの単純なライブラリだったので下記のようなエラーでBuildが失敗した
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/6f360b8e-a811-f6e4-8a07-f411d8425e56.png)

原因はプロジェクト設定のコーディングルールなので、
今回はno-consoleのレベルをERRORからwarningに変更した
(プロジェクトを右クリック→Project→Project Settingsから変更)
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/ab6c6212-d18a-4f6e-8648-b76f532238e8.png)



・ライブラリはデプロイのみ（T-CD:SICFでサービスが存在するのを確認）
・ライブラリを使用するプロジェクトはFiori LaunchPadのタイル登録まで行う
　（Semaitic Objectの作成やラウンチパッドロール（T-CD:LPD_CUST）の設定など）

上記まで設定してFiori LaunchPadから実行すると共通ライブラリのJSが実行されているのが確認できた
![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/d0bb11b9-1969-33f5-5729-79d1503ca039.png)

#まとめ
前回と比較して
・デプロイしなくても共通ライブラリを使った場合の動作確認ができる
・かんたんに実装できる

今回はABAPリポジトリにデプロイしたが、これをそのままCloud PlatformのHTML5リポジトリにデプロイしても使える気がする