Angular 2原生国際化サポート(二)

4023 ワード

国際化 httml 5 clarity アングラー現地化アングラーJS JavaScript

AngularJS 2国際化サポート
コンテンツのレビュー
以前の記事では、AngularJS 2のローカライズ支援について検討しました.

翻訳が必要なコンテンツにi 18 n HTML属性

を追加することにより.

ng-xi 18 nツールを使用して標準のインタラクティブフォーマットXLIFFファイルに文字列を抽出する

翻訳が完了すると、Angular compilerは翻訳されたファイルをインポートし、Applicationが直接呼び出すことができるJson文字列をコンパイル生成する.

最初の2点は、基本的なローカライズサポートを提供する以外はありません.翻訳の質を向上させるには、いくつかの便利なインタフェースも提供されています.

コンテキストヒントUIのローカライズで最も重要なのは、コンテキスト情報を提供することです.現在、業界ではcommentsのような方法のほか、YouTubeのような大手企業がコンテキストスクリーンショットとリアルタイムプレビュー(Live Preview)を行うことができます.もちろんAngularJSでは、翻訳者がコンテキストを理解できるように、一般的なmessageにcommentsを追加するメカニズムも提供されています.


  Limit is 255 characters.

AngularJSでメッセージにプレースホルダが含まれている場合、抽出後にプロンプトメッセージが付加されます:

Limit is MAX_CHARS characters.
  //Placeholders MAX_CHARS comments: Angular Expression example: 255

AngularJSは複数と性別をサポートする:

{{numMessages, plural,
      =0 { You have no new messages }
      =1 { You have one new message }
   other { You have # new messages }
}}

{{friendGender, select,
       male { Invite him }
     female { Invite her }
      other { Invite them }
}}

ローカライズがもたらすlayout問題、AngularJSも例外ではありません.通常、翻訳サイクルは長いです.翻訳ファイルが提出されたとき、翻訳によるスタイルの問題が発見された場合、すでに遅くなっているか、多くのバグが修復されていない可能性があります.この問題を解決するには、設計段階で機械翻訳やpseudoを通じて潜在的なスタイル互換性と拡張性の問題を検出し、翻訳を送る前に潜在的な危険性を解決することができます.VMwareが独自に開発したUI Layout Snifferは、主にwebアプリケーションlayoutの高可用性を対象としてオープンソースになります.

基本的な抽出と翻訳性の最適化に加えて、ローカライズされたコンパイルプロセスの選択があり、アプリケーションの特徴に応じて柔軟にコンパイル方法を選択することができます.AngularJSでは、2つのリソースファイルをコンパイルする方法が提供されています.JITでは、アプリケーションの起動時にローカライズされたリソースファイルをコンパイルします.基本的な流れは以下の通りです.

は、現在のユーザのLocale情報を決定する.

翻訳ファイルを文字列定数でインポートします.

翻訳プロバイダをJITコンパイラに作成および挿入します.

は、作成されたプロバイダに基づいてブートアプリケーションを起動する.


  // Get the locale id somehow
  document.locale = 'de';

  // Map to the text plugin
  System.config({
    map: {
      text: 'systemjs-text-plugin.js'
    }
  });

  // Launch the app
  System.import('main.js').catch(function(err){ console.error(err); });

JITコンパイラは動的なローディング翻訳であり、アプリケーションの起動時にローカライズされたコンパイル作業をすべて完了し、適用される文字列の集合が比較的小さい場合、ロードの性能に影響を与えない可能性があり、逆にアプリケーションのロードが遅すぎる可能性がある.このとき,事前コンパイル(AOT)を考慮し,ngcコンパイルのコマンドを用いて各言語固有のリソースパケットを事前にコンパイルし,アプリケーションが起動するとlocaleを特定し,対応するリソースパケットを呼び出し,コンパイルの時間を省く.例:

./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf

AngularJSのローカライズに関するサポートについて多くお話ししましたが、国際化支援におけるAngularJS 2の変化についてお話しします.
AngularJS国際化
AngularJS 2は国際化でサポートされており、AngularJS 1に対して.xはあまり変化していません.具体的な実現についてはこちらでは述べませんが、必要があれば前の文章を参考にしてください.AngularJS国際化のポイント:

Localeの取得は、アプリケーションシーンに応じて適切なユーザーLocaleの取得方法を選択します.前の記事を参照してください.

Localeを取得すると、対応するangular-locale_が呼び出されます.{{locale}}.jsは、AngularJSが提供できるすべての国際化patternを文字列として定義します.例えばdeのNUMBER_FORMATS:

"NUMBER_FORMATS": {
    "CURRENCY_SYM": "\u20ac",
    "DECIMAL_SEP": ",",
    "GROUP_SEP": ".",
    "PATTERNS": [
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 3,
        "minFrac": 0,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "",
        "posPre": "",
        "posSuf": ""
      },
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 2,
        "minFrac": 2,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "\u00a0\u00a4",
        "posPre": "",
        "posSuf": "\u00a0\u00a4"
      }
    ]
  },

使用中、HTMLテンプレートで定義すると{{1000|currency}、コンパイル後に得られる通貨記号はlocaleサービスのlocaleIDに対応するcurrency記号です.AngularJSの国際化の限界を理解するには、このモデルファイルを見てみましょう.国際化要素の定義がたくさん欠けています.

demoと結びつけてvueルーティングの実現原理を簡単に述べる

【Linuxコマンド毎日お知らせ】wc-テキストコンテンツ統計器