Electron は node + chrome をパックしてて、一つのソースで複数のプラットフォームで動作するアプリを作れるのですが、実際 Mac でも Win でも動くようにするといくつかはまりどころがあったので、私のはまり方が大きかった順にご紹介しておきます。(Linuxは機会があれば!)
ショートカット/アクセラレータ
このissue
にあるようにWindow
とlinux
のchrome
ではいくつかのショートカットがウィンドウ中のテキストに作用するようにハードコードされているようです。
なのでテキスト以外のものを扱う例えばグラフィックエディタのようなものでは、keydown
もしくはkeyup
イベントでpreventDefault
して明示的に自前のハンドラを呼ぶ必要があります。
今のところ確認してるのは以下のものです。
- Ctrl-A
- Ctrl-C
- Ctrl-V
- Ctrl-X
- Ctrl-Z
alt キー
ここにあるようにwindows
ではalt
キー(18)を押すとFocus
中のエレメントのフォーカスが失われます(blur
イベントが来ます)。ユーザーから見ると、突然キーが効かなくなったように見えるので、alt
キーのコンビネーションを使うのをやめるか、使うんだったらpreventDefault
します。
const
isWin = process.platform === 'win32'
:
:
ev => {
switch ( ev.keyCode ) {
case 18: if ( isWin ) ev.preventDefault() ; break
window-all-closed
Windows
とLinux
は1画面で1アプリなので、windowが閉じられたら、window-all-closedが来ます。なのでMac
じゃなければ、app.quit()で終了します。
app.on(
'window-all-closed'
, () => process.platform != 'darwin' && app.quit()
)
activate
事実上Mac
でしか用のないイベントです。バックグラウンドに行ったあと、再びフォアグラウンドに来た(例えばドックでアイコンをクリックした)時に来ます。全ウィンドが閉じられている状態(Mac
でしか起こりえない)だったらファイルを開いたり、新規書類を作ったりします。
app.on(
'activate'
, ( event, hasVisibleWindows ) => !hasVisibleWindows && 新規書類
)
メニュー
Electron
のドキュメントに典型的な例が載っていますので、ここを参考に作っていきます。