worklight61国際化ガイド v1.0...
TRANSCRIPT
Worklight Foundation 国際化対応ガイド
ver. 1.0
日本アイ・ビー・エム株式会社 ソフトウェア事業
2014 年 7 月
目次
1. はじめに ......................................................................................................................................1
1-1. 本ガイドの対象...................................................................................................................1
1-2. 国際化対応アプリの例 .......................................................................................................3
1-3. Worklight Studio 上での文字コード設定........................................................................4
2. Worklight における国際化対応 .................................................................................................6
2-1. Worklight での国際化対応機能の概要 .............................................................................6
2-2. JavaScript フレームワーク - Dojo..................................................................................7
2-3. JavaScript フレームワーク - jQuery ............................................................................10
2-4. Worklight アプリケーションの翻訳 ...............................................................................12
2-5. Apache Cordova の Globalization API........................................................................15
2-6. Worklight システム・メッセージの翻訳 .......................................................................17
2-7. Worklight アプリ管理機能でのメッセージの国際化 ....................................................20
3. 国際化対応における Tips と考慮点 ........................................................................................25
3-1. アプリケーション名の変更..............................................................................................25
3-2. アプリケーション設計に関する考慮点...........................................................................31
4. 参考 ............................................................................................................................................35
4-1. Android Emulator のロケールをコマンドラインで変更する方法..............................35
4-2. Xcode 上からアプリを実行する際に実行時引数でロケールを指定する方法..............36
4-3. Xcode 上でのリソース・ファイルの追加手順 ...............................................................39
4-4. 参考文献 ............................................................................................................................44
修正履歴 日付 バージョン 修正履歴
2014/7/24 1.0 初版
- 1 -
1. はじめに
1-1. 本ガイドの対象
IBM Worklight は、モバイル・アプリケーションの開発・実行・管理をトータルに実現するモバイル・
アプリケーション・プラットフォームであり、Android や iOS といった複数のプラットフォームで動作する
アプリケーションの開発を効率的に行うことができます。 モバイル・アプリケーションをベースに日本
以外の国へサービスを展開することや、日本国内でも英語をはじめとする複数の言語のユーザー・イ
ンターフェースを提供することが求められるケースも増えてきています。
本ガイドでは、モバイル・アプリケーション開発のために Worklight が提供する機能とその使い方を
中心に多言語のユーザー・インターフェースを実現するアプリケーション（以下では、「国際化対応ア
プリ」と表記）の開発に対するヘルプを提供することを目的としています。Worklight でのハイブリッド・
アプリケーションで国際化対応アプリを開発する際には、大きく見ると以下の 5 つのレイヤーで提供さ
れる機能を知っておく必要があります。本ガイドでは、このうち特に「JavaScript フレームワーク」、
「Worklight 提供機能」、「Apache Cordova API」を中心に「アプリケーション」と「ネイティブ機能」に
ついても一部ご紹介します。
当文書は、Worklight 6.1 を前提にできるだけ正確を期して作成しておりますが、製品の稼動を保証
するものではありません。正確な仕様や動作に関しては、V6.1 で日本語化されたオンライン・マニュア
ル「Worklight V6.1 Knowledge Center」、「Worklight V6.2 IBM Knowledge Center」をご参照くだ
さい。
対象読者：
Worklight を使用した国際化対応のハイブリッド・アプリ設計・開発を実施する方
前提知識：
Worklight でのハイブリッド・アプリ開発の基本を理解していること
- 2 -
前提環境：
IBM Worklight 6.1
Dojo Toolkit 1.9.1
jQuery-i18n-properties 1.0.9
Apache Cordova 3.1
Android Development Toolkit 22.6.3
Xcode 5.1.1
以前のバージョンの Worklight での開発
Worklight 6.0 以前のバージョンにおいても基本的な考え方は同様ですが、ベースとしてい
るフレームワークのバージョンなどが異なりますので、API が異なる可能性があります。
- 3 -
1-2. 国際化対応アプリの例
国際化対応を行っているアプリケーションのわかりやすい例として、IBM Worklight が提供している
Application Center のクライアント・アプリケーションをご紹介します。Worklight の Consumer Edition
や Enterprise Edition などに付属する Application Center は、企業内で独自のアプリケーション・スト
アを構築するためのコンポーネントで、ユーザーに対するモバイル・アプリの配布や評価の入力など
を行うためのデバイスにインストールするクライアント・アプリケーションも含まれています。このクライア
ント・アプリケーションは Worklight アプリとして実装されており、英語を含め 11 か国語の言語に翻訳
されています。
図 2 と図 3 は Application Center のクライアント・アプリケーションを OS の言語設定を日本語・英語
を切り替えて表示したものです。ページのタイトルの「お気に入り」と「Favorites」やフッター部分のア
イコンの下のテキスト部分などが言語設定に合わせて切り替わっていることがわかります。
日本語環境 英語環境
Application Center クライアント・アプリの入手場所
この Application Center クライアント・アプリは以下の Path に Worklight プロジェクトとして導
入されています。Worklight Studio にインポートしてビルドして使用します。
<WorklightInstallRoot>/ApplicationCenter/Installer/IBMAppCenter
- 4 -
1-3. Worklight Studio 上での文字コード設定
Worklight での開発を始めるに当たって、Worklight Studio をインストールした Eclipse のワークスペ
ースの文字エンコーディングを UTF-8 にすることが必須です。通常の Eclipse の操作同様に、ワーク
スペースの文字コードを UTF-8 に変更します。
１．「Window」の「Preferences」を選択します。
Mac OS の場合
Mac OS 上で開発を行う場合は、「Eclipse」の「環境設定」で Preference が表示されます。
2．「General」から「Workspace」を選び、「Text file encoding」を、Other に変更して、UTF-8 を選択
します。
- 5 -
3．HTML ファイルのエンコーディングの確認と変更
ワークスペースの設定をUTF-8に変更した後、Worklightプロジェクトの作成を行った場合でもHTML
ファイルのエンコーディングが UTF-8 になっていない場合がありますので、確認します。Worklight プ
ロジェクト内の index.html ファイルを選択し、Properties を表示します。
上記のように UTF-8 になっていれば問題ありませんが、なっていない場合はワークスペースの文字コ
ードを変更した場合と同様に UTF-8 に変更しておきます。
以上のエンコーディングの設定と確認が完了したら、開発作業に取り掛かります。
ワークスペース変更時の注意
ワークスペースのエンコーディングの変更は、新しくワークスペースを作成して作業をする
場合に忘れがちですので、注意してください。
- 6 -
2. Worklight における国際化対応
2-1. Worklight での国際化対応機能の概要
Worklight アプリケーションを作成する際の国際化対応の方針としてはいくつかの選択肢があります。
１つは JavaScript フレームワークを使用する方法です。Dojo では標準ライブラリーとして多言語対応
や多文化対応のライブラリーが用意されています。jQuery Mobile や Secha Touch を使用する場合
にもサードパーティーのプラグインを使用することで多言語対応できます。
他にはWorklightプラットフォームでもmessages.jsを使用してアプリケーション・コードの翻訳が可能
ですし、Apache Cordova のグローバリゼーション API を使用するとデバイスの固有情報を取得する
ことができます。この章では、これらのフレームワークで提供されるそれぞれの国際化対応の方法に
ついて説明します。
いくつかのフレームワークで国際化対応が可能ですが、どれか 1 つを選べば完全であるとは限りませ
ん。例えば JavaScript のフレームワークでは、ロケールの取得は可能ですが、モバイル・デバイスの
タイムゾーンや日付フォーマットを取得できません。その場合は Cordova のグローバリゼーション API
を組み合わせて使用するとデバイスの設定情報も取得することができます。
推奨される国際化対応の方針としては、基本的に JavaScript のフレームワークを使用する場合には、
JavaScript フレームワークおよびそのプラグインの国際化対応モジュールで翻訳や多文化対応を行
い、機能として不足する場合に、Cordova のグローバリゼーション API の使用を検討します。
JavaScript フレームワークを使用しない場合には、Worklight で提供される messages.js を使用する
ことでも翻訳が可能です。
また、ユーザーによって言語を切り替えるリストを用意するかデバイスで設定されているロケールを使
用するかも重要な要素になります。
表 各フレームワークの国際化対応機能
Worklight
標準機能
Cordova
Globalization API
Dojo
Dojo Mobile
jQuery
+ プラグイン
テキストの
多言語対応
○ (messages.js)
× ○ ○
多文化対応（数
値、日付、通貨）
× ○ ○ ○
デバイス(OS)
設定項目の取得
△ （WL.Client API）
○ × ×
- 7 -
2-2. JavaScript フレームワーク - Dojo
Dojo ではグローバリゼーションの仕組みが標準モジュールとして提供されています。
他の JavaScript フレームワークも同様ですが、各言語のメッセージをそれぞれのリソース・ファイルに
記載し、それらをまとめてリソース・バンドルとして保持します。
JavaScript 実行時にWebブラウザのロケールを解釈し、そのロケールの対応するリソースから該当の
メッセージを取得し、表示するという仕組みになっています。
Dojo を使用した Worklight アプリケーションで多言語対応の仕組みを記述するには以下が必要にな
ります。
・ リソース・バンドルの用意
言語ごとのファイルをまとめたリソース・バンドルを用意します。
リソース・ファイルのフォーマットは以下を参照してください。
Translatable Resource bundles
http://dojotoolkit.org/reference-guide/1.10/quickstart/internationalization/resource-bundling.h
tml
・ リソース・バンドルのロードとテキストの指定
リソース・バンドルをロードするには、dojo/i18n! プラグインを利用してロードする方法があります。
- 8 -
require([
"dojo/_base/window",
"dojo/dom",
"dojo/ready",
"dijit/registry",
"dojo/i18n!resource/nls/messages", //リソース・バンドルのファイルから“.js”を除く
・・・
・ dojo/i18n もしくは dojox/mobile/i18n モジュールによるテキストの指定
dojo での国際化対応は dojo/i18n か dojox/mobile/i18n が使用できます。
上記で示したように、dojo/i18n プラグインを使ってリソース・バンドルをロードできます。ローカライズし
てロードされたリソースは JSON 形式で保持されており、以下のように明示的に Dojo ウィジェットのラ
ベルにリソース・バンドルのテキストを指定します。
require(
[
"dojo/domReady", // DOM の構築完了まで待つ
"dojo/i18n!resource/nls/messages", // リソース・バンドルをロードする
"dijit/registry", // registry.byId を使用する
"dojox/mobile/parser", // 宣言型プログラミングを使用する
"dojox/mobile", // モバイル・アプリである
"dojox/mobile/compat", // デスクトップ・ブラウザとの互換性がある
],
function(ready, messages, parser, registry) {
ready( function() {
parser.parse();
registry.byId("globalization_heading").set("label", messages["msg_globalization"]);
registry.byId("months_choice").set("label", messages["msg_months"]);
registry.byId("days_choice").set("label", messages["msg_days"]);
registry.byId("formats_choice").set("label", messages["msg_formats"]);
var footer_msg = bundle["msg_footer"] + dojo.locale;
registry.byId("globalization_footer").set("label", footer_msg);
});
}
);
- 9 -
dojox/mobile/i18n はモバイルに 適化されたシンプルな国際化対応の機構です。
dojox/mobile/i18n.load()関数を使用することでリソース・バンドルをロードし、自動的にすべての
Dojo ウィジェットの中から該当するテキストをリソース・バンドルのテキストに置き換えます。
require(
[
"dojo/domReady", // DOM の構築完了まで待つ
"dojo/i18n!resource/nls/messages", // リソース・バンドルをロードする
"dojox/mobile/parser", //宣言型プログラミングを使用する
"dojox/mobile", // モバイル・アプリである
"dojox/mobile/i18n", //宣言的にリソース・バンドルをロードする
"dojox/mobile/compat", // デスクトップ・ブラウザとの互換性がある
],
function(ready, messages, parser, mobile, mi18n) {
ready( function() {
mi18n.load("resource", "messages");
parser.parse();
});
}
);
Dojo では多文化対応のモジュールとして dojo/cldr (cldr : Common Locale Data Repository ) も
提供しています。cldr では国や地域によって異なる数字の扱いや通貨単位の変換を行ってくれます。
例えば、通常日本円は整数値で表されますが、アメリカ合衆国の通貨はドルとセントがあり、ドル表記
の場合、小数点表記となります。Dojo の cldr では ISO で定められた通貨名コード：JPY を指定する
と “¥” マークが表記されるだけでなく、小数点以下の値を四捨五入し、整数値への変換まで行いま
す。
他にも、カンマ区切りとスペース区切りなどの文化的違いのある数値フォーマット（アメリカ：
1,234,567.89、フランス：1 234 567,89 ）の違いなども dojo.number モジュールを使って対応するこ
とができます。
- 10-
2-3. JavaScript フレームワーク - jQuery
jQuery のアプリケーションの場合、jQuery プラグインを使うことで国際化対応が可能です。国際化対
応プラグインはいくつかありますが、ここでは jquery.i18n.properties-1.0.9.js を使った実装について
説明します。jquery.i18n.properties-1.0.9.js を使用する場合も Dojo と同様で、リソース・バンドルを
準備します。リソース・バンドルの構造とファイル名のフォーマットは異なりますので各フレームワーク
およびプラグインの規約に合わせてください。
リソースをロードしたら、i18n モジュールを呼び出し、メッセージの書き換えを行います。
プロパティーとしてリソース・バンドルのパスや言語を指定し、該当の言語のテキストを追加する仕組
みとなっています。
function doGlobalization(){
$.i18n.properties({
name: 'messages', //プロパティー・ファイルの名前
path: 'bundles/nls/', //プロパティー・ファイル（バンドル）のパス
mode: 'both', /*リソース・キーを JavaScript 変数(vars)として定義するか配列
(map)として定義するか、またはその両方*/
language: 'ja',
- 11-
callback: function(){
$('#globalization_heading').empty().
append($.i18n.prop('msg_globalization'));
$('#msg_months').empty().append($.i18n.prop('msg_months'));
$('#msg_days').empty().append($.i18n.prop('msg_days'));
$('#msg_formats').empty().append($.i18n.prop('msg_formats'));
$('#msg_icon').empty().append($.i18n.prop('msg_icon'));
$('#icon_heading').empty().append($.i18n.prop('msg_icon'));
$('#months_heading').empty().append($.i18n.prop('msg_months'));
$('#days_heading').empty().append($.i18n.prop('msg_days'));
$('#formats_heading').empty().append($.i18n.prop('msg_formats'));
$('#words_heading').empty().append($.i18n.prop('msg_words'));
var items = $('a[data-rel="back"]');
$.each(items, function(i){
$(items[i]).empty().append($.i18n.prop('msg_previous'));
});
$('#globalization_footer').empty().
append($.i18n.prop('msg_footer') + $.i18n.browserLang());
}
});
};
- 12-
2-4. Worklight アプリケーションの翻訳
JavaScript フレームワークの国際化対応が使用できない場合、Worklight の messages.js による翻
訳が利用できます。
messages.js を使う場合、リソース・バンドルではなく、messages.js ファイルの 1 ファイルに多言語の
メッセージを記述します。
例えば messages.js を以下のように記述します。
Messages = {
headerText: "Default header",
actionsLabel: "Default action label",
sampleText: "Default sample text",
japaneseLanguage : "Japanese"
englishLanguage : "English",
frenchLanguage : "French",
russianLanguage : "Russian",
hebrewLanguage : "Hebrew"
};
function setJapanese(){
Messages.headerText = "翻訳";
Messages.actionsLabel = "言語を選択してください:";
Messages.sampleText = "これは日本語のサンプルテキストです";}
function setFrench(){
Messages.headerText = "Traduction";
Messages.actionsLabel = "Sélectionnez langue:";
Messages.sampleText = "ceci est un exemple de texte en français.";
}
･･･
Messages オブジェクトの中に headerText や actionsLabel のような id でプロパティーがセットされま
す。
- 13-
上記の翻訳テキストを使用するには、HTML ファイルの中で、class 名が“translate”という名前を持つ
場合、同じ id を持つ HTML エレメントのテキストに表示されます。
以下に HTML の例（一部）を記載します。
<div id="AppBody">
<div id="header">
<h1 id="headerText" class="translate"></h1>
</div>
<div id="wrapper">
<label for="languages" id="actionsLabel" class="translate"></label><br />
<select id="languages">
<option value="" selected="selected">--Select--</option>
<option value="english" id="englishLanguage" class="translate"></option>
<option value="french" id="frenchLanguage" class="translate"></option>
<option value="russian" id="russianLanguage" class="translate"></option>
<option value="hebrew" id="hebrewLanguage" class="translate"></option>
<option value="japanese" id="japaneseLanguage" class="translate"></option>
</select>
<div id="sampleText" class="translate"></div>
</div>
</div>
言語を変更する場合は上記の setJapanese()関数や setFrench()関数を呼び出し、Messages オブ
ジェクトの内容を書き換えます。
function languageChanged(lang){
if (typeof(lang)!="string")
lang = $("#languages").val();
switch (lang){
case "english":
setEnglish();
break;
case "french":
setFrench();
break;
・・・
- 14-
case "japanese":
setJapanese();
break;
}
アプリケーション起動時にロケールから言語を判別し自動的にローカライズさせたい場合には、
Worklight の初期化処理の中でロケールを取得し、取得したロケールを引数に languageChanged
関数を呼び出します。
function wlCommonInit(){
$('#languages').on('change', languageChanged);
var locale = WL.App.getDeviceLocale();
var lang = WL.App.getDeviceLanguage();
WL.Logger.debug(">> Detected locale: " + locale);
WL.Logger.debug(">> Detected language: " + lang);
if (locale.indexOf("en")!=-1) languageChanged("english");
if (locale.indexOf("fr")!=-1) languageChanged("french");
if (locale.indexOf("ru")!=-1) languageChanged("russian");
if (locale.indexOf("he")!=-1) languageChanged("hebrew");
if (locale.indexOf("ja")!=-1) languageChanged("japanese");
}
- 15-
2-5. Apache Cordova の Globalization API
Cordova グローバリゼーション API は、JavaScript フレームワークのグローバリゼーションとは少し目
的が異なります。JavaScript フレームワークのようにアプリケーション中のテキストを置き換えるのでは
なく、モバイル・デバイス固有の情報を取得することを目的としています。モバイル・デバイス固有の情
報には、言語だけでなく、日付や時間形式、通貨形式、数値形式などがあります。
例えば、次のコードでは Cordova で提供される nativator.globalization.dateToString ではデバイス
の言語設定に応じた国（地域）の日付を取得します。
function getDateString() {
var g11n = navigator.globalization;
g11n.dateToString(
new Date(),
function (date) {
alert('date: ' + date.value + '¥n');
},
function () { alert('Error getting dateString¥n'); },
{ formatLength: 'short', selector: 'date and time' }
);
};
同じソース・コードと同じデバイスでも設定により言語を変更すると日付のフォーマットが異なることが
確認できます。
- 16-
デバイスの設定から
言語を英語に変更
- 17-
2-6. Worklight システム・メッセージの翻訳
システム・メッセージとは、Worklight のクライアント・ランタイム内で用意されているダイアログなどのメ
ッセージを指します。開発者が作成する UI 部品ではなく、Worklight が製品レベルで準備している UI
部品やダイアログに表示されるテキスト・メッセージで、例えばダイレクト・アップデートが可能な場合に
ユーザーに表示されるメッセージなどが該当します。
日本語環境 英語環境
これらのシステム・メッセージ Worklight V6.1 から日本語を含め 11 種類の言語向けに多言語対応の
リソース・ファイルが定義済みです。
Android 環境の場合は、メッセージは以下から確認可能です。
<アプリケーション・パス>/android/native/assets/www/default/worklight/messages/<ロケール名
>/messages.json
同様に iphone 環境の場合は、以下で確認できます。
<アプリケーション・パス>/iphone/native/www/default/worklight/messages/<ロケール名
>/messages.json
- 18-
日本語用のシステム・メッセージのリソース・ファイル
先ほど例に挙げたダイレクト・アップデートのダイアログでは、タイトル部分・メッセージ本体・ボタンのラ
ベルの 3 か所でこの messages.json で定義されたメッセージ項目を使用しています。
"directUpdateNotificationTitle" : "利用可能な更新があります",
"directUpdateNotificationMessage" : "アプリケーションの更新が利用可能です (ファイル・サイズ
{0} MB)。",
"update" : "更新",
Worklight のクライアント・ランタイムが初期化時にデバイスのロケール情報に合致したメッセージ・リソ
ースを読み込んで UI 部品のメッセージとして使用するため、アプリケーション開発者はサポートされて
いる言語に関する国際化対応は特に意識する必要はありません。
逆にユーザー・インターフェースに対する要求に応じて、これらの文字列を変更することは可能です
が、messages.json ファイルを直接編集しても Worklight のビルド時に自動的に上書きされるため、こ
のファイルを直接編集せずアプリケーション内で保持されているテキストを上書きしなくてはいけませ
ん。
この messages.json ファイルで定義されている文字列は WL.ClientMessages というグローバル・オ
ブジェクトに保持されています。アプリケーション内で上書きする際には messages.json ファイルのキ
ー項目を参考にして例えば次のように変更します。
function wlCommonInit(){
//ダイレクト・アップデートのボタンのラベルを「更新」から「今すぐ更新」へ変更
WL.ClientMessages.update = "今すぐ更新";
}
- 19-
日本語環境のみを対象とする場合はこれで問題ありませんが、アプリを国際化対応させる前提で考え
た場合は、2-4 で紹介したような方法でロケール情報を元にして WL.ClientMessages オブジェクトを
上書きする必要があります。
WL.ClientMessages オブジェクトの初期化タイミング
Worklight6.1 から WL.ClientMessages オブジェクトが Worklight クライアント・フレームワーク
の初期化シーケンスの中で行われるように変更されています。そのため、ここでは
wlCommonInit 関数内で WL.ClientMessages オブジェクトの変更を行うように記述していま
す。
そのため、初期化オプションで connectOnStartup : true と設定しているケースにおいて、ア
プリケーション初期化時にダイレクト・アップデートや遠隔無効化などを検出すると、ユーザ
ーコードによる WL.ClientMessages オブジェクトの変更前（wlCommonInit 関数実行前）にそ
れらのダイアログが表示されてしまう点に注意してください。
なお、現在は connectOnStartup を false に設定することが推奨されているため、アプリ初期
化時に Worklight サーバーへの接続を行う必要がある場合には、WL.ClientMessages オブ
ジェクトの変更後に WL.Client.connect()を実行するようにすると、ダイレクト・アップデートな
どのダイアログは変更したメッセージで表示されます。
- 20-
2-7. Worklight アプリ管理機能でのメッセージの国際化
遠隔無効化やメッセージ通知といった Worklight のアプリ管理機能を利用する際に、Worklight
Console から設定するメッセージも多言語対応しています。以下の「Active, Notifying」ないしは、
「Access Disabled」を設定している場合、該当アプリから Worklight サーバーに接続すると、定義し
たメッセージを含んだダイアログを表示します。
状態 動作
Active 通常の状態
Active, Notifying 起動時またはフォアグラウンド遷移時にメッセージ通知が行われる
アプリケーションは利用可能
Access Disabled Worklight サーバーへのアクセスが不可。メッセージ通知が行われる。
Worklight の認証や、アダプターを使用したバックエンド接続は行えない
新しいアプリケーションへの URL を指定可能
このメッセージを定義する場合、通常は Worklight Console のテキスト・ボックスにメッセージ入力しま
すが、この場合は入力したメッセージがそのままアプリケーション上で表示されます。
- 21-
多言語を前提としてアプリでこのアプリ管理機能を利用する際には、該当する言語に合わせてメッセ
ージを表示させる必要があります。複数の言語のメッセージを定義する場合には、CSV 形式のファイ
ルにて各言語用のメッセージ定義を用意しておき、Worklight Console からアップロードすることで登
録します。
１． メッセージを設定する Environment、バージョンを選びます。
ここでは、Active, Notifying を使用します。「Enter messages for multiple languages」のリンクをクリ
ックします。
２． 用意しておいたメッセージ定義の CSV ファイルをアップロードします。
- 22-
Upload CSV ボタンからファイルをアップロードします。
アップロードする CSV ファイルは以下のように作成しておきます。
基本的な書式は<locale>, <message> です。以下の例の 1 行目のように Locale 部分を省略したも
のは Worklight Console 上に直接入力するメッセージと同様なデフォルト・メッセージとして扱われま
す。
,Planned outage 22:00-02:00 (JST)
en, Planned outage 22:00-02:00 (JST)
ja, システム・メンテナンス予定 22:00-02:00 (JST)
CSV ファイルの拡張子
ここでアップロードするファイルの拡張子は.csv である必要があります。ファイルの内容が
csv ファイルであったとしても、ファイルの拡張子が.csv でない場合はアップロードできませ
ん。
- 23-
３． メッセージ内容を確認します。
Supported Languages を選択すると、Translation の項目にその言語で定義したメッセージが表示さ
れます。問題がなければ、Save し、定義を終えます。
この状態でアプリケーションから Worklight サーバーに接続すると、それぞれの言語設定に応じて表
示されるメッセージが変わります。
- 24-
- 25-
3. 国際化対応における Tips と考慮点
3-1. アプリケーション名の変更
アプリケーション内のテキストだけではなく、デバイスのホーム画面でのアプリケーション名の表記を日
本語環境の場合は日本語名、英語環境の場合は英語名に変更する方法は Android や iOS 環境の
ネイティブ・アプリケーションと同様の方法で変更する必要があります。
■Android 環境の場合
Android ではネイティブ環境での文字列置き換え用に各言語に応じた strings.xml ファイルに外部化
する仕組みを提供しています。アプリケーションの表示名などもこれらのファイルに外部化されている
ため、このファイルを編集する必要があります。
この strings.xml ファイルは以下の Android Project のディレクトリに存在します。
「<AndroidNativeprojectName>/res/values」
- 26-
このうち value/string.xml がデフォルトの定義で、ここでは英語環境用のメッセージ定義が行われてい
ます。日本語用のメッセージは value-ja/string.xml に定義されています。
Worklight でハイブリッド・アプリケーションをビルドした際、Worklight が提供するネイティブの GUI 部
品に対する言語を定義しています。メッセージ項目の AppName がアプリケーションの表示名に相当
します。
ここでは、日本語環境用のアプリ名として、「国際化対応サンプル」を定義します。
日本語環境用の strings.xml ファイル
- 27-
同様に、英語環境用には「G11N Sample」として定義します。
英語環境用の strings.xml ファイル
このアプリをデバイスにインストールすると、以下のように見ることができます。
日本語環境では、上から 3 行目、左から 2 列目にこのアプリのアイコンが表示されています。英語環
境では、上から 3 行目、左から 4 列目にこのアプリのアイコンが表示されています。strings.xml にて
定義した AppName の値がアプリ名として表示されていることわかります。
- 28-
OS の言語が日本語の場合 OS の言語が English の場合
■iOS 環境の場合
iOS ではネイティブ環境での文字列置き換えをするために、Bundle の仕組みを提供しています。ア
プリケーション表示名を入れ替えるにはこの仕組みを利用して、対応する言語に応じたアプリケーショ
ン名を定義する必要があります。Xcode 上で Resouces の下にリソース・ファイル（ここでは、
InfoPlist.strings ファイル）を追加し、Localizations の設定に English と Japanese のリソース・ファイ
ルを定義します。
- 29-
リソース・ファイル内でアプリケーション名を指す「CFBundleDisplayName」に対する値を定義します。
日本語環境用の InfoPlist.strings ファイル
英語環境用の InfoPlist.strings ファイル
このアプリをデバイス上にインストールすると、以下のように表示されます。
- 30-
OS の言語が日本語の場合 OS の言語が English の場合
Xcode 上での詳細な手順
iOS 環境に対する Xcode 上でのリソース・ファイルの作成、および、Localizations への定
義の詳細手順については当ガイドの 4-3 に参考資料として記述しています。
- 31-
3-2. アプリケーション設計に関する考慮点
アプリケーションの設定/開発にあたって検討したほうがよい項目を以下に挙げます。具体的な設計方
針や実装方法については、個別の要件を加味して検討してください。
■ 言語や単位の切り替え
アプリケーション内で表示する言語の切り替えをどのように実現するかについては、大きく 2 種類の実
装方法が考えられます。1 つは Worklight の API や Cordova の API を使用して Locale 情報を取得
して判別する方法、もう 1 つはアプリケーション内の設定項目でユーザーが設定できる項目とすること
です。
Worklight の国際化対応の仕組みから考えた場合のメリットと考慮点は以下のように整理できます。
メリット 考慮点
デ バ イ ス の
Locale 情報
からの判別
・Worklight のクライアント・フレームワークも
同じ仕組みで言語を特定しているため、UI
の言語の一貫性を確保しやすい。
・設定を変更するためには、OS レベル
で言語設定を切り替える必要があるた
め、言語の切り替えに手間がかかる。
アプリ内設定
項目によるユ
ー ザ ー の 設
定
・アプリの設定画面などの Select メニュー
などで、簡単に UI の言語設定を切り替えら
れるように作ることができる。
・Worklight が提供している UI 部品の
メッセージとアプリ内で使用しているメ
ッセージの言語がずれる可能性があ
る。
通常はデバイスを使用するユーザーが使いやすい言語で OS の言語設定を行っていると予想される
ため、Locale 情報からの判別で実装すればよいと考えられます。
アプリの利用シーン上、デバイスを複数人でシェアする、ないしは一時的に他人にアプリを使わせると
いった使い方が前提となるケースでは、簡単に言語設定を切り替えられるほうが望ましい場合もあり得
ます。
一方、通貨や単位（メートルとインチ、摂氏と華氏など）表記についてはどのように取り扱うかも考えて
おく必要があります。言語と異なり、アプリケーション内で保持するデータとして複数の単位に対応し
ているケースであれば、システムとしてのデフォルトを持ちつつ、ユーザー設定により好ましい表記で
表示可能とするほうがユーザーにとっては使いやすいアプリになると言えます。
また、コンテンツとしてアプリ本体だけでなく InAppBrowser を使用して外部 Web サイトを表示するよ
うな場合には、外部の Web サイトがどのような仕組みとなっているかにも注意が必要になります。
InAppBrowser からの HTTP リクエストには Accept-Language ヘッダーにデバイスの Locale 情報が
付与されます。そのため、コンテント・ネゴシエーションで返すリソースの言語表記を切り替えている
Web サイトにアクセスする場合にはデバイスの言語設定で指定している言語のリソースを取得するこ
とになります。逆にリソースの言語を URL で分けているような Web サイトにアクセスする場合には、
InAppBrowser に渡す URL を言語設定に合わせて変更する必要があるでしょう。
- 32-
■ スタイルの調整
日本語と英語の間でも同じ言葉を表現するための訳語の文字列長が変わってくるケースが多いため、
UI デザイン上、翻訳した言葉がうまく表示できるかを考慮する必要があります。
また、対応しなければいけない言語によっては、左から右ではなく、右から左に記述する言語が含ま
れる可能性もあります。
右から左に記述する言語への対応
CSS の direction を使用してヘブライ語の表記に対応している例が Getting Started の「翻訳
の使用可能化」 P.12 に記載されていますので参考にしてください。
■ 画像使用時の注意
様々なアイコンを利用して UI デザインを行う場合、画像ファイル内に言語に依存したメッセージを含
まないようにするほうが望ましいです。1-2 で国際化対応アプリの例として、Application Center のクラ
イアント・アプリを取り上げましたが、このアプリでもアイコンとメッセージを分離して設計しています。画
面下部の「カタログ」、「お気に入り」、「更新」という 3 つのボタンは、それぞれアイコンを画像ファイルと
して、「カタログ」などのメッセージ部分はデバイスのロケールに応じて切り替え可能なリソースとして定
義しています。
- 33-
■ 表記順序や項目の違い
住所や氏名、電話番号、通貨、日付と時間などは国（地域）によって表記順や必要とされるフィールド、
フォーマットが異なるため、表示や入力用フィールドを作成する際に注意が必要となります。Dojo の
UI 部品や Cordova の Globalization API を使用する場合には対応可能なものもありますが、住所や
電話番号などに関しては、独自に変換ロジックを実装するか、言語ごとにそれぞれのテキスト全文を
テーブルとして保持するなどの対応が必要となってきます。
例えば住所を例に挙げると、日本では一般的に以下のような表記順です。
「都道府県」、「市区町村」、「町域・番地」、「建物」
一方 US では、次のような表記順となります。
"Address1", "Address2", "City", "State"
住所に関する入力フォームを実装する場合に、Postal Code による入力補完はモバイル・アプリでの
入力の手間を減らすためには有効と考えられますが、複数の国や地域を前提にする場合にはそれぞ
れごとにデータを用意し、切り替えられるようにすることが必要です。
氏名については姓と名の順序の違いだけでなく、データ項目レベルで異なる可能性が高いと考えら
れます。日本ではフリガナを必要とすることが多く、一方別の言語圏ではミドルネームや肩書を必要と
することもあります。
日付・時刻に関しては、表記の順序の差異だけでなく、タイムゾーンの扱いを決定する必要がありま
す。基本的な方針としてはデータ項目としては UTC で保持しつつ、表示や入力の場合にタイムゾー
ンを付与した処理を実装することが考えられます。また言語やロケールだけではタイムゾーンを判別し
きれないことも想定して、アプリケーションのユーザー設定でユーザーが設定できるようにするかどうか
を決める必要があります。
通貨に関しては、Dojo や Cordova でフォーマット変換の機能が提供されますが、それだけでは不十
分な場合があります。例えば、1 つの商品について複数の通貨で金額表示を切り替える場合、通貨ご
との金額、つまり表示される値は異なります。金額のデータの扱い方として、以下の2つの方法が考え
られます。
1. 複数の通貨ごとに金額を保持
通貨の切り替えを行う際に、その通貨に応じた価格を、JavaScript の配列から通貨をキーにして
取得する方法やデータベース・テーブルなどから Worklight アダプターや Ajax で取得する方法
が考えられます。この方法の場合、一度、各通貨で金額を決めると、為替レートの変動や金額変
更の際に、各通貨データの変更が必要となりメンテナンスが複雑になります。
2. ベースとなる通貨とその金額を設定し、別の通貨はレートから金額を算出。
- 34-
1 つの通貨のみ金額を決め、アプリケーションを操作している時点の為替レートから別の通貨の
金額を計算します。
金融商品を扱うサイトや EC サイトなどの商品価格を変換する必要があるアプリケーションでは、レ
ートを取得する頻度も重要な要素になります。
■ Worklight での制限事項
Worklight でのグローバリゼーションにおける既知の制限が以下の文書にまとめられています。
バージョンによって異なりますので対象のバージョンの KnowledgeCenter（InfoCenter）を確認してく
ださい。
既知の制限
http://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.1.0/com.ibm.worklight.getstart.d
oc/start/c_known_limitations.html?lang=ja
- 35-
4. 参考
4-1. Android Emulator のロケールをコマンドラインで変更する方法
Android Emulator の言語設定をコマンドラインから変更することで、多言語に対応したアプリケーシ
ョンのテストを簡単に実行できるようになります。Emulator の Android OS 上の設定から言語を切り替
える場合と同様の動作ですが、GUI での操作が不要になります。
1．adb のシェルを起動します。
$ adb shell
2. シェルが起動したら、言語と国を指定するコマンドを実行し、Emulator を再起動させます。
日本語にする場合は以下のように、persist.sys.language に ja、persist.sys.country に JP を指定し
ます。（改行せず 1 行で入力します）
root@generic_x86:/ # setprop persist.sys.language ja;setprop persist.sys.country
JP;stop;sleep 5;start
英語（United States）にする場合は以下のように、persist.sys.language に en、persist.sys.country
に US を指定します。（改行せず 1 行で入力します）
root@generic_x86:/ # setprop persist.sys.language en;setprop persist.sys.country
US;stop;sleep 5;start
Emulator が自動的に再起動し、言語設定が変更されます。
- 36-
4-2. Xcode 上からアプリを実行する際に実行時引数でロケールを指
定する方法
複数言語のテストをする上で、iPhone Simulator 上の設定で OS の設定から言語を変更せずに、ア
プリケーションの実行時引数でロケールを変更する方法を紹介します。この方法を利用すると、
Xcode からのアプリ起動の場合に限定されますが、指定したロケールでアプリを起動できるためテスト
を効率的に実施することができます。
１．スキーマをクリックします。（キャプチャーの□で囲った部分）
2．Edit Schema を選択します。
- 37-
3．「Arguments Passed on Launch」に次の 2 つの引数を指定します。
-AppleLanguage(en)
-AppleLocale en_US
この状態で起動すると、iPhone Simulator の言語設定に関わらず、アプリケーションが en_US で起
動します。日本語で起動させる場合は同様に以下のように設定します。
-AppleLanguage(ja)
-AppleLocale ja_JP
また、スキーマを新規に作成して保存しておくことで、複数の起動時引数を保存しておくこともできま
す。先ほどは手順 2．でデフォルトのスキーマに対して、Edit Schema を選択しましたが、New
Schema を選択してデフォルトのスキーマとは別に英語用、日本語用を作成しておくとより簡単に実
行時引数の切り替えができるようになります。
以下の画面では、「GlobalizationTestG11NAppIphone」というデフォルト・スキーマに対して新しいス
キーマを作成し、英語用の実行時引数を定義したものを enUS、日本語用の実行時引数を定義した
もの jaJP と名前を付けた状態です。Xcode からアプリを実行する際に作成済みのスキーマを指定す
るだけで、実行するロケールを切り替えることができます。
- 38-
- 39-
4-3. Xcode 上でのリソース・ファイルの追加手順
ここでは 3-1 アプリケーション名の変更で紹介した、iOS 環境でのリソース・ファイルの追加手順につ
いてステップ・バイ・ステップで紹介します。
１． Resources を Finder で開く
２． Finder で、フォルダーを作成する
<Worklight_AppName>/iphone/native のサブフォルダ―として、「en.lproj」と「ja.lproj」を作成す
る。
- 40-
３． Xcode に戻ってリソース・ファイルの作成
コンテキスト・メニューの New File.. などでファイルを新規作成する。
- 41-
４． strings ファイルの作成
ファイルタイプに Strings File があるので、選択して Next
５． 名前と保存場所を指定する
ファイル名（Save As）を InfoPlist.stringsとし、保存場所として、先ほど作成した「en.lproj」が選択され
ていることを確認する。「Create」する
- 42-
６． プロジェクトの Info.plist に別ロケールを追加する
ここまでの手順で追加された基本となるリソース・ファイルを元に別の言語環境にも同様の定義を作成
します。
プロジェクトの info タブを開くと、Localization の項目があります。
ここで、Language に English が表示されており、Resources に 1 File Localized と表示されているこ
とを確認します。
下にある ＋ をクリックします。
７． 日本語のリソースを追加
リストで Japanese(ja)を選択する
８． 元にするリソース・ファイルを選択する
先ほど作成した、InfoPlist.strings ファイルの English 用に作成したものを選択し、Finish します。
- 43-
９． 定義が追加されたことを確認する
Language Japanese に対して、1 File Localized と表示されていることを確認します。
また、左のペインで、InfoPlist.strings が展開できるようになっており、英語用、日本語用のリソース・フ
ァイルが表示できることを確認します。
以上で、多言語に対応するためのリソース・ファイルが追加できました。
- 44-
4-4. 参考文献
IBM Worklight 製品情報
http://www.ibm.com/software/jp/websphere/mobile-solutions/worklight/
developerWorks ： IBM Worklight 技術情報一覧
http://www.ibm.com/developerworks/jp/websphere/category/mobile/
IBM Worklight V6.1.0 Knowledge Center
http://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.1.0/wl_welcome.html?lang=ja
Getting started with IBM Worklight （日本語版）
http://www.ibm.com/developerworks/jp/websphere/category/mobile/getting-started.html
Dojo Documentation ： dojo/i18n
http://dojotoolkit.org/reference-guide/1.10/dojo/i18n.html
Dojo Documentation ： Internationalization (i18n)
http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/internationalization.html#dojox-mobile-
internationalization
Dojo Documentation ： Cultural conventions: Date, Number and Currency
http://dojotoolkit.org/reference-guide/1.10/quickstart/internationalization/number-and-currency
-formatting.html#id2