アプリの多言語対応

2017/05/04 スマホアプリ開発

仕事で作るWebアプリでは国際化が求められることは全くありませんが、スマホアプリを各ストア経由で配布するとなるとせめて英語を加えたい！ということで試してみました。

方法は幾つかあるんでしょうが、一番簡単そうなここの
CordovaプラグインのGlobalizationとangular-translateを使い、JSONファイルは使わずconfigに書き込む方法です。

angular-translateをインストール

「設定」の「JS/CSSコンポーネントの追加と削除」で検索しても出てこなかったのでここからソースをダウンロードし、angular-translate.min.jsファイルをjsフォルダの中にアップロード。
index.htmlのヘッダに参照を追加。

CordovaプラグインのGlobalizationのインストール

こちらは「設定」の「Cordovaプラグインの管理」から有効にするだけでOK。

app.jsの変更

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','pascalprecht.translate'])
.config(function($translateProvider){
            $translateProvider.translations('en', {
            hello_message: "Howdy",
            goodbye_message: "Goodbye"
        });
        $translateProvider.translations('es', {
            hello_message: "Hola",
            goodbye_message: "Adios"
        });
        $translateProvider.translations('ja', {
            hello_message: "こんにちは",
            goodbye_message: "さようなら"
        });
        //$translateProvider.preferredLanguage("en"); 
        $translateProvider.fallbackLanguage("en");
        $translateProvider.useSanitizeValueStrategy('escape','sanitizeParameters')
    })
.run(function($ionicPlatform, $translate) {
  $ionicPlatform.ready(function() {
    if(typeof navigator.globalization !== "undefined") {
        navigator.globalization.getPreferredLanguage(function(language) {
            $translate.use((language.value).split("-")[0]).then(function(data) {
                console.log("SUCCESS -> " + data);
            }, function(error) {
                console.log("ERROR -> " + error);
            });
        }, null);
    }
      
    if(window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

日本語を追加したのと、Monacaのテンプレートを利用したのと、セキュリティ云々の警告が出るので下記の行を足したくらいでほとんどお手本そのまま(^^;)。
$translateProvider.useSanitizeValueStrategy('escape','sanitizeParameters')
※お手本のコメント欄では$translateProvider.useSanitizeValueStrategy('sanitize')になっていますが、日本語使う場合は('escape','sanitizeParameters')にする必要があるようです。('sanitize')のままだと文字化けします。詳しくはこちら。

$translateProvider.preferredLanguage("en"); があると英語になってしまうのでコメントアウトしています。
自動判別させずに最初は英語で、設定で変更させるようにする場合はpreferredLanguageを使って、fallbackLanguageはコメントアウト。

使用する

    <ion-content>
        <h1>{{"hello_message" | translate}}</h1>
        <h2>{{"goodbye_message" | translate}}</h2>
    </ion-content>

実機で確認する

自動判別にCordovaプラグインを使っているので、実機でないと確認できません。
Monacaのおかげでこのあたりは非常に楽です。変更を保存した瞬間に、アプリ側が切り替わります。

シェイクでシャッフル