Fiori概要
12.1 Fiori概要
Fioriとは
概要
SAP Fioriは、SAP社 が提供する業務アプリケーション用の
ユーザーインターフェース（UI）デザインコンセプトとツール群 のことです。
SAPの従来のシステム（SAP ERPなど）は、機能は豊富ですが、画面が複雑で使いづらいと言われていました。
Fioriはその「使いづらさ」を解消するために生まれた、
「見やすく・使いやすく・スマートフォンでも操作できる」
新しいデザインの仕組みです。
Fioriアプリは、ブラウザ上で動作し、タップ操作中心で直感的に使えます
特徴
Fioriの最大の特徴は、 SAPの新しく使いやすい画面設計です。
購買発注や在庫照会などの機能を従来より簡単に利用することができます。
-
●シンプルなデザイン
- 必要な情報だけを分かりやすく表示
- 初心者でも迷いにくい画面構成
-
●どの端末でも同じ操作感
- PC、タブレット、スマートフォンに対応
- どのデバイスでも統一された見た目・操作性
-
●役割ごとのアプリ構成
- 「経理担当者」「購買担当者」など、職種に合わせたアプリを用意
- 自分に必要なアプリだけが表示されるため効率的
-
●クラウドにも対応
- SAP S/4HANA Cloudと連携して利用可能
- 場所を選ばず業務を進められる
Fioriアプリケーションを体験しよう
まずはFioriの標準機能を用いて、得意先照会機能を体験しましょう。
①トランザクションコード：「/N/UI2/FLP」でFioriを起動します。
※URLにアクセスすることでアプリケーションを利用できるが、SAP GUIから起動することも可能
②ポップアップが表示された場合、許可ボタンを押下します。
③警告文が表示された場合、詳細設定ボタンを押下します。
④画面下部のリンクを押下します。
⑤ユーザ、パスワードを入力します。
⑥ログオンボタンを押下します
⑦検索ボタンを押下します。
⑧検索窓に「ビジネスパートナ更新」と入力します。
⑨「アプリ中のビジネスパートナ更新」を押下します。
※※検索窓に「ビジネスパートナ更新」などが表示されない場合、
左上のプロフィールアイコンをクリックし、「アプリファインダ」で手動で機能を追加します。
⑩ビジネスパートナ更新のタイルを押下します。
⑪以下内容を入力します。
・Bus. パートナ：3200000014
※そのほかの項目はデフォルトのままでOK
⑫開始ボタンを押下します。
⑬パートナ「3200000014」をダブルクリックします。
⑭得意先を選択します。
⑮タブを切り替えることで、得意先「3200000014」の情報を照会できます。
MVCモデル
Fioriアプリは、使いやすく直感的に操作できるように「Fioriデザインガイドライン」に基づいて設計されています。
また、Fioriアプリの多くは、「SAPUI5」という、HTML5をベースのUIフレームワークを使って開発されています。
S/4HANAの導入に伴い、Fioriが標準のUXとして採用されました。
従来のABAPプログラムはSAP GUIを前提としていたため、基本的にPC環境からの利用が中心でしたが、
一方、SAPUI5で作られた Fioriアプリは Web技術で動作するため、
PC・タブレット・スマートフォンなど、どんなデバイスからでもSAPシステムにアクセスできるようになりました。
そしてSAPUI5ではMVCモデルが採用されており、
画面表示とデータ処理の役割を分離して整理する一般的な設計パターンが使われています。
・View = 画面の構造・表示 (ボタン/リストなど)
・Model = 画面に表示するデータ
・Controller = ボタン押下などの操作処理、イベント制御
このMVC構造により、Fioriの内部の仕組みがは分かりやすく、開発や変更がしやすくなっています。
役割
では、Fioriに適用されている（SAPUI5）のMVC構造の特徴を確認しておきましょう。
| 要素 | 役割 | Fioriでの具体例 |
|---|---|---|
| Model（モデル） | 画面に表示するための「データ箱」。サーバーから受け取ったデータを一時的に持っておく。 | 画面に表示するビジネスパートナ一覧、入力した名前や住所などを一時的に保存しておく部分 |
| View（ビュー） | ユーザーが実際に目で見る「画面」そのもの。 | ボタン・入力欄・表・テキストなど、画面に並んでいる見た目の部分 |
| Controller（コントローラ） | ボタンを押したときなど、画面の動きを決める役割。ModelとViewの橋渡しをする。 | 「検索」ボタンを押したら一覧を更新する／「保存」ボタンを押したら入力内容を送信する、といった処理を実行する |
メリット
Fioriアプリでは、「Model」「View」「Controller」を明確に分けて開発することで、
次のようなメリットがあります。
●保守性が高い：
画面の見た目と処理が分かれているため、 どちらかを直しても他へ影響が出にくい。●再利用性が高い：
一度作ったデータ（Model）を使って、 別の画面や機能を作りやすい。●チーム開発に向いている：
画面を作る人（デザイナー）と、 処理を書く人（開発者）が分担して作業できる。Fiori Launchpadの画面構成
構成要素
Fiori画面は主に４つの要素で構成されています
| 要素 | 説明 | 例・イメージ |
|---|---|---|
| Space（モデル） | 業務領域や業務ロールの単位。1つのスペースに複数のページを配置できる。 | 「購買」「販売」「財務」など |
| Page（ページ） | スペース内の画面単位。1つのページの中にセクションやタイルを配置する。 | 「購買申請ページ」「受注明細ページ」など |
| Section（セクション） | ページ内の区切り。関連するタイルをグループとしてまとめる。 | 「自分の申請」「承認待ち申請」など |
| Tile（タイル） | 実際のアプリケーションや機能への入口となるボタン。アプリやリンクを起動する。 | 「購買申請」「見積作成」など |
画面表示の流れ
実務では、以下流れでFiori画面を表示することができます。
当研修では、以下は行わずに“ローカル起動”で作成した機能（アプリケーション）を実行します。
①アプリの準備
Fioriアプリケーション（SAPUI5アプリケーション）がシステムに ※デプロイ され、
Launchpadで使えるように ※カタログ やタイルが登録される。
※デプロイ：作成したアプリケーションを実際に「使える状態」にすること
※カタログ：アプリケーション（タイル）をまとめた「一覧表」
②権限の割当
ユーザーごとに必要なアプリが見えるよう 役割（ ※ロール ）を設定/割当する。
※ロール：誰がどのアプリを使えるかを決める「権限セット」
③アプリの起動
Fioriアプリケーションにログインし、スペース／ページにタイルが表示される。
タイルをクリックするとアプリが起動する。