らっちゃいブログ

日々の学びと気づきを発信するブログ

Web技術だけでデスクトップアプリを作れるElectronが1.0になったので試してみたら最高だった

スポンサーリンク

これまでなかなか時間が取れなくて後回しにしてましたが、せっかく 1.0 になったので意を決して試してみました。って言ってる間に 1.0.1 出ましたけど。

electron.atom.io

Electron とは

JavaScript(node.js)でデスクトップアプリケーションを作成するためのプラットフォームで、Windows, Mac, Linux で動作します。

注目したいのが、デスクトップアプリケーションなのに JavaScript, HTML, CSS というWeb技術のみでの開発が可能という点。なぜそんなことが実現できるかといいますと、Chromiumブラウザを組み込んでおり、そいつがレンダリングしているためです。なるほどですね。

Web系の開発者でもデスクトップアプリが手軽に作れるというのと、AtomやSlackのアプリもElectronで作られていることもあり、近年人気が高まってきています。

サンプルを実行してみる

Hello World 表示をするサンプルが用意されていますので、実行してみましょう。たったこれだけです。

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

なお、node.js v5.10.0 以上が必要ですので、バージョンが古い方は新しいバージョンを入れないといけません。

node.js のインストールをしたことがない人はこちらの記事を参考にどうぞ。

racchai.hatenablog.com

さきほどのコマンドを実行すると、こんな感じでアプリケーションが起動します。ここまで5分とかかってません。非常に簡単ですね。

f:id:racchai:20160512134926p:plain

Chromiumレンダリングしているだけに、見た目は完全にブラウザです。DevToolsが表示されていると親近感がやばいですね。

タスク管理を作ってみる

よくあるサンプルとしてタスク管理を作ってみます。今回は http 通信とかローカルストレージに保存とかはしません。

個人的に Angular.js が慣れてるので、npm でインストールしておきます。

$ npm install --save angular

インストールができたら、index.html を以下のように変更します。いきなり完成形です。

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body ng-controller="TaskCtrl as taskCtrl">
    <input type="text" ng-model="taskCtrl.taskName"><button ng-click="taskCtrl.add()">add</button>
    <ul ng-repeat="task in taskCtrl.tasks">
      <li>
        <span ng-bind="task.name" ng-style="task.style"></span>
        <button ng-disabled="task.done" ng-click="taskCtrl.done(task)">完了</button>
      </li>
    </ul>
    </form>
  </body>

  <script src="node_modules/angular/angular.min.js"></script>
  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</html>

最後に renderer.js を以下のようにします。

angular.module('app', []).controller('TaskCtrl', function() {
    this.taskName = '';
    this.tasks = [];
    this.add = function() {
        if (this.taskName) {
            this.tasks.push({name: this.taskName});
            this.taskName = '';
        }
    };
    this.done = function(task) {
        task.done = true;
        task.style = {'text-decoration': 'line-through'};
    };
});

準備ができたところで実行!

f:id:racchai:20160512214949p:plain

おお。表示されてますね。

ここで、事件発生。テキストボックスが一切入力を受け付けないのです。なぜだ。ちなみに手元の環境は OS X

そういえば、昔 Ionic でも同じようなことがあったということを思い出しました。開発環境で tmux を使っているのですが、そのせいでうまく動作しなくなるという現象です。当時のドキュメントを見返してみると、reattach-to-user-namespace を使って回避していました。なるほど、そういうことか!

というハマりがあり、結局こちらで動作するようになりました。

$ brew install reattach-to-user-namespace
$ reattach-to-user-namespace npm start

ようやく入力を受け付けてくれるようになったので、タスクを登録してみます。

f:id:racchai:20160512215822p:plain

動いてる。次はタスクを完了してみる。

f:id:racchai:20160512215918p:plain

ブログを書くタスクが完了しました。すばらしい!

配布してみる

開発事情の次に気になるのは、ビルド方法ですね。あれ、気になりませんか?気になりますよね?

では続けます。

electron-packager を使うことで、Electron の実行環境も含めた配布可能な形式にパッケージングすることができるそうです。さっそくやってみましょう。

まずはインストール。

$ npm install --save-dev electron-packager

インストールができたら、package.json にて build コマンドを定義します。すでに start コマンドが定義されていますので、その下あたりに追記しましょう。

...
  "scripts": {
    "start": "electron main.js", 
+   "build": "electron-packager . --platform=darwin --arch=x64 --version=0.37.8"
  },
...

今回は OS X でビルドするので、platform=darwin、arch=x64 としました。platform には all, linux, win32, darwin を指定できることができ、カンマ区切りで複数同時指定することもできるそうです。version は package.json に記載されている electron-prebuilt のバージョンとして 0.37.8 を指定しています。

では、さっそくビルドしてみましょう。

$ npm run build

> electron-quick-start@1.0.0 build /tmp/electron-quick-start
> electron-packager . --platform=darwin --arch=x64 --version=0.37.8

The strict-ssl parameter is deprecated, use download.strictSSL instead
Packaging app for platform darwin x64 using electron v0.37.8
Wrote new app to /tmp/electron-quick-start/electron-quick-start-darwin-x64

どうやら成功したようですね。electron-quick-start-darwin-x64 というディレクトリ以下に成果物が配置されたようなので見てみます。

f:id:racchai:20160512161607p:plain

デキテル!

あとはこれをダブルクリックすれば、さきほどと同じように起動されます。

まとめ

Electron すごくいい!