JavaScript (Cordova、Web) アプリケーションのマルチリンガル・トランスレーション
improve this page | report issue概説
IBM Mobile Foundation フレームワークを使用すると、JavaScript (Cordova、Web) アプリケーションに他言語へのマルチリンガル・トランスレーションを追加できます。
翻訳可能な項目は、アプリケーション・ストリングとシステム・メッセージです。
ジャンプ先:
アプリケーション・ストリングの翻訳
翻訳することが予定されたストリングは、「Messages」と呼ばれるJSON
オブジェクトに保存されます。
- MobileFirst SDK を使用した Cordova アプリケーションでは、このオブジェクトは、次のような Cordova アプリケーションの index.js ファイル内にあります。[cordova-project-root-directory]/www/js/index.js
- Web アプリケーションでは、このオブジェクトを追加する必要があります。
JSON オブジェクト構造の例
var Messages = {
headerText: "Default header",
actionsLabel: "Default action label",
sampleText: "Default sample text",
};
Messages JSON
オブジェクトに保存されたストリングは、アプリケーションのロジックにおいて次の 2 つの方法で参照することができます。
JavaScript オブジェクト・プロパティーとして参照する場合:
Messages.headerText
class="translate"
を持つ HTML エレメントの ID として参照する場合:
<h1 id="headerText" class="translate"></h1>
システム・メッセージの翻訳
「インターネット接続が使用できません」や「ユーザー名またはパスワードが無効です」など、アプリケーションが表示するシステム・メッセージも翻訳することができます。 システム・メッセージは WL.ClientMessages
オブジェクト内に保管されます。
注: 一部のコードはアプリケーションの初期化が正常に完了して初めて実行されるため、システム・メッセージはグローバル JavaScript レベルでオーバーライドしてください。
Web アプリケーション
システム・メッセージの完全なリストは、[project root folder]\node_modules\ibm-mfp-web-sdk\lib\messages\ フォルダーに配置されている messages.json
ファイル内にあります。
Cordova アプリケーション
システム・メッセージの完全なリストは、生成されたプロジェクト内に配置されている messages.json
ファイル内にあります。
- Android:
[Cordova-project]\platforms\android\assets\www\plugins\cordova-plugin-mfp\worklight\messages
- iOS、Windows:
[Cordova-project]\platforms\[ios or windows]\www\plugins\cordova-plugin-mfp\worklight\messages
システム・メッセージを翻訳するには、アプリケーション・コード内でそのシステム・メッセージをオーバーライドします。
WL.ClienMessages.loading = "Application HelloWorld is loading... please wait.";
複数言語翻訳
JavaScript を使用して、アプリケーションの複数言語の翻訳を実装できます。
以下に、このチュートリアルのサンプル・アプリケーションの実装手順を示します。
-
デフォルトのアプリケーション・ストリングを
index.js
ファイルにセットアップします。var Messages = { headerText: "Default header", actionsLabel: "Default action label", sampleText: "Default sample text", englishLanguage: "English", frenchLanguage: "French", russianLanguage: "Russian", hebrewLanguage: "Hebrew" };
-
必要に応じて特定のストリングをオーバーライドします。
function setFrench(){ Messages.headerText = "Traduction"; Messages.actionsLabel = "Sélectionnez une langue:"; Messages.sampleText = "Ceci est un exemple de texte en français."; }
-
GUI コンポーネントを新しいストリングで更新します。 右から左に読む言語 (ヘブライ語やアラビア語など) 用にテキスト方向を設定するなど、追加のタスクを実行できます。 エレメントは、更新されるたびに、アクティブな言語に従って異なるストリングで更新されます。
function languageChanged(lang) { if (typeof(lang)!="string") lang = $("#languages").val(); switch (lang) { case "english": setEnglish(); break; case "french": setFrench(); break; case "russian": setRussian(); break; case "hebrew": setHebrew(); break; } if ($("#languages").val()=="hebrew") $("#wrapper").css({direction: 'rtl'}); else $("#wrapper").css({direction: 'ltr'}); $("#sampleText").html(Messages.sampleText); $("#headerText").html(Messages.headerText); $("#actionsLabel").html(Messages.actionsLabel); }
デバイスのロケールおよび言語の検出
デバイスまたはブラウザーで使用されている言語を検出するには、以下のようにします。
Web アプリケーション
navigator.language
または任意の数の使用可能なフレームワークおよびソリューションを使用して、ブラウザーの言語を検出します。
Cordova アプリケーション
Cordova のグローバリゼーション・プラグインである cordova-plugin-globalization
を使用して、デバイスのロケールおよび言語を検出します。
このグローバリゼーション・プラグインは、任意のプラットフォームを Cordova アプリケーションに追加したときに自動的にインストールされます。
ロケールを検出するには navigator.globalization.getLocaleName
関数、言語を検出するには navigator.globalization.getPreferredLanguage
関数を使用します。
navigator.globalization.getLocaleName(
function (localeValue) {
WL.Logger.debug(">> Detected locale: " + localeValue);
...
...
...
},
function() {
WL.Logger.debug(">> Unable to detect locale.");
}
);
navigator.globalization.getPreferredLanguage(
function (langValue) {
lang = langValue.value;
WL.Logger.debug(">> Detected language: " + lang);
},
function() {
WL.Logger.debug(">> Unable to detect language.");
}
);
結果は、デバイスのログ、例えば Android Studio の LogCat などで、次のように確認できます。
サンプル・アプリケーション
ここをクリック して Cordova プロジェクトをダウンロードします。
サンプルの使用法
サンプルの README.md ファイルの指示に従ってください。
▲ヒント: Android の LogCat は、アプリケーションの実行中に Android Studio の LogCat コンソールで調べることができます。