Node.jsとElectronの開発環境を作成する

Windows10にNode.jsをインストールし、Electronアプリの開発環境を作成します。

そしてサンプルプログラムを作成し、実行してみます。

はじめに

今更かもしれませんが、node.jsを調べてみました。

「javascriptでWebアプリが作れるサーバー」のイメージでしたが、やってみるとスクリプト環境です。Perlでソケットを開いてTCPサーバーを作るのと同じような感覚。双方ともモジュールを追加することで、簡単にいろいろできるようになります。

ふと「フロントエンドにWebkitのレンダラーを同梱すればデスクトップアプリにもなるかな」と思って調べたところ、既に同発想のNW.js、Electronというものがあることがわかりました。何れもブラウザのChromiumが組み込まれており、Node.jsと同じMITライセンス、そしてNode.jsのモジュールも使えそうです。

javascript(とHTML/CSS)で簡単にアプリが作れそうです。

NW.jsはいきなりHTMLから作るということで、より簡単にアプリが作れそうです。パッケージ作成はNW.exeの後ろに環境のzipをくっつけるという荒業。

一方Electronは、エントリーにjavascriptを書いて、そこからレンダラーのウィンドウを開くという形式。こちらは通常のウィンドウのアプリを作るのに似ていて馴染みがあります。(今のデスクトップアプリ開発はエントリーをコードする必要はないかもしれませんが。)

後者の方が馴染みのある設計方式なのと、バージョンが1.0を越えていて完成してそうなイメージなのとで、Electronを試してみることにしました。

本稿では、Node.jsのインストールからElectronアプリのパッケージまでをレポートします。

環境

本稿の環境は以下です。

  • Windows10:ver.1607
  • Node.js:v6.9.1
  • npm:3.10.8
  • Electron:1.4.10

バージョンが異なる場合は、本稿の内容が再現しない場合が多々ありますのでご留意ください。

また各WEBサイトの情報は2016年11月29日現在のものです。

Node.jsのインストール

最初にNode.jsをインストールします。

インストーラーを使う

Node.jsのページ(日本語)に行くと、いきなりページ中央にダウンロードのリンクがあります。

ここの「推奨版」をクリックすると、Windowsの場合はインストーラー(.msi)がダウンロードされますので、これを実行することでNode.js が簡単にインストールできます。

手動でインストールする

いろいろなバージョンのnode.jsを使いたいとか、環境によって使い分けたい場合は手動でインストールします。

その場合、Node.jsのサイトの上部にあるメニュー「ダウンロード」をクリックしてダウンロードのページに行きます。

インストーラー(Windows Installer (.msi))の下に「Windows Binary (.exe)」があります。ここからダウンロードできるのは「node.exe」単体です。モジュールを管理するnpmがありません。ですのでここでは推奨版のバージョン番号だけ覚えて、リンクは無視します。

このページの一番下に行くと「バージョンの一覧」がありますのでここをクリックし、リリース一覧のページに行きます。

このページの表から、先の推奨版バージョンの行を探し、その行の「ダウンロード」をクリックします。これでようやくダウンロードできるページにたどり着きます。(現時点での推奨版、v6.9.1のリリースページはここ。)

ここから「node-v6.9.1-win-x86.zip 」(32bit版)、或は「node-v6.9.1-win-x64.zip 」(64bit版)をクリックしてダウンロードします。

zipの中に「node-v6.9.1-win-x86」(或は-x64)というディレクトリがありますので、これをエクスプローラーで任意のディレクトリにドラッグ&ドロップして、その名前を「node.js」等にリネームします。

パスを通せばインストール完了です。

パスの通しかた

一応パスの通し方も書いておきますね。Windows10の場合です。(インストーラーでインストールした場合はパスが通されているはずです。)

コルタナさんに「環境変数」と聞くと、「システム環境変数を編集」を提示してくれますのでこちらをクリックします。(「環境変数を編集」だとダメ。)

「システムのプロパティ」ダイアログから「環境変数」をクリックし、「環境変数」ダイアログからシステム環境変数のPathを選択して「編集」ボタンを押します。

「環境変数名の編集」ダイアログにて「新規」をクリックし、リストの最後に、先の「node.js」(node.exeがあるディレクトリ)までの絶対パスを書き込みます。

Windows10ではパスの編集がしやすくなりましたね。(それを書きたかっただけ。)

コマンドプロンプトから「node –version」と入力して、バージョン表示がなされれば成功です。

開発環境の作成

続いて開発環境を作成し、Electronをインストールします。

プロジェクトのディレクトリの作成

プロジェクトのディレクトリを適当なワークスペースに作成します。

ここでは、プロジェクト名を「glasspot」とし、そのディレクトリをB:\workspace\下に作成することにします。

あ、プロジェクトの名前は何となくです。fragileなイメージ。

package.jsonの作成

次に開発環境を記録するpackage.jsonを、パッケージ管理ツールのnpmで作成します。

コマンドプロンプトを開き(Windowsキー+x, c)、「B:\workspace\glasspot」に移動します。(コマンド入力はこんなのです。B:↲ cd workspace\glasspot↲)

そこで「npm init↲」と入力し、その後対話的にプロジェクトの情報を入力します。

とりあえずname、versionだけ入力し、あとはリターン連打しました。

プロジェクトディレクトリに「package.json」が出来ていればOKです。

Electronのインストール

Electronもnpmでインストールします。

コマンドプロンプトより以下を入力します。

npm install electron --save-dev

オプションの「--save-dev」ですが、これはpackage.jsonに依存関係を自動記録するためのものです。後々「--save」というオプションも使いますが、こちらはアプリに必要なモジュール、「--save-dev」は開発に必要なモジュールの記録ですね。

パスの通った「グローバル」のnode.jsにモジュールをインストールする場合は「-g」オプションをつかって「npm install -g electron↲」とします。こちらを示すブログ記事もありますが、本シリーズでは以降「-g」オプションは一切使いません。開発環境を再現できるようにすることがその理由です。

また他のブログ記事では「electron-prebuilt」を指定してインストールしている解説があったりしますが、現時点でのnpmパッケージではelectron-prebuiltとelectronは同じものです。後者を使うことが推奨されています。(electronパッケージのページ、及びelectron-prebuiltパッケージのページを参照。)

以上でElectronアプリの開発環境の作製は終了です。

プロジェクトディレクトリの確認

ではディレクトリを確認してみましょう。

現在「B:\\workspace\glasspot」の下には、package.jsonというファイルと、node-modulesというディレクトリがあります。

現在のpackage.jsonの中身は以下です。

{
  "name": "glasspot",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.4.10"
  }
}

そしてnode-modulesの中には、electron以外のディレクトリがいっぱい。依存関係で引っ張ってきたのでしょう。

node-modulesの一番上に「.bin」というディレクトリがあります。この中に「electron.cmd」というコマンドがあり、これでelectronが走ります。

確認のため、コマンドプロンプトから以下を打ち込んでみます。

node_modules\.bin\electron --version

バージョンが表示されれば成功です。

サンプルプログラムの実行

Electronのサンプルプログラムを実行してみましょう。

コーディング(コピペ)

サンプルプログラムは、ElectronのサイトドキュメントQuick Startにあります。

真ん中らへんに、「Write your First Electron App」の章があり、ここにpackage.json、main.js、index.htmlのソースが書いてあります。これをプロジェクトディレクトリに作成します。

package.jsonは先に作ったものがありますので、これの5行目、「”main”: “index.js”,」の行を「”main”: “main.js”,」に書き換えます。

main.js、index.htmlをpackage.jsonと同じディレクトリに作成し、ページのソースをこれらの中にコピペします。

実行

実行はページの下方に書いてある通り、コマンドプロンプト(開いていればプロジェクトディレクトリにいるはず)で以下を入力します。

node_modules\.bin\electron .

暫くして、以下のような画面が表示されれば成功です!

index.htmlの内容とデベロッパーツールが表示されています。

デベロッパーツールはChromeなどと同様に、ドック解除したり、画面のしたにドックしたりできます。アプリの画面作成では、ドック解除したほうが良いでしょう。(ドック解除は、デベロッパーツールのメニュー右にある「|」アイコンから。)

メニューバーもそれなりに動くのですが、ソースにはそれらしきものがありません。予めそれっぽいメニューがデフォルトにセットされているのでしょうね。

main.jsのソースはコメント共々ご一読することをお勧めします。Electronの作法がなんとなくわかります。MacOSの場合とか。

index.htmlでは、processというオブジェクトが何の定義もなしに使われています。これはNode.jsのグローバルオブジェクトのようですね。

どうやらHTMLの中でもNode.jsの機能が使えるようです。(セキュリティの問題に関してはまた後の稿にて。)

javascriptっぽい書き方

C言語からのプログラマーである私にとっては、main.jsには見慣れない書き方があります。

まず、全ての行末にセミコロンがありません。ググってみると、セミコロンは省略できるのですね(@_@)!

次に一行目、

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

無名のオブジェクトにrequireが返すオブジェクトをセットし、app、BrowserWindowのメンバーだけ名前を明確にして使っているのでしょうか。

最後に46行目などにある「() => {…}」これは無名関数「function(){…}」でしょうね。

46行目をfunctionに書き換え、また1行目を以下のように3行に書き換えて、動作することを確認します。

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

無事動作しました。

() => {…}」は、ブロック内のthisがその外のthisと一致するのですねφ(..)メモメモ。こちらのほうが間違いがすくないかもしれません。

まとめ

Node.jsをインストールし、またプロジェクトのディレクトリにElectronをインストールしました。

さらにサンプルプログラムを実行してみました。

本稿で作成した環境を元に、次回からアプリ作成を目指します。

コメントを残す