入門
第1回 Electronに触ってみる

第一回目はElectronの開発環境を整え、HTMLファイルを開くだけの簡単なデスクトップアプリケーションを作って、一連の流れを体験してみましょう。そのポテンシャルの一端に触れてもらうことができます。

2016年07月28日発行

目次

Electronとは

ElectronはGitHub社が作ったデスクトップアプリケーションフレームワークです。Electronの中身はブラウザエンジンのChromiumとNode.jsで、JavaScript、HTML、CSSを使ってデスクトップアプリケーションの開発ができます。簡単に言うとWebアプリケーションをElectronを使ってパッケージングする、といったようなイメージです。

Electron

手軽にデスクトップアプリケーションを作れる

筆者はElectronを使ってcgmd-previewという、codegrid-markdown*をリアルタイムにプレビューするためのデスクトップアプリケーションを作成しました。プレビューでは、CodeGridのWebアプリ上での記事の状態が表示されるので、原稿を執筆する際にイメージがつかみやすくなります。

注*:codegrid-markdown

codegrid-markdownはCodeGridの執筆フローを効率化するために作られた、CodeGridのためのMarkdownパーサーです。詳しくはCodeGridの作り方 第2回 CodeGrid独自のMarkdown記法を参照ください。

ちなみにこの記事もcgmd-previewを使って書かれました。エディタで原稿を書くと、それがリアルタイムでプレビューされます。原稿が保存されるたびにプレビューも自動で更新されます。

cgmd-previewの使用

Electronでは、ブラウザアプリケーションやNode.jsの開発で培ったノウハウと、npmにある豊富なパッケージをそのままデスクトップアプリケーションの開発に活かすことができます。Electronのルールや手順さえ覚えてしまえば、とても簡単にデスクトップアプリケーションを作ることができるでしょう。

この連載では、ローカル環境にあるMarkdownファイルをプレビューするアプリケーションを作りながら、Electronの基礎を解説していきます。

なお、紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。

Electronではじめるデスクトップアプリ開発 サンプルリポジトリ

このシリーズでは、次の環境にて動作を確認しています。環境や各ソフトウェアのバージョン違いにより、本シリーズで解説している内容がそのまま動作しない可能性がありますので、その点ご留意ください。

  • Node.js 4.4.7
  • npm 3.10.3
  • Electron 1.2.6

環境構築

Electronを実行するための環境を整えましょう。

準備として、アプリケーション用の新規ディレクトリを作成しておき、以降はこのフォルダ内で作業を進めていきます。

package.jsonの作成

アプリケーションで利用するnpmのモジュールを管理するために、アプリケーション用のディレクトリ内にpackage.jsonを作成します。

次のJSONをpackage.jsonというファイル名で保存します。

package.json
{
  "name": "markdown-preview",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "version": "electron -v"
  }
}

package.jsonにはアプリケーションのエントリポイントとなるファイルの指定をmainに、scriptsにアプリケーションを起動するためのstartコマンドと、バージョンを確認するversionコマンドを設定しておきます。

electron-prebuiltのインストール

Electronをインストールします。ターミナルから次のコマンドを実行してインストールを行います。

electron-prebuiltのインストール
$ npm install --save electron-prebuilt

インストール完了後、次のコマンドでelectronコマンドが正しくインストールされたかを確認します。v1.2.6のようなバージョン番号が表示されれば正しくインストールされています。

バージョン表示
$ npm run version

【ワンポイント】electron-prebuiltの管理

Electronのアプリケーションは、electron-prebuiltのバージョンが異なるとうまく動かなくなる場合があります。これを避けるためにアプリケーションごとにelectron-prebuiltをローカルモジュールとしてインストールし、管理することを推奨します。npm-scriptsについてはチーム開発に効く環境構築術 第3回 スクリプトを管理するを参照してください。

Hello Electron!!

まずはElectronでHTMLファイルを開くという動作を実装してみましょう。

main.js

Electronのアプリケーションには、エントリポイントとなるメインのJavaScriptファイルが必要になります(メインプロセス)。メインプロセスからブラウザウインドウ(レンダラプロセス)を操作して、アプリケーションを構築します。

メインプロセスでは主にOSとのやり取りを行うバックグラウンドのプロセスを担当し、レンダラプロセスではHTMLとCSSによる画面のレンダリングと、それに伴うJavaScriptの実行を担当します。重い処理やレンダリングと関係ない処理に関してはメインプロセスで行い、レンダラプロセスはレンダリングの処理に徹するのが望ましいでしょう。

2つのプロセスは実行されるコンテキストが異なるので、プロセス同士で通信するにはElectronのipcモジュールを利用する必要があります(ipcモジュールについては次回以降解説します)。

それではメインプロセスの処理を書いてみましょう。次のコードをmain.jsとして保存します。main.jsではブラウザウインドウを生成してローカルのHTMLファイルを開きます。

main.js
const {app} = require('electron');
const {BrowserWindow} = require('electron');

app.on('ready', () => {
  const browserWindow = new BrowserWindow();
  browserWindow.loadURL(`file://${__dirname}/browser.html`);
});

アプリケーションのメインとなるのはappです。アプリケーションに関する処理はreadyイベントがappに対して発生したあと(アプリケーションの起動の準備ができたあと)に行うのがElectronのセオリーです。アプリケーションの準備ができたあと、BrowserWindowのインスタンスを生成し、loadURL()で指定したHTMLファイルを開きます。

【ワンポイント】一部の新しいJavaScriptの機能が使える

ElectronはNode.jsとChromiumの比較的新しいバージョンによってできていますので(Electronのバージョン1.2.7では、Node.jsにはv6.1.0が適用されています)、ES2015の一部の機能などを使ってコードを記述することができます。Babelなどのトランスパイラを使わずとも、そのまま実行できますので、ES2015の素振り的な意味も兼ねて積極的に使ってみることをオススメします。

browser.html

ブラウザウインドウで開くHTMLを用意します。次のコードをbrowser.htmlとして保存します。

browser.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!!</title>
  </head>
  <body>
    Hello Electron!!
  </body>
</html>

このbrowser.htmlmain.jsbrowserWindow.loadURL(file://${__dirname}/browser.html);という指定によって開かれます。

Electronの実行

ターミナルで、次のコマンドを実行してElectronのアプリケーションを起動してみましょう。

Electronのアプリケーション起動
$ npm start

実行後、次のようなウインドウが表示されれば成功です。

Hello Electron

browser.htmlが表示される。

Hello Electron

HTMLを表示するだけという単純なものですが、これだけのコードでデスクトップアプリケーションとして動作させることができました。ローカルのファイルではなく、特定のURLを開きたい場合にはbrowserWindow.loadURL()の引数としてURLを渡すことで開くことができます。

さきほどのターミナルで実行中のコマンドをcontrol+cキーで終了すると、このアプリケーションを終了できます。

アプリケーションのパッケージング

簡単なアプリケーションができましたが、このままでは自身のローカル環境でしか動作させることができません。アプリケーションを配布するにはパッケージングツールで単独で実行可能な形式に変換する必要があります。

今回はelectron-packagerというパッケージングツールを使います。このツールを使うことで、Windows、OS X、Linuxで実行可能なバイナリファイルを生成できます。

electron-packagerのインストール

次のコマンドでelectron-packagerをインストールします。

$ npm install --save-dev electron-packager

パッケージング用コマンドの設定

インストールが完了したらpackage.jsonscriptsに次のようにパッケージング用のreleaseコマンドを追加します。

package.jsonへのreleaseコマンドの追加
"scripts": {
  "start": "electron .",
  "version": "electron -v",
  "release": "electron-packager ./ markdown-preview --platform=darwin,win32 --arch=x64"
},

electron-packagerに指定する項目は次のようになっています。

$ electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch>
設定項目 意味
<sourcedir> ソースがあるディレクトリ
<appname> パッケージするアプリケーション名
<platform> 動作するプラットフォーム名
<arch> 動作するCPUのアーキテクチャ

今回は<sourcedir>に今いるディレクトリの.を、<appname>markdown-previewを、<platform>にOS XとWindowsを指定するdarwin,win32を、<arch>には64bitを指定するx64を指定します。

パッケージングしてみる

次のコマンドを実行してアプリケーションのパッケージングをします。

$ npm run release

コマンドを実行すると次のようなログが表示され、OS X用のmarkdown-preview.appとWindows用のmarkdown-preview.exeがフォルダに出力されます。

> markdown-preview@ release /path/to/markdonw-preview
> electron-packager ./ markdown-preview --platform=darwin,win32 --arch=x64

Packaging app for platform darwin x64 using electron v1.2.6
Packaging app for platform win32 x64 using electron v1.2.6
Wrote new apps to:
/path/to/markdonw-preview/markdown-preview-darwin-x64
/path/to/markdonw-preview/markdown-preview-win32-x64

出力されたファイル

markdown-preview.appmarkdown-preview.exeが出力される。

出力されたファイル

これらを実行すると、ターミナルから実行したときと同じようにbrowser.htmlの内容が表示されるアプリケーションが起動します。

【ワンポイント】アプリケーションの詳細な設定

ここで解説したのは、ミニマムな必要最低限の設定です。実際にリリースをする際には詳細にアプリケーションの情報を設定する必要があるでしょう。electron-packagerはNode.jsのモジュールとして使うこともでき、JavaScriptで設定を書いてアプリケーションをビルドすることができます。必要に応じて次のドキュメントにも目を通してみてください。

また、Mac App Storeにアプリケーションをリリースする際には、Appleから発行される証明書の取得が必要だったりと、若干の手間がかかることがありますので、こちらにも目を通してみてください。

おわりに

ここまで解説した手順だけで、単体で配布できるデスクトップアプリケーションが作ることができてしまいました。どうでしょう、Electronのポテンシャルの高さを感じてもらえたでしょうか? しっかりとリリースする場合には、いろいろな手順が必要になりますが、簡単なアプリケーションであれば、GitHubなどに圧縮したファイルを置くだけでも十分でしょう。

次回はアプリケーションにメニューを付ける方法と、ダイアログからファイルを開いて表示する方法を解説する予定です。

中島 直博
中島 直博
フロントエンド・エンジニア

JavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。 また、在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わる。2019年、退社。