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

Homebrewでnodeをインストール

1
$ brew install node

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

1
2
3
4
$ node --version
v5.3.0
$ npm --version
3.3.12

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

1
$ npm install -g electron-prebuilt

Electronのバージョン確認

1
$ electron -v

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

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

実装:ソースはこちら(GitHub)

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

1
$ npm install electron-packager -g

アプリの作成

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

実行画面

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

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

トラックバック

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です