fix-xml-native-html

XML ビュー／フラグメントのネイティブ HTML と SVG を修正する

このスキルは、UI5 リンターが検出するものの、適切な UI5 コントロールへの置き換えを判断する必要があるため自動修正できない、XML ビュー／フラグメント内のネイティブ HTML と SVG の使用を修正します。

対応するリンタールール

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

使用するタイミング

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

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 厳格モードと互換性がありません

修正方針

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

問題：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 コントロールに置き換えます。

<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>	段落にはテキスト内で \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>	または、項目を含む <VBox> を使用します
<html:ol>	<ObjectListItem> を含む <List>	カスタムの番号付けを使用します
<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: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 のレイアウトコントロールを使用します。

<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 を直接使用しています。

<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 コントロールを使用します。

<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 - 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");
            }
        }
    });
});

<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 アイコンエクスプローラーをご覧ください。

5. 残しておく必要がある HTML コンテンツ

（外部 HTML コンテンツのレンダリングなど）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 コントロールに移行する場合：

1. CSS クラス：class 属性でカスタムクラスを適用します

   <VBox class="myCustomContainer">
   

2. インラインスタイル：CSS 変数には customData を、または layoutData 集約を使用します

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

3. テーマ設定：UI5 コントロールは選択したテーマ（Horizon、Quartz など）に自動的に適応します

実装手順

1. リンターの出力で HTML/SVG の使用箇所を特定します

2. 各 HTML 要素の 用途を判断します。

   • レイアウトコンテナー → VBox、HBox、FlexBox を使用
   • テキストコンテンツ → Text、Label、Title を使用
   • インタラクティブ要素 → Button、Link、Input を使用
   • 画像 → Image を使用
   • アイコン → sap.ui.core.Icon を使用

3. 更新が必要な可能性のある カスタム CSS を確認します

4. 要素を UI5 の同等要素に置き換えます

5. すべての HTML 要素を置き換えたら、xmlns:html 名前空間を削除します

6. 見た目が一致していることを確認するため、レイアウトをテストします

修正セッションの例

リンターの出力が以下の場合：

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>
    </html:div>
</mvc:View>

修正後：

<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>

注意事項

• UI5 コントロールを使用すると、テーマ設定、アクセシビリティ、レスポンシブデザインとの統合が向上します
• 最新化が完了したら、html: 名前空間を完全に削除してください
• 埋め込み iframe などの複雑な HTML には、最後の手段として sanitizeContent="true" を指定した sap.ui.core.HTML コントロールを使用できます
• テーマ設定への対応を強化するため、可能な場合は SVG アイコンを UI5 アイコンフォントに置き換えてください
• HTML のようなリッチテキストの書式設定には、sap.m.FormattedText の使用を検討してください
• 複雑なグラフィック要件には、カスタムコントロールを使用すると最も柔軟に対応できます

関連スキル

• fix-xml-globals：グローバル変数へのアクセス（no-globals）、曖昧なイベントハンドラー（no-ambiguous-event-handler）、従来の template:require 構文など、その他の XML ビューの問題には fix-xml-globals を使用してください