Electronでアプリ作成

ElectronでDrag&Dropに対応したMarkdownファイルのプレビューアプリを作成した際の作業メモ。

HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは

Homebrewでnodeをインストール

$ brew install node

バージョン確認、今回試したのは以下バージョン。

$ node --version
v5.3.0
$ npm --version
3.3.12

（Chromiumのビルドに時間がかかるようなので、あらかじめビルドされた）Electronのインストール

$ npm install -g electron-prebuilt

Electronのバージョン確認

$ electron -v

Markdownビューワのためのライブラリインストール

• Markdownの変換：markdown-js
• ファイルの更新監視：chokidar
• --saveオプション：package.jsonにパッケージのバージョン情報を保持

$ npm install markdown --save
$ npm install chokidar --save

実装：ソースはこちら（GitHub）

アプリを作成するためのライブラリインストール

$ npm install electron-packager -g

アプリの作成

$ electron-packager . hello --platform=darwin --arch=x64 --version=0.36.2

実行画面

実装にあたり以下雑誌の「ElectronでHTML5デスクトップアプリ開発」が大変参考になりました。記事にはReactやBabelを利用した方法やgulpによるビルドなど、より詳しい内容について書かれており参考になります。