やってみたこと

electronでとあるチャットの内容をみるだけのアプリを作ってみた。 macのメニューバーにアイコンが表示されて、クリックするとチャットの内容を 一覧で表示することができる。また、新着メッセージがあったときに デスクトップに通知を表示、メニューバーアイコンを未読有りののアイコンに 変更するなど基本的な動作を実装してみた。

https://github.com/fukajun/coincheck-chat-notifier

実装において、react.js と gulp を利用して開発を行っている。 実際の細かい実装はともかく、まず作る部分にフォーカスして書いてみた。

start

mkdir start
cd !$
npm init -y
npm install --save electron-packager
npm install --save electron-prebuilt
npm install --save menubar

index.js作る

var menubar = require('menubar')

var mb = menubar()

mb.on('ready', function ready () {
  console.log('app is ready')
})

package.js の main に書かれたファイルが アプリが起動する時のエンドポイントとなる メインプロセス側の処理となる

view.js作る

フロント側の表示に使用する処理のためのファイルを作成しておく

alert('run')
index.html作る
<body>
  <div id='app'></div>
  Hello everyone!
  <script type='text/javascript' src='./view.js'></script>
</body>

起動

$ electron .

これでメニューバーに猫のアイコンが現れて起動できたかと思う

react + es2015 で作る準備

reactを使うためのパッケージインストール

$ npm install --save react react-dom

jsx es2015 gulpを使うためのパッケージインストール

$ npm install --save-dev babel babel-preset-es2015 babel-preset-react gulp gulp-babel gulp-load-plugins gulp-notify gulp-plumber

gulpファイルの作成

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var plumber = require('gulp-plumber')

function errorHandler(err) {
  var list = err.message.split(':')
  var head = list.shift()
  var body = list.join(':')
  var paths = head.split('/')
  console.log(err.message)
}

gulp.task('build', function() {
  return gulp.src('./source/*.js')
  .on('error', errorHandler)
  .pipe($.babel({presets: ['es2015', 'react']}))
  .pipe(plumber({errorHandler: errorHandler}))
  .pipe(gulp.dest('./'))
})

gulp.task('watch', function() {
  gulp.watch('./source/*', ['build'])
})

gulp.task('default', ['build', 'watch'])

ソースコードの場所の移動

mkdir source
mv index.js source/
mv view.js source/

reactを使用したコードを書く

source/view.js

document.addEventListener("DOMContentLoaded", ()=> {
  ReactDom.render(<div>Hello react</div>, document.getElementById('app'))
})

gulpを実行

gulp

electronを起動

electron .

これでひとまず、react.jsが使えて、es2015な書き方もできるようになった

メインプロセスとレンダラープロセス

メインプロセス : node.js レンダラープロセス : chroium

2つの違いは、

  • レンダラープロセスではGUI関連のAPIの呼び出しを許可されていない
    • これは、Webページ(レンダラープロセス)でGUIリソースを扱うことは危険
    • 簡単にリークされてしまう

なのでレンダラープロセスからGUI関連の処理を行いたい場合は、 electronが用意しているipc(プロセス間通信)を通して行う必要がある。

http://electron.atom.io/docs/v0.36.0/tutorial/quick-start/#differences-between-main-process-and-renderer-process

メインプロセスが使えるモジュールを見るとこの辺かなという感じ

http://electron.atom.io/docs/v0.36.0/#modules-for-the-main-process

  • トレイアイコンの変更
  • メニュバーの操作
  • Windowの表示周り
  • アプリケーションのアップデート周り

レンダラープロセスでしかできないこと

http://electron.atom.io/docs/v0.36.0/#modules-for-the-renderer-process-web-page

  • もちろんWebページ内の操作 html操作
  • デスクトップキャプチャー

プロセス間での情報のやり取り方法

メインプロセス: ipcMain レンダラープロセス: ipcRenderer

をそれぞれ require して使う

レンダラープロセス側

import { ipcRenderer } from 'electron';

ipcRenderer.on('response', (event, arg)=> {
  // メインプロセスからレスポンスが帰ってくる
  console.log(arg)
})
ipcRenderer.send('request');

メインプロセス側

import { ipcMain } from 'electron';

ipcMain.on('request', (event, arg) => {
  // ココで何か処理をして送り返すデータを作る 
  event.sender.send('response', data);
});
Recent Entries