巷で話題の技術、Electronに触れてみる (Electron Workshopハンズオンの参加レポート)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、高尾です。
先日、弊社の女子社員3人でElectronを学ぶ勉強会に参加してきました。
本日はElectronについての軽い解説、参加した勉強会(第24回 GTUG Girls Meetup 「Electron Workshop」)についてレポート致します。

20160106

Electronとは

Electron(旧称: Atom-Shell)は, Atomエディタを開発するために作られた、クロスプラットフォームデスクトップアプリケーションエンジンです。
Windows、OS X、Linuxのデスクトップアプリケーションを作成することができます。開発言語はHTML・CSS・JavaScript(Node.js)です。
つまり、Webアプリケーションを作る感覚で、デスクトップアプリケーションを作成することができます。
モバイルではApache CordovaなどのWeb技術を使ったクロスプラットフォーム・アプリケーションの開発フレームワークが注目されていますが、それをデスクトップアプリケーション向けに実現したものと考えると想像しやすいのではないでしょうか。(もちろん実行環境は違いますが)

ランタイムはNode.jsとChromiumです。プロセスはMainプロセス/Rendererプロセスに分かれています。画面描画やWindowの生成などはMainプロセスとして実行され、Mainプロセスが生成したページの中のJavascrpitがそれぞれRendererプロセスとして実行されます。
標準的なブラウザーはネイティブなリソースへはアクセスすることができませんが、ElectronではWebページからio.jsのAPIを使って、ネイティブリソースを利用する権限が与えられます。それにより、Webページの中からJavaScriptを使って、低レベルなオペレーティングシステムとのインタラクションが可能になります。
また、ElectronのエントリーポイントはJavascriptなので、画面がない(htmlがない)アプリを実装することも可能です。

Electronは公表されてからの日が浅いですが、すでに「Visual Studio Code (Microsoft)」や「Kobito for Windows (Incriments)」などに採用されており、期待の新技術と言えるでしょう。

Electronのサイトはこちら。
Electronのリポジトリはこちら。

本年度のAdventCalendarもあるので、興味がある方はこちらも見てみてください。

Electronでアプリを実装

ElectronアプリでHello Worldをしてみましょう。
実行環境はMacです。Windowsの方はコマンドを適宜変更してください。

1.Node.jsをインストールする

Node.jsの4.0以上のバージョンを利用してください。
rendererプロセスでio.jsを利用するため、io.jsがNode.jsに統合された後のバージョンを使う必要があります。

インストール方法は公式サイトを参照してください。
https://nodejs.org/en/

2.index.htmlを用意する(画面構成)

任意の場所にディレクトリ”electronica”を作成してください。別の名前でも問題ありませんが、依存関係に注意してください。

$ mkdir electronica
$ cd electronica

まず、アプリのUIを作成します。

$ touch index.html

ファイルの中身には下記を記載してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    node version <script>document.write(process.versions.node)</script>,<br>
    Chrome version <script>document.write(process.versions.chrome)</script>,<br>
    Electron version <script>document.write(process.versions.electron)</script>.
  </body>
</html>

3.index.jsを用意する(アプリのエントリーポイント)

エントリーポイントとなるJavaScriptファイルを作ります。

$ touch index.js

Electronの読み込み、アプリのWindowが全て閉じたらアプリを終了させる、最初に開くwindowはindex.htmlにする、など
アプリの基礎的な部分のみ実装しています。

    'use strict';
    const electron = require('electron');
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    
    // Report crashes to our server.
    electron.crashReporter.start();
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    var mainWindow = null;
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function() {
      app.quit();
    });
    
    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');
    
      // Open the DevTools.
      mainWindow.webContents.openDevTools();
    
      mainWindow.on('closed', function() {
        mainWindow = null;
      });
    }); 

4.Electronのモジュールを読み込む

Electronのモジュールを読み込みます。

$ npm install electron-prebuilt

electronica配下にnode_modulesというフォルダとElectron実行に必要なファイルが生成されていると思います。

5.package.jsonを用意する

package.jsonを生成します。
アプリの設定やモジュールの依存関係を書きます。

$ npm init -y

ファイルの中身に下記のように記載してください。

{
  "name": "electroinca",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js"
  },
  "devDependencies": {
    "electron-prebuilt": "^0.35.0"
  }
}

“scripts”に、エントリーポイントであるindex.jsを設定しています。

ここまでできたら、electronica配下は下記の構成になっていると思います。
electronica/
├── node_modules
├── package.json
├── index.js
└── index.html

アプリケーションの実行

下記コマンドを実行してください。

$ npm start

ブラウザが立ち上がりましたでしょうか。
以上でElectronでのHello Worldは完了です。自前で用意したファイルは2つだけ、という非常にシンプルな構成から始めることができます。

他、雑多ではありますがElectronを使ってみた所感です。

  • ビルドが早く、トライアンドエラーをしてもストレスがあまりない。
  • Chromiumが内蔵されているので、Webアプリのようにブラウザ毎の差異を気にしなくてすむ。
  • Javascriptのデバッグに便利なChromeのDevTolisが使える(実行時に必ず表示されるので少し邪魔かも)。
  • パッケージ化するのもコマンドひとつ。ターゲットのOSも選べる。
  • Node.jsが使えるので、npmのパッケージ(plugin)も使える。
  • バイナリも呼べる
  • CSPについてはまだまだ甘いらしいので、XSSなどのセキュリティ問題がついてまわる

少し触っただけですが、社内ツールを作ったりするのに非常に適しているのでは、と思いました。
ちなみに、Electronはオープンソース(MITライセンス)なので、商用利用も可能です。

第24回 GTUG Girls Meetup 「Electron Workshop」

最後に、参加させていただいた勉強会についてご紹介いたします。
今回参加した勉強会はGTUG Girlsさんが主宰している第24回 GTUG Girls Meetup 「Electron Workshop」です。

女性のエンジニア限定というちょっとめずらしい勉強会です。

GTUG Girlsさんは、エンジニアの女性に向けた勉強会を開いているコミュニティです。
今までにもAngular.jsやDockerなど、旬なIT技術についての勉強会を開いており、今回で24回目の開催でした。

GTUG Girls

特徴としては下記です。

  • 参加は女性に限定
  • 新しい技術の入門勉強会(ハンズオン)が多い
  • 勉強会の雰囲気が非常に和やか
  • 講師に著名な方が多い
  • なごみタイムがあり、お菓子を食べながら参加者講師と交流ができる

女性のエンジニアの方には非常におススメです。

今回担当していただいた講師は、日本Node.jsユーザグループ代表である@yosuke_furukawaさん。
今回のワークショップではnpmのモジュールで課題を配布しており、こういった共有方法もあるのか、とちょっと感動しました。

https://twitter.com/yosuke_furukawa
https://github.com/yosuke-furukawa/electronica

ハンズオンの課題は7つに分かれており、最後まで進むと簡易Webブラウザのようなアプリケーションができあがります。
@yosuke_furukawaさんのGithubリポジトリで公開されていますので、ご興味がある方は挑戦してみてください。

npmのモジュールから試してみたい方は下記コマンドで試すことができます。

# npm -g install electronica
# electronica

※Node.jsは4.0以上のバージョンを利用してください。(io.jsが統合されている必要があります。)

今後さらにアツくなっていくと思われるElectron、皆様もぜひ試してみてください。
GTUG Girlsのみなさん、講師のyosuke_furukawaさん、チューターの方々、お忙しい中勉強会を開いていただいてありがとうございました。

ここまで読んでくださり、ありがとうございます。




広告システムについてのお問い合わせやご相談、パッケージ製品の詳細はこちらからどうぞ。
http://admage.jp/
アプリ計測SDK admage for Appのお問い合わせ・詳細はこちら。
http://apptizer.jp/

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る