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のドキュメントに典型的な例が載っていますので、ここを参考に作っていきます。