sap-fiori-app-development について
このスキルは、CAPとスタンドアロンプロジェクトにおけるSAP Fiori Elementsアプリの開発指針を示します。プロジェクト種別の選択、Fiori MCPによるページ作成、構成、サービスメタデータ、プレビュー手順を扱います。
主な機能
- 01CAPとスタンドアロンFioriプロジェクトの指針
- 02利用可能なアプリとページテンプレートの説明
- 03アプリ構成とデータモデル要件の提示
- 04サービスメタデータとアノテーションの扱い
- 05アプリのプレビュー手順
活用シーン
- 01新しいCAPまたはスタンドアロンFioriアプリの計画
- 02アプリに適したページテンプレートの選択
- 03スタンドアロンアプリをODataサービスに接続
- 04CAPまたはスタンドアロンFioriプロジェクトのプレビュー
MCP 対応
Fiori ElementsのUIやページ作成にはFiori MCPツールを使うよう案内しています。ODataサービスメタデータの取得にはFiori MCPまたはService Center MCPを使う方法も記載されています。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ sap/ open-ux-tools --skill sap-fiori-app-developmentインストール後、Claude Code で/sap-fiori-app-developmentを入力して読み込まれたか確認します。
詳細
SAP Fiori アプリ開発ガイドライン(CAP およびスタンドアロンプロジェクト)
一般的なガイドライン(CAP およびスタンドアロンの Fiori プロジェクトに適用)
- 実装を進める前に、ユーザーのリクエストで技術スタックが明示されている場合を除き、必ずユーザーに、CAP(Cloud Application Programming)向けの Fiori アプリを作成するか、外部 OData サービスに接続するスタンドアロン Fiori プロジェクトを作成するかを確認してください。
- Fiori MCP ツールを使用して、SAP Fiori Elements で Fiori UI を作成してください。
- Fiori MCP Server ツールの実行が成功したら、完了したことをユーザーに伝えてください。確認や再確認は行わず、ツールの実行成功を完了の確認として扱ってください。
- データモデルは SAP Fiori elements に適したものにしてください。少なくとも、アプリケーションのメインエンティティとなるエンティティタイプが 1 つ必要です。関連エンティティへのナビゲーションプロパティは任意ですが、より豊かな UI パターンを実現できます。
- エンティティの各プロパティには、適切なデータ型を指定する必要があります。
- コードを直接変更する前に、まず Fiori MCP サーバーに適切な関数またはツールがあるか、あるいは専用のスキル(例:
sap-fiori-analytical-chart)が存在するかを確認してください。
利用可能なアプリケーションテンプレート(CAP およびスタンドアロンプロジェクト)
Fiori MCP は、CAP とスタンドアロンプロジェクトの両方のバックエンド向けに、以下のアプリケーションテンプレートを作成できます。
- FE_LROP - リストレポート・オブジェクトページ(最も一般的、OData V2/V4)
- FE_ALP - 分析リストページ(OData V2/V4)
- FE_OVP - 概要ページ(OData V2/V4)
- FE_WORKLIST - ワークリスト(OData V2/V4)
- FE_FEOP - フォーム入力オブジェクトページ(OData V4 のみ)
- FE_FPM - フレキシブルプログラミングモデル/カスタムページ(OData V4 のみ)
- FF_SIMPLE - 基本的な SAPUI5 フリースタイルテンプレート(データソースなしでも動作可能)
利用可能なページタイプ
Fiori MCP は、既存のアプリケーションに以下のページタイプを追加できます。
- ListReport - フィルタリングと検索機能を備えたテーブルビュー
- ObjectPage - レコードの表示・編集用の詳細ページ
- CustomPage - 独自のビューを備えた完全カスタマイズ可能なページ
アプリケーション構造
- SAP Fiori elements アプリの作成を依頼された場合、ユーザーの入力が、テーブルデータまたはフォームを含む 1 つ以上のページで構成されるアプリケーションとして解釈できるか確認してください。
- アプリケーションは通常、データをテーブルで表示する List Report ページから始まりますが、ほかのテンプレートも利用できます(上記を参照)。
- 特定のテーブル行の詳細は、ベースエンティティに基づく Object Page に表示されます。
- Object Page には、そのエンティティタイプのナビゲーションプロパティに基づくセクションを含めることができます(to-one(0..1)および to-many の関連の両方)。
- テーブルセクションの行(to-many の関連)の詳細は、その関連の対象エンティティに基づく別の Object Page に表示できます。
アプリケーションのプレビューに関するガイドライン
package.jsonで、そのアプリに最も適したスクリプトを使用してください。- CAP の場合:watch スクリプトを使用してください(例:
npm run watch-manage-travel) - スタンドアロン Fiori プロジェクトの場合:
npm start(ライブバックエンド)またはnpm run start-mock(モックデータ)を使用してください。
CAP 固有のガイドライン
- Fiori アプリは、
cds init操作で事前に作成した CAP アプリケーションのルートフォルダー内のappフォルダーに作成する必要があります。このルートフォルダーは、常に作業ディレクトリの直下にあるサブフォルダーです。 - CAP アプリケーションの概要に従って UI アプリケーションを作成する場合、ユーザーから別途指定がない限り、概要のプロジェクト構造に記載された UI アプリケーション名を使用してください。
- フルスタック CAP アプリケーションの UI を変更または修正するフォローアップリクエストでは、サービス側での変更が本当に必要な場合を除き、常にまず Fiori アプリ側で変更を試みてください。
- すべてのエンティティの主キーには UUID 型を使用してください。
- CSV ファイルにサンプルデータを作成する場合、すべての主キーと外部キーは UUID 形式で指定する必要があります(例:
550e8400-e29b-41d4-a716-446655440001)。
スタンドアロン Fiori プロジェクトのガイドライン
- 外部サービスをベースとするスタンドアロン Fiori プロジェクトでは、Fiori MCP ツールによってアプリケーションがルートレベルに作成されます。
- デスティネーションまたは SAP システム名:ユーザーがデスティネーション名または SAP システム名を指定しない場合は、Fiori MCP Server を使用して利用可能なデスティネーション/システムを取得し、ユーザーが選択できるように提示します。
- OData サービスメタデータの取得(アプリの初回作成時のみ):OData サービスメタデータのダウンロード方法については、ツールの説明を参照してください。Service Center MCP が利用可能な場合はそれを使用し、利用できない場合は Fiori MCP Server を使用してメタデータファイルをダウンロードします。作成済みのアプリでメタデータを更新する方法については、以下の 8 を参照してください。
- アノテーションは主にバックエンドサービスで管理し、アプリ固有の UI カスタマイズまたはオーバーライドのみをローカル(フロントエンド)アノテーションに配置してください。
- フロントエンドアノテーションはアプリ固有の UI 調整(例:
/webapp/annotations/annotation.xml)にのみ使用し、manifest.json内で一致するuriおよびlocalUriの値を指定して参照してください。"annotation": { "type": "ODataAnnotation", "uri": "annotations/annotation.xml", "settings": { "localUri": "annotations/annotation.xml" } } - スタンドアロン Fiori プロジェクトは、リモート OData V2 または V4 サービス(
manifest.jsonの dataSources で定義)に接続します。 - OData サービスメタデータは読み取り専用です:
manifest.jsonで参照されるサービスメタデータファイル(/webapp/localService/mainService/metadata.xml)をローカルで編集してはいけません。エンティティ定義、プロパティ、またはサービス構造の変更は、すべてバックエンドのソースで行う必要があります。"dataSources": { "mainService": { "uri": "/path/to/odata/service/", "type": "OData", "settings": { "annotations": ["annotation"], "localUri": "localService/mainService/metadata.xml", "odataVersion": "4.0" } } } - サービスメタデータの更新:既存の Fiori アプリで、稼働中のバックエンドからローカルの
metadata.xmlを更新する場合は、download_odata_service_metadataを使用しないでください(このツールは、アプリまたはページの作成時にメタデータを初回ダウンロードするためのものであり、プロジェクトにすでに存在するメタデータの更新には使用しません)。代わりに、sap-fiori-create-cliスキルのupdate service-metadataセクションを実行してください。
コメント
Markdown 対応