※社内勉強会で使った資料です。発表時は口頭で色々説明したり、コード映したりしたのでわかりづらいとこありますがご容赦ください。
Electronとは？
- cross platformなデスクトップアプリがつくれる
- HTML, CSS, JSでつくれる
- io.js + chromium
- けっこうたくさんelectronで作られたアプリがある。sindresorhus/awesome-electron
- slackはwindows版だけっぽい。Mac版はMacGapを使ってるらしい。
- Electronで作ったアプリをMac App Storeに出すこともできるらしい。Electron for the Mac App Store
開発
- メインプロセスとレンダラープロセス。
- メニュー表示できる。status barにも。
- JavaScript (Electron) を使ってアプリの見栄えを整える - Qiita
- プロセス間通信はipcとかremoteとか
- Electronでipcを使ってプロセス間通信を行う - Qiita
最初はこのへん見るといい
その他できること
- デスクトップ通知
- HTML5のNotification APIを使う
デバッグ
レンダラープロセスはDevToolが普通に使える。リロードすれば変更は反映される。
メインプロセスはちょっと面倒。console.logはターミナルにでる。変更を反映するには、一旦プロセスを終了して再実行。
node-inspector使えば、DevTool使えるっぽいが、自分の環境だとうまくいかず。。。
アプリのパッケージング・配布
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
electron-packager使うといいらしい。
アイコン変えたりアプリ名変えたりできる。
その他
環境を整えるのがめんどい
- coffee? typescript? ES6?
- gulp
ぼくのかんがえたさいきょうのElectron - Qiita を参考にするとよさそう。
ちゃんと設計しないと大変
- react? angular?
- kobitoはreact. Mac版置き換えるっぽい。 Kobito for Windows をリリース + 技術的な補足, package.json... - Qiita Blog
- Electron, React, Fluxを使ってアプリケーションを作った - Qiita
ぼくのかんがえたさいきょうのElectron - Qiita によると、Angularはやめた方がよさそう。
AngularJSはViewと関係の無い機能も含まれた(Webブラウザを動作環境とするという意味においての)Full Stackなフレームワークです。
例えば、通信系の機能について、Ajaxをラップした$http や Promise実装である $q 等が最初から含まれています。
一方、Electronの開発では、Node.jsで出来ることは素直にNode.jsの機能を使った方が早いことも多く、ライブラリも豊富です。HTTP通信をしたければ、素直にrequire('http').requestを呼び出せば良いのです。
そんなことを考えた結果、シンプルなViewフレームワークであるReactを選択しました.