ども、@kimihomです。
最近話題の Electron というWeb技術でデスクトップアプリが作れるフレームワークに注目している。これを使えば、あらゆるHTML5の最新機能をブラウザの差異を気にせず開発でき、最終的にはWindowsやMacなどのデスクトップアプリとして公開できるという優れものだ。
Qiitaを中心としたネットで出回っている最初のチュートリアルでは、どうも自分でシンプルなHTML/CSS/JavaScript でセットアップするようなものが見受けられる。最低限Sassは入れたいし、LiveLoadなどの仕組みもできれば導入したいところである。
ということで、今回は Sass, BrowserSync, WebPackを最速で構築できる Generator を使って、Electronの開発環境を構築する。
npm install -g npm npm -g install electron-prebuilt npm install -g yo // global で実行できるコマンドが必要なため別でインストール npm install -g node-sass npm install -g generator-electron-extra yo electron-extra // node_modules/electron-prebuilt/path.txt がないと怒られるので、最新を入れる rm -rf node_modules/electron-prebuilt npm install electron-prebuilt
さて、これで自動ロードするElectronの仕組みを構築できた。
npm start
とすると、Electronのアプリが起動し、SassやJavaScript、 HTML を更新するだけでElectronが自動でリフレッシュされる仕組みを導入できた。以下のようなものが自動で立ち上がる。ちょっとSassをいじったので色などが変わってる。
先人の技術をお借りするのは大事だ。自力ではこの環境を構築するだけで何週間もかかりそうだ。ありがたや。これから一気にElectronアプリを開発していきたい。