こんにちは、編集長の白石です。

この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。

今回お話を伺ったのは、アシアル株式会社 代表取締役社長の田中正裕さんです。

田中さんのセッションは「Web技術でネイティブアプリを開発する話」（ホール 14:20-15:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめずにキャンセル待ちすることをお勧めします！）

Webとネイティブ境目が曖昧になってきた

白石: 田中さんは、ずっとWebとネイティブのハイブリッドアプリの分野で活躍してらっしゃいます。そんな田中さんから見て、最近のWebやモバイルアプリ開発についてはどのように見ていらっしゃいますか？

田中: はい、まずはそもそも最近Webがネイティブにかなり近づいてきたな、と思っています。

例えば実現できる機能。以前はWebとネイティブはできることに差がありましたが、最近はWebにできることがすごく増えてきています。Service Workerの登場で、以前はWebでは実現が難しかった、プッシュ通知やバックグラウンド処理なども可能になってきている。

ネイティブはコードがバイナリにコンパイルされて高速に動く、という点でも、Web Assemblyの登場により、今後は目立ったディスアドバンテージではなくなっていくでしょう。そもそも、端末速度の向上とブラウザエンジンの高速化で、速度差自体が目立たなくなってきています。

白石: Web Assemblyは期待ですよね。そのうち、フルWeb AssemblyのWebアプリフレームワークが出たりするのではないか、と期待しています。

田中: きっと出るでしょうね。iOS 11がWeb Assemblyに対応したことも、すごく大きな意味を持っていると思います。

他には、アプリの起動方法も違いとしてよく挙げられていましたが、Webはブラウザからアクセスするもので、ネイティブはインストールして使用するもの、という区分けも最近意味がなくなってきました。例えばProgressive Web Appsなんかはその象徴ですよね。ブラウザがWebアプリを端末にインストールしたら、あとはネイティブアプリと遜色なく動作する。

白石: Safariには昔から、ホームスクリーンにWebサイトへのブックマークを追加する機能がありますが、それがもっとスマートな形で実現しそうですね。

田中: そして、Web技術を使ってアプリを作る方法自体が今や多様化していて、以前のような「Webかネイティブか」という単純な二分法じゃなくなっているんですよね。

Electron

白石: はい、その多様化したアプリ開発手法を本日は伺いに参りました。一つ一つ教えてください。

田中: カンファレンスのセッションではコード例を挙げながらお話しようと思いますが、今日は口頭による説明で進めましょう。

ではまず最初に、Electronの紹介からいきたいと思います。クロスプラットフォームなデスクトップアプリを開発するためのフレームワークで、元々はGitHubが開発した「Atom Shell」というツールでした。

田中: 特徴としては、Chromiumを組み込んだブラウザレイヤーと、Node.jsによるネイティブレイヤーの二層構造になっているという点が挙げられるかと思います。WebViewはもちろん、Node.jsもクロスプラットフォーム性の非常に高いプラットフォームですので、Electronを用いると、クロスプラットフォームなアプリを簡単に開発することができます。

白石: 著名なところでいうと、SlackはElectronで書かれているんですよね。

田中: そうです。Slack、Visual Studio Code、そしてもちろんGitHub製のエディタであるAtomと、著名なベンダーもElectronの採用には積極的ですね。

白石: Electronの将来は明るそうですね。Electronの欠点とかはあるんでしょうか？

田中: WebViewの上で動作するので、やはりパフォーマンスやメモリ使用量の面では不利になりますね。ただ実際には、PCはモバイルに比べると速度面で優位ですので、そこまで気にするところでもありません。

さっき挙げた例で言うと、SlackやAtomは重いなあ…と感じることが多いですが、Visual Studio Codeはすごく軽快に動作します。なんでElectron開発元が開発しているAtomがあんなに重いのか(笑)。VS Codeの軽快さは、相当な技術力のなせる業なのかもしれません。

白石: さすがマイクロソフトってところですね。

Cordova

田中: では次はCordovaについてですが、これは説明の必要もないくらい有名なフレームワークですね。Electronのモバイル版と言ってもいいかなと。WebViewと、ネイティブ機能を利用するためのCordovaプラグインという「二層構造」であるところも同様です。

Electronと違うところは、よりベースとなるOSの依存度が高いというところが挙げられると思います。WebViewは基本的にOSネイティブのものを使用しますし、Cordovaプラグインは通常ネイティブの開発言語で開発します。（Electronの場合はWebViewは組み込みのChromium、ネイティブ部分はNode.js）

白石: 田中さんはMonacaの開発者でもあり、Cordovaのことは誰よりも知りつくしていらっしゃるかと思いますが、利点や欠点を教えていただけますか？

田中: 利点はやはりクロスプラットフォーム性です。複数のモバイルOS上で動作するアプリを、ほぼ1ソースで書くことができます。

欠点は昔から言われているように、パフォーマンスが遅いという点。ただ先程も申し上げたように、端末もブラウザも速度が向上していて、「遅さ」はあまり気にならないレベルになっていると思います。少なくとも、Monacaのユーザーに限って言うと、ほとんどの方が問題ないとおっしゃってますね。

白石: ぼくも、もうそういう段階なんじゃないかな…とは思っていたのですが、田中さんに言われると説得力が違いますね。

田中: 今では、Cordovaを使っていても、ユーザーが気付くこともほとんどないと思います。例えば、◯◯（某ECアプリ）も実はCordovaを使っているようなんです。

白石: えっ！あの◯◯が！ぼくもよく使っていますが、全然気づきませんでした。

田中: そうなんです。意外と広がっているんですよね。今後もその存在感は増していく…と言ってもいいんじゃないでしょうか。

React Native

田中: では次はReact Nativeです。Facebookが作っているモバイルアプリ用のフレームワークで、一言で言えばReactを使ってモバイルアプリを作るためのツールですね。Reactの仮想DOMを、ネイティブのUIコンポーネントを利用してレンダリングするものです。

白石: React Nativeは最近人気急上昇中ですよね。その理由は何なんでしょうか？

田中: React自体に人気があるということと、そしてFacebookが自ら使用しているのが大きいですね。React Nativeは、元々Instagramのチームが作っていたそうです。

白石: React Nativeの利点や欠点はなんでしょうか。

田中: WebViewの上で動作するのではなく、ネイティブに動作するアプリが作れるというのは大きな利点ですね。パフォーマンス上の問題も生じにくいし、ネイティブのルック＆フィールをそのまま利用できる。

また、UIスレッドとJavaScriptのUIスレッドが最初から分かれているのも利点だと思います。JavaScriptの処理がUIスレッドの動作を阻害しないので、UIが60fpsを維持しやすい。

白石: では、React Nativeには欠点といえるものはありますか？

田中: 作ってみると分かるのですが、結構作り方に癖があるんですよね。それに慣れるのが少し大変かもしれません。コードの共通化は促進されるものの、クロスプラットフォームじゃないというところも、議論が分かれるところです。

白石: Facebookは「Learn Once Write Anywhere」（一度学べばどこでも書ける）と言っていますね。

田中: そうですね。クロスプラットフォームは最初から目指していない。そこもCordovaとは大きな違いです。

CordovaはWebそのものですから、ブラウザを使って開発し、ブラウザの機能が増えてネイティブと遜色なくなれば、なくなって当然のものという前提でした。React Nativeは、ネイティブアプリをJavaScriptで作るという発想です。なので、開発にはネイティブの知識が必要になります。JavaScriptを使用するので、開発体験自体はWebに近いものがあるのですが、やはりHTMLやCSSを使ったUI開発とは別物です。

NativeScriptとWeex

田中: あとはNativeScript、あとWeexというフレームワークを紹介していこうと思います。

白石: ここらへんまで来ると、聞いたことないという人も多そうですね〜。

田中: NativeScriptは、ネイティブで動作するアプリをJavaScriptで書けるフレームワークです。「React NativeからReactを抜いたもの」と考えてもいいでしょう。

白石: ぼくもNativeScriptの名前は聞いたことがあったのですが、Angularの界隈で耳にしました。

田中: そう、Angularと組み合わせて使えるというのを一つのウリにしています。Angularのイベントとかにも積極的に出ていて、Angularチームとの関係は良好そうです。

白石: 利点や欠点を教えていただけますか？

田中: 利点はやはりネイティブのパフォーマンスで動くこと、そしてAngularと組み合わせて使えることでしょうね。ただ、「組み合わせて使える」と言っても、React Nativeほどスムーズには使えないのが悩ましいところですが。

欠点は…なんといってもユーザーが少ないことですね。採用事例とかも探したのですが、今のところ見つかっていない状態です。GitHub上ではかなりの人気なのですが （筆者注: 2017/9/16時点で11,076のスターを集めている）。

あと、開発していたTelerikという会社がProgressという大企業に買収されてしまって。その後ちょっと開発が停滞してしまっているように見えるんですよね。それもちょっと心配なところです。

白石: 買収あるあるですね(笑)。

田中: 最後はWeexをご紹介しましょう。

これはVue.jsを使ってネイティブアプリを作れるというフレームワークです。React NativeのVue版と言っても差し支えないかと思います。

白石: では、利点もReact Nativeなどと同様に、ネイティブの速度で動く、ネイティブのUIコンポーネントが使えると言ったところですよね、きっと。

田中: はい、あと面白いのは、これってアリババが開発に携わっているんです。なので、実は中国ではすでに事例が多いそうなのですよね（筆者注: Weexのサイトに、「Who uses it」というセクションで採用企業の一覧がある）。

白石: おお、それはNativeScriptとは違うところですね。アリババが付いているとなると、開発リソースも割けそうだし、事例もどんどん増えていきそうです（筆者注: 元々アリババのGitHubリポジトリ上で開発されていたが、Apache Software Foudationに寄贈された）。

田中: Vue自体もすごく人気がありますしね。Vueに関心のある方にとっては、注目に値するプロダクトだと思います。

Web技術を用いたネイティブアプリ開発は広まるか？

白石: では最後にまとめとして、Web技術を使ってネイティブアプリを作るという手法は、今後も広がっていくのかどうかをお聞きしたいです。

田中: そうですね、今回取り上げた各プロダクトのnpmのダウンロード数とかを見ると、右肩上がりではあるんです。ただ、その事実を以て、Web技術によるアプリ開発の人気が高まっていると言い切れるかは微妙です。アプリ開発市場そのものも、まだまだ拡大していっていますからね。

個人的には、Web技術によるアプリ開発が、ネイティブの開発手法よりも人気が上回るようなことにはならないと思います。OSの開発元がオフィシャルに推進しているわけでも、何かを保証しているわけでもありませんし。これまでiOSやAndroidの開発者を雇って、アプリ開発を行っていたような企業が、Cordovaを選ぶようなことは、今後もあまり起きないと考えています。

白石: なるほど、冷静なご意見。

田中: ただ一つだけ言えるのは、Web技術者による、フロントエンドのアプリケーション開発が今後も伸びていくのは間違いないということです。それが純粋なWeb技術だけを用いてProgressive Web Appsを作るのか、先程紹介した技術のどれかを利用してモバイルアプリを作るのかについては、あまり変わらないと思います。

だから、元々Webをやっていた会社にとっては、既存のスキルセットや資産を使って、やれることの選択肢が増えてきているのは間違いありません。

Web技術の進化も、Webブラウザによる実装もまだまだ続いていますし、Webの未来にはまだまだ期待しています。

白石: よくわかりました。田中さん、今日はWeb技術を使ってネイティブアプリを作るテクノロジーについて、幅広く教えていただきありがとうございました。大変勉強になりました。

Electron

Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。

ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開発の技術を使ってデスクトップアプリケーションを構築することが可能です。

ElectronはCheng Zhao氏 (以降zcbenz)が開発したフレームワークですが、zcbenz氏は実際Electronの開発前にNW.js(旧 NodeWebkit) と呼ばれるフレームワークのコントリビューターでした。ElectronはNW.jsと非常によく似たフレームワークですが、いくつか技術的に異なるポイントが有ります。決定的な違いは、Chromiumの組み込み方の違いです。ElectronはライブラリとしてChromiumを組み込んでいるのに対して、NW.jsはChromiumをforkしたプロジェクトを使っています。Chromiumは非常に進化が早いプロダクトなので、forkして持つよりもアップデートを考えると効率的です。

とはいえ、NW.jsとElectronの技術的な部分以外は違いはそこまでありません。Atom開発当初にNW.jsが多少不安定だったために新しいプロダクトとして立ち上げたという側面もあるそうです。詳しくはAtomShellとNodeWebkitの違いに詳しく記載されています。

Electronの特徴

いくつか特徴があるので紹介します。

Electronのランタイム

Electron そのものはただのランタイムライブラリです、Node.jsにおけるnodeコマンドのようなもので、electronコマンドでエントリポイントとなるJavaScriptを実行します。

electronコマンドは公式サイトからダウンロードすることもできますが、Node.jsのパッケージモジュールである、npmコマンドを使ってインストールすることも可能です。

$ npm install electron -g

※ 以前までは npm install electron-prebuiltからインストールする必要がありましたが、最近はnpm install electronでinstallできるようになりました。

これでelectronコマンドが有効になるので、そのコマンドを使ってデスクトップアプリケーションを起動させます。アプリケーションを実際に書くのは後述します。

Electron / Browser間でモジュールを共有

Electronアプリを構築すると、シームレスにブラウザからNode.jsのコードを呼ぶことが可能です。そのため、下記のようなコードを実行することもできます。　

// script tag から
<script>
// 自分のローカルファイル読みこんだり
const fs = require(‘fs’);
fs.readFile(‘foo/bar/baz’, (err, data) => {
  console.log(data);
});
</script>

<script>
// 外部プロセスを呼んだり
const cp = require(‘child_process’);
cp.exec(‘ls -l’, (err, stdout) => {
  console.log(stdout);
});
</script>

ただし、この方法を使った場合、DOM-based XSSが発生すると、任意のコマンドだったり、ファイルが操作できてしまう結果になるため、プロダクションでElectronを活用する場合は注意が必要です。

参考資料: Electronの倒し方

Hello World

一旦Electronを起動してみましょう。Electronを動かすだけなら Node.jsはbuilt-inされているので不要ですが、npmがある方が便利なのでNode.jsをインストールしておきましょう。Node.jsは 公式サイトからダウンロードできます。Macであれば、brewでもインストール可能です。

Node.jsがインストールされたらElectronをインストールしてみましょう。下記の通りです。

$ npm install electron -g

適当なフォルダを作成し、package.json、main.js、index.htmlを作成します。 package.jsonは下記の通りに作成します。

{
  "name": "electron-intro",
  "version": "0.0.1",
  "main": "main.js"
}

main.jsを記述します。

const {app, BrowserWindow} = require('electron');

// window objectがGCされないようにするために、globalに定義する
let win;

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);

  win.on('closed', () => {
    // windowがクローズされたら null にして削除
    win = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

最後に表示するための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>,
    Chrome version: <script>document.write(process.versions.chrome)</script>,
    Electron version: <script>document.write(process.versions.electron)</script>.
  </body>
</html>

これだけでHello Worldは一旦完成です。 下記のようなファイル構成になっていることを確認してください。

.
├── index.html
├── main.js
└── package.json

Electronを起動させてみましょう。

$ electron .

下記のようなウィンドウが出たら完成です。

Hello, World実行結果

PhotonKitを使ってミニマムブラウザを作る

これだけだと味気ないので、PhotonKitを使ってミニマムブラウザを作ってみましょう。ブラウザを作ると言っても、 Chromiumを内包しているElectronであれば、Chromiumの機能を借りてくるだけなのでそこまで難しくはないです。

PhotonKitはCSSフレームワークの1つです。BootstrapやMaterial Design Liteのようなclass setを持っています。Mac のクライアントのようなアプリケーションを作るためのデザインテンプレートになっています。

Photon

まずはpackage.jsonを作りましょう。

{
  "name": "electron-mini-browser",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "electron": "^1.3.5"
  }
}

npm startでElectronを起動できるようにしておくことと、dependenciesにelectronをインストールしておきましょう。下記の方法でpackage.jsonに記述しつつ、インストールさせることが可能です。　

$ npm install electron --save

次にindex.jsを作成します。

'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);

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

実際のページ(index.html)を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/photon.css">
    <script src="./js/main.js"></script>
    <title>Hello Electron!</title>
  </head>
  <body>
    <div class="window">
    <header class="toolbar toolbar-header">
    <h1 class="title">Hello Electron!</h1>
    <div class="toolbar-actions">
     <!-- リロードボタン -->
     <button id="reload" class="btn btn-default">
       <span class="icon icon-arrows-ccw icon-text"></span>
       Reload
     </button> 
     <!-- 戻るボタン -->
     <button id="back" class="btn btn-default">
       <span class="icon icon-left icon-text"></span>
       Back
     </button> 
     <!-- 進むボタン -->
     <button id="forward" class="btn btn-default">
       <span class="icon icon-right icon-text"></span>
       Forward
     </button> 
     <!-- URL バー -->
     <input type="text" id="urlbar" class="form-control" placeholder="URL" value="https://github.com/">
     <!-- お気に入りボタン -->
     <button id="favorite" class="btn btn-default">
       <span class="icon icon-star icon-text"></span>
       Favorite
     </button> 
    </div>
    </header>
      <div class="window-content">
        <div class="pane-group">
          <div class="pane-sm sidebar">
            <!-- お気に入りリスト -->
            <ul id="fav-list" class="list-group">
            </ul>
          </div>
            <!-- Webページ表示領域 -->
          <webview class="pane" id="webview" src="https://www.github.com/" autosize="on" style="height:100%;"></webview>
        </div>
      </div>
    <footer class="toolbar toolbar-footer">
    <h1 class="title">Footer</h1>
    </footer>
    </div>
  </body>
</html>

ページの中のボタンに動きを与えるため、js/main.jsを作成します。

document.addEventListener('DOMContentLoaded', () => {
  const webview = document.getElementById('webview');
  const reloadButton = document.getElementById('reload');
  const backButton = document.getElementById('back');
  const forwardButton = document.getElementById('forward');
  const favoriteButton = document.getElementById('favorite');
  const urlbar = document.getElementById('urlbar');
  const favList = document.getElementById('fav-list');

  // webview表示の時にurlbarの値を変える
  webview.addEventListener('load-commit', ({ url, isMainFrame }) => {
    if (isMainFrame) {
      urlbar.value = url;
    }
  });

  // urlbarでEnterキーを押したら遷移する
  urlbar.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      webview.setAttribute('src', urlbar.value);
    }
  });

  // 更新ボタンをクリックしたらwebviewをリロードする
  reloadButton.addEventListener('click', () => {
    webview.reload();
  });

  // 戻るボタンをクリックしたらwebviewを戻る
  backButton.addEventListener('click', () => {
    webview.goBack();
  });
  
  // 進むボタンをクリックしたらwebviewを進ませる
  forwardButton.addEventListener('click', () => {
    webview.goForward();
  });
  
  // お気に入りボタンをタップしたらリストにURLを追加する
  favoriteButton.addEventListener('click', () => {
    const listItem = document.createElement('li');
    const listContent = document.createElement('p');
    listItem.setAttribute('class', "list-group-item");
    listItem.setAttribute('data-url', urlbar.value);
    listContent.textContent = urlbar.value;
    listItem.appendChild(listContent);
    favList.appendChild(listItem);
    listItem.addEventListener('click', () => {
      const url = listItem.getAttribute('data-url');
      webview.setAttribute('src', url);
    });
  });
});

最後にPhotonKitのCSSとFontセットを ダウンロードしておきます。 下記のようなディレクトリ構成になります。

.
├── css
│   ├── photon.css
│   └── photon.min.css
├── fonts
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
├── index.html
├── index.js
├── js
│   └── main.js
└── package.json

全てを終えたら、npm startコマンドで起動します。下記のようなブラウザが出現できたら完成です。

Electron+Photonで作ったミニブラウザ

プラットフォーム/ライブラリの特徴

以下に、上の表を補足します。

対応プラットフォーム

Electronの公式サポートはWindows, Linux, OS Xの３つのみです。今のところはデスクトップアプリケーションのためのフレームワークなので、モバイル対応は全く考えられていません。

コードベースは (ほぼ) 完全に統一できるか？

ほぼ統一できます。ただし、OS X用の機能であったり、Windows専用の機能は用意されていて、プラットフォームによって呼び出し可能なAPIや受信可能なEventが若干異なります。クロスプラットフォームでOSの専用の機能を利用する上で、気になる方は一度APIを確認すると良いでしょう。

UIを記述する言語

Hello Worldやミニブラウザを作って分かる通り、HTML/JS/CSSで書きます。ネイティブ部分の呼び出しもNode.jsなので、 JavaScriptになります。

JavaScriptのレイヤはNode.js部分とChromium部分でv8(JavaScript Engine)が動くので、ほぼ同一の動きをします、ただし、Node.jsとChromiumでv8のバージョンは若干違う可能性があります。基本的な部分は変わりませんが、ES2016の対応状況を見てもらえれば分かる通り、新しいJavaScriptの機能面で違いはあります。

ES2016の対応状況

UIはネイティブかウェブか

基本はウェブです。デスクトップアプリケーションとして、タスクトレイに常駐させたい場合やOSネイティブのダイアログボックスを使いたい場合は専用のAPIがあるので、それを利用して機能を作ることも可能です。

パフォーマンス

Electronは基本的にウェブなので、ネイティブのデスクトップアプリと比較するとそこまで高速ではありません。

Electronのアプリを起動させると、Chromium用のプロセスが3つ起動し、Node.js用のメインプロセスが1つ起動します。合計4プロセスが常駐することになります。言ってしまえばブラウザそのものを起動しつつ、バックグラウンドにNode.jsを起動しているのと同様です。富豪的な方法で実現していると言えるでしょう。

そのため、描画パフォーマンス等はブラウザの機能がそのまま利用できますが、実行効率が良いモデルとはいえません。パフォーマンスにシビアなアプリケーションを作る場合は Electron ではなく、ネイティブの機能を使って作る方が良いでしょう。

ネイティブな機能を呼び出せるか？

ElectronからNode.jsを呼び出せばファイル操作や外部プロセスコールといった基本的な機能は呼び出せます。また、C言語等で書かれたネイティブライブラリもNode.jsアドオンがあれば呼び出すことが可能です。ただし、ネイティブライブラリに関しては、通常のnpmでインストールするだけでは利用できないことがあります。Nodeのバージョンがelectronのbuilt-inで保持しているバージョンと異なる場合にうまく利用できないことが多いです。ネイティブライブラリを利用したい場合は下記のガイドを確認することを推奨します。

ネイティブライブラリ利用ガイド

まとめ

Electronの概要とアプリ構築の方法、ウェブ用プラットフォームを構築する上での共通質問項目を記述しました。Electron はこれまでのAngularJSやReact等で構築されたSingle Page Applicationを活用して、デスクトップアプリケーションを構築するのに非常に向いています。

まだv1.0がリリースされて日が浅いこともあり、そこまでノウハウが溜まっているわけではありません。特にセキュリティやパフォーマンスなどの改善は今進んでいますが、ユーザーからのノウハウも溜める必要があると感じています。

もしまだ触っていない方がいらっしゃるのであれば、electronicaなどのチュートリアルもあるので是非やってみてください。

また今回のNode学園祭では、Electron作者のzcbenzもゲストスピーカーとして登壇する予定です。Electronの今後の話が聞けると思います。

一緒にElectronを盛り上げていきましょう。