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 を使用して、アプリケーションの複数言語の翻訳を実装できます。
以下に、このチュートリアルのサンプル・アプリケーションの実装手順を示します。

  1. デフォルトのアプリケーション・ストリングを index.js ファイルにセットアップします。

    var Messages = {
         headerText: "Default header",
         actionsLabel: "Default action label",
         sampleText: "Default sample text",
         englishLanguage: "English",
         frenchLanguage: "French",
         russianLanguage: "Russian",
         hebrewLanguage: "Hebrew"
    };
    
  2. 必要に応じて特定のストリングをオーバーライドします。

    function setFrench(){
         Messages.headerText = "Traduction";
         Messages.actionsLabel = "Sélectionnez une langue:";
         Messages.sampleText = "Ceci est un exemple de texte en français.";
    }
    
  3. 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 April 25, 2017