KonyでiPhoneの外観モードを取得し、アプリの見た目を変更する方法

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

#はじめに
iOS13からダークモードが導入されました。
ダークモードは黒を基調とした配色なので、暗い場所でiPhoneの画面を見るときに目の負担を軽減する効果があります。
またバッテリーの電力を節約することもできます。
ダークモードに設定されている方も多いのでは無いでしょうか。
そこで今回はiPhoneの外観モード（ライトモード/ダークモード）を取得し、アプリを表示する方法についてご紹介したいと思います。

#実装方法
**①画面の作成とskinの設定**
このような画面を作成してみました。
ライトモードでは、背景色が白色、ボタン色が緑となっております。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/69c21717-7fe8-fc3b-9582-41b7973fc29e.png)

widgetには以下のskinを設定しています。

| widget名 | skin名 | skin内容 |
| ------- |  ------- | ------ |
| frmDemo | sknFrmDemo | 背景色：白 |
| btnDemo  | sknBtnDemo | 文字色：白,背景色：緑 |

**②Themeの作成と設定**
1) 左上のタブ：`Skins`になっていることを確認し、プルダウンをクリックし、`Create New Theme`をクリックしてください。
:large_blue_diamond:こちらが今回のダークモードで表示するThemeになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/23ddc453-4eb5-e10f-f0a0-9396fc396908.png)

2) 新しいThemeが作成されるため、再度プルダウンをクリックし、`Rename Current Theme`をクリックしてください。
（今回はdarkThemeとつけています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3bd6e9d6-78a4-78ab-ab5c-c74123da2b3a.png)

3) 上の二つのskinをダークモード用に設定してください。skin名は同様となります。
なお、今回はこのように設定しました。

| widget名 | skin名 | skin内容 |
| ------- |  ------- | ------ |
| frmDemo | sknFrmDemo | 背景色：グレー |
| btnDemo  | sknBtnDemo | 文字色：白,ボーダー色：白、背景色：濃いグレー |

4) `darkTheme`が選択されていることを確認して、画面の確認をしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b33a1998-0db9-678b-9f04-e7f7895817a9.png)


ダークモードではこのように表示されます。

ライトモード、ダークモードでそれぞれのテーマを作成できましたので、
次のステップでアプリの起動時に、端末の外観モードを取得し、対応しているテーマを当てはめる処理を追加していきましょう！

**③モジュールの作成**
今回は2つのモジュールを作成します。

* CmnAppManager.js：アプリの初期化時に呼び出されます。このモジュールは全てのフォームに適用できます。
* CmnChangeTheme.js：iPhoneの外観モードを取得した上でテーマ（defaultTheme/darkTheme）を呼び出し、アプリを表示させます。

1) 左上のタブが`Project`になっていることを確認し、`Modules`の右側にあるボタンをクリックしてください。
2) `New JS modules`をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/37f8837c-2192-a107-771a-b2cd52870da3.png)

3) 作成されたmoduleをリネームしてください。
（今回は `CmnAppManager` と `CmnChangeTheme` とつけています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d31f905f-4031-b464-47a8-1df6d0dff49f.png)

**④`CmnChangeTheme`の設定**
では、CmnChangeTheme.jsに設定していきます。

```CmnChangeTheme.js
  // ライトモード時（DEFAULT）、ダークモード時（DARK）にそれぞれ呼び出すTheme名を設定
  const CmnChangeTheme = function () {
    const THEME_ID = {
      DEFAULT : "default",
      DARK : "darkTheme",
  };
  
  // テーマを呼び出し、アプリに適用
  const _setCurrentThemeWrapper = function(themeString){
    kony.theme.setCurrentTheme (
      themeString,
      function() {
      },
      function(errorcode, errormessage) {
      }
    );
  };
  
  // iOSデバイスの外観モードを取得し、ステータスバーとThemeの設定を行う
  const setAppearenceStyle = function(frm) {
    if (!frm) frm = {};
    try {
      var valueAppearStyle = kony.application.getSettingValue("applicationAppearanceStyle");
      switch (valueAppearStyle) {       
        // ダークモードの場合
        case kony.application.APPEARANCESTYLE_DARK:
          frm.configureStatusBarStyle = true;
          frm.statusBarStyle = constants.STATUS_BAR_STYLE_LIGHT_CONTENT;
          _setCurrentThemeWrapper(THEME_ID.DARK);
          break;
        // ライトモードまたは不明の場合
        case kony.application.APPEARANCESTYLE_LIGHT:
        case kony.application.APPEARANCESTYLE_UNKNOWN:
          frm.configureStatusBarStyle = true;
          frm.statusBarStyle = constants.STATUS_BAR_STYLE_DEFAULT;
          _setCurrentThemeWrapper(THEME_ID.DEFAULT);
          break;
      }
    } catch (e) {
      frm.configureStatusBarStyle = true;
      frm.statusBarStyle = constants.STATUS_BAR_STYLE_DEFAULT;
      _setCurrentThemeWrapper(THEME_ID.DEFAULT);
    }
  };

  // アプリ起動中に外観モードの切り替えが行われた場合
  const setOnChangeAppearanceCallback = function(){
    kony.application.registerOnSettingsChangeCallback(
      ["applicationAppearanceStyle"],
      setAppearenceStyle
    );
  };

  return {
    setAppearenceStyle : setAppearenceStyle,
    setOnChangeAppearanceCallback : setOnChangeAppearanceCallback
  };

}();
```
上を説明します。
kony.theme.setCurrentTheme：テーマを呼び出し、アプリに適用します。
kony.application.getSettingValue：iOSデバイスの外観モードを取得します。
kony.application.registerOnSettingsChangeCallback：端末の設定が変更されている場合、registerOnSettingsChangeCallbackAPIを使用して呼び出すことが可能です。
configureStatusBarStyle：ステータスバーを表示/非表示の設定（true:表示、false:非表示）
statusBarStyle：ステータスバーのスタイルを設定できます。
→ constants.STATUS_BAR_STYLE_DEFAULT：文字色が黒色で表示されます。明るい背景（ライトモード）に適しています。
→ constants.STATUS_BAR_STYLE_LIGHT_CONTENT：文字色が白色で表示されます。暗い背景（ダークモード）に適しています。

ダークモードで表示した場合、ステータスバーの文字色がデフォルト黒色だと見えづらいため、
今回ダークモードの場合は、文字色を白色で表示するよう設定しています。

**⑤`CmnAppManager`の設定とアクションの紐付け**
では、CmnAppManager.jsにPost Appinitアクションを設定していきます。

```CmnAppManager.js
function onAppInit() {
  CmnChangeTheme.setOnChangeAppearanceCallback();
  CmnChangeTheme.setAppearenceStyle(kony.application.getCurrentForm());
}
```

Mobileのアクションメニューで`Post Appinit`をクリックしてください。
Invoke Functionを選択し、`onAppInit`を設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0a21f85f-f2f6-8d51-d396-89e575000fae.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/de2e2af5-9199-f6e7-d2bb-71f84ca34015.png)

ここまでで、iPhoneの外観モードを取得し、アプリを表示する準備が完了しました。
次に実際にどうなるかみていきましょう！

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

外観モード（ライトモード/ダークモード）によってアプリの表示が変わっていることが分かりますね！

#まとめ
今回は、iPhoneの外観モードを取得し、アプリを表示する方法を説明しました。
最近はダークモードに合わせたアプリも増えてきています。
Konyでしたら、簡単にskinのテーマを変更が可能です:sparkles:
ぜひ試してみてください:wave:


#参考
kony.theme Namespaceの説明: 
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Button_Events.htm#onClick

status barの説明：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Form_Platform_Specific_Properties.htm#statusBa

moduleの説明：
https://basecamp.temenos.com/s/article-detail/a046A000001ld96QAA/require-modules-in-kony-v8

themeとskinの説明：
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/content/Customizing_the_Look_and_Feel_with_Skins.htm

dark modeの説明：
https://basecamp.temenos.com/servlet/servlet.FileDownload?file=00P2K000014ZmETUA0