Blazor Webデザイナは、ブラウザの言語設定によって言語を自動的に検出し、英語、日本語、中国語で表示されます。このトピックスでは、サポートされている言語に対してブラウザと異なるUI言語を設定する方法と、明示的にサポートされていない言語にカスタムローカリゼーションを追加する方法について説明します。

Blazor Webデザイナの表示言語の設定

Blazor Webデザイナの表示言語を設定するには、初期化中にdivタグ内でLanguageプロパティを使用します。Webデザイナを英語（en-US）、日本語（ja-JP）、中国語（zh-CN）で表示できます。

@page "/"
@inject IJSRuntime JSRuntime
<PageTitle>Index</PageTitle>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings=@_preview Language="ja-JP" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
            {
                CanPreview = false
            };
    }
}

以下は、完全なHTMLコードです。このコードはBlazorビューワをローカライズしないことに注意してください。詳細については、Blazorビューワの「表示言語の設定」を参照してください。

カスタムローカライゼーションの追加

Blazor Webデザイナのローカライゼーションンファイルは、custom-resources.jsonです。このファイルは、MESCIUS.ActiveReports.Blazor.Designer.jaパッケージをインストールするときに、mescius.activereports.blazor.designer.ja\staticwebassets\docs\フォルダ内のプロジェクトに自動的に追加されます。このパッケージは、Blazor Webデザイナを使用するために必要です。custom-resources.jsonファイルには、ファイルに保存されているリソースがあります。

{
   "ns": "bundle namespace",
   "lng": "bundle language",
   "resources":  Record<string,any>
}

Blazor WebデザイナのUIにカスタムローカリゼーションを追加するには、次の手順を実行します。

1. custom-resources.jsonファイルをwwwrootフォルダにコピーし、ファイルの名前をfr-resources.jsonに変更します。
2. fr-resources.jsonファイルを開き、resourcesノードの文字列をフランス語に翻訳します。また、lngノードを適切なバンドル言語で設定します。
   ここでは Webデザイナコンポーネントをフランス語にローカライズしているため、文字列をフランス語に翻訳し、lngをfr-FRに設定する必要があります。
   メモ：Blazor Webデザイナでは、リソースを特定の名前空間に割り当てる必要があるため、リソースを翻訳するときにnsノードを変更しません。

   fr-resources.jsonのサンプルコード

   コードのコピー

   [ { "ns": "components", "lng": "fr-FR", "resources": { "appBar": { "btnPreview": "Aperçu", "btnFile": "Déposer", "btnHome": "Maison", "btnInsert": "Insérer", "textUnsavedChanges": "Modifications non enregistrées", "btnParameters": "Paramètres" }, "menu": { "btnClose": "Fermer", "titlePin": "Broche", "btnLayerList": "Couches", "btnGroupEditor": "Éditeur de groupe", "btnReportExplorer": "Explorateur" } } } ]

   メモ：
   • リソース値のみを変更し、バンドル名前空間（components）とリソースセクション（appBar、menuなど）を変更しません。
   • 上の例では、いくつかのローカリゼーション文字列が翻訳されていません。ローカリゼーション文字列が欠落している値は、デフォルトで日本語で表示されます。

3. 翻訳されたリソースバンドルがfr-resources.jsonファイルにあるため、このファイルをロードし、LocalizationResourcesとLanguageプロパティを使用して、Blazor Webデザイナをローカライズします。以下は、完全なコードです。このコードはBlazorビューワをローカライズしないことに注意してください。詳細については、Blazorビューワの「表示言語の設定」を参照してください。

   Index.razor

   コードのコピー

   @page "/" @inject IJSRuntime JSRuntime <PageTitle>Index</PageTitle> <div id="designerContainer"> <ReportDesigner @ref="_designer" PreviewSettings=@_preview LocalizationResources=@_localizationResources Language="fr"/> </div> @code { private ReportDesigner _designer; private PreviewSettings _preview; public Index() { _preview = new PreviewSettings { CanPreview = false }; } private LocalizationResources[] _localizationResources; protected override async Task OnInitializedAsync() { _localizationResources = new LocalizationResources[]{ new LocalizationResources(){ Language = "fr", Resources =(await JSRuntime.InvokeAsync<object>("getJsonData", new object[] { "./fr-resources.json" })).ToString() } }; } }