SAP Fiori Elements を 利用するメリットと4つのFloorplan
SAPの領域において、開発者は多くのビジネスロジックを扱いますが、その際、何度も何度も使用される共通のUI要素が必要になることがよくあります。
ここでは、特に繰り返し使用されるUI要素をご紹介します。:
- データセットを表示するテーブル、リスト、グリッド
- データの詳細情報の表示
- ロジックの作成、編集、削除を可能にするUIコンポーネント
- データを分析するためのUIコンポーネント
- ダッシュボード
これらの要素を毎回1から作り直すのは、非常に効率が悪く、時間もかかります。
その問題に対し、SAP Fiori Elementsは基本的なFloorplanを提供することで、開発の効率を上げ、時間短縮によるコスト削減を実現します。
SAP Fiori Elements は、特定のビジネスロジックに合わせて利用・変更できる様々なFloorplanを提供し、反復的な開発を減らすことができるソリューションです。
以下は、SAP Fiori Elements が提供するFloorplanに対応する、最も反復的な UI コンポーネントの対応表です。
| Use Case | SAP Fiori Element Floorplan |
| テーブル / グリッド / リスト | List Report / Worklist |
| 詳細ページとCRUD操作 | Object Page |
| データ分析 | Analytical List Page |
| ダッシュボード | Overview Page |
これらFloorplanを使用すると、カスタマイズ性に乏しく、アプリも制限されたものになるのではないかと思いがちです。
しかし、そのようなことはありません。SAP Fiori Elementsは、さまざまな機能やユースケースに対応できるようになっています。
単なるUIレンダーのドラッグ＆ドロップツールではなく、今日利用可能な最もパワフルで包括的なメタデータ駆動型のUIフレームワークの一つなのです。
これらすべての利点を理解することは重要です。
SAP Fiori Elementsは、アプリケーション開発者と実際のビジネスユーザーの両方にシームレスで快適な体験を提供するために、Web開発分野で受け入れられているベストプラクティスに従っています。
これにより、特定開発における、アクションボタンをどこに配置すべきか、UIコードをどのように構成すべきか、ナビゲーションをどのように処理すべきかなどを心配する必要はなくなりました。
また、SAP Fiori Elements自体も、Webのベストプラクティスのバージョンアップに合わせてすべてを最新の状態に保ちます。
例えば、2019年にSAPはFiori 2に代わってFiori 3を導入しました。
SAP Fiori Elements上に構築されたすべてのアプリケーションは、正しい手順でSAP UI5の最新バージョンにアップグレードするだけで、アプリケーションの実装に変更を加えることなく、すぐにアップグレードできます。
このような迅速なバージョンアップは、従来の完全手作業によって構築されたカスタムアプリケーションでは不可能でしょう。
SAP Fiori Elementsを活用することのもう一つの大きなメリットは非機能要件への対応です。
パフォーマンス、アクセシビリティ、セキュリティ、応答性、拡張性などの非機能要件は、たいてい厄介です。なぜなら機能要件そのものよりも多くの工数を必要とするからです。
その中でもセキュリティについては、SAP Fiori Elementsを使用することによって得られるもう一つの大きなトピックです。前述の通り、常に最新のバージョンを適用可能な状態としておけば、重大なセキュリティリスクをフレームワークレベルで防ぎつつ、開発者は複雑なビジネスロジックの実装そのものに集中できます。
また、SAP Fiori Elementsを使用することは、アプリケーション間のUXの一貫性にもつながります。ユーザーエクスペリエンスの一貫性を保つメリットは、エンドユーザーが特定のデザインに慣れ親しみ、そのデザインのアプリケーションの使い方を知っているため、トレーニングが少なくて済みます。これにより、例えばユーザーが新しいFioriアプリケーションを使うようになったとしても、基本的な操作感は変わらないため、直感的に操作することができます。結果としてビジネス全体の効率が向上するのです。
開発者のレベルにおいても、異なるアプリケーション間でユーザーエクスペリエンスの一貫性を損なうことがないため、双方での調整をする必要がなくなるので、開発プロセスにかかる時間も大幅に短縮されます。
これらはすべて、SAP Fiori Elementsがメタデータ駆動型のUIフレームワークであるために、スピーディーな開発を可能にしているからこそのメリットです。
UI はアプリケーションマニフェスト、サービスメタデータ、アノテーションに基づいてレンダリングされるため、必要なコードは最小限に抑えられ、開発時間は大幅に短縮されます。
SAP Fiori Elements はこれらのメリットを提供するだけでなく、開発者がビジネスに特化した拡張機能を構築することで、独自のビジネス要求を満たせるため、容易に拡張性の向上を実現できます。
では、4つの基本的なfloorplanやテンプレートをご紹介します。
SAP Fiori Elementsテンプレート１）List Report
イメージ
List Report floorplan を使用する要件:
- ユーザーは、検索、フィルタリング、ソート、グループ化によって、大量のアイテムの中から関連するアイテムを見つけて行動する必要がある。
- データセット全体をさまざまなビジュアライゼーション（表やグラフなど）で表示させたい。
- 同じコンテンツの複数のビューで作業する必要がある。
例えばステータスごとのビューが必要となる場合です。 - 表やグラフからのドリルダウンまでは必要としない。
- 様々な種類の項目を扱う必要がある。
イメージ図の通り、 List Report の Floorplanは、フィルタリングやソートが可能なレスポンシブテーブルです。
これらの動作の範囲はカスタマイズしたり、完全に無効にすることができます。
次に、SAP Fiori Elements の仕組みを理解するために、List Report Floorplan の構成要素を確認してみましょう。
セクション
上図の通り、ページは特定のコンポーネントを格納できる特定のセクションに分かれています。各セクションの説明は以下の通りです:
- ダイナミックページヘッダ(1)には、ヘッダタイトル(2)と、展開/折りたたみ可能なヘッダコンテンツ(5)とヘッダー機能(6)が含まれる。
- ヘッダータイトル(2)は、ヘッダー領域の一部であり、ページ全体のタイトルまたはバリアント(3)、フィルター情報（ヘッダーが折りたたまれている場合）、および共有ボタンなどのグローバルアクションを備えたヘッダーツールバー(4)を表示することができる。
- ヘッダーコンテンツ(5)は、フィルターバーまたはスマートフィルターバーを表示するために使用される。
- ヘッダー機能(6)は、ユーザーがヘッダーを展開／折りたたみ(6a)したり、ヘッダー領域をピン／アンピン(6b)したりすることができる。
- コンテンツエリア(7)は、データ内容の表示領域である。
- 表/グラフのタイトルやタブなどを表示するための領域(8)
- タブごとに1つの表・グラフツールバー(9)を表示
- 1つまたは複数の表またはグラフ(10)。
チャートを使用する場合は、チャートを単独で表示することも、既存のテーブルの追加表示として表示することも可能。
- フッターツールバー(11)。必要に応じて、フッターツールバーを使用して、メッセージングボタンや保存ボタンを表示します。
フィルターと検索ロジックもカスタマイズできます。
各floorplanの詳細まで書くには紙面が足りないため、本ブログ記事では基本的な概要のみを紹介することとします。もし全機能に興味がある場合は、SAPの公式ドキュメントを確認してください。
SAP Fiori Elementsテンプレート２）Object Page
Object Pageは、そのオブジェクトに関するすべての関連情報を表示し、分類するためのfloorplanです。
List Reportで1つのデータをクリックすると、このObject Pageで詳細情報を見ることができます。
また、データの編集や削除も可能です。
表示モードと編集モードを使用することができ、ユーザーの操作で切り替えられます。また、新規にデータを作成するための作成モードも別途用意されています。
イメージ
Object Page floorplan を使用する要件:
- データの詳細情報を知りたい。
- データの作成、更新を行いたい。
Object Pageは、List Reportのようにいくつかのセクションで構成されています。
セクション
- 動的ページヘッダー
- ナビゲーションバー
- コンテンツエリア
- タイトル部
- パンくずリスト
- 共通アクション
- ヘッダーコンテンツ
- フッターツールバー
動的ページヘッダーとコンテンツエリアは必須ですが、ナビゲーションバーは任意のセクションです。
Object Pageでは、関連するデータの表示方法を大幅にカスタマイズすることができますが、これについては公式ドキュメントをご覧ください。
SAP Fiori Elementsテンプレート３）Analytical List Page
Analytical list page（ALP）は、さまざまな視点から段階的にデータを分析したり、ドリルダウンで根本的な原因を調べたり、トランザクションコンテンツにアクションを起こすための手段を提供します。
これらはすべて、1つのページ内でシームレスに行えます。
分析リストページの目的は、データビジュアライゼーションとビジネスインテリジェンスを用いて、データ内の興味深い領域や重要な情報を特定することです。
ビジュアライゼーションは、ユーザーが事実や状況を認識するための重要なポイントであり、その結果、インサイトを得るために必要なアクション数を減らします。
主な対象者は、トランザクション・コンテンツを扱うユーザーです。彼らは、透過的な業務上のデータと、業務上のアクション内容を参照できます。さらに、ユーザーはシステムを切り替えることなく、分析ビューや機能にアクセスできます。
ビューの種類には、KPIや、フィルター値がメジャーやビジュアライゼーションによって強化されたビジュアルフィルター、ドリルイン機能を備えたテーブルとチャートを組み合わせたビューなどがあります。
ユーザーはチャートを操作することで、データを深く掘り下げられます。可視化されれば、スパイクや逸脱、異常をより迅速に特定し、適切な行動をすぐに取れるようになります。
イメージ
analytical list pageを使用する要件:
- 現在の状況を理解したり、根本的な原因を特定するために、重要な情報を抽出する必要があります。
- さまざまな視点から段階的にデータを分析したり、ドリルダウンで根本的な原因を調べたり、1つのページ内でトランザクションコンテンツに対応する方法が必要である。
- フィルタリングされたデータセットに加えて、ユーザーはフィルタリング設定の影響をチャートで確認する必要がある（ビジュアルフィルタ）。
- 統合されたチャートビューとテーブルビューを切り替える必要がある（ハイブリッドビュー）。
- グローバルな重要業績評価指標（KPI）に対する行動の影響を確認する必要がある。
- 検索、フィルタリング、ソート、グループ化、ドリルダウン、スライス、ダイシングによって、大量のアイテムの中から関連するアイテムを見つけて行動する必要がある。
セクション
シェルバーは、分析リストページの上にあります。ページ自体はダイナミックページレイアウトを採用しており、2つのメインエリアがあります。
- ページヘッダー
- コンテンツエリア
基本的にはシンプルなレイアウトですが、今回取り上げた中では最もカスタマイズ性に優れています。
SAP Fiori Elementsテンプレート４）Overview Page
Overview pageは、従来のダッシュボードに似ており、データに基づいたすべての情報を 1 つのページで提供します。
カードと呼ばれるコンテンツコンテナを使用しています。
イメージ
Overview pageを使用する要件:
- 特定のドメインや役割に関連するコンテンツを表示したい。
- 役割に応じたタスクを遂行するために、2つ以上のアプリケーションから情報をフィルタリングし、関連させる必要がある。
- さまざまな情報（チャート、リスト、テーブルなど）を1つのページで提供したい。
セクション
Analytical List Pageと同じく、Overview Pageはヘッダーとコンテンツセクションで構成されており、大幅なカスタマイズが可能です。
カードのレイアウトは、固定またはサイズ変更が可能です。
SAP Fiori Elements の基本的な概要と4つのなfloorplanをお読みいただき、ありがとうございます。各floorplanの詳細や、SAPの他のトピックについては、今後またご紹介させていただきたいと思います。SAPアドオン
パソナテックではSAP Fiori、BTPの概要、技術要素を解説している「SAP FioriとBTPが理解できる基本ガイドブック」をご用意しました。本資料は、SAP Fiori、BTPの理解を深めたい方に必見の資料です。ぜひダウンロードいただき、ご覧ください。
