デスクトップアプリ作りたい欲が高まってきたので、Electron に入門した。

Hello

初めてのElectron！ HTML5でデスクトップアプリを作成しよう – ICS LAB がわかりやすかった。

$ node -v
v0.12.7

$ npm install electron-prebuilt -g

$ electron -v
v0.30.0

これでひとまず環境は整う。

次は、

http://electron.atom.io/docs/v0.29.0/tutorial/quick-start/

のとおりに、

  • package.json
  • main.js
  • index.html

を作成。

$ electron .

したら動いた。

パッケージ化も、

$ npm install electron-packager -g
$ electron-packager . your-app --platform=darwin --arch=x64 --version=0.30.0 --overwrite
$ open your-app-darwin-x64/your-app.app/

で行けた。
これは確かにお手軽だ…。

GitHubログイン

作りたいものがOAuth認証を利用するアプリなので、GitHubで試して見た。

Electron. oAuth authentication with GitHub がとても参考になった。

ログイン部分のソースはこちら。
https://github.com/tnantoka/GitHubLogin/blob/master/auth.js

ポイントはredirectを監視して、queryにcodeがあったらそれを使ってアクセストークンを取得するところ。

無事に認証できたら、localStorageにtokenを入れてページをreloadするという手抜き実装にしている。

この規模でももう既に破綻の香りがするので、React・Fluxでの実装を勉強しようと思った。

メモ

TODO

  • アプリ閉じたあとdockアイコンクリックで復帰させる方法