Webアプリのローカライズ

l10n.js
Webアプリのローカライズ
by mar
Firefox OS コードリーディングミートアップ #7
2014-06-04
l10n.js について
● l10n.js の使い方
●
– 言語リソースの作成
– 複数形（Plural
– API
Forms）
いろいろ
ベストプラクティス
●
最近の動向
●
2/17
l10n.js って何？
●
●
l10n = Localization の略。
Web アプリをローカライズ可能にする JavaScript モ
ジュール。
●
70の言語に対応。
●
Firefox OS の Gaia 層のソフトウェアが利用している。
●
–
html ファイルから <script> タグで読み込む。
–
通常の Web ページでも使える。
L20n 仕様の完全実装に向けて開発中。
3/17
l10n.js の使い方
●
mozilla-b2g/gaia の master ブランチからコピーして適当なところに置く
（過去のリビジョンと完全互換なので master 推奨）。
–
●
l10n.js を html ファイルから読み込む。
–
●
●
<link rel="prefetch" type="application/l10n" href="locales/locales.ini" />
各言語のリソースファイル (*.properties) を作成する。
html 内の使用は、タグに “data-l10n-id” 属性および “data-l10n-args”
属性を付ける。
–
●
<script defer src="js/l10n.js" charset="utf-8"></script>
html の <link> タグで言語設定ファイル (locales.ini) を指定する。
–
●
https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js
<h1 data-l10n-id=”keyName”></h1>
js コード内の使用は、navigator.mozL10n.get() を使う。
–
navigator.mozL10n.get( "keyName", {argumentName: “Any Value”} );
4/17
言語設定ファイルの作成
●
言語設定ファイルで各リソースファイルをインポートする。
–
●
最上部に記述した行がデフォルトロケールになる。
–
●
html の <link> → locales.ini → *.properties
下記の場合、“en-US”、”ja”、“pt-BR” 以外の言語では “en-US” が使われる。
locales/locales.ini
@import url(myapp.en-US.properties)
[ja]
@import url(myapp.ja.properties)
[pt-BR]
@import url(myapp.pt-BR.properties)
●
url は、この ini ファイルからの相対位置。
5/17
言語リソースの作成（1）
●
デフォルトロケールの作成は必須。
●
key=value 形式で書く。
●
プレースホルダは {{var}} のように書く。
●
locales/myapp.en-US.properties
title-header
myapp-desc
option-header
none-button
cancel-button
itsname
=MyFeaturelessApp
=The strongest app which I made.
=Settings
=None
=Cancel
=The name is {{appname}}.
6/17
言語リソースの作成（2）
●
●
locales.ini で指定したその他の言語リソースを作
成する。
locales/myapp.ja.properties
title-header
myapp-desc
option-header
none-button
cancel-button
itsname
=MyFeaturelessApp
=ぼくの作った最強のアプリ。
=設定
=なし
=キャンセル
=その名も{{appname}}。
7/17
複数形について
●
●
複数形（Plural Forms）は、文字列中で個数などの数字を
扱うときに使う。
言語によって0個、1個、2個、多数などの表現が異なり、25通
りのパターンがある。
(l10n.js#118) getPluralRules()
var locales2rules = {..., ja: '0', ...};
var pluralRules = {
'0': function() { return 'other'; },
'1': ... ,
'24': ...};
●
日本語ロケールでは、[other] の項目のみが使われる。
8/17
複数形の書き方
●
●
変数部分に plural マクロを書く。括弧に注意。
.properties ファイルには、すべてのパターンを記
述しておく。
mailMessage = {[ plural(n) ]}
mailMessage[zero] = you have no messages
mailMessage[one]
= you have one message
mailMessage[two]
= you have {{n}} messages
mailMessage[few]
= you have {{n}} messages
mailMessage[many]
= you have {{n}} messages
mailMessage[other] = you have {{n}} messages
9/17
l10n.js の使い方（html）
●
html ファイルの場合
–
data-l10n-id 属性、data-l10n-args 属性をタグに追加する。
<h1 data-l10n-id=”title-header”></h1>
<p data-l10n-id=”myapp-desc”></p>
<h2 data-l10n-id=”option-header”></h2>
<p data-l10n-id=”itsname”
data-l10n-args=”{'appname':'Taro'}”></p>
10/17
l10n.js の使い方（JavaScript）
●
JavaScript コードの場合
–
navigator.mozL10n.get() メソッドで取得する。
var noneBtnLabel = navigator.mozL10n.get('none-button');
●
動的に生成されるコンテンツの場合（非推奨）
–
navigator.mozL10n.localize() メソッドで取得する。
var myElement = document.createElement('p');
navigator.mozL10n.localize(myElement, 'itsname',
{appname: ”Taro”});
11/17
l10n.js の使い方（language）
●
言語の取得/設定は language プロパティを使う。
var mycode = navigator.mozL10n.language.code;
navigator.mozL10n.language.code = “pt-BR”;
●
記述方向の取得（“ltr” or “rtl”）
var dir = navigator.mozL10n.language.direction;
12/17
l10n.js の使い方（readyState）
●
ローカライズ処理状態の取得
var state = navigator.mozL10n.readyState;
(l10n.js#1217) var readyStates = {
'loading': 0,
'interactive': 1,
'complete': 2 };
●
処理完了後のコールバック関数
–
mozL10n.ready() と mozL10n.once()
navigator.mozL10n.ready(callback);
navigator.mozL10n.once(callback); // 初回のみ
13/17
ベストプラクティス
●
Localization best practices for developers
–
key ID の名づけ方。
–
使わないものや重複は避ける。
文章構文上の注意事項。語順など。
前後のスペースや特殊文字は Unicode Entity にする。
–
–
–
–
文字列の表示スペースを十分にとる。
文字列の変更時の注意。
14/17
最近の動向
●
Refactored l10n.js landed in Gaia （2.0 以降）
–
Bug 914414 - Refactor l10n.js
●
Modular code which encapsulates main concepts of localization with
a clean OOP approach.
●
Better security thanks to the lazy compilation step.
●
Better error reporting, especially on build time.
●
●
●
The internal API (currently hidden behind the navigator.mozL10n
wrapper) is ready to fully support asynchronous parsing, compilation
and fetching of translations, which we think will be important when
implementing language packages for Firefox OS.
You can now freely nest placeables.
Good test coverage, both in our source repo and as part of the Gallery
app test suite.
15/17
最近の動向
●
擬似ロケール（2.0 以降）
–
Pseudolocales for Firefox OS
●
●
–
–
Ȧȧƈƈḗḗƞŧḗḗḓ Ḗḗƞɠŀīīşħ (Accented English, code: qpsploc)
Wıɹɹ oɹ ǝ
pƎ
uʅ
ıƃsɥ (Mirrored English, code: qps-plocm)
様々な文字や言語形態でアプリのローカライズをテスト
するのに使う。
Gaiaのビルド時に自動生成される。
GAIA_DEFAULT_LOCALE=qps-ploc make reset-gaia
16/17
最近の動向
●
Update on L10n API work
–
Bug 1000806 - Clean up l10n events and bootstrap wrappers
–
Bug 992473 - Switch to use MutationObservers for DOM localizat
ion
Bug 994357 - Use DOM overlays for safely setting node content
–
–
Bug 812993 - Remove all en-US strings from HTML
–
Bug 994370 - Remove inline localizations
–
Bug 936532 - Add @formFactor global / formFactor() macro to l1
0n.js
etc...
17/17

Download Report