Konyで端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法

Last updated at 2020-12-15Posted at 2020-12-15

#目次

はじめに
実装方法
まとめ

#はじめに
アプリを開発する際に日本語だけでなく英語や他の言語も表示することで、より使いやすくなるのではないでしょうか。
そこで、今回は端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法について紹介します。

#実装方法
①Internationalization(i18n)の設定
Internationalizationは、さまざまな地域で複数の言語をサポートします。i18nと略されます。
詳細はこちらの記事をご覧ください。

Kony Internationalization API (i18n)
https://qiita.com/Kony_Team/items/f71fcc3428d7b32c8120

今回は2つ、このように設定しました。
言語：English(en),Japanese(ja)

Key	en	ja
BTN.LOCALE	Change to Japanese	英語に変更
LBL.TITLE	Hello, World!	こんにちは、世界

②画面の作成
今回はこのように作成してみました。
下のボタンを押すことで日本語と英語が切り替わるイメージです。

なお、lblTitleとbtnLocaleにはText i18n Keyを適用しています。
lblTitle：LBL.TITLE

btnLocale：BTN.LOCALE

③Controllerの設定
では、frmLocaleControllerにアクションを設定していきます。

frmSampleController.js

define(function(){
  return{
    // 画面内で設定した言語を取得
    setting_language : null,
    
    // 最初に端末内の言語設定を取得し、それに合わせてbtnLocaleのtextを設定
    init : function(){
      var locale = kony.i18n.getCurrentDeviceLocale();
      this.setting_language = locale.slice( 0, 2 );
      this.view.btnLocale.text = kony.i18n.getLocalizedString("BTN.LOCALE");
    },

    // btnLocaleを押すと、動的に言語を変更
    onClickSetLocale : function(){
      if(this.setting_language == `en`){
        kony.i18n.setCurrentLocaleAsync("ja", this.setText(this.setting_language), this.onfailurecallback);
        return;

      }else if(this.setting_language == `ja`){
        kony.i18n.setCurrentLocaleAsync("en", this.setText(this.setting_language), this.onfailurecallback);
        return;
    },
    
    // lblTitleとbtnLocaleのtextをセット
    setText : function(setting_language){
      this.view.lblTitle.text = kony.i18n.getLocalizedString("LBL.TITLE");
      this.view.btnLocale.text = kony.i18n.getLocalizedString("BTN.LOCALE");
      
      if(setting_language == `en`){
        this.setting_language = `ja`;
      }else if(setting_language == `ja`){
        this.setting_language = `en`;
      }
    },
  };
});

簡単に説明します。
setting_language：端末内の言語とは別にアプリ内で今設定している言語をここに保持します。
kony.i18n.getCurrentDeviceLocale：デバイスの設定している言語を取得します。戻り値として言語,国,名前が返ってきます。
※iOSプラットフォームでは、このAPIは文字列値を返します。なので、ここでは最初の２文字を取得して、setting_languageとして設定しています。
その他のプラットフォームでは、テーブルとして返ってきます。
kony.i18n.setCurrentLocaleAsync：指定したロケールをアプリケーションの現在の言語として設定します。

Controllerでアクションの作成が完了したら、
以下のアクションの紐付けを行いましょう。
frmLocale > Action > init > Edit
アクションメニューでInvoke Functionを選択し、initを設定しましょう。

btnLocale > Action > onClick > Edit
アクションメニューでInvoke Functionを選択し、onClickSetLocaleを設定しましょう。