目次へ移動

翻訳ドキュメントの管理ページ

ローカリゼーションの機能はプレリリースです。APIは変更されることがあります。

Polymer.AppLocalizeBehaviorは、アプリケーションの国際化をサポートするformat.jsライブラリをラップしています。Intlオブジェクトをネイティブにサポートしていないブラウザを使用している場合は、**自分でポリフィルを読み込む必要があります。**polyfillの利用例は、Intl.jsを参照してください。

Polymer.AppLocalizeBehaviorは、format.jsとまったく同じメッセージ構文をサポートしています。利用可能なメッセージ形式とオプションのリファレンスはformat.jsライブラリのドキュメントを参照してください。

コンテンツをローカライズして表示する要素には、それぞれPolymer.AppLocalizeBehaviorを追加する必要があります。これらの要素はすべて共通のローカリゼーションキャッシュを共有しており、翻訳は一度読む込むだけで済みます。

Polymer 1.x要素とPolymer 2.xのハイブリッド要素では、AppLocalizeBehaviorを直接使用できます。クラススタイルの要素の場合は、mixinBehaviorsメソッドを使用します。

AppLocalizeBehaviorをインストール

2.0リリース候補(RC)の場合は、2.0-previewブランチを使用します。：

bower install --save PolymerElements/app-localize-behavior#2.0-preview

アプリケーションにローカリゼーションを追加

通常、メインアプリケーションが、ローカライズされたメッセージのロードと言語環境の設定を担います。

サンプルアプリケーション(クラススタイル要素)

<dom-module id="x-app">
  <template>
    <!-- use the localize method to localize text -->
    <div>{{localize('hello', 'name', 'Batman')}}</div>
  </template>
  <script>
    class XApp extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
      static get is() { return 'x-app'}

      static get properties() {
        return {
          // set the current language—shared across all elements in the app
          // that use AppLocalizeBehavior
          language: {
            value: 'en'
          },

          // Initialize locale data
          resources: {
            value() {
              return {
                'en': { 'hello': 'My name is {name}.' },
                'fr': { 'hello': 'Je m\'apelle {name}.' }
              }
            }
          }
        };
      }
    }

    customElements.define(XApp.is, XApp);
  </script>
</dom-module>

一般的には、次の例に示すように、アプリケーションは外部ファイルからリソースをロードします。

サンプルアプリケーション(ハイブリッド要素)

<dom-module id="x-app">
   <template>
    <!-- use the localize method to localize text -->
    <div>{{localize('hello', 'name', 'Batman')}}</div>
   </template>
   <script>
      Polymer({
        is: "x-app",

        // include the behavior
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        // set the current language—shared across all elements in the app
        // that use AppLocalizeBehavior
        properties: {
          language: {
            value: 'en'
          },
        }

        // load localized messages
        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        },
      });
   </script>
</dom-module>

メインアプリケーションは、ポリフィルIntlの読み込みも担います。(上記には示されていません)

メッセージをローカライズする必要がある要素には、それぞれPolymer.AppLocalizeBehaviorを追加し、上記のようにlocalizeメソッドを使用して文字列を変換する必要があります。