スキルOfficialdevelopment

🔧fix-xml-native-html

プラグイン: ui5-modernization
ソース: GitHub で見る ↗

説明

XMLビューやフラグメントにおけるネイティブHTMLおよびSVGの使用について、UI5 linterが報告するものの自動修正できない問題を修正します。次のような場合に使用: - `no-deprecated-api` のメッセージが「Usage of native HTML in XML Views/Fragments is deprecated」 - `no-deprecated-api` のメッセージが「Deprecated use of SVG in XML View or Fragment」トリガー対象: - XMLビュー内のHTML要素（`html:div`、`html:span`、`html:a` など） - XMLビュー内のSVG要素 - `xmlns:html` 名前空間の使用ネイティブHTMLをUI5コントロールに、SVGをUI5アイコンまたはカスタムコントロールに置き換えるためのガイダンスを提供します。

原文を表示

Fix native HTML and SVG usage in XML views/fragments that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `no-deprecated-api` with message "Usage of native HTML in XML Views/Fragments is deprecated" - `no-deprecated-api` with message "Deprecated use of SVG in XML View or Fragment" Trigger on: HTML elements in XML views (html:div, html:span, html:a), SVG elements in XML views, xmlns:html namespace usage. Provides guidance on replacing native HTML with UI5 controls and SVG with UI5 icons or custom controls.

ユースケース

✓XMLビュー内のネイティブHTML要素を修正するとき
✓XMLフラグメント内のSVG要素を修正するとき
✓deprecated-apiの警告を解決するとき

本文（日本語訳）

XML ビュー/フラグメントにおけるネイティブ HTML および SVG の修正

このスキルは、XML ビュー/フラグメント内のネイティブ HTML および SVG の使用を修正します。 UI5 linter がこれらの問題を検出できますが、適切な UI5 コントロールへの置き換えには文脈の理解が必要なため、自動修正ができません。

対象となる Linter ルール

ルール ID	メッセージパターン	このスキルの対応
`no-deprecated-api`	XML ビュー/フラグメントでのネイティブ HTML の使用は非推奨	UI5 コントロールに置き換える
`no-deprecated-api`	XML ビューまたはフラグメントでの SVG の非推奨な使用	UI5 アイコンまたはカスタムコントロールに置き換える

次のような場合に使用

以下のような linter の出力が表示されている場合に、このスキルを適用してください:

MyView.view.xml:15:5 error Usage of native HTML in XML Views/Fragments is deprecated  no-deprecated-api
MyView.view.xml:25:5 error Deprecated use of SVG in XML View or Fragment  no-deprecated-api

npx @ui5/linter --details を実行すると、ネイティブ HTML の非推奨化に関するドキュメントへのリンクを取得できます。

背景: ネイティブ HTML/SVG が非推奨になった理由

XML ビューでのネイティブ HTML は、sap.ui.core.HTML コントロールと html 名前空間を通じてサポートされていました。ただし、このアプローチには以下の問題があります:

UI5 のコントロールライフサイクルとレンダリングを迂回する
UI5 のテーマ機能と統合されない
アクセシビリティの問題を引き起こす可能性がある
モダンな UI5 の strict モードと互換性がない

修正戦略

1. ネイティブ HTML 要素 → UI5 コントロール

問題: html: 名前空間を介して HTML 要素を使用している。

<!-- 修正前 - ネイティブ HTML の使用 -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <html:div class="myContainer">
        <html:span>Some text</html:span>
        <html:a href="https://example.com">Link</html:a>
        <html:img src="image.png" alt="My Image" />
    </html:div>
</mvc:View>

修正方針: 同等の UI5 コントロールに置き換える。

<!-- 修正後 - UI5 コントロール -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <VBox class="myContainer">
        <Text text="Some text" />
        <Link text="Link" href="https://example.com" />
        <Image src="image.png" alt="My Image" />
    </VBox>
</mvc:View>

HTML から UI5 コントロールへの対応表

HTML 要素	UI5 コントロール	備考
`<html:div>`	`<VBox>`, `<HBox>`, `<FlexBox>`	縦方向には VBox、横方向には HBox を使用
`<html:span>`	`<Text>`, `<Label>`	表示用は Text、フォームラベルは Label
`<html:p>`	`<Text>`	段落には text 内で `\n` を使用
`<html:a>`	`<Link>`	href 付きの完全なリンク機能
`<html:img>`	`<Image>`	src, alt, width, height をサポート
`<html:input>`	`<Input>`, `<SearchField>`	各種入力タイプが利用可能
`<html:button>`	`<Button>`	アイコンをサポートした完全なボタン
`<html:ul>` / `<html:li>`	`<List>` / `<StandardListItem>`	または items を持つ `<VBox>`
`<html:ol>`	`<List>` と `<ObjectListItem>`	カスタム番号付けを使用
`<html:table>`	`<Table>` (sap.m)	大規模データには `<sap.ui.table.Table>`
`<html:h1>` ～ `<html:h6>`	`<Title>`	見出しレベルには `level` プロパティを使用
`<html:br>`	(なし)	Text 内で `\n` を使用するか、コントロールを分割
`<html:hr>`	`<ToolbarSpacer>` を持つ `<Toolbar>`	またはカスタムスタイリング
`<html:iframe>`	`<HTML>` コントロール	絶対に必要な場合のみ
`<html:form>`	(フォームコントロールを直接使用)	UI5 ではフォーム送信の扱いが異なる
`<html:select>`	`<Select>`, `<ComboBox>`	完全なドロップダウン機能
`<html:textarea>`	`<TextArea>`	複数行入力

2. 複雑な HTML 構造

問題: レイアウトのために HTML をネストしている。

<!-- 修正前 - 複雑な HTML レイアウト -->
<html:div class="header">
    <html:div class="logo">
        <html:img src="logo.png" />
    </html:div>
    <html:div class="nav">
        <html:a href="#home">Home</html:a>
        <html:a href="#about">About</html:a>
    </html:div>
</html:div>

修正方針: UI5 のレイアウトコントロールを使用する。

<!-- 修正後 - UI5 レイアウト -->
<HBox class="header" alignItems="Center" justifyContent="SpaceBetween">
    <Image src="logo.png" class="logo" />
    <HBox class="nav">
        <Link text="Home" href="#home" class="sapUiSmallMarginEnd" />
        <Link text="About" href="#about" />
    </HBox>
</HBox>

3. SVG グラフィック → UI5 アイコンまたはカスタムコントロール

問題: XML ビューで SVG を直接使用している。

<!-- 修正前 - XML ビュー内の SVG -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:svg="http://www.w3.org/2000/svg">
    <svg:svg width="100" height="100">
        <svg:circle cx="50" cy="50" r="40" fill="blue" />
    </svg:svg>
</mvc:View>

修正方針 A - アイコンの場合: アイコンフォントを使った UI5 Icon コントロールを使用する。

<!-- 修正後 - UI5 Icon -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:Icon src="sap-icon://circle-task" size="2rem" color="blue" />
</mvc:View>

修正方針 B - 複雑なグラフィックの場合: カスタムコントロールを作成するか、HTML コントロールを使用する。

// CustomGraphic.js - アイコンに置き換えられない複雑な SVG 向け
sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict";

    return Control.extend("my.app.control.CustomGraphic", {
        metadata: {
            properties: {
                color: { type: "string", defaultValue: "blue" }
            }
        },

        renderer: {
            apiVersion: 2,
            render: function(oRm, oControl) {
                oRm.openStart("svg", oControl);
                oRm.attr("width", "100");
                oRm.attr("height", "100");
                oRm.openEnd();

                oRm.openStart("circle");
                oRm.attr("cx", "50");
                oRm.attr("cy", "50");
                oRm.attr("r", "40");
                oRm.attr("fill", oControl.getColor());
                oRm.openEnd();
                oRm.close("circle");

                oRm.close("svg");
            }
        }
    });
});

<!-- XML ビューでの使用例 -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:custom="my.app.control">
    <custom:CustomGraphic color="blue" />
</mvc:View>

4. よく使われるアイコンの置き換え

SVG アイコンを置き換える際は、SAP アイコンフォントを使用してください:

SVG パターン	UI5 アイコン
チェックマーク/ティック	`sap-icon://accept`
バツ印/X	`sap-icon://decline`
円	`sap-icon://circle-task`
右矢印	`sap-icon://navigation-right-arrow`
左矢印	`sap-icon://navigation-left-arrow`
プラス/追加	`sap-icon://add`
マイナス/削除	`sap-icon://less`
編集/鉛筆	`sap-icon://edit`
削除/ゴミ箱	`sap-icon://delete`
検索	`sap-icon://search`
設定/歯車	`sap-icon://settings`
ユーザー/人物	`sap-icon://person-placeholder`
カレンダー	`sap-icon://calendar`
ダウンロード	`sap-icon://download`
アップロード	`sap-icon://upload`

利用可能なアイコンの一覧: UI5 Icon Explorer

5. HTML コンテンツを残さなければならない場合

HTML が絶対に必要な場合 (例: 外部 HTML コンテンツのレンダリング):

<!-- サニタイズされたコンテンツで sap.ui.core.HTML コントロールを使用 -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:HTML content="{/sanitizedHtmlContent}" sanitizeContent="true" />
</mvc:View>

警告: 以下の条件をすべて満たすコンテンツにのみ使用してください:

UI5 コントロールでは表現できない
適切にサニタイズ済みである
信頼できるソースからのものである

6. スタイリングに関する考慮事項

HTML から UI5 コントロールへの移行時には、以下の点に注意してください:

CSS クラス: class 属性でカスタムクラスを適用する
```
<VBox class="myCustomContainer">
```
インラインスタイル: CSS 変数には customData を、layoutData aggregation を活用する
```
<VBox>
    <layoutData>
        <FlexItemData growFactor="1" />
    </layoutData>
</VBox>
```
テーマ対応: UI5 コントロールは選択されたテーマ (Horizon、Quartz など) に自動的に適応する

実装手順

HTML/SVG の使用箇所を特定する (linter の出力から)
各 HTML 要素の目的を確認する:
- レイアウトコンテナ → VBox, HBox, FlexBox を使用
- テキストコンテンツ → Text, Label, Title を使用
- インタラクティブ要素 → Button, Link, Input を使用
- 画像 → Image を使用
- アイコン → sap.ui.core.Icon を使用
更新が必要なカスタム CSS がないか確認する
要素を UI5 の同等コントロールに置き換える
すべての HTML 要素を置き換えたら xmlns:html 名前空間を削除する
レイアウトをテストし、見た目が同等であることを確認する

修正の例

以下の linter 出力を例に説明します:

MyView.view.xml:5:3 error Usage of native HTML in XML Views/Fragments is deprecated  no-deprecated-api
MyView.view.xml:12:5 error Deprecated use of SVG in XML View or Fragment  no-deprecated-api

修正前:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg">
    <html:div class="card">
        <html:div class="cardHeader">
            <svg:svg width="24" height="24">
                <svg:circle cx="12" cy="12" r="10" fill="green" />
            </svg:svg>
            <html:span class="title">Status: Active</html:span>
        </html:div>
        <html:p>This is the card content.</html:p>
        <html:a href="https://example.com">Learn more</html:a>

原文（English）を表示

Fix Native HTML and SVG in XML Views/Fragments

This skill fixes native HTML and SVG usage in XML views/fragments that the UI5 linter detects but cannot auto-fix because they require understanding the appropriate UI5 control replacements.

Linter Rules Handled

Rule ID	Message Pattern	This Skill's Action
`no-deprecated-api`	Usage of native HTML in XML Views/Fragments is deprecated	Replace with UI5 controls
`no-deprecated-api`	Deprecated use of SVG in XML View or Fragment	Replace with UI5 icons or custom controls

When to Use

Apply this skill when you see linter output like:

MyView.view.xml:15:5 error Usage of native HTML in XML Views/Fragments is deprecated  no-deprecated-api
MyView.view.xml:25:5 error Deprecated use of SVG in XML View or Fragment  no-deprecated-api

Run npx @ui5/linter --details to get links to documentation about native HTML deprecation.

Background: Why Native HTML/SVG is Deprecated

Native HTML in XML views was supported via the sap.ui.core.HTML control and the html namespace. However, this approach:

Bypasses UI5's control lifecycle and rendering
Doesn't integrate with UI5 theming
Can cause accessibility issues
Is not compatible with modern UI5 strict mode

Fix Strategy

1. Native HTML Elements → UI5 Controls

Problem: Using HTML elements via the html: namespace.

<!-- Before - native HTML usage -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <html:div class="myContainer">
        <html:span>Some text</html:span>
        <html:a href="https://example.com">Link</html:a>
        <html:img src="image.png" alt="My Image" />
    </html:div>
</mvc:View>

Fix Strategy: Replace with equivalent UI5 controls.

<!-- After - UI5 controls -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <VBox class="myContainer">
        <Text text="Some text" />
        <Link text="Link" href="https://example.com" />
        <Image src="image.png" alt="My Image" />
    </VBox>
</mvc:View>

HTML to UI5 Control Mapping

HTML Element	UI5 Control	Notes
`<html:div>`	`<VBox>`, `<HBox>`, `<FlexBox>`	Use VBox for vertical, HBox for horizontal layout
`<html:span>`	`<Text>`, `<Label>`	Text for display, Label for form labels
`<html:p>`	`<Text>`	Use `\n` in text for paragraphs
`<html:a>`	`<Link>`	Full link functionality with href
`<html:img>`	`<Image>`	Supports src, alt, width, height
`<html:input>`	`<Input>`, `<SearchField>`	Various input types available
`<html:button>`	`<Button>`	Full button with icon support
`<html:ul>` / `<html:li>`	`<List>` / `<StandardListItem>`	Or `<VBox>` with items
`<html:ol>`	`<List>` with `<ObjectListItem>`	Use custom numbering
`<html:table>`	`<Table>` (sap.m)	Or `<sap.ui.table.Table>` for large data
`<html:h1>` - `<html:h6>`	`<Title>`	Use `level` property for heading level
`<html:br>`	(none)	Use `\n` in Text or separate controls
`<html:hr>`	`<Toolbar>` with `<ToolbarSpacer>`	Or custom styling
`<html:iframe>`	`<HTML>` control	Only when absolutely necessary
`<html:form>`	(form controls directly)	UI5 handles form submission differently
`<html:select>`	`<Select>`, `<ComboBox>`	Full dropdown functionality
`<html:textarea>`	`<TextArea>`	Multi-line input

2. Complex HTML Structures

Problem: Nested HTML for layout.

<!-- Before - complex HTML layout -->
<html:div class="header">
    <html:div class="logo">
        <html:img src="logo.png" />
    </html:div>
    <html:div class="nav">
        <html:a href="#home">Home</html:a>
        <html:a href="#about">About</html:a>
    </html:div>
</html:div>

Fix Strategy: Use UI5 layout controls.

<!-- After - UI5 layout -->
<HBox class="header" alignItems="Center" justifyContent="SpaceBetween">
    <Image src="logo.png" class="logo" />
    <HBox class="nav">
        <Link text="Home" href="#home" class="sapUiSmallMarginEnd" />
        <Link text="About" href="#about" />
    </HBox>
</HBox>

3. SVG Graphics → UI5 Icons or Custom Controls

Problem: Using SVG directly in XML views.

<!-- Before - SVG in XML view -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:svg="http://www.w3.org/2000/svg">
    <svg:svg width="100" height="100">
        <svg:circle cx="50" cy="50" r="40" fill="blue" />
    </svg:svg>
</mvc:View>

Fix Strategy A - For Icons: Use UI5 Icon control with icon fonts.

<!-- After - UI5 Icon -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:Icon src="sap-icon://circle-task" size="2rem" color="blue" />
</mvc:View>

Fix Strategy B - For Complex Graphics: Create a custom control or use HTML control.

// CustomGraphic.js - for complex SVG that can't be replaced with icons
sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict";

    return Control.extend("my.app.control.CustomGraphic", {
        metadata: {
            properties: {
                color: { type: "string", defaultValue: "blue" }
            }
        },

        renderer: {
            apiVersion: 2,
            render: function(oRm, oControl) {
                oRm.openStart("svg", oControl);
                oRm.attr("width", "100");
                oRm.attr("height", "100");
                oRm.openEnd();

                oRm.openStart("circle");
                oRm.attr("cx", "50");
                oRm.attr("cy", "50");
                oRm.attr("r", "40");
                oRm.attr("fill", oControl.getColor());
                oRm.openEnd();
                oRm.close("circle");

                oRm.close("svg");
            }
        }
    });
});

<!-- Usage in XML view -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:custom="my.app.control">
    <custom:CustomGraphic color="blue" />
</mvc:View>

4. Common Icon Replacements

When replacing SVG icons, use the SAP icon font:

SVG Pattern	UI5 Icon
Checkmark/tick	`sap-icon://accept`
Cross/X	`sap-icon://decline`
Circle	`sap-icon://circle-task`
Arrow right	`sap-icon://navigation-right-arrow`
Arrow left	`sap-icon://navigation-left-arrow`
Plus/Add	`sap-icon://add`
Minus/Remove	`sap-icon://less`
Edit/Pencil	`sap-icon://edit`
Delete/Trash	`sap-icon://delete`
Search	`sap-icon://search`
Settings/Gear	`sap-icon://settings`
User/Person	`sap-icon://person-placeholder`
Calendar	`sap-icon://calendar`
Download	`sap-icon://download`
Upload	`sap-icon://upload`

Browse all available icons: UI5 Icon Explorer

5. HTML Content That Must Remain

For cases where HTML is absolutely required (e.g., rendering external HTML content):

<!-- Use sap.ui.core.HTML control with sanitized content -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:HTML content="{/sanitizedHtmlContent}" sanitizeContent="true" />
</mvc:View>

Warning: Only use this for content that:

Cannot be expressed with UI5 controls
Has been properly sanitized
Is from a trusted source

6. Styling Considerations

When modernizing from HTML to UI5 controls:

CSS Classes: Apply custom classes via the class attribute
```
<VBox class="myCustomContainer">
```

Inline Styles: Use customData for CSS variables or the layoutData aggregation

<VBox>
    <layoutData>
        <FlexItemData growFactor="1" />
    </layoutData>
</VBox>

Theming: UI5 controls automatically adapt to the selected theme (Horizon, Quartz, etc.)

Implementation Steps

Identify HTML/SVG usage in the linter output
Determine the purpose of each HTML element:
- Layout container → Use VBox, HBox, FlexBox
- Text content → Use Text, Label, Title
- Interactive elements → Use Button, Link, Input
- Images → Use Image
- Icons → Use sap.ui.core.Icon
Check for custom CSS that may need updating
Replace elements with UI5 equivalents
Remove the xmlns:html namespace once all HTML elements are replaced
Test the layout to ensure visual parity

Example Fix Session

Given linter output:

MyView.view.xml:5:3 error Usage of native HTML in XML Views/Fragments is deprecated  no-deprecated-api
MyView.view.xml:12:5 error Deprecated use of SVG in XML View or Fragment  no-deprecated-api

Before:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg">
    <html:div class="card">
        <html:div class="cardHeader">
            <svg:svg width="24" height="24">
                <svg:circle cx="12" cy="12" r="10" fill="green" />
            </svg:svg>
            <html:span class="title">Status: Active</html:span>
        </html:div>
        <html:p>This is the card content.</html:p>
        <html:a href="https://example.com">Learn more</html:a>
    </html:div>
</mvc:View>

After:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <VBox class="card">
        <HBox class="cardHeader" alignItems="Center">
            <core:Icon src="sap-icon://status-positive" color="green" class="sapUiSmallMarginEnd" />
            <Text text="Status: Active" class="title" />
        </HBox>
        <Text text="This is the card content." />
        <Link text="Learn more" href="https://example.com" />
    </VBox>
</mvc:View>

Notes

UI5 controls integrate better with theming, accessibility, and responsive design
The html: namespace should be completely removed once modernization is done
For complex HTML (like embedded iframes), the sap.ui.core.HTML control can be used as a last resort with sanitizeContent="true"
SVG icons should be replaced with UI5 icon font where possible for better theming support
Consider using sap.m.FormattedText for HTML-like rich text formatting
Custom controls provide the most control for complex graphical requirements

Related Skills

fix-xml-globals: For other XML view issues like global variable access (no-globals), ambiguous event handlers (no-ambiguous-event-handler), and legacy template:require syntax, use fix-xml-globals

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。