LoginSignup
0
0

More than 5 years have passed since last update.

Polymer App Toolbox(日本語) Using the Toolbox/Localization 〜ローカリゼーション〜

Last updated at Posted at 2017-04-30

目次へ移動

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

ローカリゼーションの機能はプレリリースです。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メソッドを使用して文字列を変換する必要があります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0