クライアントサイド Javascript で 成される 字列の国際化

テクてく Lotus 技術者夜会
テクてく Lotus 技術者夜会 – ザ･デベロッパー編
ハンズオン・セッション：
XPages アプリケーションの国際化
2012/11/16
Lotus Technology Development
Tokyo Software Development Lab
1
© 2010 IBM
Corporation
特記事項
‹
‹
‹
‹
‹
本資料の記載内容は、できる限り正確を期すよう努めてはおりますが、
いかなる明⽰または暗黙の保証も責任も負いかねます。
本資料の情報は、使⽤先の責任において使⽤されるべきものであることを、
あらかじめご了承ください。
掲載情報は不定期に変更されることもあります。他のメディア等に無断で
転載する事はご遠慮ください。
当資料をコピー等で複製することは、執筆者の承諾なしではできません。
また、当資料に記載された製品名または会社名はそれぞれの各社の商標
または登録商標です。
IBM、IBMロゴ、DB2、Lotus、Lotus Notes、Lotus Domino、Quickr、Sametime、Workplace、WebSphereは、International Business Machines Corporationの⽶国およびその他の国における商標。
JavaおよびすべてのJava関連の商標およびロゴは Sun Microsystems, Inc.の⽶国およびその他の国における商標。
Microsoft, Windowsは Microsoft Corporationの⽶国およびその他の国における商標。
Linuxは、Linus Torvaldsの⽶国およびその他の国における商標。
他の会社名、製品名およびサービス名等は、それぞれ各社の商標。
2
© 2012 IBM Corporation
今⽇の内容
‹
ハンズオンの概要
‹
XPages アプリケーションの国際化の⼿順
‹
Web ブラウザの⾔語設定の確認と変更
‹
XPages アプリケーションの国際化オプションの設定
‹
静的⽂字列の翻訳
‹
リソースバンドルを使⽤しての動的⽂字列の国際化
‹
Javascript で⽣成される⽂字列の国際化
‹
‹
サーバーサイド Javascript
クライアントサイド Javascript
3
© 2012 IBM Corporation
ハンズオンの概要
‹
‹
英語のユーザーインターフェースで開発された⼩遣い帳アプリケーション
を国際化し、⽇本語のインターフェースを追加する。
ブラウザの⾔語設定に応じて、⽇本語と英語の両⽅のユーザーインターフ
ェースが表⽰されるようにする。
4
© 2012 IBM Corporation
XPages アプリケーションの国際化と地域化の⼿順
‹
XPages のコントロールが⾃動⽣成する UI は、Lotus Domino によって
すでに国際化と地域化がされている。
‹
XPagesアプリケーションの国際化オプションの設定を有効にする。
‹
静的⽂字列の地域化（翻訳）
‹
‹
動的⽂字列の国際化と地域化
‹
‹
‹
国際化の設定によって⽣成されたプロパティファイルを翻訳する。
動的⽂字列を⽣成しているロジックを国際化する
ロジックが参照しているプロパティファイルを翻訳する。
その他の設計要素の国際化 ･･･ 今回は範囲外
‹
‹
スタイルシートとテーマ
画像
‹
などなど･･･
5
© 2012 IBM Corporation
Web ブラウザの⾔語設定の確認 – Internet Explorer
‹
メニューから「ツール」→「インターネットオプション」を選択し、
「全般タブ」で「⾔語」ボタンをクリックする。
‹
「⾔語の優先順位」ダイアログボック
スで「⾔語」の⼀番上が「⽇本語」と
なっていることを確認する。
6
© 2012 IBM Corporation
Web ブラウザの⾔語設定の確認 – Firefox
‹
メニューから「ツール」→「オプション」を選択し、「コンテンツ」で
「⾔語設定」ボタンをクリックする。
‹
「Web ページ⾔語」ダイアログボッ
クスで「⾔語の優先順位」の⼀番上が
「⽇本語」となっていることを確認す
る。
7
© 2012 IBM Corporation
アプリケーションを開く
‹
‹
Domino Designer を起動し、メニューから「ファイル」→「アプリケー
ション」→「開く」を選択。
以下のアプリケーションを
選択して開く
‹
‹
‹
サーバー：
ローカル
タイトル：
journal i18n
ファイル名： journal_i18n.nsf
‹
‹
※英語の UI で作成された
「お⼩遣い帳」アプリ。
このアプリケーションは以下の
設計で構成されている。
‹
‹
‹
「table」XPage
「header」カスタムコントロール
「StringsUtil」スクリプトライブラリ
この教材のベースは以下のチュートリアルにある。
XPages による Web アプリケーション開発: 前編
http://www.ibm.com/developerworks/jp/ysl/library/lotus/y-lot-xpages1/
8
© 2012 IBM Corporation
アプリケーションの動作を確認する
‹
アプリケーションナビゲーターで「XPages」→「table」でページを
開き、メニューから「Web ブラウザでプレビュー」を選択して適当な
ブラウザで XPages アプリケーションを開く。
9
© 2012 IBM Corporation
アプリケーションの動作を確認する
‹
‹
‹
ひとつの XPage とひとつのカスタムコント
ロールからなるアプリケーション。
ユーザーインターフェースはすべて英語。
ただしビューコントロールが⾃動⽣成する
「ページめくり」のみ⽇本語になっている。
10
© 2012 IBM Corporation
国際化オプションの設定
1. アプリケーションナビゲーターで「アプリケーションプロパティ」を
クリックする。
2. アプリケーションプロパティで「XPages」タブを開く。
3. 「ローカリゼーションのオプション」で「ローカリゼーションを有効にす
る」を選択。
4. 「追加ボタン」を押して表⽰されるダイアログで以下の「⽇本語 [ja]」
と「英語 [en]」を追加。
5. 「ソース⾔語」に「英語 [en]」を選択。
6. 「アプリケーションプロパティ」を保存する。
‹
メニューから「プロジェクト」を選択し、「⾃動的にビルド」が選択されて
いることを確認する。これが選択されていないと、プロパティファイルの⽣
成が⾏われない。
7. 保存後、XPages をプレビューし、⾃動的に翻訳されていることを
確認する。
11
© 2012 IBM Corporation
国際化オプションの設定
1
2
4
3
日本語と英語を選択する。
12
© 2012 IBM Corporation
国際化されたことの確認
‹
UI に表⽰される⽂字列が [ja | Expense
List] のようにロケールコード付きで表⽰さ
れることを確認する。
13
© 2012 IBM Corporation
⾃動⽣成されたプロパティファイルの確認
‹
‹
⽣成されたプロパティファイルは、Domino Designer の通常のアプリケ
ーションナビゲーターからは⾒えない。
メニューより「ウィンドウ」→「Eclipse ビューの表⽰」→「パッケージ
エクスプローラー」を選択してパッケージエクスプローラーを表⽰する
14
© 2012 IBM Corporation
プロパティファイルの編集
‹
‹
プロパティファイルには半⾓英数字と記号しか⼊⼒できない。⽇本語など
は⽂字コードの数値でエンコードして記載する必要がある。
Domino Designer のテキストエディターなどでプロパティファイルを開
くと、⽇本語の編集ができない。
‹
‹
いったんファイルをエキスポートして編集し、native2ascii ツールによる変換
が必要。
この実習環境の Domino Designer には、プロパティファイルを編集する
ための以下のプラグインが導⼊されており、普通のテキストファイルのよ
うにプロパティが編集できる。
‹
プロパティエディタ
‹
http://propedit.sourceforge.jp/
15
© 2012 IBM Corporation
プロパティファイルの翻訳
1. ⾃動⽣成された table_ja.properties を開いて確認する。
2. この内容を削除し、以下のファイルの内容で置き換える。
‹
C:¥LabFiles¥XPages_I18n¥properties¥table_ja.properties.txt
3. 編集した table_ja.properties を上書き保存する。
4. XPages をプレビューし、翻訳された⽂字列の表⽰を確認する。
16
© 2012 IBM Corporation
翻訳された画⾯の確認
‹
おおよその部分は翻訳されたが、まだ翻訳さ
れていないところがある。
‹
‹
‹
⼀覧の勘定科⽬の値
追加や更新をしたときに表⽰されるメッセージ
「このアプリケーションについて」リンクで表⽰す
るダイアログ
17
© 2012 IBM Corporation
カスタムコントロールの国際化
‹
‹
‹
このサンプルでは「header」カスタムコントロールの表⽰内容は、カスタムプロ
パティとして定義しており、「table」XPage 側で定義している。
カスタムプロパティの定義で
「ローカライズ可能⽂字列」
とすることで、呼び出しもと
の XPage で翻訳対象⽂字列
として認識され、プロパティ
ファイルに抽出されている。
カスタムコントロールで独⾃
の⽂字列を含んでいるときに
は、そのカスタムコントロー
ルのプロパティファイル
（header_ja.properties）の
翻訳が必要。
18
© 2012 IBM Corporation
リソースバンドルを使⽤しての動的⽂字列の翻訳
‹
‹
「table」XPage を開き、左側の表の
「account」の表⽰部分を選択し、
プロパティビューの「データ」タブを
選択する。
以下のような式で列の値を表⽰してい
ることを確認する。
var account = viewEntry.getCollumnValue("account");
return account;
‹
勘定科⽬（account）には、以下の
ように、英語表記でデータが設定さ
れている。
‹
交通費(traffic)、通信費(communication)、
⾷費(foods)、⽔道光熱費(utilities)、
消耗品代(supplies)、
新聞図書費(publications)、雑費(others)
19
© 2012 IBM Corporation
サーバーサイド Javascript のためのプロパティの追加
‹
‹
アプリケーションナビゲーターで「リソース」→「ファイル」を
選択する。
ファイル⼀覧で「ファイルリソースのインポート」をクリックして、以下
の２つのファイルをインポートする。
‹
‹
フォルダ：
ファイル：
C:¥LabFiles¥XPages_I18n¥properties
strings.properties と string_ja.properties
2つのプロパティファイルがインポートされた画⾯
20
© 2012 IBM Corporation
サーバーサイド Javascript のためのプロパティの追加
‹
‹
「table」XPage の背景を選択し、プロパティビューで「リソース」
タブを開く。
「追加」ボタンで「リソースバンドル」を選択し、以下のように設定
する。
‹
‹
リソースバンドル名：
プロパティファイル名：
strings
strings.properties
※ 英語のプロパティファイル名を選択する。⽇本語のプロパティファイルは
ロケールに応じて⾃動的にロードされる。
21
© 2012 IBM Corporation
サーバーサイド Javascript の実装の国際化
‹
‹
「table」XPage を開き、左側の表の「account」の表⽰部分を選択し、
プロパティビューの「データ」タブを選択する。
Javascript コードの内容を以下のように変更する。
‹
XPage で定義された「strings」リソースバンドルから、勘定科⽬の
英単語をキーに翻訳⽂字列を取得するコードを実装。
var account = viewEntry.getCollumnValue("account");
return strings[account];
‹
保存後、XPage をプレビューし、「勘定科⽬」列の内容が⽇本語で表⽰
されることを確認する。
22
© 2012 IBM Corporation
「勘定科⽬」列の内容が翻訳された画⾯
‹
追加や更新をしたときに表⽰されるメッセージは
まだ英語が表⽰されている。
23
© 2012 IBM Corporation
スクリプトライブラリで⽣成される⽂字列の国際化
‹
‹
アプリケーションナビゲーターで「コード」→「スクリプトライブラリ」
を開き、「StringsUtil」スクリプトライブラリを開く。
メッセージの⽂字列はここで⽣成されているが、以下の問題がある。
‹
‹
⽂字列の断⽚がハードコードされている。
メッセージに表⽰されるデータは、⾔語によって並びが変わるかもしれない。
24
© 2012 IBM Corporation
スクリプトライブラリで⽣成される⽂字列の国際化
‹
このスクリプトライブラリの内容を削除し、以下のファイルの内容と置き
換える。
‹
‹
C:¥LabFiles¥XPages_I18n¥jss¥StringsUtil.jss.txt
リソースバンドルの取得
‹
getString() 関数では以下のような処理で「strings.properties」をリソース
バンドルとして取得する。
function getStrings() {
･･･中略･･･
var resource = new com.ibm.xsp.resource.BundleResource();
resource.src = "/strings.properties";
resource.component = view;
var strings = resource.contents;
･･･中略･･･
return strings;
}
25
© 2012 IBM Corporation
スクリプトライブラリで⽣成される⽂字列の国際化
‹
リソースバンドルの取得の効率化（つづき）
‹
必要なたびにリソースバンドルの取得を⾏うオーバーヘッドが軽減するため、
取得したリソースバンドルを配列に保存して再利⽤する。
function getStrings() {
var locale = view.getLocale();
if(applicationScope.stringsPerLocale ){
var existingStrings = applicationScope.stringsPerLocale[locale];
if( existingStrings ){
return existingStrings;
}
}
･･･中略･･･ ここで リソースバンドルを strings 変数にセット
synchronized(applicationScope) {
if( ! applicationScope.stringsPerLocale ) {
applicationScope.stringsPerLocale = new java.util.HashMap();
}
applicationScope.stringsPerLocale[locale] = strings;
}
return strings;
}
26
© 2012 IBM Corporation
スクリプトライブラリで⽣成される⽂字列の国際化
‹
エントリ追加時のメッセージを⽣成する getMessage4Add() を
I18n ライブラリを⽤いて実装する。
function getMessage4Add(date, account, memo, amount) {
var message = getStrings()["messageAddExpense"];
return I18n.format(message, memo, amount, date);
}
‹
ここで「messageAddExpense」の値は
‹
‹
‹
英語： 「Expense for {0} with {1} yen on {2} was added.」
⽇本語： 「{2}の{0}に対する{1}円の⽀出を追加しました。」
I18n.format()関数は、フォーマット⽂字列内の「{x} 」で表現される数
字の部分に引数の値を当てはめる。
memo="交通費"、amount=200、date="2012/11/3" のとき、
‹
‹
英語： 「Expense for 交通費 with 200 yen on 2012/11/3 was added.」
⽇本語： 「2012/11/3の交通費に対する200円の⽀出を追加しました。」
27
© 2012 IBM Corporation
スクリプトライブラリで⽣成される⽂字列の国際化
‹
‹
⽇付と数値の表現も、プロパティファイルのフォーマット⽂字列で変更する。
⽇付
function formatDate(dateObj) {
var format = getStrings()["dateFormat"];
return I18n.toString(dateObj, format, view.getLocale());
}
‹
dateFormat プロパティの値
‹
‹
‹
‹
英語：
⽇本語：
数値
「MMMM dd yyyy」
「yyyy年M⽉d⽇」
function formatCurrency(amount) {
var format = getStrings()["amountFormat"];
return I18n.toString(amount, format, context.getLocale());
}
amountFormatプロパティの値
‹
英語/⽇本語： 「###,###」
28
© 2012 IBM Corporation
Javascript で⽣成されるメッセージの翻訳の確認
‹
追加や更新をしたときに表⽰されるメッセージは
⽇本語化された。
29
© 2012 IBM Corporation
クライアントサイド Javascript で⽣成される⽂字列の国際化
30
© 2012 IBM Corporation
クライアントサイド Javascript で⽣成される⽂字列の国際化
‹
「About this application」リンクには以下のようなクライアントサイド
Javascript が実装されている。
var message = "This Application is developed to show I18n/L10n of XPages application.";
alert(message);
‹
このコードを以下のように書き換える。
‹
このページが⽣成される際に、#{javascript: ... }内のコードが
サーバーサイド Javascript で処理され、プロパティファイルから
⾔語に対応したメッセージが設定される。
var message = "#{javascript: strings['aboutThisApp']}";
alert(message);
31
© 2012 IBM Corporation
クライアントサイド Javascript で⽣成される⽂字列の国際化
‹
「table」XPage を保存後にプレビューし、翻訳された⽂字列が表⽰され
ることを確認する。
32
© 2012 IBM Corporation
CSJS で⽣成されるメッセージの翻訳の確認
33
© 2012 IBM Corporation
5. まとめ
‹
‹
‹
‹
XPages では国際化アプリケーションを開発するための
仕組みがあらかじめ⽤意されている。
国際化オプションを設定し、⽣成されるプロパティ
ファイルに含まれる静的⽂字列を翻訳することで
ある程度の地域化は実現できる。
それ以外の動的⽂字列の国際化と地域化もプロパティ
ファイルを使って実現可能。
ただし、Javascript ロジックなどで⽣成される⽂字列に
ついては、国際化を考慮した実装をあらかじめ⾏う
必要がある。
34
© 2012 IBM Corporation
参考⽂献
‹
Lotus Notes/Domino Application Development Wiki
‹
XPages でのロケールの使⽤⽅法
‹
‹
XPages アプリケーションで「ローカライゼーションのオプション」の
使⽤⽅法
‹
‹
http://www10.lotus.com/ldd/ddwiki.nsf/dx/Japanese_Locale_use_in_XPages
http://www10.lotus.com/ldd/ddwiki.nsf/dx/Japanese_XPages_How_to_use_the_localiza
tion_options
XPages アプリケーション開発での Javascript の国際化
‹
http://www10.lotus.com/ldd/ddwiki.nsf/dx/Japanese_XPages_JavaScript_Internationali
zation
35
© 2012 IBM Corporation
36
© 2012 IBM Corporation