SAPUI5とは?Fioriとの違い、開発の基本と学習順序

SAPUI5は、ブラウザで動く業務アプリの画面を作るためのJavaScriptベースのUIフレームワークです。SAP Fioriアプリの実装技術として使われますが、SAPUI5は技術、Fioriはユーザー体験とデザインの考え方であり、同じ意味ではありません。

何を作る技術か

ボタン、入力欄、表、画面遷移などのUI部品と、データを画面へ結び付ける仕組みを提供します。一般的な構成は、Viewで表示を定義し、Controllerに画面動作を記述し、Modelでデータを扱います。アプリ設定はmanifest.jsonにまとめます。データ取得にはODataなどのサービスがよく使われます。

ABAPとの役割分担

SAPUI5は主にフロントエンドです。業務ロジックやデータ公開はABAP側や別のバックエンドサービスが担います。既存のSAP GUIトランザクションが全てSAPUI5へ置き換わるわけではなく、用途に応じて並存します。コンサルタントは画面の見た目だけでなく、どの業務処理と権限に結び付くかを押さえると要件を整理しやすくなります。

開発・確認の基本

  1. 対象業務と利用端末を定め、標準Fioriアプリで要件を満たせるか確認する。
  2. 追加開発が必要ならSAP Business Application StudioやVisual Studio Codeなど、プロジェクトに合う環境を選ぶ。
  3. UI5の部品、データバインディング、OData、認証・権限、配置先を順に確認する。
  4. 画面幅、入力検証、エラー表示、権限別の動作をテストする。

アプリ起動時のライブラリ読み込みやテーマ設定はSAPUI5 Bootstrapの記事で説明します。Fiori全体像も合わせて読むと位置付けが明確になります。

参考・関連記事

関連記事

PAGE TOP