SAP Cloud Platform 上のSAP UI5でアプリ（プロジェクト）間で共有できる関数を作る

もう少しかんたんなやり方が見つかったので別の記事にしました。
[SAPUI5アプリで再利用可能なライブラリを作る（ABAPリポジトリ）](https://qiita.com/yonekura-h/items/053fc34acba91fe472d2)

#やりたいこと
SAP CloudPlatformでカスタムのFioriアプリケーションを作る際、
Fiori LaunchPadでの利用を想定するとタイル1枚につき、1アプリケーションが作成されることになるはず

SAP WebIDE上ではたくさんのディレクトリに分かれてしまうことになるが、共通関数を作りたかったので試してみた
※手探りなので、もっとこうしたほうが。。。という部分が多いかと思いますがご容赦ください


##カスタムLibraryを作成

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があるのでそれを選択
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/c41fa5b3-c7dc-4a68-9bac-5d988dd8ce39.png)

プロジェクト名等は適当に作成
Template Customization画面ではTitleとNamespaceを入力

![スクリーンショット 2019-04-26 19.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/1ae0cb81-f2ba-3c94-5122-5f7f9486ace7.png)

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

| key | val |
|:-:|:-:|
|  Priject名 |  libTest |
|  Title |  functionLibs |
|  Namespace |  testfunc |

Finishを押下

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

![スクリーンショット 2019-04-26 19.43.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/eb2634b2-604c-c12d-8696-1e6616680220.png)


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

```javascript:common.js
sap.ui.define([
	"sap/ui/base/Object"
], function (Object) {
	"use strict";
	return Object.extend("testfunc.libtest.functions.common", {
		onTestFunc: function () {
            // とりあえずコンソールログする
			console.log("teste");
		}
	});
});
```
このcommon.jsを他のプロジェクトから使えるようにする

プロジェクト直下のlibrary.jsを編集する
編集前↓

```javascript:library.js
/*!
 * ${copyright}
 */

/**
 * Initialization Code and shared classes of library testfunc.libtest.
 */
sap.ui.define(["sap/ui/core/library"], // library dependency
	function () {

		"use strict";

		/**
		 * 
		 *
		 * @namespace
		 * @name testfunc.libtest
		 * @author SAP SE
		 * @version 1.0.0
		 * @public
		 */

		// delegate further initialization of this library to the Core
		sap.ui.getCore().initLibrary({
			name: "testfunc.libtest",
			version: "1.0.0",
			dependencies: ["sap.ui.core"],
			types: [],
			interfaces: [],
			controls: [
				"testfunc.libtest.controls.Example"
			],
//この部分に自分で作ったcommon.jsを追記している
			functions: [
				"testfunc.libtest.functions.common"
			],
			elements: []
		});

		/* eslint-disable */
		return testfunc.libtest;
		/* eslint-enable */

	}, /* bExport= */ false);

```

上記でライブラリ側の設定はOK

##読み込むアプリ側の設定

次はlibTestのcommon.jsを使いたいアプリ側での設定をする
neoapp.json内で以下を記述

```javascript:neoapp.json
{
  "welcomeFile": "/webapp/index.html",
  "routes": [
    {
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources"
      },
      "description": "SAPUI5 Resources"
    },
// 省略
    {
      "path": "/resources/testfunc/libtest",
      "target": {
        "type": "application",
        "name": "libTest",
        "entryPath": "/"
      },
      "description": "commonControl"
    }
  ],
  "sendWelcomeFileRedirect": true
```

`"/resources/testfunc/libtest"`　はlibraryのプロジェクト設定を参考にする
↓の部分

```javascript:library.js
bsap.ui.getCore().initLibrary({
			name: "testfunc.libtest",//この部分
			version: "1.0.0",
			dependencies: ["sap.ui.core"],
			types: [],
			interfaces: [],
			controls: [
				"testfunc.libtest.controls.Example"
			],
			functions: [
				"testfunc.libtest.functions.common"
			],
			elements: []
		});

```
`/resources/`をつけて.を/にする

##Controllerで共通関数を読み込む

上記までの設定ができたらこうできる

```javascript:sanple.controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"testfunc/libtest/functions/common" //共通関数を作ったクラスを指定
], function (Controller,JSONModel,common) {
                                 //↑も追加
	"use strict";

	return Controller.extend("table.tableSample.controller.table", {
		onInit: function () {
            //実際に使うところ
			new common().onTestFunc()
		},
	});
});
```

あとはcommon.jsに共通で使いたい処理を作るだけ

#まとめ
SAP CloudPlatformのNeo環境で再利用可能な関数作成の方法がぱっと見つからなかったので手順をまとめた
libraryのプロジェクトをちゃんとデプロイすれば使えることは確認済み