表示言語の設定

JSビューワは、システム環境設定によって言語を自動的に検出し、英語、日本語、中国語で表示されます。このトピックスでは、サポートされている言語に対してJSビューワの表示言語を設定する方法と、明示的にサポートされていない言語にカスタムローカリゼーションを追加する方法について説明します。

JSビューワの表示言語の設定

JSビューワの表示言語を設定するには、初期化中にlocaleプロパティを使用します。JSビューワを英語（en-US）、日本語（ja-JP）、中国語（zh-CN）で表示できます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="jsViewer.min.js"></script>
</head>
<body onload="loadViewer()">
    <div id="viewerContainer">
    </div>
    <script>
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                locale: 'ja-JP'
            });
            viewer.openReport("Report.rdlx");
        }
    </script>
</body>
</html>

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

JSビューワのNPMパッケージを使用して、パッケージの@mescius/activereportsnet-viewer-ja\distフォルダにあるcustom-locale.jsonファイルからリソース文字列を使用できます。デフォルトでは、custom-locale.jsonファイルには、ビューワをローカライズするために必要なすべての日本語の文字列が含まれています。

JSビューワのUIにカスタムローカリゼーションを追加するには、次の手順を実行します。

custom-locale.jsonファイルをwwwrootフォルダにコピーし、ファイルの名前をfr-locale.jsonに変更します。
fr-locale.jsonファイルを開き、ファイル内の文字列をフランス語に翻訳します。ここでは JSビューワコンポーネントをフランス語にローカライズしているため、文字列をフランス語に翻訳する必要があります。
```
{
   "viewer": {
     "toolbar": {
       "refresh": "Rafraîchir",
       "cancel": "Annuler"
     },
     "search": {
       "start-search-btn": "Recherche",
       "paneltitle": "Recherche"
     }
   }
 }
```

JSビューワにカスタムローカリゼーションを追加するには、localeUriを使用してローカリゼーションデータを含むfr-locale.jsonファイルのURLを指定します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="jsViewer.min.js"></script>
</head>
<body onload="loadViewer()">
    <div id="viewerContainer">
    </div>
    <script>
     let viewer;
     function loadViewer() {
       viewer = GrapeCity.ActiveReports.JSViewer.create({
           element: '#viewerContainer',
           localeUri: './fr-locale.json'
       });
         viewer.openReport("Report.rdlx");
     }
   </script>
 </body>
 </html>

メモ：上の例では、いくつかのローカリゼーション文字列が翻訳されていません。ローカリゼーション文字列が欠落している値は、デフォルトで日本語で表示されます。

別のアプローチとしては、localeDataを使用して、ローカライズされたJSONをビューワに直接渡すことができます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="jsViewer.min.js"></script>
</head>
<body onload="loadViewer()">
    <div id="viewerContainer">
    </div>
    <script>
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                localeData: {
                    "viewer": {
                        "toolbar": {
                            "refresh": "Rafraîchir",
                            "cancel": "Annuler"
                        },
                        "search": {
                            "start-search-btn": "Recherche",
                            "paneltitle": "Recherche"
                        }
                    }
                }
            });
            viewer.openReport("Report.rdlx");
        }
    </script>
</body>
</html>