--- title: "SAP Fioriとは：SAPUI5との関係・SAP GUIからの移行判断とCAPでのアプリ実装手順【2026年10月】" url: "https://www.issoh.co.jp/tech/details/18923/" published: 2026-10-26 updated: 2026-10-26 categories: ["開発"] publisher: "株式会社一創" --- # 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](https://ui5.sap.com/)にAPIリファレンスとサンプルがまとまっています。中核部分はオープンソースのOpenUI5として[GitHubのUI5/openui5](https://github.com/UI5/openui5)で公開されており、[OpenUI5 SDK](https://sdk.openui5.org/)から参照できます。SAP製品の契約が無くても、OpenUI5でFioriの見た目のアプリを試すことは可能です。 版の管理は[SAPUI5の保守状況ページ](https://ui5.sap.com/versionoverview.html)で確認します。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の解説](https://learning.sap.com/courses/technical-implementation-and-operation-i-of-sap-s-4hana-and-sap-business-suite/using-sap-fiori-launchpad%5Fa9103226-f903-4afb-b471-c07be29c59e3)によると、オンプレミスのAS ABAPでは次の3つの方法で起動できます。 ``` https://:/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html https://:/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の特徴と実装の解説](https://www.issoh.co.jp/tech/details/15397/)で整理しています。 ### GUIに残す業務とFioriへ寄せる業務を利用者と入力量で分ける線引き 線引きは「誰が・どれだけ入力するか」で決めます。現場の判断に使える順に並べると次のとおりです。 - 承認・照会・簡単な登録など、たまに使う人が多い業務はFioriへ寄せる（教育コストが下がる） - スマートフォンやタブレットから使いたい業務はFiori一択（GUIはPC専用） - キーボードだけで大量の伝票を打つ経理・購買のヘビーユーザーは、当面GUIを残す選択肢がある - Basisの管理作業や開発作業はGUIのまま（Fiori化の対象外） 全面Fiori化を移行プロジェクトの必須条件にすると、ヘビーユーザーの反発で稼働が遅れがちです。移行時はFioriの標準アプリで足りる業務から切り替え、GUIを残す業務を一覧で合意しておきます。S/4HANAの導入形態ごとの移行方式は[SAP S/4HANAの導入形態と移行方式の解説](https://www.issoh.co.jp/column/details/13603/)を参照してください。 ## 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](https://cap.cloud.sap/docs/guides/uis/fiori)も、Fioriアプリを「アノテーション付きのメタデータから画面を作る汎用フロントエンド」と位置づけています。 ### フリースタイルのSAPUI5を選ぶ場面と画面ごとに増える保守コスト フロアプランに収まらない画面だけ、フリースタイルで書きます。具体的には、ガントチャートや図面のような独自の描画、バーコード読み取りと連続入力を組み合わせた現場画面、複数のサービスを1画面で操作するダッシュボードなどです。 フリースタイルはビューとコントローラーを自分で書くため、自由度と引き換えに版上げのたびの動作確認が画面ごとに発生します。迷ったらFiori elementsで作り、足りない部分だけ拡張ポイントで補う順番にしてください。最初からフリースタイルで作ると、10画面あれば10画面ぶんの保守を抱えます。 ## CAPとFiori elementsで業務アプリを作りローカルで表示する手順 ここからは、SAP BTPのCAP（Node.js）でサービスを定義し、Fiori elementsの一覧画面を表示するまでを進めます。CAPの導入とBTPへのデプロイは[SAP BTPでCAPの拡張を作りCloud Foundryへ出す手順](https://www.issoh.co.jp/tech/details/18921/)で扱っているので、ここでは画面側に絞ります。 ### cds initでプロジェクトを作りエンティティとサービスを定義する手順 [CAPのGetting Started](https://cap.cloud.sap/docs/get-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アプリ作成チュートリアル](https://developers.sap.com/tutorials/fiori-tools-cap-create-application.html)の手順は次のとおりです。 1. VS CodeかSAP Business Application Studioのコマンドパレットで「Fiori: Open Application Generator」を開く 2. テンプレートに「List Report Page」を選ぶ 3. データソースに「Use a local CAP Project」を選び、作成したプロジェクトとIncidentServiceを指定する 4. メインのエンティティにIncidentsを選び、モジュール名と名前空間を入力する 生成物は`app/`配下のフォルダに入り、`manifest.json`を持つ1つのアプリになります。ジェネレータの部品は[SAPのOpen UX Tools](https://github.com/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](https://ui5.github.io/cli/stable/)は旧称UI5 Toolingで、現在の`ui5.yaml`は`specVersion: "4.0"`です。インストールからビルドまでのコマンドは次のとおりです。 ``` npm install --global @ui5/cli ui5 init # ui5.yaml を生成 ui5 use SAPUI5@1.136.24 # 動かす先の版に固定（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年問題と移行・延命の判断](https://www.issoh.co.jp/column/details/13381/)で扱っています。 ### 外注時に見積もりへ入れるべきODataサービス・ロール設定・版追従の範囲 Fioriアプリの開発を外注するときは、画面の本数だけで見積もると抜けが出ます。次の項目が見積もりに入っているかを確認してください。 1. バックエンドのODataサービス（CAP、またはABAPのRAPやCDSビュー）の開発 2. UIアノテーションの設計と、フリースタイルにする画面の切り分け 3. Launchpadのカタログ・ロールへの登録と、利用者ロールの権限設計 4. 動かす先のSAPUI5の版の確認と、版上げ時の回帰テスト 5. GUIを残す業務とFioriへ移す業務の一覧づくりと、利用者への教育 3番目と4番目は開発会社の作業範囲から漏れやすく、稼働直前に「タイルが表示されない」「本番の版で画面が開かない」という形で表に出ます。一創の[SAPコンサルティング・導入支援サービス](https://www.issoh.co.jp/service/erp%5Fcrm/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前提の手順は、そのままでは再現できないと考えてください。 ## 関連記事 - [SAP S/4HANAとは？ECCとの違い・導入形態・移行方式と2027年問題への備えを解説](https://www.issoh.co.jp/column/details/13603/)：Fioriが標準画面になるERP本体の導入形態と移行方式 - [SAP BTPとは：CAPでS/4HANAの拡張を作りCloud Foundryへデプロイする手順と料金【2026年10月】](https://www.issoh.co.jp/tech/details/18921/)：CAPのFioriアプリをBTPへデプロイする手順と料金 - [ABAPとは？SAP専用の業務開発言語の特徴と2027年問題への備えを実装解説](https://www.issoh.co.jp/tech/details/15397/)：Fioriのバックエンドを本体側で作るときの言語の基礎 - [SAPの2027年問題とは？ERP保守終了の影響とS/4HANA移行・延命の判断を解説](https://www.issoh.co.jp/column/details/13381/)：GUIを残す範囲を決める前提になる移行計画 - [SAP Jouleとは？使用LLMモデルとJoule Agents・料金・導入を2026年最新で解説](https://www.issoh.co.jp/tech/details/11222/)：Fioriの画面から呼び出すSAPの生成AIアシスタント --- 出典: [SAP Fioriとは：SAPUI5との関係・SAP GUIからの移行判断とCAPでのアプリ実装手順【2026年10月】]()（株式会社一創）