これは何
- この資料は京大マイコンクラブの例会講座で@pastakが行った発表の資料です
- あまりWeb技術に馴染みがないであろうKMC部員の皆さんにElectronに興味を持って頂くというのをゴールにしてざっくりとElectronの概要について紹介します
自己紹介
- pastak
- parttimer at Nota
pastakとElectron
ちょくちょく小物を書いている
Electronって何？
- github.com/atom/electron
- 旧名 Atom-shell
- AtomEditorでの知見を切り出して汎用化
- NodeJS + Chromium + OS API
- Webベースの知識を用いてデスクトップアプリケーションが作れる
- Windows / MacOSX / Linux
Electronでアプリケーションを書くことについての検討
WebApp
- 個人だとheroku/AWS/GCEなどの上に構築
- アクセス/利用開始が比較的容易
- JSとかをそれなりに書くとブラウザ毎に色々なことがある
IEとかIEとかIEとか
Chrome Apps
- Chrome Web Storeで配布
- Chrome/Chromium上で動かす
- Chromeを入れていればどの環境でも利用可能
- Chromeの外に影響することも出来るがあまり容易ではない
Electron
- 配布機構は自前で用意
- MacAppStoreに上げられるようになりそう
- タスクバーなどOSのUI機構を比較的容易に利用できる
HTML/CSS知ってますか？
- ElectronでのUIは一部を除いて大体HTMLで記述することになる。
- CSS良い感じに書くのはムズい(個人の意見です)
- 各位頑張ろう
JavaScriptって知ってますか？
- KMC内でJSについて学ぶ場合
- ECMAScript6勉強会
- JavaScriptで世界平和2014
- JavaScriptで魂を震えさせよう2015
- 基本的にはChromiumに実装されているAPIだったら諸々利用可能
- WebGL
- GamePad
- FileReader
- etc
Electronを書いてみる前に知っておきたいこと
must
- HTML / CSS / JS の最低限の文法など
should
- HTML / CSSでの表現力
- ここが見た目を左右するぞ
- NodeJSでの開発の知見
- 便利npmモジュールなどを知っていると良い
- フロントエンド開発の知見
- ページ遷移をチマチマやっても良いが大体loadingでモッサリする
- →見た目をせっかくネイティブアプリっぽくしてるのにユーザーがガッカリする
- Single Page Applicationである必要性
- React/AngularJS辺りを検討することになる
- 頑張ろう
better but very important
- バグの切り分け（ちゃんと調べる）力
- このバグはあなたのJSのバグですか？
- Chromiumベースなので、Chromiumと同じDeveloperToolとかが使える
- このバグはnpmモジュールのバグですか？
- 怪しいnpmモジュールのissueを確認しよう
- このバグはChromiumのバグですか？
- このバグはElectronのバグかも？
- Electronのissueに報告されているかも？
- このバグはあなたのJSのバグですか？
Electronを始めよう
概要を把握したい
- とにかく https://github.com/atom/electron/tree/master/docs を読む。
- サンプルアプリケーションを読みたければ
環境構築
- NodeJS + npm をインストール
-
npm install -g electron-prebuilt- これで
electronコマンドで開発中のアプリケーションをとりあえず起動できる
- これで
世界観
- main process
- 経緯からbrowser processと書かれていることもある
-
package.jsonのmainを動かす - ここから各種GUI操作を呼び出す
-
trayを出す -
BrowserWindowを作る
-
- renderer process
- WebPage(HTML)を表示するためのChromiumが走ってるprocess
- 通常のChromiumと違うのはNodeJSのAPIが利用可能
要約
- main process
-
BrowserWindowを作る
-
- renderer process
- 作られた
BrowserWindowがそれぞれ乗ってる
- 作られた
2つのプロセス間の通信
- 基本は
ipcモジュールを使ってメッセージング -
remoteモジュールを使うことで、renderer processでは利用できないappモジュールなどを呼び出すことも可能- 例
render.js
const app = require('remote').require('app')
const path = app.getAppPath()
devDependency
Electron開発をする場合はこの辺りをとりあえず揃えておくと良いと思う。livereload系とかはお好みで。
-
electron-compile- ES6 / ES7 / JSX via Babel
- TypeScript / CoffeeScript
- LESS
-
electron-prebuilt-
electronコマンドの導入
-
-
electron-jasmine- specs
-
electron-packager- package化する部分をやってくれる
Electron APIs
Modules for the Main Process:
- app
- auto-updater
- browser-window
- content-tracing
- dialog
- global-shortcut
- ipc (main process)
- menu
- menu-item
- power-monitor
- power-save-blocker
- protocol
- session
- web-contents
- tray
Modules for the Renderer Process (Web Page):
Modules for Both Processes:
開発時のTipsなど
- tmuxのcontextで起動すると日本語入力などがバグったりする
-
app.dock.hide()などOSXでしか動かないAPIを他の環境で叩くと当然のように落ちる -
browserWindow.hide()ではなくbrowserWindow.quit()を叩いてWindowの数が0になるとアプリケーションが終了する -
trayモジュールを使う場合はGCに注意- サンプルのとおりにやれば大丈夫
var appIcon = null; // この宣言をapp.onの中でやってしまうとGCに回収されたタイミングでtrayのアイコンが消滅する
app.on('ready', function(){
appIcon = new Tray('/path/to/my/icon');
var contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
]);
appIcon.setToolTip('This is my application.');
appIcon.setContextMenu(contextMenu);
});