mcpField
S
sap-fiori-app-development

sap-fiori-app-development

github.com/sap開発160604 回インストール今日更新
リポジトリ

sap-fiori-app-development について

このスキルは、CAPとスタンドアロンプロジェクトにおけるSAP Fiori Elementsアプリの開発指針を示します。プロジェクト種別の選択、Fiori MCPによるページ作成、構成、サービスメタデータ、プレビュー手順を扱います。

主な機能

  1. 01CAPとスタンドアロンFioriプロジェクトの指針
  2. 02利用可能なアプリとページテンプレートの説明
  3. 03アプリ構成とデータモデル要件の提示
  4. 04サービスメタデータとアノテーションの扱い
  5. 05アプリのプレビュー手順

活用シーン

  1. 01新しいCAPまたはスタンドアロンFioriアプリの計画
  2. 02アプリに適したページテンプレートの選択
  3. 03スタンドアロンアプリをODataサービスに接続
  4. 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 プロジェクトに適用)

  1. 実装を進める前に、ユーザーのリクエストで技術スタックが明示されている場合を除き、必ずユーザーに、CAP(Cloud Application Programming)向けの Fiori アプリを作成するか、外部 OData サービスに接続するスタンドアロン Fiori プロジェクトを作成するかを確認してください。
  2. Fiori MCP ツールを使用して、SAP Fiori Elements で Fiori UI を作成してください。
  3. Fiori MCP Server ツールの実行が成功したら、完了したことをユーザーに伝えてください。確認や再確認は行わず、ツールの実行成功を完了の確認として扱ってください。
  4. データモデルは SAP Fiori elements に適したものにしてください。少なくとも、アプリケーションのメインエンティティとなるエンティティタイプが 1 つ必要です。関連エンティティへのナビゲーションプロパティは任意ですが、より豊かな UI パターンを実現できます。
  5. エンティティの各プロパティには、適切なデータ型を指定する必要があります。
  6. コードを直接変更する前に、まず Fiori MCP サーバーに適切な関数またはツールがあるか、あるいは専用のスキル(例:sap-fiori-analytical-chart)が存在するかを確認してください。
利用可能なアプリケーションテンプレート(CAP およびスタンドアロンプロジェクト)

Fiori MCP は、CAP とスタンドアロンプロジェクトの両方のバックエンド向けに、以下のアプリケーションテンプレートを作成できます。

  1. FE_LROP - リストレポート・オブジェクトページ(最も一般的、OData V2/V4)
  2. FE_ALP - 分析リストページ(OData V2/V4)
  3. FE_OVP - 概要ページ(OData V2/V4)
  4. FE_WORKLIST - ワークリスト(OData V2/V4)
  5. FE_FEOP - フォーム入力オブジェクトページ(OData V4 のみ)
  6. FE_FPM - フレキシブルプログラミングモデル/カスタムページ(OData V4 のみ)
  7. FF_SIMPLE - 基本的な SAPUI5 フリースタイルテンプレート(データソースなしでも動作可能)
利用可能なページタイプ

Fiori MCP は、既存のアプリケーションに以下のページタイプを追加できます。

  1. ListReport - フィルタリングと検索機能を備えたテーブルビュー
  2. ObjectPage - レコードの表示・編集用の詳細ページ
  3. 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 固有のガイドライン

  1. Fiori アプリは、cds init 操作で事前に作成した CAP アプリケーションのルートフォルダー内の app フォルダーに作成する必要があります。このルートフォルダーは、常に作業ディレクトリの直下にあるサブフォルダーです。
  2. CAP アプリケーションの概要に従って UI アプリケーションを作成する場合、ユーザーから別途指定がない限り、概要のプロジェクト構造に記載された UI アプリケーション名を使用してください。
  3. フルスタック CAP アプリケーションの UI を変更または修正するフォローアップリクエストでは、サービス側での変更が本当に必要な場合を除き、常にまず Fiori アプリ側で変更を試みてください。
  4. すべてのエンティティの主キーには UUID 型を使用してください。
  5. CSV ファイルにサンプルデータを作成する場合、すべての主キーと外部キーは UUID 形式で指定する必要があります(例:550e8400-e29b-41d4-a716-446655440001)。

スタンドアロン Fiori プロジェクトのガイドライン

  1. 外部サービスをベースとするスタンドアロン Fiori プロジェクトでは、Fiori MCP ツールによってアプリケーションがルートレベルに作成されます。
  2. デスティネーションまたは SAP システム名:ユーザーがデスティネーション名または SAP システム名を指定しない場合は、Fiori MCP Server を使用して利用可能なデスティネーション/システムを取得し、ユーザーが選択できるように提示します。
  3. OData サービスメタデータの取得(アプリの初回作成時のみ):OData サービスメタデータのダウンロード方法については、ツールの説明を参照してください。Service Center MCP が利用可能な場合はそれを使用し、利用できない場合は Fiori MCP Server を使用してメタデータファイルをダウンロードします。作成済みのアプリでメタデータを更新する方法については、以下の 8 を参照してください。
  4. アノテーションは主にバックエンドサービスで管理し、アプリ固有の UI カスタマイズまたはオーバーライドのみをローカル(フロントエンド)アノテーションに配置してください。
  5. フロントエンドアノテーションはアプリ固有の UI 調整(例:/webapp/annotations/annotation.xml)にのみ使用し、manifest.json 内で一致する uri および localUri の値を指定して参照してください。
    "annotation": {
      "type": "ODataAnnotation",
      "uri": "annotations/annotation.xml",
      "settings": {
        "localUri": "annotations/annotation.xml"
      }
    }
    
  6. スタンドアロン Fiori プロジェクトは、リモート OData V2 または V4 サービス(manifest.json の dataSources で定義)に接続します。
  7. 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"
        }
      }
    }
    
  8. サービスメタデータの更新:既存の Fiori アプリで、稼働中のバックエンドからローカルの metadata.xml を更新する場合は、download_odata_service_metadata を使用しないでください(このツールは、アプリまたはページの作成時にメタデータを初回ダウンロードするためのものであり、プロジェクトにすでに存在するメタデータの更新には使用しません)。代わりに、sap-fiori-create-cli スキルの update service-metadata セクションを実行してください。

コメント