sap-fiori-tools

Name: sap-fiori-tools
Author: secondsky

github.com/secondsky開発4801.2k 回インストール3 週間前に更新

sap-fiori-tools について

sap-fiori-toolsは、SAP Fiori toolsを使ったSAP Fiori ElementsおよびSAPUI5アプリの開発・調整を支援するスキルです。アプリ生成、画面設定、アノテーション、プレビュー、検証、デプロイを扱い、Fiori MCPツールにも触れています。

主な機能

01Fiori ElementsとSAPUI5アプリの生成
02画面とサービスのビジュアル編集
03アノテーション補完と診断
04モックデータと実データのプレビュー
05ABAPとCloud Foundryへのデプロイ
06アプリの適応とプロジェクト検証

活用シーン

01ODataサービスからFioriアプリを構成
02List ReportとObject Page画面の設定
03モックデータまたはバックエンドデータでのプレビュー
04既存Fioriアプリの調整とデプロイ

MCP 対応

READMEではFiori MCP/生成ツールを開発対象として挙げています。提供された内容には、具体的なMCPツールやサーバーの動作は記載されていません。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/secondsky/sap-skills --skill sap-fiori-tools

インストール後、Claude Code で/sap-fiori-toolsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md

agents/

openai.yaml

references/

adaptation-projects.md

annotations.md

configuration.md

deployment.md

getting-started.md

page-editor.md

preview.md

詳細

SAP Fiori Tools 開発スキル

このスキルを使用する場面

Fiori Elements または Freestyle SAPUI5 アプリケーションの生成、Page Editor／List Report／Object Page の動作設定、アノテーションの編集、モックデータまたは実データでのプレビュー、ABAP または Cloud Foundry へのデプロイ、アダプテーションプロジェクトの作成、Fiori MCP／生成ツールの使用時に、このスキルを使用します。

SAP Fiori tools 拡張機能を使用して SAP Fiori アプリケーションを開発するための包括的なガイドです。

概要

SAP Fiori tools は、SAP Fiori elements および SAPUI5 アプリケーションの開発を簡素化する拡張機能のコレクションです。主なコンポーネントは 6 つあります。

コンポーネント	用途
Application Wizard	Fiori Elements および Freestyle SAPUI5 テンプレートを生成します
Application Modeler	設定用のビジュアルな Page Map と Page Editor
Guided Development	機能を実装するためのステップごとのガイド
Service Modeler	OData サービスのメタデータとアノテーションを可視化します
Annotations Language Server	アノテーションのコード補完、診断、i18n
Environment Check	セットアップとデスティネーションの設定を検証します

最小 SAPUI5 バージョン：1.65+ サポートコンポーネント：CA-UX-IDE

サンプルプロジェクト

SAP Fiori tools を使用して構築された Fiori Elements アプリケーションを含む、SAP の公式サンプルリポジトリです。

リポジトリ：SAP-samples/fiori-tools-samples

フォルダー	内容
`V2/`	OData V2 の Fiori Elements サンプル
`V4/`	OData V4 の Fiori Elements サンプル
`cap/`	CAP プロジェクトの統合サンプル
`app-with-tutorials/`	チュートリアルの関連プロジェクト

クイックスタート：

git clone https://github.com/SAP-samples/fiori-tools-samples
cd fiori-tools-samples/V4/apps/salesorder
npm install
npm start

クイックスタートコマンド

コマンドパレット（Cmd/Ctrl + Shift + P）から機能にアクセスします。

Fiori: Open Application Generator       # Create new application
Fiori: Open Application Info            # View project commands
Fiori: Open Page Map                    # Visual navigation editor
Fiori: Open Guided Development          # Feature implementation guides
Fiori: Open Service Modeler             # Explore OData service
Fiori: Add Deployment Configuration     # Setup ABAP or CF deployment
Fiori: Add Fiori Launchpad Configuration # Configure FLP tile
Fiori: Validate Project                 # Run project validation
Fiori: Open Environment Check           # Troubleshoot destinations

アプリケーションの生成

Fiori Elements のフロアプラン

フロアプラン	OData V2	OData V4	使用例
List Report Page	はい	はい	大規模なデータセットの参照、詳細への移動
Worklist Page	はい	1.99+	作業項目の処理、タスクの完了
Analytical List Page	はい	1.90+	データ分析、KPI の可視化
Overview Page	はい	はい	ロールベースのダッシュボード、複数カードの表示
Form Entry Object Page	はい	はい	構造化データの入力
Custom Page	いいえ	はい	ビルディングブロックによる拡張可能なカスタム UI

データソースのオプション

SAP System - オンプレミスの ABAP システムまたは BTP システムに接続します
CAP Project - ローカルの Node.js または Java CAP プロジェクトを使用します
EDMX File - モックのみでの開発用にメタデータをアップロードします
SAP Business Accelerator Hub - 開発／テストのみ（非推奨）

生成されるプロジェクト構造

webapp/
  ├── manifest.json          # App descriptor
  ├── Component.js           # UI5 component
  ├── localService/          # Mock data and metadata
  │   ├── metadata.xml
  │   └── mockdata/
  └── annotations/           # Local annotation files
package.json
ui5.yaml                     # UI5 tooling config
ui5-local.yaml               # Local development config

Page Editor の設定

Page Editor は、Fiori Elements ページのビジュアルな設定を提供します。

リストレポートページの要素

フィルターフィールド - 値ヘルプ付きのフィルターバーを設定します
テーブル - 列、アクション、行選択を設定します
複数のビュー - タブ付きのテーブルビューを作成します
分析チャート - データの可視化を追加します

オブジェクトページの要素

ヘッダー - ヘッダーファセットとアクションを設定します
セクション - フォーム、テーブル、識別情報、チャート、グループの各セクション
フッター - フッターアクションを設定します

拡張機能ベースの要素（OData V4）

要素	場所	説明
カスタム列	テーブル	フラグメントを使用してカスタム列を追加します
カスタムセクション	オブジェクトページ	ビューを使用してカスタムセクションを追加します
カスタムアクション	ヘッダー／テーブル	ハンドラー付きのアクションボタンを追加します
カスタムビュー	リストレポート	カスタムタブビューを追加します
コントローラー拡張	ページ	ライフサイクルメソッドをオーバーライドします

詳細な設定については、references/page-editor.mdを参照してください。

アノテーション開発

Language Server の機能

コード補完（Ctrl/Cmd + Space） - コンテキストに応じた候補を表示します
マイクロスニペット - アノテーションブロック全体を挿入します
診断 - ボキャブラリーに基づいて検証します
i18n サポート - 翻訳可能な文字列を外部化します
定義を確認／定義へ移動 - アノテーションのソースへ移動します

サポートされているボキャブラリー

OASIS OData v4：Core、Capabilities、Aggregation、Authorization、JSON、Measures、Repeatability、Temporal、Validation

SAP ボキャブラリー：Analytics、CodeList、Common、Communication、DataIntegration、DirectEdit、Graph、Hierarchy、HTML5、ODM、PDF、PersonalData、Preview、Session、UI

アノテーションファイルの場所

CDS ファイル：CAP プロジェクトの .cds ファイル
XML ファイル：webapp/annotations/*.xml

アノテーションのパターンについては、references/annotations.mdを参照してください。

プレビューオプション

NPM スクリプト

npm start           # Live data from backend
npm run start-mock  # Mock data via MockServer
npm run start-local # Mock data + local SAPUI5 resources
npm run start-noflp # Without Fiori launchpad sandbox

実行コントロール

.vscode/フォルダー内のlaunch.jsonで設定します。以下をサポートします：

ワークスペースごとの複数の実行構成
VS Code と BAS の統合
アプリ間ナビゲーションのプレビュー

モックデータ

データエディター - モックデータを視覚的に管理します
AI 生成 - コンテキストに応じたモックデータを生成します（SAP Build Code が必要です）
MockServer - モックサーバーを自動的に設定します

プレビューの詳細については、references/preview.mdを参照してください。

デプロイ

ABAP デプロイ

前提条件：

SAP_UI 7.53+
SAPUI5 ABAP Repository サービスが有効になっていること
S_DEVELOP 権限

設定：

npx fiori add deploy-config    # Generate ui5-deploy.yaml
npm run deploy                  # Execute deployment

生成されるファイル：ui5-deploy.yaml、更新されたpackage.json

Cloud Foundry デプロイ

前提条件：

MTA ツール：npm i -g mta
multiapps プラグインを含む CF CLI
HTML5 Repository サービスインスタンス

設定：

npx fiori add deploy-config    # Select Cloud Foundry
npm run build                   # Generate mta.yaml
npm run deploy                  # Deploy to CF

生成されるファイル：mta.yaml、xs-app.json、xs-security.json

デプロイの詳細については、references/deployment.mdを参照してください。

Fiori Launchpad の設定

以下を使用して FLP タイルの設定を追加します：

Fiori: Add Fiori Launchpad Configuration

必須パラメーター：

セマンティックオブジェクト（一意の識別子）
アクション（例：「display」）
タイトル
サブタイトル（任意）

設定により、manifest.jsonが更新され、インバウンドナビゲーションが追加されます。

アダプテーションプロジェクト

ソースコードを変更せずに、既存の Fiori アプリケーションを拡張します。

前提条件

オンプレミス（VS Code）：

SAP_UI 7.54+、SAPUI5 1.72+
ベースアプリに manifest.json が必要です
ABAP Cloud パッケージは使用できません

S/4HANA Cloud および BTP ABAP：

アプリケーションが「拡張用にリリース済み」である必要があります
開発者テナントを含む3システムランドスケープ
必要なビジネスカタログが割り当てられていること

アダプテーションのワークフロー

テンプレートウィザードでアダプテーションプロジェクトを作成します
アダプテーションエディターで UI を調整します
アダプテーションをプレビューします
ABAP リポジトリにデプロイします

適応機能

適応	説明
コントロールのバリアント	ページのバリアント／ビューを作成
フラグメント	拡張ポイントに UI フラグメントを追加
コントローラー拡張	コントローラーメソッドをオーバーライド／拡張
アプリ記述子の変更	manifest.json の設定を変更
OData サービス	OData サービスを追加／置換
コンポーネントの使用	SAPUI5 コンポーネント参照を追加

適応の詳細については、references/adaptation-projects.md を参照してください。

AI を活用した生成

Project Accelerator / Joule

ビジネス要件から、Fiori UI を含む完全な CAP プロジェクトを生成します。

入力形式：テキスト、画像、またはその組み合わせ

生成される出力：

エンティティ定義と関連付け
コードリストと値ヘルプ
リストレポートアプリケーション
オブジェクトページの設定
サンプルデータ

制限事項：

チャートや特殊なヘッダーはありません
要件に個人情報や機密データを含めないでください

AI モックデータ生成

エンティティのプロパティ名を使用して、コンテキストに応じたモックデータを生成します（SAP Build Code のサブスクリプションが必要です）。

プロジェクト機能

機能	コマンド
アプリケーション情報	`Fiori: Open Application Info`
プロジェクトの検証	`Fiori: Validate Project`
環境チェック	`Fiori: Open Environment Check`
データエディター	アプリケーション情報ページから
サービスメタデータ	`Fiori: Open Service Modeler`
システム接続	VS Code で SAP システムを管理

プロジェクト検証チェック

プロジェクト - package.json、manifest.json、ui5.yaml を確認します
アノテーション - アノテーションファイルを検証します
仕様 - manifest と changes フォルダーを確認します
ESLint - 設定されている場合は ESLint を実行します

ビルディングブロック（OData V4）

カスタムページやセクション向けの再利用可能な UI コンポーネント：

ブロック	用途
チャート	データの可視化
フィルターバー	クエリのフィルタリング
テーブル	表形式でのデータ表示
ページ	カスタムページコンテナー
リッチテキストエディター	カスタムセクションでのコンテンツ編集

トラブルシューティング

よくある問題

ポート 8080 が使用中：システムが次に利用可能なポートを自動選択します

HTTPS/SSL エラー：localhost の証明書を信頼するようにブラウザーを設定してください

デプロイ時の 400 エラー：/IWFND/ERROR_LOG を確認し、/IWFND/VIRUS_SCAN でウイルススキャンを設定してください

デプロイのデバッグ：

# macOS/Linux
DEBUG=ux-odata-client npm run deploy

# Windows
set DEBUG=ux-odata-client & npm run deploy

CLI ヘルプ

npx fiori help              # List available commands
npx fiori deploy help       # Deployment command help

SAP Web IDE からの移行

次を使用して既存のプロジェクトを移行します：

Fiori: Migrate Project for use in Fiori tools

対応する種類：Fiori Elements（V2/V4）、フリースタイル SAPUI5、適応プロジェクト、拡張性プロジェクト

移行後：npm run deploy-config を実行して、デプロイ設定を更新してください。

移行の詳細については、references/getting-started.md を参照してください。

ガイド付き開発（76 以上のガイド）

ステップごとの実装ガイドにアクセスします：

Fiori: Open Guided Development

ガイドのカテゴリ：

ビルディングブロック（チャート、フィルターバー、テーブル）
ページ要素（カード、ヘッダーファセット、セクション）
テーブルの拡張（列タイプ、アクション）
フィルタリングとナビゲーション
設定（バリアント管理、副作用）
拡張（カスタムアクション、セクション、列）

リファレンスドキュメント

特定のトピックの詳細については、以下を参照してください。

MCP ツール（AI 支援開発）

fiori-tools MCP サーバー（@sap-ux/fiori-mcp-server）は、AI コーディングアシスタントを Fiori 開発に直接統合し、セマンティックなドキュメント検索とプログラムによるアプリ生成を提供します。

前提条件：Node.js 20 以降。認証は不要です。同梱の MCP 設定では @sap-ux/[email protected] が固定されています。MCP パッケージの固定バージョンは sap-dependency-security によって管理され、npm run validate:mcp-security で検証されます。

利用可能なツール

ツール	説明
`search_docs`	Fiori Elements、アノテーション、UI5、Fiori ツールのドキュメントを対象にしたセマンティック検索
`list_fiori_apps`	ディレクトリをスキャンして、変更可能な既存の Fiori アプリを特定します
`list_functionalities`	アプリケーションの作成または変更でサポートされている操作を返します
`get_functionality_details`	特定の操作に必要なパラメーターを取得します
`execute_functionality`	指定されたパラメーターを使って作成または変更を実行します

一般的なワークフロー

search_docs を使って、アノテーションのパターンや Fiori Elements の設定オプションを検索します
list_fiori_apps を使って、現在のワークスペース内のアプリを見つけます
list_functionalities を使って、サポートされている変更を確認します
get_functionality_details を使って、必要なパラメーターを確認します
execute_functionality を使って、変更を適用します

補完的な MCP サーバー

SAP は、以下を併用することを推奨しています。

sapui5 スキル：UI5 フレームワークツールを含む @ui5/mcp-server
sap-cap-capire スキル：CAP バックエンド用の @cap-js/mcp-server

バンドルされたリソース

リファレンスドキュメント

references/getting-started.md - インストール、移行、ADT 統合、コマンド
references/configuration.md - MTA、ミドルウェア、SAPUI5 バージョン、プロジェクト関数
references/page-editor.md - ページエディターの設定の詳細
references/annotations.md - アノテーションのパターンと例
references/deployment.md - デプロイの設定の詳細
references/adaptation-projects.md - アダプテーションプロジェクトのワークフロー
references/preview.md - プレビューとテストのオプション

ドキュメントの参照元

主な参照元：https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs

最終更新日：2025-11-22

セクション	ドキュメントへのリンク
はじめに	`Getting-Started-with-SAP-Fiori-Tools/`
アプリの生成	`Generating-an-Application/`
開発	`Developing-an-Application/`
プレビュー	`Previewing-an-Application/`
デプロイ	`Deploying-an-Application/`
プロジェクト関数	`Project-Functions/`
アダプテーションプロジェクト	ドキュメントのルートフォルダー

SAP のリソース：

Fiori デザインガイドライン：https://experience.sap.com/fiori-design-web/
SAP Help Portal：https://help.sap.com/docs/SAP_FIORI_tools

Markdown 対応

ログインしてコメント

基本情報

作者: secondsky
リポジトリ: secondsky/sap-skills
カテゴリ: 開発
インストール数: 1,180
GitHub スター: 480

問題を報告

sap-fiori-tools

sap-fiori-tools について

主な機能

活用シーン

MCP 対応

インストール

同梱ファイル

詳細

SAP Fiori Tools 開発スキル

関連スキル

このスキルを使用する場面

目次

概要

サンプルプロジェクト

クイックスタートコマンド

アプリケーションの生成

Fiori Elements のフロアプラン

データソースのオプション

生成されるプロジェクト構造

Page Editor の設定

リストレポートページの要素

オブジェクトページの要素

拡張機能ベースの要素（OData V4）

アノテーション開発

Language Server の機能

サポートされているボキャブラリー

アノテーションファイルの場所

プレビューオプション

NPM スクリプト

実行コントロール

モックデータ

デプロイ

ABAP デプロイ

Cloud Foundry デプロイ

Fiori Launchpad の設定

アダプテーションプロジェクト

前提条件

アダプテーションのワークフロー

適応機能

AI を活用した生成

Project Accelerator / Joule

AI モックデータ生成

プロジェクト機能

プロジェクト検証チェック

ビルディングブロック（OData V4）

トラブルシューティング

よくある問題

CLI ヘルプ

SAP Web IDE からの移行

ガイド付き開発（76 以上のガイド）

リファレンスドキュメント

MCP ツール（AI 支援開発）

利用可能なツール

一般的なワークフロー

補完的な MCP サーバー

バンドルされたリソース

リファレンスドキュメント

ドキュメントの参照元

コメント