表示言語の設定

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にカスタムローカリゼーションを追加するには、次の手順を実行します。

custom-resources.jsonファイルをwwwrootフォルダにコピーし、ファイルの名前をfr-resources.jsonに変更します。
fr-resources.jsonファイルを開き、resourcesノードの文字列をフランス語に翻訳します。また、lngノードを適切なバンドル言語で設定します。
ここでは Webデザイナコンポーネントをフランス語にローカライズしているため、文字列をフランス語に翻訳し、lngをfr-FRに設定する必要があります。
メモ：Blazor Webデザイナでは、リソースを特定の名前空間に割り当てる必要があるため、リソースを翻訳するときにnsノードを変更しません。
```
[
   {
     "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など）を変更しません。
• 上の例では、いくつかのローカリゼーション文字列が翻訳されていません。ローカリゼーション文字列が欠落している値は、デフォルトで日本語で表示されます。

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

@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()
           }
        };
    }
}