Yasuhiro Hoshino

AboutPosts

[Electron] Windowsタブレット向け業務用アプリ作成時の知見

2023-02-01

2023-02-01

Electron

近年、Electron + React + TypescriptでWindows搭載タブレットPC向けの業務用アプリの作成を行っていたので、開発で得た知見をまとめました。

検証環境

  • Windows 10 Pro 22H2
  • Node.js v18.14.0
  • Electron 22.2.0

多重起動の防止

使用者がアプリのショートカットを複数回クリックするなどして、複数のインスタンスが立ち上がるのを防止する設定を行いました。

app.requestSingleInstanceLock()メソッドを実行し、返り値がfalseの場合、現在のアプリのインスタンスを終了します。

https://www.electronjs.org/ja/docs/latest/api/app#apprequestsingleinstancelockadditionaldata

const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
}

メニューバーを消す

BrowserWindow.setMenuBarVisibility()メソッドでメニューバーを非表示にしました。

mainWindow.setMenuBarVisibility(false);

ディスプレイのスケーリングを無視する

OSのディスプレイ設定で、ディスプレイ解像度とは別にスケールの変更ができますが、レイアウト崩れを防止するために、アプリ上では無視するようにしました。

// ディスプレイのスケーリングを無視
app.commandLine.appendSwitch('high-dpi-support', '1');
app.commandLine.appendSwitch('force-device-scale-factor', '1');

ユーザーによるスケーリングの禁止

使用者が誤ってピンチアウト・ピンチインをしてしまい、画面が拡大縮小されるのを防止するため、以下のmetaタグを、index.html内に記述しました。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

テキスト、画像等の選択禁止

タッチ操作での誤動作を防ぐため、CSSに以下のコードを追加し、すべての要素の選択を禁止しました。

* {
    user-select: none;
}

フルスクリーン、キオスクモードで起動

fullscreenとkioskのプロパティをtrueにして、BrowserWindowのインスタンスを作成しています。

キオスクモードといっても、いわゆるWindowsOSのキオスクモード(指定した一つのアプリしか起動しない状態)ではありません。

一応ChromiumではKioskモードで起動するとアドレスバーやメニューバーが消えてフルスクリーン状態になるのですが、それらブラウザ固有のGUIが無いElectronアプリでは、通常のフルスクリーンモードとどう違うのか不明でした。

mainWindow = new BrowserWindow({
    ...
    fullscreen: true,
    kiosk: true,
    ...
  });

フルスクリーンやキオスクのオンオフを切り替えられるようにするには、BrowserWindow.setFullScreen()とBrowserWindow.setKiosk()を使用します。

mainWindow.setFullScreen(false);
mainWindow.setKiosk(false);

設定ファイルの永続化・外部化

再起動時やアプリ更新時に引き継ぎたいパラメーターがあったので、electron-storeを使用し、設定ファイルを永続化・外部化しました。

const ElectronStore = require('electron-store');

// スキーマ作成
const configSchema = {
  testParam: {
    type: 'string',
    default: 'ABC123'
  },
}

// インスタンス作成
const config = new ElectronStore({ schema: configSchema });

// 値の取得
const val = config.get('testParam');

// 値の更新
config.set('testParam', 'DEF456');

バッテリー情報の取得

バッテリーの残量を表示する必要があったため、systeminformationを使用しました。

const si = require('systeminformation');

async() => {
    const data = await si.battery(); // バッテリー情報を取得
    const batteryLevel = data.percent; // バッテリー残量を取得
}

Electronアプリ以外の設定

エッジスワイプの禁止

使用者がタブレットの端を誤ってスワイプしてしまい、エッジUIが表示されることを防ぐために、レジストリの設定を行いました。

  1. レジストリエディタを起動
  2. HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windowsに、EdgeUIというキーを追加
  3. EdgeUIを右クリックし、新規 > DWORD(32ビット) 値を選択
  4. 作成した値をAllowEdgeSwipeにリネームし、値のデータを0を設定

または、以下のシェルスクリプトを記述したbatファイルを作成し、管理者権限で実行します。

rem エッジスワイプを無効化
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\EdgeUI" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\EdgeUI" /v "AllowEdgeSwipe" /t "REG_DWORD" /d 0 /f

通知の無効化

通知センターからの通知がアプリ画面の上に表示されるのを防ぐため、レジストリの設定で通知センター自体を無効化しました。

  1. レジストリエディタを起動
  2. HKEY_CURRENT_USER\SOFTWARE\Policies\Microsoft\Windows\Explorerを開く
  3. 新規 > DWORD(ビット) 値を選択
  4. 作成した値をDisableNotificationCenterにリネームし、値のデータに1を設定

または、以下のシェルスクリプトを記述したbatファイルを作成し、管理者権限で実行します。

rem 通知センターを無効化
reg add "HKEY_CURRENT_USER\SOFTWARE\Policies\Microsoft\Windows\Explorer" /f
reg add "HKEY_CURRENT_USER\SOFTWARE\Policies\Microsoft\Windows\Explorer" /v "DisableNotificationCenter" /t "REG_DWORD" /d 1 /f