AEM Forms Workspace ユーザーインターフェイスのロケールの変更

AEM Formsのワークスペースでは、英語、フランス語、ドイツ語、日本語に対するサポートがすぐに利用できます。 また、AEM Formsワークスペースユーザーインターフェイスを他の言語にローカライズする機能も提供します。

AEM Formsワークスペースユーザーインターフェイスを任意の言語にローカライズするには：

• AEM Forms Workspace のテキストをローカライズします。
• 折りたたまれているカテゴリ、キュー、およびプロセスをローカライズする。
• 日付選択をローカライズする。

上記の手順を実行する前に、AEM Formsワークスペースのカスタマイズの一般的な手順に示されている手順に従っていることを確認してください。

テキストのローカライズ

次の手順を実行して、言語​新しい​とブラウザーのロケールコード​nw​のサポートを追加します。

1. CRXDE Lite にログインします。

   CRXDE LiteのデフォルトURLはhttps://[server]:[port]/lc/crx/de/index.jspです。

2. 場所apps/ws/localesに移動し、新しいフォルダーnw.を作成します

3. ファイルtranslation.jsonを/apps/ws/locales/en-USから/apps/ws/locales/nwにコピーします。

4. /apps/ws/locales/nwに移動し、translation.jsonを開いて編集します。 translation.json ファイルにロケール固有の変更を行います。

   次の例では、AEM Forms Workspace の英語およびフランス語のロケールの translation.json ファイルを示します。

   

折りたたまれているカテゴリ、キュー、およびプロセスのローカライズ

AEM Formsワークスペースは、画像を使用してカテゴリ、キューおよびプロセスのヘッダーを表示します。 これらのヘッダをローカライズするには、開発パッケージが必要です。開発パッケージの作成について詳しくは、「AEM Formsワークスペースコードの構築」を参照してください。

次の手順では、新しくローカライズされた画像ファイルは​Categories_nw.png、Queue_nw.png、および Processes_nw.png であると想定しています。画像の推奨される幅は19pxです。

次の手順を実行して画像をローカライズします。

1. WebDAV クライアントを使用して、画像ファイルを /apps/ws/images フォルダーに配置します。

2. /apps/ws/css に移動します。newStyle.css を開いて編集し、次のエントリを追加します。

   #categoryListBar .content.nw {
        background: #3e3e3e url(../images/Categories_nw.png) no-repeat 10px 10px;
    }
   
   #filterListBar .content.nw {
       background: #3e3e3e url(../images/Queues_nw.png) no-repeat 10px 10px;
   }
   
   #processNameListBar .content.nw {
       background: #3e3e3e url(../images/Processes_nw.png) no-repeat 10px 10px;
   }
   

3. 「Workspaceのカスタマイズ」記事に一覧表示されているすべてのセマンティックの変更を実行します。

4. js/runtime/utility​フォルダーに移動し、* usersession.js*ファイルを開いて編集します。

5. 元のコードブロックに一覧表示されているコードを探して、if ステートメントに条件 lang !== 'nw'​をif文に追加します。

   // Orignal code
   setLocale = function () {
           var lang = $.trim(i18n.lng());
           if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP')) {
               window.lcWorkspace.locale = 'en-US';
           } else {
               window.lcWorkspace.locale = lang;
           }
       }
   

   //new code
    setLocale = function () {
           var lang = $.trim(i18n.lng());
           if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP' && lang !== 'nw')) {
               window.lcWorkspace.locale = 'en-US';
           } else {
               window.lcWorkspace.locale = lang;
           }
       }
   

日付選択のローカライズ

日付選択APIをローカライズするには、開発パッケージが必要です。 開発パッケージの作成について詳しくは、「AEM Formsワークスペースコードの構築」を参照してください。

1. jQuery UI パッケージをダウンロードして抽出し、<抽出された jquery UI パッケージ>\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n に移動します。

2. ロケールコード nw の jquery.ui.datepicker-nw.js ファイルを apps/ws/js/libs/jqueryui にコピーして、ファイルにロケール固有の変更を行います。

3. apps/ws/jsに移動し、jquery.ui.datepicker-nw.jsファイルを開いて編集します。

4. main.jsファイルでjquery.ui.datepicker-nw.js.のエイリアスを作成します。jquery.ui.datepicker-nw.jsファイルのエイリアスを作成するコードは次のとおりです。

   jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
   

5. 日付選択を使用するすべてのファイルにjqueryuidatepickernwファイルを含めるには、エイリアスjquery.ui.datepicker-nw.jsを使用します。 日付選択は次のファイルで使用されます。

   • js/runtime/views/outofoffice.js
   • js/runtime/views/searchtemplatedetails.js

   以下のサンプルコードは、jquery.ui.datepicker-nw.js のエントリを追加する方法を示します。

   //Original Code
   define([
       'jquery',
       'underscore',
       'backbone',
       'jqueryui',
       'jqueryuidatepickerja',
       'jqueryuidatepickerde',
       'jqueryuidatepickerfr',
       'slimscroll',
       'usersearchview',
       'logmanagerutil',
       'loggerutil'
   ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, slimScroll, UserSearch, LogManager, Logger) {
   

   // Code with Date Picker alias for new language
   define([
       'jquery',
       'underscore',
       'backbone',
       'jqueryui',
       'jqueryuidatepickerja',
       'jqueryuidatepickerde',
       'jqueryuidatepickerfr',
       'jqueryuidatepickernw', // Date Picker alias
       'slimscroll',
       'usersearchview',
       'logmanagerutil',
       'loggerutil'
   ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, jQueryUIDatePickerNW, slimScroll, UserSearch, LogManager, Logger) {
   

6. 日付選択 API を使用するすべてのファイルで、デフォルトの日付選択 API の設定を変更します。日付選択 API は次のファイルで使用されます。

   • apps\ws\js\runtime\views\searchtemplatedetails.js
   • apps\ws\js\runtime\views\outofoffice.js

   次のコードを変更して新しいロケールを追加します。

   if (locale === 'ja-JP') {
      $.datepicker.setDefaults($.datepicker.regional.ja);
   } else if (locale === 'de-DE') {
      $.datepicker.setDefaults($.datepicker.regional.de);
   } else if (locale === 'fr-FR') {
      $.datepicker.setDefaults($.datepicker.regional.fr);
   } else {
      $.datepicker.setDefaults($.datepicker.regional['']);
   }
   

を

if (locale === 'ja-JP') {
    $.datepicker.setDefaults($.datepicker.regional.ja);
} else if (locale === 'de-DE') {
    $.datepicker.setDefaults($.datepicker.regional.de);
} else if (locale === 'fr-FR') {
    $.datepicker.setDefaults($.datepicker.regional.fr);
} else if (locale === 'nw') {
    $.datepicker.setDefaults($.datepicker.regional.nw);
} else {
    $.datepicker.setDefaults($.datepicker.regional['']);
}