Electron 弄ってみた

Electron (Atom-Shell) を弄ってみた。

とりあえずHello World的なもの。

'use strict';

var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');
var dialog = require('dialog');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', function() { 

  Menu.setApplicationMenu(menu);
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

var template = [
  {
    label: 'File',
    submenu: [
      {label: 'Open', accelerator: 'Command+O', click: function() { openFile();}},
      {label: 'Quit', accelerator: 'Command+Q', click: function () {app.quit();}}
    ]
  }, {
    label: 'Help',
    submenu: [
      { label: 'Help', accelerator: 'Command+H', click: function() { showHelp(); } },
      { label: 'About', accelerator: 'Alt+Command+A', click: function() { showAbout(); } }
    ]
  }
];

var menu = Menu.buildFromTemplate(template);

function openFile(){

  dialog.showOpenDialog( mainWindow,
    {
      properties: ['openFile'],
      filters: [{ name: 'Text', extensions: ['txt'] }]
    },
    function (filenames){
      if (filenames!==undefined){
        alert("Open:"+filenames[0]);
      }
    }
  );
}

function alert(message){
  require('dialog').showMessageBox(
    mainWindow,
    {
        title: 'alert',
        type: 'info',
        buttons: ['OK'],
        detail: message
    });
}

function showHelp(){
  alert("Help");
}

function showAbout(){
  alert("About");
}

雑感としては、

• ブラウザベースのWebアプリの弱点であるファイルアクセスができる点は大きい。cordovaのデスクトップ版みたいな感じか。
• デスクトップアプリを作る上では工数は決して少なくない。VBやDelphiでのRAD開発ほどのイージーさはない。
• デバッグしづらい。

といったところです。開発が停滞しているaoisoをElectronで再開するのもありかなー。

以下、今後調べること

• メニューのUIフォントがビットマップフォントでもアンチエイリアスされてぼやける問題。あるいはフォントサイズ変更。
• デバッグ方法（自前メニューつけたらDevToolがメニューに出ないがどうしたら）
• backbone.js、react.js、aurelia.jsなどとの連携
• パッケージング(electron-packager)とかインストーラーとか