mcpField
F
fix-bootstrap-params

fix-bootstrap-params

github.com/ui5開発44146 回インストール1 週間前に更新
リポジトリ

fix-bootstrap-params について

UI5 アプリを保守する開発者向けに、リンターが検出した HTML のブートストラップ設定を修正するスキルです。編集対象をブートストラップタグに限定し、非推奨のパラメーター、テーマ、ライブラリーに対応します。

主な機能

  1. 01ブートストラップ設定の追加・更新
  2. 02廃止・冗長な設定の削除
  3. 03非推奨テーマとライブラリーの更新
  4. 04対象外の script タグの保持

活用シーン

  1. 01async や互換性設定の不足修正
  2. 02非推奨 UI5 テーマの更新
  3. 03廃止ライブラリー参照の削除

インストール

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

$npx skills add https://github.com/ui5/plugins-coding-agents --skill fix-bootstrap-params

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

詳細

ブートストラップパラメーターの修正

主なルール

  1. ブートストラップの <script> タグのみを変更してください（id="sap-ui-bootstrap" が指定されているか、src が sap-ui-core.js に一致するタグ）。インラインスクリプト、設定ブロック、UI5 以外のスクリプト参照を含む、その他すべての <script> タグは変更せず、そのまま保持する必要があります。これらは後のフェーズで fix-csp-compliance によって処理されます。
  2. ブートストラップタグ以外の <script> ブロックは、削除、移動、書き換えをしないでください。ファイル内にブートストラップタグの前後どちらかに <script>window.config = {...}</script> がある場合も、そのまま変更せずに残してください。

このスキルは、UI5 リンターが検出するものの、変更がアプリケーションの動作に影響する可能性があるため自動修正できない、HTML ブートストラップパラメーターの問題を修正します。

対応するリンタールール

ルール IDメッセージパターンこのスキルの処理
no-deprecated-apiブートストラップパラメーター 'data-sap-ui-async' がありませんdata-sap-ui-async="true" を追加
no-deprecated-apiブートストラップパラメーター 'data-sap-ui-compat-version' がありませんdata-sap-ui-compat-version="edge" を追加
no-deprecated-apiブートストラップパラメーター 'data-sap-ui-async' に非推奨の値 'false' が指定されています"true" に変更
no-deprecated-apiブートストラップパラメーター 'data-sap-ui-compat-version' に非推奨の値 '...' が指定されています"edge" に変更
no-deprecated-api廃止されたブートストラップパラメーター '...' は削除してくださいパラメーターを削除
no-deprecated-api冗長なブートストラップパラメーター '...' は削除してくださいパラメーターを削除
no-deprecated-apiブートストラップパラメーター '...' を '...' に置き換えてください新しいパラメーターに置き換え
no-deprecated-theme非推奨のテーマ '...' が使用されていますsap_horizon に変更
no-deprecated-library非推奨のライブラリ '...' が使用されていますlibs から削除

使用するタイミング

次のようなリンター出力が表示された場合に、このスキルを適用してください。

index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-async'  no-deprecated-api
index.html:9:3 error Missing bootstrap parameter 'data-sap-ui-compat-version'  no-deprecated-api
index.html:12:3 error Abandoned bootstrap parameter 'data-sap-ui-no-duplicate-ids' should be removed  no-deprecated-api
index.html:15:3 error Use of deprecated theme 'sap_bluecrystal'  no-deprecated-theme

修正方法

1. ブートストラップのスクリプトタグを特定する

次のいずれかに該当する <script> タグを探します。

  • id="sap-ui-bootstrap"
  • src 属性が次のパターンに一致するもの：sap-ui-core.js、sap-ui-custom.js、sap-ui-boot.js など。
2. ルールとメッセージに応じて修正する
no-deprecated-api - パラメーターがない場合

data-sap-ui-async がない場合：data-sap-ui-async="true" を追加
data-sap-ui-compat-version がない場合：data-sap-ui-compat-version="edge" を追加


<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme="sap_horizon">
</script>


<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-async="true"
    data-sap-ui-compat-version="edge"
    data-sap-ui-theme="sap_horizon">
</script>
no-deprecated-api - 非推奨の値

data-sap-ui-async="false"："true" に変更
data-sap-ui-compat-version に edge 以外の値が指定されている場合："edge" に変更

no-deprecated-api - 廃止されたパラメーター（完全に削除）

次のパラメーターを完全に削除します。

  • data-sap-ui-no-duplicate-ids - 最新の UI5 では強制されています
  • data-sap-ui-auto-aria-body-role - 最新の UI5 では削除されています
  • data-sap-ui-manifest-first - 代わりに Component.create の manifest オプションを使用します
  • data-sap-ui-origin-info - サポートされなくなりました
  • data-sap-ui-areas - 代わりに Control.placeAt を使用します
  • data-sap-ui-trace - サポートされなくなりました
  • data-sap-ui-xx-no-less - サポートされなくなりました
no-deprecated-api - 冗長なパラメーター
  • data-sap-ui-binding-syntax="simple" - 削除します。最新の UI5 では複雑な構文が強制されます
  • data-sap-ui-binding-syntax="complex" - compat-version="edge" が設定されている場合は削除します
  • 無効な値が指定された data-sap-ui-preload - 削除します
no-deprecated-api - 置き換えが必要なパラメーター
  • data-sap-ui-animation → data-sap-ui-animation-mode（true→full、false→minimal に変換）
no-deprecated-theme - 非推奨のテーマ

次のように最新のテーマに置き換えます。

  • sap_bluecrystal → sap_horizon
  • sap_belize → sap_horizon
  • sap_belize_plus → sap_horizon
  • sap_belize_hcb → sap_horizon_hcb
  • sap_belize_hcw → sap_horizon_hcw
  • sap_hcb → sap_horizon_hcb
  • sap_ux → sap_horizon
  • sap_platinum → sap_horizon
  • sap_goldreflection → sap_horizon
no-deprecated-library - 非推奨ライブラリ

data-sap-ui-libs から非推奨ライブラリを削除します：

  • sap.ui.commons
  • sap.ui.ux3
  • sap.makit
  • sap.me
  • sap.ca.ui
  • sap.sac.grid
  • sap.ui.suite
  • sap.zen.commons
  • sap.zen.crosstab
  • sap.zen.dsh

実装手順

  1. HTML ファイルを読み込みます
  2. ブートストラップの script タグを見つけるために解析します
  3. 各リンターエラー（ルール ID とメッセージで特定）について：
    • パラメーターが不足している場合：推奨値でパラメーターを追加します
    • 非推奨の値の場合：推奨値に更新します
    • 廃止済み／冗長な場合：パラメーターを削除します
    • 非推奨のテーマの場合：最新のテーマに置き換えます
    • 非推奨のライブラリの場合：libs リストから削除します
  4. 可能な限り書式（インデント、改行）を維持します
  5. 更新したファイルを書き込みます

修正例

リンターの出力が次の場合：

index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-async'  no-deprecated-api
index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-compat-version'  no-deprecated-api
index.html:12:3 error Abandoned bootstrap parameter 'data-sap-ui-no-duplicate-ids' should be removed  no-deprecated-api
index.html:10:3 error Use of deprecated theme 'sap_bluecrystal'  no-deprecated-theme

次のように変換します：


<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-no-duplicate-ids="true"
    data-sap-ui-resource-roots='{"my.app": "./"}'>
</script>


<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-async="true"
    data-sap-ui-compat-version="edge"
    data-sap-ui-theme="sap_horizon"
    data-sap-ui-resource-roots='{"my.app": "./"}'>
</script>

注記

  • 一貫性を保つため、ほかのデータ属性より前に必ず data-sap-ui-async="true" を追加します
  • compat-version="edge" を設定すると複雑なバインディング構文が自動的に有効になるため、binding-syntax は冗長になります
  • 削除したパラメーターの後に、末尾の空白や空行を残さないでください
  • ファイルに複数の script タグがある場合は、ブートストラップタグのみを変更し、それ以外はすべてそのままにします（Phase 5 の CSP 対応で処理するインラインの <script> ブロックも含みます）

コメント

Markdown 対応