LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-15

目次

  1. はじめに
  2. 実装方法
  3. まとめ

はじめに

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

実装方法

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

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

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

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

なお、lblTitlebtnLocaleにはText i18n Keyを適用しています。
lblTitleLBL.TITLE
image.png
btnLocaleBTN.LOCALE
image.png

③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は文字列値を返します。なので、ここでは最初の2文字を取得して、setting_languageとして設定しています。
その他のプラットフォームでは、テーブルとして返ってきます。
kony.i18n.setCurrentLocaleAsync:指定したロケールをアプリケーションの現在の言語として設定します。

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

ここまでで、アプリ内で動的に言語を変更する設定が完了しました。
次に実際にどうなるかみていきましょう!

④実装の確認

下のボタンを押すと言語が変更されていることが分かりますね!

まとめ

今回は、端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法を説明しました。
Konyでしたら、端末内の言語設定を取得しアプリ内で変更することが可能です:grinning:
ぜひ試してみてください:wave:

参考

Internationalization APIの説明:
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/Default.htm#internationalization.htm%3FTocPath%3DInternationalization%2520API%7C_____0

kony.i18n Namespaceの説明:
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.i18n_functions.htm#getcurrentdevicelocale

Q&A:
https://basecamp.temenos.com/s/question/0D56A00001F5BErSAN/how-to-get-current-device-language-and-change-the-text-dynamically-using-internationalization-

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0