JavaScript Filesでの翻訳文字列の使用

JavaScriptファイルで翻訳文字列を使用し、関数が呼び出されたときにバンドルから翻訳済テキストを取得できます。

JavaScript関数でテキスト文字列を使用すると、テキスト文字列を外部化して翻訳バンドルにすることができます。 translationsオブジェクトを使用して、バンドルから翻訳済みの文字列を取得するコードで、翻訳されていない文字列を生成または使用するコードを置換できます。 JavaScript関数を編集するときは、コード内の翻訳キーをハード・コードするか、または関数にキーをパラメータとして渡す必要があります。関数でtranslationsオブジェクトを使用するには、オブジェクトを関数のパラメータとして関数に渡す必要があります。

たとえば、ページにUIコンポーネントがあり、これはアクション・チェーン内のcallModuleFunctionアクションによってコールされるJavaScript関数から取得されるテキスト文字列を表示するとします。アクション・チェーンでは、translationsオブジェクト(たとえば、$application.translations)を関数に渡してから、その文字列を表示するUIコンポーネントにバインドされている変数に結果を割り当てることができます。

JavaScript関数で使用される翻訳済文字列を表示するには:

翻訳する文字列のキーを作成し、そのキーおよび文字列を翻訳バンドルに追加します。

プロパティ・ペインの文字列を翻訳可能にするボタンを使用して、バンドルにキーを作成し、キーの式を生成できます。または、エディタで翻訳ファイルを編集してバンドルにキーを作成し、プロパティ・ペインのUIコンポーネントのテキスト・フィールドに翻訳文字列の式を入力できます。
バンドル名とキーを含む式をコピーします。式は、文字列が外部化された後で、コンポーネントのテキスト・フィールドに表示されます。

この式は[[ $application.translations.app.h1__text_041a ]]のようになります。この例では、appがバンドル名を指定し、h1__text_041aがキーです。バンドルとキーは翻訳された文字列の評価に使用されます。$application.translationsは、アプリケーション・スコープの翻訳オブジェクトが使用されることを指定します。翻訳オブジェクトは、バンドルの場所に応じて、$flowまたは$pageスコープのどちらになる場合もあります。
JavaScript関数を変更し、translationsオブジェクト$application.translationsをアクション・チェーンから関数に渡します。

次の例では、関数を呼び出すためのアクションでは、translationsを使用してオブジェクトを関数に渡します。
```
  PageModule.prototype.getMessageFromBundle = function(translations) {
    ...
  };
```
translationsオブジェクトを使用して翻訳されたテキストを取得するコードとともにコンポーネントに表示される未翻訳テキストを置換するには、関数を編集します。オブジェクトが関数で使用可能な場合、バンドル名とキーを使用して、翻訳された文字列をバンドルから取得します。

たとえば、ファンクションは単純な翻訳文字列を戻すことができます:
```
  PageModule.prototype.getMessageFromBundle = function(translations) {
    ...
    return translations.app.h1__text_041a;
  };
```
フォーマット済メッセージを生成するためのパラメータを含めることもできます: translations.format('app', 'h1__text_041a', param1, param2)

関数(callModuleFunctionAction)を呼び出すアクション・チェーンを作成し、その結果(assignVariablesAction)を変数に割り当てます(この例では、Value)。

この例では、translationsオブジェクトが関数に渡されるcallModuleFunctionアクションのパラメータであり、assignVariablesによってcallModuleFunctionの結果がページ変数Valueに割り当てられていることを確認できます。

      "root": "callModuleFunction1",
      "actions": {
        "callModuleFunction1": {
          "module": "vb/action/builtin/callModuleFunctionAction",
          "parameters": {
            "module": "{{$page.functions}}",
            "functionName": "getMessageFromBundle",
            "params": [
              "{{ $application.translations }}"
            ]
          },
          "outcomes": {
            "success": "assignVariables1"
          }
        },
        "assignVariables1": {
          "module": "vb/action/builtin/assignVariablesAction",
          "parameters": {
            "$page.variables.Value": {
              "source": "{{ $chain.results.callModuleFunction1 }}"
            }
          }
        }
      }

UIコンポーネントのテキスト・フィールドを編集して、生成された式を、メソッドの結果を格納するページ変数で置換します。 (Value).

「図page-designer-translations-labelexample.pngの説明」

ヒント:
正しいページ変数を選択するには、テキスト・フィールドの変数の選択メニューを使用