2026.10.26 開発

SAP Fioriとは：SAPUI5との関係・SAP GUIからの移行判断とCAPでのアプリ実装手順【2026年10月】

SAP Fiori（フィオーリ）は、S/4HANAをはじめとするSAP製品の画面を、ロール単位の業務アプリとして統一するSAPのデザインシステムです。この記事では、Fioriという言葉が指す3つの層（デザインの規約・SAPUI5というUIフレームワーク・アプリを束ねるFiori Launchpad）を切り分け、SAP GUIとの違いとS/4HANA移行でGUIを残す範囲を整理します。そのうえで、Fiori elementsとフリースタイルのSAPUI5をどう選ぶかを示し、CAPのUIアノテーションとUI5 CLIで業務アプリをローカルで動かすまでをコードで説明します。版番号の基準は、2026年10月時点のSAPUI5 1.153系です。

まとめ：SAP FioriはS/4HANAの標準画面で、新規開発はFiori elementsから

SAP Fioriは「画面の作り方の規約」と「その規約で作られたアプリ群」の両方を指します。実体はSAPUI5で書かれたWebアプリで、利用者が業務ごとのアプリを開く入口はFiori Launchpadのタイルです。SAP GUIのようにトランザクションコードとメニュー階層で機能を探す方式とは、入口の設計が根本から違います。

実装者がまず押さえるのは2点です。一覧と詳細の業務画面ならFiori elementsで、CDSのアノテーションを書くだけで画面が出ます。独自の操作や特殊なレイアウトが要るときだけ、フリースタイルのSAPUI5で書くという選び方です。どちらも動かす先のSAPUI5の版に合わせて作る必要があり、オンプレミスのS/4HANAならフロントエンドサーバーの版が上限になります。

SAP Fioriとは何かをデザインシステム・SAPUI5・Launchpadの3層で整理

「Fioriで作る」と言うとき、人によって指しているものが違います。打ち合わせのすれ違いを防ぐため、最初に層を分けておきます。

デザインシステムとしてのFioriとロール単位で業務アプリを切る考え方

Fioriの出発点は2013年に発表された25本の業務アプリで、現在はSAP製品全体のUIを統一するデザインシステムとして運用されています。画面の部品・配色・余白・操作パターンが規約として決まっており、S/4HANAの標準アプリはこの規約で作られています。

設計の単位は「機能」ではなく「ロールと作業」です。購買担当なら発注の承認、経理担当なら仕訳の照会というように、1つのアプリは1つの作業ステップに絞ります。SAP GUIで1つのトランザクションに詰め込まれていた入力・照会・変更を、作業ごとの小さなアプリに分ける発想だと理解すると、画面設計の打ち合わせで迷いにくくなります。

SAPUI5とOpenUI5の関係と2026年10月時点の版番号・LTSの位置

Fioriのアプリを動かす技術がSAPUI5です。HTML・CSS・JavaScriptで書くUIフレームワークで、SAPUI5 SDKにAPIリファレンスとサンプルがまとまっています。中核部分はオープンソースのOpenUI5としてGitHubのUI5/openui5で公開されており、OpenUI5 SDKから参照できます。SAP製品の契約が無くても、OpenUI5でFioriの見た目のアプリを試すことは可能です。

版の管理はSAPUI5の保守状況ページで確認します。2026年10月時点の値は次のとおりです。

版	位置づけ	対応するフロントエンドサーバー	SAP_UIの版
1.153（2610）	BTP上の最新・保守中	クラウドのみ	対象外
1.148（2605）	長期保守（LTS）	クラウドのみ	対象外
1.136（2505）	長期保守（LTS）	SAP FIORI FES 2025	SAP_UI 8.16
1.120（2311）	長期保守（LTS）	SAP FIORI FES 2023	SAP_UI 7.58

BTPでは毎月のように新しい版が出ますが、オンプレミスのS/4HANAで動かすアプリは、導入済みのフロントエンドサーバーの版を超えるAPIを使えません。開発を始める前に、本番のSAP_UIの版を確認してください。

Fiori Launchpadの起動方法とMy Homeでの業務アプリ集約

Fiori Launchpadは、ロールに割り当てたアプリを1つの画面に並べる入口です。SAP Learningの解説によると、オンプレミスのAS ABAPでは次の3つの方法で起動できます。

https://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
https://<host>:<port>/sap/bc/ui2/flp      # 短縮URL
/UI2/FLP                                    # SAP GUIから起動するトランザクション

ホーム画面のMy Homeは、To Dos・Pages・Apps・Insightsの4区分で構成され、利用者が個別に並べ替えられます。SAP Business Client 6.0以降ならLaunchpadへの接続を作れるため、SAP GUIの画面とFioriのアプリを1つのクライアントで扱えます。移行期にGUIとFioriが混在する現場では、この構成が両方の画面を開くための入口です。

SAP GUIとFioriの違いとS/4HANA移行でGUIを残す範囲の判断

S/4HANAへ移行しても、SAP GUIが使えなくなるわけではありません。問題は「どこまでFioriに寄せるか」で、ここを決めずに移行すると、教育とアドオン改修の両方が膨らみます。

画面の単位・動く端末・開発技術で見るSAP GUIとFioriの比較表

両者の違いを、実装と運用に効く観点で並べます。

観点	SAP GUI	SAP Fiori
画面の単位	トランザクション（多機能）	ロール別の作業アプリ（単機能）
入口	トランザクションコード・メニュー	Launchpadのタイル
動く端末	専用クライアントを入れたPC	ブラウザ（PC・タブレット・スマートフォン）
開発技術	ABAPのDynpro	SAPUI5・OData・CDSアノテーション
拡張の作法	本体の画面を改修	アノテーション・拡張ポイント・別アプリ

開発者から見て大きいのは最後の行です。GUIの改修はABAPの画面プログラムを直接書き換えますが、Fioriではバックエンドが返すOData・メタデータと、画面側のアノテーションに役割が分かれます。ABAP側の開発作法はABAPの特徴と実装の解説で整理しています。

GUIに残す業務とFioriへ寄せる業務を利用者と入力量で分ける線引き

線引きは「誰が・どれだけ入力するか」で決めます。現場の判断に使える順に並べると次のとおりです。

承認・照会・簡単な登録など、たまに使う人が多い業務はFioriへ寄せる（教育コストが下がる）
スマートフォンやタブレットから使いたい業務はFiori一択（GUIはPC専用）
キーボードだけで大量の伝票を打つ経理・購買のヘビーユーザーは、当面GUIを残す選択肢がある
Basisの管理作業や開発作業はGUIのまま（Fiori化の対象外）

全面Fiori化を移行プロジェクトの必須条件にすると、ヘビーユーザーの反発で稼働が遅れがちです。移行時はFioriの標準アプリで足りる業務から切り替え、GUIを残す業務を一覧で合意しておきます。S/4HANAの導入形態ごとの移行方式はSAP S/4HANAの導入形態と移行方式の解説を参照してください。

Fiori elementsとフリースタイルSAPUI5を要件で選び分ける判断基準

Fioriのアプリの作り方は大きく2つです。どちらもSAPUI5の上で動きますが、書く量と自由度が逆になります。

Fiori elementsの一覧・詳細画面とアノテーションによる生成原理

Fiori elementsは、決まった画面パターン（フロアプラン）にODataのメタデータとUIアノテーションを流し込んで画面を生成する方式です。代表は、検索条件と一覧表のList Reportと、1件の詳細を表示・編集するObject Pageで、業務アプリの多くはこの2つの組み合わせで足ります。

画面のJavaScriptを書かないため、SAPUI5の版上げで見た目と操作が自動で新しい規約に追従します。保守の手間が小さいのが最大の利点です。CAPのServing SAP Fiori UIsも、Fioriアプリを「アノテーション付きのメタデータから画面を作る汎用フロントエンド」と位置づけています。

フリースタイルのSAPUI5を選ぶ場面と画面ごとに増える保守コスト

フロアプランに収まらない画面だけ、フリースタイルで書きます。具体的には、ガントチャートや図面のような独自の描画、バーコード読み取りと連続入力を組み合わせた現場画面、複数のサービスを1画面で操作するダッシュボードなどです。

フリースタイルはビューとコントローラーを自分で書くため、自由度と引き換えに版上げのたびの動作確認が画面ごとに発生します。迷ったらFiori elementsで作り、足りない部分だけ拡張ポイントで補う順番にしてください。最初からフリースタイルで作ると、10画面あれば10画面ぶんの保守を抱えます。

CAPとFiori elementsで業務アプリを作りローカルで表示する手順

ここからは、SAP BTPのCAP（Node.js）でサービスを定義し、Fiori elementsの一覧画面を表示するまでを進めます。CAPの導入とBTPへのデプロイはSAP BTPでCAPの拡張を作りCloud Foundryへ出す手順で扱っているので、ここでは画面側に絞ります。

cds initでプロジェクトを作りエンティティとサービスを定義する手順

CAPのGetting Startedに沿って開発ツールを入れ、プロジェクトを作ります。題材は、問い合わせ（インシデント）の一覧と詳細を扱う業務アプリです。

npm i -g @sap/cds-dk
cds init incidents-app
cd incidents-app

データモデルとサービスを2つのファイルに書きます。サービス側のエンティティには、Fioriの下書き編集を有効にする@odata.draft.enabledを付けておきます。

// db/schema.cds
namespace sap.fe.demo;

entity Incidents {
  key ID       : UUID;
      title    : String(100);
      status   : String(20);
      priority : Integer;
}

// srv/incident-service.cds
using { sap.fe.demo as my } from '../db/schema';

service IncidentService {
  @odata.draft.enabled
  entity Incidents as projection on my.Incidents;
}

この時点でcds watchを実行すると、OData V4のサービスがhttp://localhost:4004に立ち上がります。画面はまだ素の状態です。

UIアノテーションをapp配下の別ファイルに書きLineItemで一覧列を決める

一覧の列と検索条件はUIアノテーションで決めます。CAPのガイドは、アノテーションをサービス定義に混ぜず、app/配下の別ファイルに置くよう勧めています。

// app/incidents/annotations.cds
using IncidentService from '../../srv/incident-service';

annotate IncidentService.Incidents with @(
  UI: {
    SelectionFields: [ status, priority ],
    LineItem: [
      { Value: title,    Label: '件名' },
      { Value: status,   Label: '状態' },
      { Value: priority, Label: '優先度' }
    ]
  }
);

SelectionFieldsが一覧上部の絞り込み条件、LineItemが表の列です。cds watchのトップページに表示されるFiori previewのリンクを開くと、UIアプリを作らなくてもList Reportの形で結果を確かめられます。Fiori previewは確認用で、本番では自動的に無効になります。

@odata.draft.enabledの下書きロック15分と本体側の検証を書く注意点

下書きを有効にすると、Object Pageでの編集が「下書きを作る→保存で確定」の流れになり、CAPが下書き用のエンティティを自動で用意します。既存データの編集中は他の利用者と衝突しないようロックがかかり、既定の保持時間は15分です。変更はcds.fiori.draft_lock_timeoutで行います。

見落としやすいのは入力チェックの置き場所です。下書きの段階でエラーを返しても、下書き自体は保存されます。さらに、確定済みのデータは下書きを通らずにAPIから直接更新されることがあります。チェックは確定側（アクティブなエンティティ）に必ず書き、下書き側の検証だけで済ませないでください。

SAP Fiori toolsのジェネレータでList Reportアプリを生成する手順

Fiori previewで形が固まったら、配布できるアプリとして生成します。SAP DevelopersのFiori elementsアプリ作成チュートリアルの手順は次のとおりです。

VS CodeかSAP Business Application Studioのコマンドパレットで「Fiori: Open Application Generator」を開く
テンプレートに「List Report Page」を選ぶ
データソースに「Use a local CAP Project」を選び、作成したプロジェクトとIncidentServiceを指定する
メインのエンティティにIncidentsを選び、モジュール名と名前空間を入力する

生成物はapp/配下のフォルダに入り、manifest.jsonを持つ1つのアプリになります。ジェネレータの部品はSAPのOpen UX Toolsで公開されており、@sap-uxスコープのnpmパッケージとして配布されています（Node.js 18以上が必要）。

UI5 CLIでフリースタイルアプリを起動・ビルドし版を固定する手順

フリースタイルのSAPUI5や、CAPを使わずに既存のODataへつなぐアプリでは、UI5 CLIで開発サーバーとビルドを回します。

ui5 init・ui5 use・ui5 serveでローカル起動するまでのコマンド

UI5 CLIは旧称UI5 Toolingで、現在のui5.yamlはspecVersion: "4.0"です。インストールからビルドまでのコマンドは次のとおりです。

npm install --global @ui5/cli
ui5 init                      # ui5.yaml を生成
ui5 use [email protected]       # 動かす先の版に固定（2026-10-26時点の1.136系最新）
ui5 add sap.m sap.ui.core     # 使うライブラリを依存に追加
ui5 serve                     # http://localhost:8080 で開発サーバー起動
ui5 build                     # 本番用ビルド（既定の出力先は ./dist）

生成されるui5.yamlの骨格は次の形です。ui5 useとui5 addを実行すると、フレームワークの版とライブラリがこのファイルに追記されます。

specVersion: "4.0"
metadata:
  name: incidents-freestyle
type: application

オンプレのFES 2025なら1.136系、BTPなら最新へ版を合わせる理由

上の例でui5 useに1.136系を指定したのは、オンプレミスのS/4HANAでSAP FIORI FES 2025（SAP_UI 8.16）に載せる想定だからです。ローカルを最新の1.153で開発すると、本番に無いAPIを使ったまま気づかず、配置した後に画面が開かない事故になります。

動かす先ごとの合わせ方は次のとおりです。FES 2023（SAP_UI 7.58）なら1.120系、BTP上のLaunchpadで配信するなら保守中の最新版かLTSの1.148系を選びます。版はSAPUI5の保守状況ページで四半期ごとに更新されるため、プロジェクト開始時と本番リリース前の2回は確認してください。

SAP Fioriのカスタムアプリを作るべき条件と見送る場面の判断基準

Fioriで独自アプリを作るかどうかは、標準アプリとの差と保守の負担で決めます。作れば終わりではなく、SAPUI5の版上げに追従し続ける費用が毎年かかります。

カスタムアプリを作るべき条件：標準に無い作業・社外利用者・現場端末

次のどれかに当てはまるなら、Fioriのカスタムアプリを作ります。

標準アプリに無い自社固有の作業（独自の承認経路・業界固有の帳票確認など）がある
取引先や協力会社など、SAP GUIを入れられない社外の利用者が使う
倉庫・工場・店舗でタブレットやスマートフォンから入力させたい
GUIの複数トランザクションをまたぐ作業を、1つの画面にまとめて入力ミスを減らしたい

このうち社外利用者と現場端末の2つは、GUIでは代替手段がありません。S/4HANA本体を改修せずBTP上に置くなら、前述のCAPとFiori elementsの組み合わせが第一候補です。

見送るべき場面：標準アプリで足りる業務と入力量の多いヘビーユーザー

標準アプリで業務が回るのに、画面の並びや項目名を合わせるためだけにカスタムアプリを作るのは過剰です。項目の表示・非表示や並び替えは、標準アプリの設定やキーユーザー拡張で済むことが多く、独自アプリにすると版上げのたびの検証が丸ごと自社の負担になります。

大量入力のヘビーユーザー向けに、GUIと同じ操作感をFioriで再現しようとするのも見送ります。キーボード操作の速さでGUIに勝つ画面を作るには、フリースタイルで細かく作り込む必要があり、費用に見合いません。この領域はGUIを残す前提で、2027年の保守期限に向けた移行計画と合わせて判断してください。計画の全体像はSAPの2027年問題と移行・延命の判断で扱っています。

外注時に見積もりへ入れるべきODataサービス・ロール設定・版追従の範囲

Fioriアプリの開発を外注するときは、画面の本数だけで見積もると抜けが出ます。次の項目が見積もりに入っているかを確認してください。

バックエンドのODataサービス（CAP、またはABAPのRAPやCDSビュー）の開発
UIアノテーションの設計と、フリースタイルにする画面の切り分け
Launchpadのカタログ・ロールへの登録と、利用者ロールの権限設計
動かす先のSAPUI5の版の確認と、版上げ時の回帰テスト
GUIを残す業務とFioriへ移す業務の一覧づくりと、利用者への教育

3番目と4番目は開発会社の作業範囲から漏れやすく、稼働直前に「タイルが表示されない」「本番の版で画面が開かない」という形で表に出ます。一創のSAPコンサルティング・導入支援サービスでは、GUIとFioriの切り分けからFiori elementsでのアプリ開発、BTPへの配置までを一続きで相談いただけます。

よくある質問

SAP Fioriを調べ始めた実装者や、S/4HANA移行を担当する方から多い質問に、公式ドキュメントの記述をもとに答えます。

SAP FioriとSAPUI5の違いは何ですか？

SAP Fioriは画面の作り方の規約（デザインシステム）と、その規約で作られた業務アプリ群を指します。SAPUI5は、そのアプリを実装するためのJavaScriptのUIフレームワークです。つまりFioriが「何をどう見せるか」、SAPUI5が「それをどう動かすか」を担います。SAPUI5の中核部分はOpenUI5としてオープンソースで公開されています。

SAP Fioriは追加費用なしで使えますか？

S/4HANAの標準アプリとFiori Launchpadは、S/4HANAの画面として提供されるもので、Fioriという別製品を買う形ではありません。ただし、アプリによっては対応する業務機能のライセンスが前提になります。また、BTP上でLaunchpadを配信したりCAPでアプリを動かしたりする場合は、BTP側のサービス利用料がかかります。具体的な条件はSAPの契約窓口で確認してください。

S/4HANAに移行したらSAP GUIは使えなくなりますか？

使えなくなるわけではありません。オンプレミスやプライベートクラウドのS/4HANAでは、SAP GUIからの操作も引き続き可能で、トランザクション/UI2/FLPからLaunchpadを開くこともできます。SAP GUI自体のクライアントの版にはサポート期限があるため、利用中の版の期限はSAP Note 147519で確認してください。

Fioriアプリの開発にABAPは必要ですか？

画面側はSAPUI5とCDSアノテーションなので、ABAPは不要です。バックエンドのODataサービスをどこで作るかで変わり、S/4HANA本体の中に作るならABAPのRAPやCDSビュー、BTP上に作るならCAPのNode.jsかJavaを使います。既存のABAP人材がいるならRAP、Web系エンジニア中心ならCAPという選び方が現実的です。

SAP Web IDEとSAP Business Application Studioの違いは何ですか？

SAP Web IDEは以前のクラウドIDEで、現在のFiori開発の手順はSAP Business Application StudioかVS CodeとSAP Fiori toolsの組み合わせで書かれています。SAP Developersのチュートリアルも、Business Application Studioのコマンドパレットからアプリのジェネレータを開く手順です。古い解説記事のWeb IDE前提の手順は、そのままでは再現できないと考えてください。