#目次
- はじめに
- 実装方法
- まとめ
#はじめに
アプリを開発する際に日本語だけでなく英語や他の言語も表示することで、より使いやすくなるのではないでしょうか。
そこで、今回は端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法について紹介します。
#実装方法
①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にアクションを設定していきます。
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
を設定しましょう。
btnLocale
> Action
> onClick
> Edit
アクションメニューでInvoke Functionを選択し、onClickSetLocale
を設定しましょう。
ここまでで、アプリ内で動的に言語を変更する設定が完了しました。
次に実際にどうなるかみていきましょう!
④実装の確認
— Kony (@Kony12763790) December 10, 2020
下のボタンを押すと言語が変更されていることが分かりますね!
#まとめ
今回は、端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法を説明しました。
Konyでしたら、端末内の言語設定を取得しアプリ内で変更することが可能です
ぜひ試してみてください
#参考
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