ionicで多言語に対応したアプリは簡単に作成できます

ハイブリッドアプリで言語を自動切替えできるの？

ネイティブであれば、アプリの多言語化は比較的容易です。
しかしハイブリッドアプリでは、もともとブラウザで動かす仕組みのため、多言語化する仕組みがありません。
ちなみに多言語化のことを、internationalization略してi18nというそうです。
言語ごとにアプリを開発すれば良いのでしょうが、手間も管理も大変なことになります。

angular-translateを使って解決！

あなたのスマホアプリ開発環境が、ionicの開発であればプラグインを利用するのが一番簡単です。
使用するプラグインは２つ。早速ターミナルから以下のコマンドを入力します

bower install angular-translate

※angular-translateは、画面上に表示する文字を他の言語（英語や中国語など）に切り替えます。

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

※globalizationは、ユーザの利用している端末の言語情報を取得します。

angular-translateとglobalizationを組み合わせることで、ユーザ端末に最適な言語へ切り替えることが可能になります。

プラグインの確認

プラグインをインストールしたら、確認してください。
angular-translateは、/www/lib/angular-translate　という形で保存されます。
この中のangular-translate.min.jsを使います。
angular-translate.min.jsを、/www/js/の中にコピーして使用します。
globalizationこちらは /plugins/cordova-plugin-globalizationが追加されていればOK。

使用前準備

必要なプラグインをインポートしていきます

index.htmlへ記述

cordova.jsを読み込む前に書いて下さい。

<!-- i18n 多言語対応 -->
<script src="js/angular-translate.min.js"></script>

app.jsへ記述

angular.module('starter', ['ionic','ngCordova' , 'pascalprecht.translate'])

globalizationですが、ngCordovaで利用可能なので、設定をお忘れなく。ngCordovaについては
ngCordovaマニュアルを参照して下さい。

実装編

.config内で、言語情報を書いておきます

.config(["$translateProvider" , function($translateProvider) {
  //多言語対応
  $translateProvider.translations('en', {
    setting_title: "Setting",
    setting_vi:"Vibration",
    setting_sound:"Sound"
  });
  $translateProvider.translations('ja', {
    setting_title: "設定",
    setting_vi:"振動",
    setting_sound:"音"
  });

  $translateProvider.preferredLanguage("en");
  $translateProvider.fallbackLanguage("en");

‘en’とか、’ja’とかが言語です。
setting_＊＊＊＊がラベルで、それに対する文字を : で繋いで書き込みます。

アプリ起動時に端末の言語情報を取得し、指定した言語データの使用に切り替える処理

.run(["$ionicPlatform", "$translate" , 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) {
            //成功
        }, function(error) {
            //失敗
        });
      }, null);
    }

.runの中に記述します。これで、起動時に en　とか　ja とかどちらを使うか切り替わります。

htmlの方を見てみると、次のような書き方になります

<h1 class="title">{{"setting_title" | translate}}</h1>

簡単ですね。setting_titleが、言語によって「設定」になったり「setting」になったりします。

alertやconfirmでの多言語化

alertやconfirmなどは、やりかたが異なります。

.controller('settingCtrl', ["$scope", "$translate", function($scope , $translate) {
  $scope.showAlert = function(){
    var message = $translate.instant('setting_title' );
    alert(message);
//後略

$translate.instantメソッドの引数に、取得したい言語情報タグを指定すると自動で使用中の言語の文字を引っ張ってきます。
それを変数に格納して、使いましょう