Hiromuブログ(夏)

どこにでもいるただのホロレンジャーです

Electronでアプリ作成

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

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

実行画面

スクリーンショット 2015 12 31 22 38 53

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