More than 5 years have passed since last update.

@pastakin

はてな

KMC例会講座「Electronを始めるための準備体操」

Last updated at 2015-10-15Posted at 2015-10-15

これは何

この資料は京大マイコンクラブの例会講座で@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に上げられるようになりそう
  - https://github.com/atom/electron/pull/2920
タスクバーなどOSのUI機構を比較的容易に利用できる

HTML/CSS知ってますか？

ElectronでのUIは一部を除いて大体HTMLで記述することになる。
CSS良い感じに書くのはムズい(個人の意見です)
- http://photonkit.com/
- https://github.com/gabrielbull/react-desktop
各位頑張ろう

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のバグですか？
  - Issues - chromium - An open-source project to help move the web forward. - Google Project Hostingでそれっぽいbugが報告されていないか確認しよう
- このバグはElectronのバグかも？
  - Electronのissueに報告されているかも？
    - https://github.com/atom/electron/issues

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:

Modules for the Renderer Process (Web Page):

Modules for Both Processes:

開発時のTipsなど

tmuxのcontextで起動すると日本語入力などがバグったりする
- http://qiita.com/itkrt2y/items/dee87c406617d1bd45a6
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);
});

合わせて読みたい

Real World Electron Development - Qiita

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up