for Firefox OS 2.2

l10n.js updates
for Firefox OS 2.2
by mar
Firefox OS コードリーディングミートアップ #16
2015-04-11
l10n.jsについて
●
●
●
●
L10n = Localization の略。
Web アプリをローカライズ可能にする
JavaScript モジュール。
現在170 の言語に対応。
Firefox OS の Gaia 層のアプリが利用してい
る。
–
●
html ファイルから <script> タグで読み込む。
L20n 仕様の完全実装に向けて開発中。
2/18
前回までのおさらい
l10n.js について
● l10n.js の使い方　←Obsoleted
●
– 言語リソースの作成
– 複数形（Plural
– API
Forms）
いろいろ
ベストプラクティス
● 最近の動向
●
3/18
l10n.js の使い方
●
mozilla-b2g/gaia の master ブランチからコピーして適当なとこ
ろに置く（過去のリビジョンと完全互換なので master 推奨）。
–
●
https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js
l10n.js を html ファイルから読み込む。
<script defer src="js/l10n.js" charset="utf-8"></script>
●
html の <link> タグで言語設定ファイル (locales.ini) を指定する。
<link rel="prefetch" type="application/l10n" href="locales/locales.ini" />
●
●
各言語のリソースファイル (*.properties) を作成する。
html 内の使用は、タグに “data-l10n-id” 属性および “datal10n-args” 属性を付ける。
<h1 data-l10n-id=”keyName”></h1>
●
js コード内の使用は、navigator.mozL10n.get() を使う。
navigator.mozL10n.get( "keyName", {argumentName: “Any Value”} );
4/18
L20n API
●
前回 (FxOSコードリーディング#7, 2014-06)
の内容は Firefox OS 2.0 までが対象でした。
→ L20n API version 1.0
●
v2.2 ブランチ (2014-09-16以降) で使い方が
大きく変わりました。
→ L20n API version 2.0
History for shared/js/l10n.js - mozilla-b2g/gaia ·
GitHub
●
v3.0 (master) ブランチ以降...
→ L20n API version 3.x
5/18
API 2.0 での変更点（1）
●
locales.ini 廃止
●
mozL10n.localize() 廃止
●
GAIA_INLINE_LOCALES 廃止
●
mozL10n.translate() 廃止
●
DOM overlay でセキュリティを改善
●
エラー処理を改善
6/18
API 2.0 での変更点（2）
●
<meta> タグでロケール指定
●
<link rel="localization"> でファイル指定
●
Langpacks API に対応
●
●
mozL10n.setAttributes() メソッドおよび
mozL10n.getAttributes() メソッド導入
aria-valuetext 属性と aria-moz-hint 属性のロー
カライズに対応
●
mozL10n.get() の非同期化
●
空文字 entity を許容
7/18
locales.ini 廃止
Bug 1022767 - Use WebApp's manifests instea
d of locales.ini
Bug 1115807 - Use <meta> keys in favor of m
anifest.webapp for localization metadata
8/18
ロケールとファイルの指定
●
●
html の <meta> タグと <link> タグで指定す
る。
content 属性は manifest.webapp ファイルの記
述に合わせる。
<meta name="defaultLanguage" content="enUS">
<meta name="availableLanguages"
content="en-US, ja">
<link rel="localization"
href="locales/myapp.{locale}.properties ">
9/18
Langpacks API に対応
Langpacksの仕様
Webapps Langpacks Spec
Bug 1107341 - (fxos-langpacks) [tracking] L
anguage packages for Firefox OS
Bug 1115796 - Update l10n.js to use Langpa
cks API
Bug 1124040 - Dehardcode gaia version in l1
0n.js
10/18
アプリ側リソースのリビジョン指定
●
●
アプリに同梱のリソースのリビジョンを指定でき
る。
リビジョン番号はファイルのビルド日時。
言語パックのリビジョンと比較される。
<meta name="availableLanguages"
content="en-US:201411141259,
ja:201411141259">
●
システムのバージョン指定。
<meta name="appVersion" content="2.2">
11/18
mozL10n.localize() 廃止
Bug 1083840 - Remove mozL10n.localize
Bug 994519 - Clean up mozL10n.localize API
12/18
setAttributes() と getAttributes()
●
mozL10n.localize() の代わりに
mozL10n.setAttributes() を使う。引数は同じ。
mozL10n.setAttributes(node, l10nId,
l10nArgs);
●
mozL10n.getAttributes() で id と args を取得
できる。
mozL10n.getAttributes(node);
13/18
aria-valuetext 属性の L10n に対応
Bug 1087353 - Add support for aria-valuetext att
ribute localization.
Bug 1102954 - Add support for aria-moz-hint att
ribute localization.
14/18
aria-* 属性のローカライズ
●
aria-label は、properties の entity に .ariaLabel を
付けて定義する。
play-button.ariaLabel = 再生
●
●
data-l10n-id=”play-button” の付いたタグの
aria-label 属性の値がローカライズされる
同様に、aria-valuetext は、.ariaValueText を付ける
days.ariaValueText = 日曜日
●
JavaScript では次のようにセットする
navigator.mozL10n.setAttribute(node, 'days');
15/18
mozL10n.get() の非同期化 (v2.2)
Bug 1095120 - Introduce asynchronous mozL1
0n.get
●
非同期化したけれど、ボトルネックには違いな
い。
Bug 1020138 - Clean up mozL10n.get uses
var label = navigator.mozL10n.get(l10nId);
16/18
mozL10n.get はダメ
●
JavaScript コードで推奨される方法
node.setAttribute('data-l10n-id',
l10nId)
または、
navigator.mozL10n.setAttributes(node,
l10nId, l10nArgs)
17/18
その他の関連バグ
Bug 1048411 - Remove GAIA_INLINE_LOCALES optimiz
ation.
Bug 1075273 - Remove mozL10n.translate
Bug 1083839: Report warnings when non-existing enti
ties requested
Bug 1132038 - Allow values to be empty
Bug 994357 - Use DOM overlays for safely setting nod
e content
18/18

Download Report