JavaScript (Cordova、Web) アプリケーションのマルチリンガル・トランスレーション

概説

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 コンソールで調べることができます。

▲

Last modified on February 28, 2020