0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Electron で mac と win に対応したアプリを作る時のこと。

Last updated at Posted at 2020-05-10

Electron は node + chrome をパックしてて、一つのソースで複数のプラットフォームで動作するアプリを作れるのですが、実際 Mac でも Win でも動くようにするといくつかはまりどころがあったので、私のはまり方が大きかった順にご紹介しておきます。(Linuxは機会があれば!)

ショートカット/アクセラレータ

このissueにあるようにWindowlinuxchromeではいくつかのショートカットがウィンドウ中のテキストに作用するようにハードコードされているようです。
なのでテキスト以外のものを扱う例えばグラフィックエディタのようなものでは、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

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

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?