Electronを初めて触った時にハマった5つのこと

初めてElectronを使ってTwitterクライアント https://github.com/k0kubun/Nocturn を作ったときによくわからず時間を吸われたことについて、これからElectronを使いはじめる人のために残しておく。

トラックパッドでスクロールすると画面の外までひっぱれてしまう

マウスホイールでスクロールしてると気づかないのだが、トラックパッドで画面の適当なところを引っ張ると画面の外側が見えてしまい、普通のブラウザっぽくなる。Electronの検索性が低くてなかなか情報にたどり着けなかったが、ChrominumベースなのでChromeについてググったら直し方がわかった。
http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

// 中の要素はスクロールさせる
body > div {
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

あとWebっぽくなくすテクニックとしては、user-select: none;にしておくというのもある。

Electron.app/Contents/MacOS/Electron から起動しないほうが良い

http://electron.atom.io/docs/latest/tutorial/quick-start/ によるとElectronバイナリをダウンロードしてローカルのアプリを開くときは./Electron.app/Contents/MacOS/Electron your-app/せよみたいなのが書いてある。認証を実装しているときoauthというnpmで使われているnet.jsでエラーになったんだけど、この起動方法を使うのをやめて./node_modules/.bin/electron .するようにしたらこのエラーが出なくなった。

その時出てたエラーメッセージでググると https://github.com/atom/electron/issues/1429 が出てきて、it could be virus scanner or firewall software.とか言われていてウケる。きっとElectron.appはvirus scannerかfirewall softwareを同梱しているということだろう。まぁ冗談だけど、いずれにせよハマるので使わないほうがよさそう。

Quick Start GuideのコードはMacだけアプリを終了しないようになっている

http://electron.atom.io/docs/latest/tutorial/quick-start/ でハローワールドしたコードでそのまま開発したんだけど、window-all-closedの扱いが以下のようになっている。

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

これは完全にその通りでせやなって感じなんだけど、この実装に依存して開発してると、最初のウィンドウを閉じて次のウィンドウを開くみたいな挙動がMacでしか動かなくなり、WindowsやLinuxで動かしたときに全く原因がわからず大変時間を吸われた。新しいウィンドウを開く部分を実装するときはこれを意識して開発したほうが良さそう。

一部のキー入力がkeypressイベントから取れない

デスクトップアプリを作るならショートカットキーは実装したい。
別にElectronに限った問題では無いと思うが、多くのキーはkeypressで取れるんだけど、backspaceとか矢印キーはkeypressでは取れない。なのでkeydownを使う。

あと、MacでCmdとの組み合わせを実装したいときは、event.metaKeyがtrueかどうかを判定してやれば良い。

haml-jsとhamlの互換性がない

nodeのことをよく知らないまま開発を始めたので、自作のhaml実装 https://github.com/k0kubun/hamlit でhamlをコンパイルしながら開発していた。最終的にフロントエンド界隈の人がいじりやすいようにgulp-hamlでコンパイルするようにしたんだけど、haml-jsはRubyのhaml gemとは少なくとも以下の2点で互換性がない。

• シングルクオートが使えない https://github.com/creationix/haml-js/issues/83
• attributeをネストして書くことができず、Rubyの式としてはinvalidな書き方をする必要がある

つまり以下のような修正が必要になる。
https://github.com/k0kubun/Nocturn/commit/b9fb59d921f26b740fe894c56470afb496873157

{ data-id: 0 }みたいなのRubyだとパースできないしRuby圏の人から見ると違和感がある。