【R&D Report】Electronでクロスプラットフォームのデスクトップアプリを作る (HTML5)

PDFダウンロード
公開日:
2015年 6月 30日

レポート概要

R&D テーマ・目的 様々な業務システムにおける最新の Web 技術(HTML5, Node.js)の活用機会検討における技術調査。 レポートでは、HTML5、Node.js を活用したクロスプラット フォームのデスクトップアプリケーション開発フレームワーク 「Electron」を試用した結果を報告。
技術キーワード HTML5、Node.js、デスクトップアプリケーション、クロスプラットフォーム、Electron
本レポート対象者 開発担当者、HTML5 導入検討に携わる企画担当者

Electron(旧Atom Shell)は、Web技術を使って、クロスプラットフォームのデスクトップアプリを作るためのフレームワークです。

元々はAtom editorを開発するために作られたフレームワークで、最近ではSlackのクライアントアプリや、Visual Studio CodeもElectronで実装されています。

この記事ではElectronを使った、Todoアプリの作り方を説明します。

Electronの特徴

Electronには以下のような特徴があります。

  • Web技術

    • HTML, CSS, Javascript(node.js)を使ってアプリを開発することができる。
    • node.jsの豊富なライブラリを活用できる。
  • オープンソース

    • Electronはオープンソースとして公開されていて、GitHubがメンテナンスしている。
  • クロスプラットフォーム

    • Mac, Windows, Linux向けにビルドできる。

Electronのインストール

npmでelectronをインストールします。

# Install the `electron` command globally
$ npm install electron-prebuilt -g
...

$ electron -v
v0.26.1

Todoアプリ作成

今回は簡単に作成するため、Backbone.jsのサンプルプロジェクトのTodoアプリのソースコードを流用します。

このアプリの全てのソースコードはGithubで公開しています。

Todoアプリのプロジェクトは以下の構造になっています。

todos
├── package.json
├── main.js
├── index.html
├── lib
│   └── todos.js
├── images
│   └── destroy.png
└── stylesheets
    └── todos.css

package.jsonのフォーマットはnode.jsのモジュールと同じです。mainフィールドにアプリの起動スクリプトを指定します。 dependenciesフィールドには依存するライブラリを記述します 。

# package.json { "name": "todos", "version": "0.1.0", "main": "main.js", "dependencies": { "jquery": "2.1.4", "underscore": "1.8.3", "backbone": "1.2.0", "backbone.localstorage": "1.1.16" } }

main.jsではウィンドウを作成し、システムイベントを処理します。今回はQuick Startのソースコードをそのまま使いました。

# 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: 570, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Open the devtools.
  mainWindow.openDevTools();

  // 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;
  });
});

index.htmlは表示するWebページです。scriptタグでlib/todos.jsを読み込むようにしています。

# index.html
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <title>Todos</title>
  <link rel="stylesheet" href="stylesheets/todos.css"/>
</head>
 
<body>
...
  <script src="lib/todos.js"></script>
...
  </body>
</html>

lib/todos.jsにはTodoアプリのメインロジックを記述します。backbone.js Todosソースコードとほとんど同じですが、requireでNodeモジュールを読み込んでいるところが異なります。

  # lib/todos.js

var $ = require('jquery')
var _ = require('underscore')
var Backbone = require('backbone')
Backbone.LocalStorage = require('backbone.localstorage')

// Load the application once the DOM is ready, using `jQuery.ready`:
$(function(){

  // Todo Model
  // ----------

  // Our basic **Todo** model has `title`, `order`, and `done` attributes.
  var Todo = Backbone.Model.extend({

...

アプリの実行

最初にpackage.jsonに記述した依存ライブラリをインストールします。

$ cd todos
$ npm install

electronコマンドでアプリを実行します。引数にはプロジェクトのディレクトリを指定します。

$ electron .

todos.gif

上記の画面が表示されれば成功です。

アプリの配布

Mac向けに配布する

1 . Electronのリリースページからelectron-v0.26.1-darwin-x64.zipをダウンロードします。 2 . todoアプリケーションのディレクトリをElectron.app/Contents/Resources/appにコピーします。

$ cd todos
$ cp -r . ~/Downloads/electron-v0.26.1-darwin-x64/Electron.app/Contents/Resources/app

3 . アプリケーション名をTodos.appにリネームします

$ mv ~/Downloads/electron-v0.26.1-darwin-x64/Electron.app ~/Downloads/electron-v0.26.1-darwin-x64/Todos.app

4 . 作成したTodos.appを配布します。

Windows向けに配布する

1 . Electronのリリースページからelectron-v0.26.1-win32-x64.zipをダウンロードします。(配布対象のOSのアーキテクチャに合わせる) 2 . todoアプリケーションのディレクトリをelectron/resources/appにコピーします。

$ cd todos
$ cp -r . ~/Downloads/electron-v0.26.1-win32-x64/resources/app

3 . アプリケーション名をtodos.exeにリネームします

$ mv ~/Downloads/electron-v0.26.1-win32-x64/electron.exe ~/Downloads/electron-v0.26.1-win32-x64/todos.exe

4 . electronのディレクトリ名をリネームしてzip化します

$ cd ~/Downloads/
$ mv electron-v0.26.1-win32-x64 todos
$ zip -r todos todos

5 . 作成されたtodos.zipを配布します

ソースコードを隠して配布したい場合

ソースコードを隠したい場合は、asarで圧縮してから配布します。 詳しくはこちらを参照してください。

まとめ

今回は、最新のWeb技術を活用した開発フレームワーク「Electron」を調査・試用しました。実際に使った感想として、ビルドの時間も比較的短く効率的に開発ができました。今回は十分な説明ができませんが、Electronを活用することにより、Webアプリでは出来ないこと(ファイル操作、Shellコマンド実行、通知、ネイティブメニュー等)も実現できます。Electronの開発も活発に進んでいる様子なので、今後も注目です。

参考