モジュールのローカライズ

[アーティクル]
07/26/2024

この記事では、表示のためにモジュールをローカライズする方法について説明します。また、モジュール名、説明、コンフィギュレーションフィールドなど、モジュールの一般情報をローカライズする方法も説明します。

モジュールで表示された文字列をローカライズする

文字列を表示するモジュールの場合、コンテンツ管理システム (CMS) からデータを受信した時点でデータが既にローカライズされていることがあります。たとえば、製品タイトルがローカライズされた形式で Dynamics 365 Commerce 返される場合があります。したがって、ローカライズは必要ありません。しかし、モジュールで定義されている一部の文字列はローカライズする必要がある場合があります。たとえば、リストページを表示するモジュールには、ページナビゲーションに使用される次へと前へボタンがあるかもしれません。モジュールを複数の言語で表示する場合は、これらのボタンのラベルをローカライズできます。

新しいリソース文字列を作成する

リソースは、ロケール固有のJavaScript Object Notation (JSON) ファイルに、/src/resources/ ディレクトリの下に格納されます。 global.json ファイルは、すべてのロケールの基準として使用され、n 部分ロケールがサポートされています。

ファイル構造の例を次に示します:

/src
- /resources
  - /modules
    - global.json
    - en-us.json
    - de-de.json
    - fr-fr.json
    - fr.json

各リソースファイルには、キー / 値の対が含まれており、コメント プロパティでリソースキーに関する追加のコンテキストを提供できます。すべてのモジュールでリソースファイルの単一のセットを共有します。したがって、モジュールは同じリソースキーを共有できます。

次の例では、リソーススキーマを示しています。

{
    "<property_name>":
    {
        "value": "",
        "_value.comment": ""
    }
}

次の例では、リソースファイルを示しています。

{
    "noResultsForRefinersText": {
        "value": "No results found for refinement criteria",
        "_value.comment": "Message to display when no products are returned with applied refinement criteria"
    },
    "resultNotFoundText": {
        "value": "Result not found text",
        "_value.comment": "Result not found text for a category"
    },
}

モジュール内のリソースキーを参照する

モジュールでリソース文字列を使用するには、モジュール定義のリソース ノードでリソース文字列キーを参照する必要があります。規定値を指定することもできます。次に例を示します。

{
    "$type": "contentModule",
    "friendlyName": "Product Feature",
    "name": "product-feature",
    "description": "Feature module used to highlight a product.",
    "categories": [
        "storytelling"
    ],
    "tags": [
        ""
    ],
    "dataActions": {},
    "config": {
        "imageAlignment": {
            "friendlyName": "Image Alignment",
            "description": "Sets the desired alignment of the image, either left or right on the text.",
            "type": "string",
            "enum": {
                "left": "Left",
                "right": "Right"
            },
            "default": "left",
            "scope": "module",
            "group": "Layout Properties"
        },
        "productTitle": {
            "type": "string",
            "friendlyName": "Product Title",
            "description": "Product placement title"
        },
        "productDetails": {
            "type": "richText",
            "friendlyName": "Product Details",
            "description": "Rich text representing the featured product details"
        },
        "productImage": {
            "type": "image",
            "friendlyName": "Product Image",
            "description": "Image representing the featured product"
        },
        "buttonText": {
            "type": "string",
            "friendlyName": "Button Text",
            "description": "Text to show on the call to action button"
        },
        "productIds": {
            "friendlyName": "Product ID",
            "description": "Provide a Product Id that the module will display",
            "type": "string",
            "scope": "module",
            "group": "Content Properties"
        }
    },
    "resources": {
        "nextButtonText": {
            "value": "next",
            "comment": "Text for the next button"
        },
        "previousButtonText": {
            "value": "previous",
            "comment": "Text for the previous button"
        }
    }
}

モジュールビューファイルのリソースにアクセスする

次の例に示すように、リソースは、this.props.resources プロパティを使用して、モジュール React ファイルとモジュールビューファイルでアクセスできます。

<button className="nextButton">
    {this.props.resources.nextButtonText}
</button>

作成ツール用のモジュールフィールドをローカライズする

モジュールは、ローカライズをサポートできるように構築する必要があります。このガイドラインは、モジュール名、説明、およびコンフィギュレーションフィールドを含む、モジュール定義ファイル内のすべての作成メタデータに適用されます。

各リソースファイルには、モジュールとプロパティのグループを含む必要があります。モジュール関連のオーサリング文字列はすべて、モジュール セクションでグループ化されている必要があります。各モジュールには子セクションが必要で、さらに、各モジュールセクションは関連する作成プロパティのペアを子として含んでいる必要があります。各プロパティは、モジュールセクション内に "値" プロパティとオプションの "_value.comment" プロパティを持つオブジェクトです。

次の例では、リソーススキーマを示しています。

{
    "modules": {
        "<module_name>": {
            "friendlyName": {
                "value": "",
                "_value.comment": ""
            },
            "description": {
                "value": "",
                "_value.comment": ""
            },
        },
        "config": {
            "<property_name>": {
                "friendlyName": {
                    "value": "",
                    "_value.comment": ""
                },
                "description": {
                    "value": "",
                    "_value.comment": ""
                },
                "errorMessage": {
                    "value": "",
                    "_value.comment": ""
                },
                "properties": {
                    ...
                }
            }
        },
        "slots": {
            "content": {
                "friendlyName": {
                    "value": "",
                    "comment": ""
                }
            }
        },
        "options": {
            "enumKey": {
                "value": "",
                "_value.comment": ""
            }
        },
    },
}

次の例では、リソースファイルを示しています。

{
    "modules": {
        "hero": {
            "friendlyName": {
                "value": "Hero Module",
                "_value.comment": ""
            },
            "description": {
                "value": "Hero with slides",
                "_value.comment": ""
            },
            "config": {
                "headerText": {
                    "friendlyName": {
                        "value": "Partner hero",
                        "_value.comment": ""
                    }
                },
                "alignment": {
                    "friendlyName": {
                        "value": "Hero Image Alignment",
                        "_value.comment": ""
                    },
                "options": {
                    "left": {
                        "value": "Left Image",
                        "_value.comment": ""
                    },
                    "right": {
                        "value": "Right Image",
                        "_value.comment": ""
                        }
                    }
                }
            },
            "slots": {
                "content": {
                    "friendlyName": {
                        "value": "Content Slots",
                        "_value.comment": ""
                    },
                    "description": {
                        "value": "Content to be rendered in container. Max 2",
                        "_value.comment": ""
                    }
                }
            },
            "options": {
                "text": {
                    "value": "text",
                    "_value.comment": ""
                },
                "glyph": {
                    "value": "glyph",
                    "_value.comment": ""
                }
            }
        }
    }
}

リソース global.json ファイルを生成する

SDK ルートフォルダーの yarn msdyn365 generate-resources src コマンドを実行して、モジュールリソースと作成リソース用の global.json ファイルを生成できます。このコマンドは、*.definition.json ファイルで定義されているモジュールと作成文字列の両方をピックアップし、resources/modules/global.json および resources/authoring/global.json ファイルを生成します。

global.json ファイルの例

{
    "nextButtonText": {
        "value": "next",
        "_value.comment": "Text for the next button"
    },
    "previousButtonText": {
        "value": "previous",
        "_value.comment": "Text for the previous button"
    }
}

fr-fr.json のローカライズされたファイルの例

{
    "nextButtonText": {
        "value": "prochain",
        "_value.comment": "Text for the next button"
    },
    "previousButtonText": {
        "value": "précédent",
        "_value.comment": "Text for the previous button"
    }
}