Electronで展示物用アプリケーションを作る際のテクニックまとめ #JavaScript

とあるプロジェクトでElectronを使った展示用インスタレーションアプリを作成したので、開発によって得られた展示物用アプリに仕上げるための知見とテクニックをまとめて紹介します。

仕様・前提

展示用アプリは通常のアプリと違い、一般ユーザにはアプリ以外の通常操作・こちらが規定した以外の操作をできないように設定することが重要です。大まかな仕様としては以下の通り。

アプリの操作はタッチで行う
展示物専用で非公開アプリ
ユーザにはアプリ以外の操作をさせない
キーボードは外部接続し、展示員のみが操作できる想定

アプリ以外の操作を無効化する

今回のアプリは展示専用のアプリケーションなので、ユーザにアプリ以外の操作をさせない。そのためMain Processでフルスクリーン化、フレームレス、kioskモードを設定します。

main.js

mainWindow = new BrowserWindow({width: 600, height: 800, kiosk: true, 'fullscreen': true, 'frame': false});

参考

Fullscreen on Mac still shows window title and kiosk mode not working #1054

画面の拡大縮小をできないようにする

通常HTMLはviewportを設定しなければ表示の拡大縮小ができます。ただ展示アプリとして設置する場合、拡大縮小ができてしまうと都合が悪いので無効化する必要があります。当初はhtml側のviewport設定でzoomを禁止にすればいけると思っていましたが、それでは対応できません。Erectronの場合、webFrameという機能を有効化することで拡大縮小を無効化できます。なおwebFrameはMain Process でなく、Renderer Processで行うのでindex.htmlなどの表示用ファイルにコードを書き加える必要があります。

index.html

<script>
var webFrame = require('electron').webFrame;
  webFrame.setZoomLevelLimits(1, 1);
</script>`

webFrameの詳しい設定については以下を参照。
webFrame

展示員だけがアプリを落とせるようにする機能を設定

展示員がアプリを終了できるようにします。kioskモードを有効化している場合、通常操作ではシャットダウンできないため、キーボードショートカットでアプリケーションをシャットダウンさせる機能を設定します。今回はctrl + qに割り当てました。

main.js

var appQuit = globalShortcut.register('ctrl+q', function() {
    mainWindow.close();
    app.quit();
});

アプリの設定画面を表示させる

getUserMediaでPCのカメラIDを取得、カメラ情報を設定...などを起動直後にさせるため、セッティング画面を作成する必要がありました。ただし、ユーザに設定画面を操作させたくないので、ショートカットキーで設定画面を表示させる仕組みを実装します。下記の記述ではctrl + enterを押すと、setting.htmlが表示されます。

main.js

var cameraSetting = globalShortcut.register('ctrl+enter', function() {
    mainWindow.loadURL('file://' + __dirname + '/setting.html');
});

その他

WindowsとMacでレイアウトが微妙に変わることに注意

Electronでchromiumだし、WinとMacで見た目が大きく変わることはないだろう、とたかをくくっていましたが、実際はフォントサイズが微妙に変わってしまっていました。レイアウトをpx単位で精密に作る場合は、特に注意が必要です。