ActiveReports for .NET 18.0J
表示言語の設定
ActiveReportsユーザーガイド > 概念 > ActiveReports Webデザイナ > 表示言語の設定

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

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

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

Index.html
コードのコピー 
<!DOCTYPE html>
<html>
<head>
    <!-- パッケージがインストールされた場所からこれらのファイルを取得します。\node_modules\@mescius\activereportsnet-designer\dist -->
    <link rel="stylesheet" href="web-designer.css" />
    <script src="web-designer.js"></script>
</head>
<body>
    <div id="ar-web-designer" class="ar-web-designer">
    </div>
    <script>
        GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            language: 'ja-JP'
        });
    </script>
</body>
</html>

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

WebデザイナのNPMパッケージを使用して、パッケージのactivereportsnet-designer.ja\dist\docsフォルダにあるcustom-resources.jsonファイルからリソース文字列を使用できます。custom-resources.jsonファイルには、ファイルに保存されているリソースがあります。

custom-resources.jsonの構造
コードのコピー 
{
   "ns": "bundle namespace",
   "lng": "bundle language",
   "resources":  Record<string,any>
}

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

  1. custom-resources.jsonファイルをwwwrootフォルダにコピーし、ファイルの名前をfr-resources.jsonに変更します。
  2. fr-resources.jsonファイルを開き、resourcesノードの文字列をフランス語に翻訳します。また、lngノードを適切なバンドル言語で設定します。
    ここでは Webデザイナコンポーネントをフランス語にローカライズしているため、文字列をフランス語に翻訳し、lngをfr-FRに設定する必要があります。
    メモ：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ファイルにあるため、このファイルをロードし、addLanguage()とlanguageプロパティを使用して Webデザイナをローカライズします。

    Index.html
    コードのコピー 
    <!DOCTYPE html>
<html>
<head>
 <!--パッケージがインストールされた場所からこれらのファイルを取得します。\node_modules\@mescius\activereportsnet-designer\dist-->
    <link rel="stylesheet" href="web-designer.css" />
    <script src="web-designer.js"></script>
</head>
<body>
    <div id="ar-web-designer" class="ar-web-designer">
    </div>
    <script>
        fetch("./fr-resources.json").then(res => res.json()).then((res) => {
            var languageResource = res;
            GrapeCity.ActiveReports.Designer.addLanguage('fr-FR', languageResource);
            GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
                language: 'fr-FR'
            });
        });
    </script>
</body>
</html>

     

別のアプローチとしては、custom-resources.jsonから翻訳されたリソース文字列をJSONオブジェクトとして直接渡し、addLanguage()とlanguageプロパティを使用して Webデザイナをローカライズします。

Index.html
コードのコピー 
<!DOCTYPE html>
<html>
<head>
    <!--パッケージがインストールされた場所からこれらのファイルを取得します。\node_modules\@mescius\activereportsnet-designer\dist-->
    <link rel="stylesheet" href="web-designer.css" />
    <script src="web-designer.js"></script>
</head>
<body>
    <div id="ar-web-designer" class="ar-web-designer">
    </div>
    <script>
        var resourceBundles = [
            {
                "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"
                    }
                }
            }
        ];
        GrapeCity.ActiveReports.Designer.addLanguage('fr-FR', resourceBundles);
        GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            language: 'fr-FR'           
            });
    </script>
</body>
</html>

 

 

 

© MESCIUS inc. All rights reserved.