はじめに

NativeScript でデバイスの輝度(明るさ)を制御する方法。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 使い方
    2. 注意点
      1. その1: イベントが発火しない場合
      2. その2: シミュレータではなく実機を使う
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.5
BuildVersion:	19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.7.8

$ grep -C1 version package.json
"tns-android": {
  "version": "6.5.1"
},
"tns-ios": {
  "version": "6.5.1"
}

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────────────────┐
│ Plugin                        │ Version             │
│ @nativescript/theme           │ ^2.2.1              │
│ @vue/devtools                 │ ^5.0.6              │
│ nativescript-brightness       │ ^1.0.1              │
│ nativescript-socketio         │ ^3.2.1              │
│ nativescript-toasty           │ ^1.3.0              │
│ nativescript-vue              │ ^2.4.0              │
│ nativescript-vue-devtools     │ ^1.2.0              │
│ tns-core-modules              │ ^6.0.0              │
└───────────────────────────────┴─────────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

使い方

Usage ほぼそのまま。

xxxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <Page @loaded="onLoaded" @unloaded="onUnloaded">
    <StackLayout class="container bg-white">
      <Label text="hello">
    </StackLayout>
  </Page>
</template>

<script >
import { Brightness } from 'nativescript-brightness';

export default {
  data() {
    return {
      brightness: new Brightness(),
      intensity: 50,
    }
  },
  methods: {
    onLoaded() {
      // 現在の輝度をバックアップ
      this.intensity = this.brightness.get();
      // 輝度最大に変更
      this.brightness.set({ intensity: 100 });
    },
    onUnloaded() {
      // 元の輝度に戻す
      this.brightness.set({ intensity: this.intensity });
    },
  },
}
</script>

注意点

その1: イベントが発火しない場合

suspendEvent での輝度変更を試したが、iPhone 11 Pro(iOS 13.5.1) ではそもそも suspendEvent が発火していなかった。
※1 Android では期待通りに動作
※2 前章では xxxx.vue の中で輝度調整をしていたが、実コードでは以下のように Vuex を使っている。

特定条件(OS Version や機種など)では suspendEvent が発火しないため iOS UIApplicationDelegate を併用することで解決した。
※3 applicationWillResignActive を使用
※4 他に使えるものは UIApplicationDelegate | Apple Developer Documentation を参照

Android で同様の事象が発生する場合は Android Activity Events を使うと解決できるかもしれない。

app/main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'nativescript-vue'
import store from './store'

const application = require("tns-core-modules/application");
application.on(application.suspendEvent, (args) => {
  // 元々の輝度に復元
  store.commit('restore_display_brightness');
});

import { isIOS } from 'tns-core-modules/platform';
if (isIOS) {
  const MyDelegate = (function (_super) {
    __extends(MyDelegate, _super);
    function MyDelegate() {
      _super.apply(this, arguments);
    }
    MyDelegate.prototype.applicationWillResignActive = function (application) {
      // 特定条件(OS Version や機種など)では suspendEvent が発火しないため
      // applicationWillResignActive を併用
      store.commit('restore_display_brightness');
    };
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    return MyDelegate;
  })(UIResponder);
  application.ios.delegate = MyDelegate;
}
// ...

app/store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import { Brightness } from 'nativescript-brightness';

export default new Vuex.Store({
  state: {
    brightness: new Brightness(),
    intensity: null,
  },
  mutations: {
    backup_intensity(state, intensity) {
      state.intensity = intensity;
    },
    restore_display_brightness(state) {
      if (state.intensity === null) {
        return;
      }

      state.brightness.set({
        intensity: state.intensity,
      });
    },
  },
});

その2: シミュレータではなく実機を使う

iOS シミュレータ, Android エミュレータだと輝度調整できているか確認できない(はず)ので、実機で確認しないとダメ

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list