Electron クロスプラットフォーム開発にまた強力な環境出現

どうも自作ソフトも販売している太田アベル(@LandscapeSketch)ですこんにちは。

10年前はWindowsを使う人がほとんどで、Windowsだけを見てソフトを作ってもある程度の販売は見込めました。ですが近ごろはそうはいきません。

デスクトップを持つOS（Windows、Mac、Linux）には最低限対応していく必要があります。そこに新たな一手となる開発環境Electronを紹介。

Web技術でデスクトップアプリ

Electronとは（誤解を恐れず）ざっくり言うと、Webブラウザで動くアプリケーション(JS、HTML、CSS)をWebブラウザごとパッケージしてしまおうというプロジェクト。

公式ページ：＞http://electron.atom.io/

とは言ってもIEやSafariなどメーカー製ソフトをパッケージするわけにはいきません。組み込まれるブラウザはChromium（Google Chromeの元となるオープンソースのブラウザ）です（公式ページ）。ChromiumはWindows、Mac、Linuxで実績がありますし安定もしていますから、非常に使いやすい足場となります。

こいつをベースにするということは、Chromiumで動くものはなんでも正確に動くわけですね。UIはHTMLやCSSですからOSごとの見た目やフィーリングに悩むこともありません。また機能の差異も小さくなるでしょう。

これは使いやすそう！

情報を探していたらとても分かりやすいスライドがありましたのでこちらをどうぞ↓

Electron(旧atom shell)基礎+入門 from Kazuyuki Mori

Electron(旧atom shell)基礎+入門 from Kazuyuki Mori

チュートリアルでためす

公式のGitHubにチュートリアルが入っています。Quick Startを試してみます。

最低限必要なのはたった3つのファイル。あ、もちろんElectronをインストールしておく必要がありますよ。僕はnpm経由で入れました。

作るのは

• package.json
• main.js
• index.html

これだけ！

package.jsonはnpm initでOK。エントリポイントをmain.jsにするのを忘れずに。標準のindex.jsだと動きません。main.jsにはチュートリアルにあるサンプルコードを記入。

var app = require('app');  // Module to control application life.

var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.

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

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the javascript object is GCed.

var mainWindow = null;

// Quit when all windows are closed.

app.on('window-all-closed', function() {

  if (process.platform != 'darwin')

    app.quit();

});

// This method will be called when Electron has done everything

// initialization and ready for creating browser windows.

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

  // Create the browser window.

  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.

  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.

  mainWindow.on('closed', function() {

    // Dereference the window object, usually you would store windows

    // in an array if your app supports multi windows, this is the time

    // when you should delete the corresponding element.

    mainWindow = null;

  });

});

とても理解しやすいコードですね。

appがメインスレッド、クラッシュリポータを生成、mainWindowを作り、大きさを指定してあとはindex.htmlを読み込むと。

実行

では実行してみます。

electron [Project dir]

コマンドを実行するとでいきなりコレ↓

ブラウザごとパッケージできるから、ランタイムをインストールして、パスを設定して、必要なライブラリをwindows\system32へ入れて・・・なんていう煩わしいインストールも必要なし。exeでポイポイ配れます。

ただしVisual StudioやDelphiのようにコンパイルしてパッケージするわけではなく、Electronのパッケージ内に全ソースを配置して、好きな名前やアイコンを付けるという方式。ソースを隠したいプロプライエタリなソフトには使うのはむずかしそう。解凍すれば全部見れますんで。

パッケージ化には asar が必要。これもnpmでインストールできます。