Electronではじめるデスクトップアプリ開発

Electronではじめるデスクトップアプリ開発第1回 Electronに触ってみる

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

カテゴリー: JavaScript >; Electron

2016年7月28日発行

Electronとは

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

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

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

注*：codegrid-markdown

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

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

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

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

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

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

2016-electron/tree/master/1

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

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.htmlがmain.jsのbrowserWindow.loadURL(file://${__dirname}/browser.html);という指定によって開かれます。

Electronの実行

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

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

$ npm start

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

browser.htmlが表示される。

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

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

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

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

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

electron-packagerのインストール

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

$ npm install --save-dev electron-packager

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

インストールが完了したらpackage.jsonのscriptsに次のようにパッケージング用の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.appとmarkdown-preview.exeが出力される。

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

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

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

electron-packager/docs/api

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

Mac App Store Submission Guide/日本語訳

おわりに

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

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

Electronとは

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

注*：codegrid-markdown

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

環境構築

package.jsonの作成

package.json

electron-prebuiltのインストール

electron-prebuiltのインストール

バージョン表示

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

Hello Electron!!

main.js

main.js

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

browser.html

browser.html

Electronの実行

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

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

electron-packagerのインストール

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

package.jsonへのreleaseコマンドの追加

パッケージングしてみる

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

おわりに

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