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

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

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

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

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

今回は2つ、このように設定しました。
言語：English(en),Japanese(ja)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/77300a05-6629-62bd-68e6-46b2473d29be.png)

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

**②画面の作成**
今回はこのように作成してみました。
下のボタンを押すことで日本語と英語が切り替わるイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/687800b0-8b94-fde8-998d-a6ea5f6e0e97.png)

なお、`lblTitle`と`btnLocale`には`Text i18n Key`を適用しています。
`lblTitle`：`LBL.TITLE`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8d503285-ff7b-272f-52c5-fe3481cf0458.png)
`btnLocale`：`BTN.LOCALE`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/91cd52cd-76f0-93ed-f09d-6c7215b5e42b.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は文字列値を返します。なので、ここでは最初の２文字を取得して、`setting_language`として設定しています。
その他のプラットフォームでは、テーブルとして返ってきます。
`kony.i18n.setCurrentLocaleAsync`：指定したロケールをアプリケーションの現在の言語として設定します。

Controllerでアクションの作成が完了したら、
以下のアクションの紐付けを行いましょう。
`frmLocale` > `Action` > `init` > `Edit`
アクションメニューでInvoke Functionを選択し、`init`を設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f077c5b5-e84b-8ede-98e5-946fb90d4d0c.png)
`btnLocale` > `Action` > `onClick` > `Edit`
アクションメニューでInvoke Functionを選択し、`onClickSetLocale`を設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6b3d2c2a-a3cd-b80d-db29-79f1ab6f6286.png)

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

**④実装の確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/f3g5Hx9TRI">pic.twitter.com/f3g5Hx9TRI</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1336922990408212480?ref_src=twsrc%5Etfw">December 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

#まとめ
今回は、端末内の言語設定を取得し、アプリ内で動的に言語を変更する方法を説明しました。
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-