デスクトップアプリを作るために、Electronをやり始めました。

Electronとは

ElectronはもともとGithub社製のテキストエディタAtomのために作られたフレームワークです。 WEBの技術(HTML, CSS, Javascript)で、OSX, Windows, Linux用のデスクトップアプリケーションが作れてしまいます。

採用実績

このページにElectronにより作られたアプリケーションが掲載されています。

Atomはもちろん、同じテキストエディタのVisual Stdio Code。 最近はやりのターミナルHyperもありますね。 有名どころだと、SlackやWhatsappなどもElectronにより作られています。 いやー、すごい実績ですね。

とりあえず試してみる

まず、公式ページにあるクイックスタートをやってみます。

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

こんな感じでデスクトップアプリケーションのWindows?っぽいのが出てきました。

Chromeと同じ方法でDevTools出せますね。(MacだとOpt+Cmd+I) 画面のレンダリングは、Chromeでも使われているChromiumが担当しているからか、全く同じように使えますね。

それにしてもソースコードがかなり短い。 しかも、HTML, JS, CSSで作られている。 これでデスクトップアプリケーション作れるのは便利すぎる。。。

各種API

各種APIは公式のドキュメントを参照してください。

APIを試す用のデモプロジェクトがGithubにあるので、これを試してみるとわかりやすいかも。

$ git clone https://github.com/electron/electron-api-demos

$ cd electron-api-demos

$ npm install

$ npm start

こんな感じで試せます。

参考

https://github.com/electron/electron

https://electronjs.org/

https://ics.media/entry/7298/2