AEM Forms Workspace ユーザーインターフェイスのロケールの変更 changing-the-locale-of-aem-forms-workspace-user-interface

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

AEM Forms Workspace では、英語、フランス語、ドイツ語、日本語によるサポートを提供しています。また、AEM Forms Workspace ユーザーインターフェイスをその他の言語にローカライズする機能も提供しています。

AEM Forms Workspace ユーザーインターフェイスを任意の言語にローカライズするには、次のようにします。

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

前述した手順を実行する前に、「AEM Forms Workspace のカスタマイズの一般的な手順」に一覧表示されている手順に従っていることを確認してください。

NOTE
AEM Forms Workspace のログイン画面の言語を変更するには、 新しいログイン画面の作成.

テキストのローカライズ localizing-text

次の手順を実行して​ 新規 ​言語のサポートおよびブラウザのロケールコード「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 ファイルが含まれています。

    translation_json_in_en translation_json_in_fr

折りたたまれているカテゴリ、キューおよびプロセスのローカライズ localizing-collapsed-categories-queues-and-processes

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

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

NOTE
お使いのブラウザのブラウザ言語ロケールコードを検索するには、次のようにします。https://[server]:[port]/lc/libs/ws/Locale.htmlを開きます。

collapsing_panels_image

画像をローカライズするには、次の手順を実行します。

  1. WebDAV クライアントを使用して、 /apps/ws/images フォルダー。

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

    code language-none
    #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. 元のコードブロックに一覧表示されているコードを探して、ステートメントに条件 lang ! == 'nw' を追加します。

    code language-none
    // 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;
            }
        }
    
    code language-none
    //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;
            }
        }
    

日付選択のローカライズ localizing-date-picker

API をローカライズするには、開発パッケージが必要です。 開発パッケージを作成する方法については、「AEM Forms Workspace コードの構築」を参照してください。

  1. をダウンロードして抽出します。 jQuery UI パッケージに移動します。 <extracted jquery="" ui="" package="">\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 ファイルにエイリアスを作成するためのコードは、次のとおりです。

    code language-none
    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 のエントリを追加する方法を示しています。

    code language-none
    //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 language-none
    // 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

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

    code language-none
    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['']);
}
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da