Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

これは何

  • この資料は京大マイコンクラブの例会講座で@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

HTML/CSS知ってますか?

JavaScriptって知ってますか?

Electronを書いてみる前に知っておきたいこと

must

  • HTML / CSS / JS の最低限の文法など

should

  • HTML / CSSでの表現力
    • ここが見た目を左右するぞ
  • NodeJSでの開発の知見
    • 便利npmモジュールなどを知っていると良い
  • フロントエンド開発の知見
    • ページ遷移をチマチマやっても良いが大体loadingでモッサリする
    • →見た目をせっかくネイティブアプリっぽくしてるのにユーザーがガッカリする
    • Single Page Applicationである必要性
      • React/AngularJS辺りを検討することになる
    • 頑張ろう

better but very important

Electronを始めよう

概要を把握したい

環境構築

  • NodeJS + npm をインストール
  • npm install -g electron-prebuilt
    • これでelectronコマンドで開発中のアプリケーションをとりあえず起動できる

世界観

  • main process
    • 経緯からbrowser processと書かれていることもある
    • package.jsonmainを動かす
    • ここから各種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で起動すると日本語入力などがバグったりする
  • 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);
});

合わせて読みたい

hatena-corp
「知る」「つながる」「表現する」で新しい体験を提供し、人の生活を豊かにする
https://hatenacorp.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away