LoginSignup
17
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Auggie_2345

SAP UI5/Fiori/SAP WebIDEとは結局何か？

Last updated at Posted at 2020-08-25

この記事は chillSAP 夏の自由研究2020 の記事として執筆しています。

1:この記事を書こうと思ったきっかけ

私は一介のABAPerもといSAPの技術者です。
所属企業で持ち上がっている案件の多くは、SAP ECCないしS/4 HANAの導入やABAPによるアドオン開発(昨今SAPが用いた言葉で言うとIn-App拡張)です。
まだまだSCPやFioriの案件は少ないという印象ですが、これは元々SIerはウォーターフォール型の開発が主流であり、工数の予測がつけやすい枯れた技術を好む傾向があるからと見ています。
また、2025年(2027年？)に保守切れを迎える、旧来型のSAP ECCの保守案件なんかもまだまだ残っているため、全体的にみてSAPの案件=ERP導入 or ABAP開発という状況です。
※これは大阪での話であり、東京ならモダンな案件が豊富だと思います。

しかし、SAP社としてはおそらくよりトレンドである技術の、SCP/UI5/Fioriなどを開発の主流にすべくマーケティングをしているように思います。
今後は上記のような技術がトレンドになり、ABAPしか知らないエンジニアはより肩身が狭くなっていくものと思っています。
そうならないためにも、SAPの最新UI技術について私なりに情報を集めてみたので、当記事ではそれらが結局のところなんなのか、オープン系の技術に疎いSAPエンジニア向けに記載してみます。

2:特記事項

著者はSAP UI5の初学者です。
不正確な内容も含まれる事をご了承下さい。
誤りをご指摘いただければ訂正いたします。
その他コメントいただければ嬉しいです。

3:SAP UI5って結局なんなん？

https://sapui5.hana.ondemand.com/#/
JavaScript, CSS, HTML5をベースにした一種のUIのフレームワークです。
フレームワークと言うと、Windowsに詳しい人なら.Net Frameworkを想起するかもしれません。
Rubyで言うrails, PHPで言うLaravel、JavaScriptで言うVue.js、これらと似たようなものと考えて差し支えないと思います。

SAP UI5はデバイスを問わず操作が可能になる事を主眼としています。
旧来のABAPで作ったプログラム(レポートやDynpro)はSAPのGUIからしか、つまり必然的にPCからしかアクセスできませんでした。
SAP UI5の登場により、どんなデバイスからでも基幹システムにアクセス可能になりました。
ユーザーはiPadで商品の在庫をリアルタイムで確認しながら商談を行う、といった事ができるようになるのです。

3-1:MVCについて

SAP UI5の一つの特徴に、モデルビューコントローラ(MVC)というコンセプトがあります。

MVC は、Webフレームワークで一般的に取り入れられているアプリケーション設定を整理するための概念の一つです。
モデル（Model）頭文字「M」、ビュー（View）頭文字「V」、コントローラー（Controller）頭文字「C」で「MVC」と言います。
それぞれ次の役割を持ちます。
【モデル】
システム内のビジネスロジックを担当します。システムの設計や機能をどうするかがここで行われます。
【ビュー】
実際に表示したり、入力する機能の処理を行うのがビューです
【コントローラー】
コントローラーは、ユーザーの入力に基づきモデルとビューを制御する役割を担っています。「クライアント」「モデル」「ビュ>ー」の橋渡し役となります。
https://www.geekly.co.jp/column/cat-technology/1911_040/

例えば、RubyにおけるrailsもMVCの考え方をベースとしたフレームワークですね。

以下に同じくJavaScriptのフレームワークであるVue.jsのHelloWorldを示します。

  • Vue.jsのHelloworld
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello Worldを表示するプログラム</title>
  </head>

  <body>
    <div id="app">{{ message }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
  </body>
</html>
index.js
const app = new Vue({
  el: "#app",
  data: {
    message: "Hello World",
  },
});

ソースは下記から引用
https://rightcode.co.jp/blog/information-technology/vue-js-introduction-hello-world

index.htmlのscriptタグで、CDNを読み込んでますよね。↓の通り、SAP UI5もこれと同じようにソースの指定を行います。

一例として、SAP UI5のソースを見てみます。

Quick Start Step2

リンクが切れていた場合は、次の通り辿ってください。
https://sapui5.hana.ondemand.com
documentation>Get Started: Setup, Tutorials, and Demo Apps>Quick Start Step2.You can view and download all files at Quick Start - Step 2.

  • 画面

image.png

上記のサンプルプログラムは、次のファイルで動作します。

webapp/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Quickstart Tutorial</title>
	<script id="sap-ui-bootstrap"
		src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_fiori_3"
		data-sap-ui-libs="sap.m"
		data-sap-ui-resourceroots='{"Quickstart": "./"}'
		data-sap-ui-onInit="module:Quickstart/index"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true">
	</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>

index.htmlのscriptタグの中身はBootstrapと呼ばれる物です。

SAPUI5では、ページが開かれたとき、最初にSAPUI5のライブラリやテーマなどを読み込むスクリプトのことを指します。
SAPUI5のアプリケーションとして動かすために必須なのですね。
https://qiita.com/tami/items/b9dca653f1d076e19757

scriptタグのsrc属性で、SAP UI5のライブラリを指定しています。
vue.jsの<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>でライブラリを指定していたのと似ていますね。

webapp/index.js
sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], function (XMLView) {
	"use strict";

	XMLView.create({viewName: "Quickstart.App"}).then(function (oView) {
		oView.placeAt("content");
	});
});
webapp/App.view.xml
<mvc:View
	controllerName="Quickstart.App"
	displayBlock="true"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<App>
		<Page title="My App">
			<Button
				text="Steady..."
				press=".onPress"
				type="Emphasized"
				class="sapUiSmallMargin"/>
		</Page>
	</App>
</mvc:View>

App.view.xmlがビューであり、steadyというボタンを配置しています。

普通webページのテキストやフォーム、ボタンといったオブジェクトはhtmlファイル(特にindex.html)に記述しますが、SAP UI5ではビューに記述するという特徴があります。
上記のようなxmlだけでなく、以下のビューをサポートしています。

  • XML view (file or string in XML format); the XMLView type supports a mix of XML and plain HTML.
  • JSON view (file or string in JSON format)
  • JS view, constructed in a traditional manner
  • HTML view (file or string in HTML format)

https://sapui5.hana.ondemand.com/#/topic/91f27e3e6f4d1014b6dd926db0e91070.html

webapp/App.controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast) {
	"use strict";

	return Controller.extend("Quickstart.App", {
		onPress : function () {
			MessageToast.show("Hello App!");
		}
	});

});

App.controller.jsがコントローラーです。
コントローラーには、モデルやビューを変更する「処理」を記述します。
↑のコードだと、ボタンを押した時に「Hello App!」という結果を出力するという処理を実装しています。

3-2:SAP UI5の開発環境

後述するSAP Web IDEもといSAP Business Application Studioで開発することもできますし、ローカルに開発環境を構築し、AtomやVSCodeなどのIDEで開発することも可能です。
ただし、後者の場合は別途こんな感じの環境構築の作業が発生します。

4:Open UI5って結局なんなん？

SAP UI5をオープンソース化したものです。

5: Fioriって結局なんなん？

SAP UI5をテクノロジーの基盤としたUXないしデザインコンセプトの事です。
Fioriとは、イタリア語で花を意味します。
あくまでも考え方を意味するのであって、テクノロジーの事を指すのではないことに注意です。

SAP Fiori設計ガイドラインに準拠せずにSAP UI5のアプリケーションを作成する事も可能です。
その場合、そのアプリはカスタムUI5アプリと呼ばれます。

旧来のSAPのUIと比較して、次の２つの特徴があります。

5-1:ロールベースでの画面配置

従来のSAPでUIといえば、クライアントアプリケーションであるSAP GUIでした。
SAP GUIは、機能ベースでメニューが配置されており、目当ての機能にアクセスするためには階層をドリルダウンして辿っていくものだった。

Fioriの場合、ユーザーロールに基づいたタイルと呼ばれる正方形のアイコンをクリックすることで、目当ての機能にたどり着きます。
Fioriにより、ユーザーは無駄なドリルダウンをすること無しに、目当ての機能に瞬時にアクセス可能となります。

5-2:マルチデバイス対応

従来のSAP GUIはPCのクライアントアプリケーションであったため、当然ながらPCからしかアクセスができませんでした。
Fioriはブラウザからアクセス可能であり、PC、タブレット、スマホの画面サイズの差異をコア機能であるSAP UI5が吸収してくれるため、どんなデバイスからでもアクセスできます。

これはFioriがレスポンシブデザインという技術を採用しているからで、単一のコードで画面をPC/タブレット/スマホに対応させる事が可能です。

6:SAP Web IDEってなんなん？

2020年8月25日現在、SAP Web IDE→SAP Business Application Studioに名称変更されています。
※2020/08/27 追記：名称変更ではなく別製品であるようです。
SAP Web IDEの後継となるサービスがSAP Business Application Studioという事らしいです。

参考
https://blogs.sap.com/2020/06/11/sap-business-application-studio-vs-sap-web-ide/

7:SAP Business Application Studioってなんなん？

SAP Business Application Studioとは、SAPの技術を使ってアプリケーションを作成する事に特化したクラウドIDEです。

クラウドIDEと言えばAWSのCloud9やCodeAnywhereが代表的ですね。
そこまで使い込んだわけではないけれど、SAP Business Application Studioはざっくり言うとCloud9の似たようなものと考えて良いと思います。

  • Cloud9の画面
image.png

Fioriアプリケーションは、基本的にSAP Web IDEもといSAP Business Application Studioで開発する事が推奨されます。
SAP HANA Cloud Platformのサービスの一つであり、SaaSの形態で提供されています。

  • SAP Business Application Studioの画面
image.png

SAP WebIDEに相当する従来のツールとしてはEclipseなどが存在しますが、それに比べSAP WebIDEでは開発効率を最大化するための機能が豊富に用意されています。たとえば、専用のSDKやプラグインのインストールが不要なことはもちろん、既存のテンプレートを利用した開発や、ドラッグ＆ドロップでの画面開発（コードによる開発ももちろん可能です）、Gitによるバージョン管理、迅速なテストも可能ですし、デプロイも開発環境内から直接行うことができます。アプリケーションの開発・拡張からテスト、デプロイまでの期間を大幅に短縮することができます。
https://www.sapjp.com/blog/archives/12657

Gitなんかも、GUIで操作できます。
SAPエンジニアは、基本的にコマンドに慣れていないため（ただの偏見？）嬉しい機能ですね。

image.png

SAP Business Application Studioを使うメリットは、環境構築が不要であるという点です。
SAP UI5をローカルで開発を行う場合、例えばこのような環境構築作業を行う必要があります。
当然、エラーが起こったりするのでSAP UI5に不慣れなうちはSAP Business Application Studioを使う事をお勧めします。

7:参考

17
14
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?