Electron - JavaScript+HTML+CSSでデスクトップアプリ開発


こんにちは、ogishiです。
今回は Electron を紹介します。

Electron は、JavaScript、HTML、CSSを使ってデスクトップアプリを開発できるフレームワークです。
Web技術がベースなので、作成したアプリは Windows,Mac,Linuxと各OS上で動かすことができます。

早速試してみましょう。
機能を体験するには、チュートリアルが一番です。
Quick Start アプリが提供されていますので、それを動かしてみましょう。

Electron を動かすには、Git と Node.js が必要です。
Node.js をインストールしていない場合は、次のページからダウンロードしてインストールしてください。

Git: https://git-scm.com
Node.js: https://nodejs.org/ja/

Git と Node.js の準備ができたら、次のコマンドを実行してソースコードのダウンロードと実行準備をしましょう

# Quick Start リポジトリを clone する
$ git clone https://github.com/electron/electron-quick-start
# リポジトリに移動
$ cd electron-quick-start
# 依存ライブラリをインストール
$ npm install 

そして

$ npm start

で、実行します。

おなじみの Hello World! 画面が表示されます。
アプリケーションの開発はこのクイックスタートをベースにすると早いです。

画面は至ってシンプルですが、ここで開発モードに切り替えると、画面がHTML+CSSで作られていることがわかります。
Viewメニューにある Toggle Developer Tools を選択してください。

もうひとつ提供されているデモアプリケーションも見てみましょう。
このデモでは、Electron API の具体的な動きを見ることができます。

https://github.com/electron/electron-api-demos/releases

このページから、OSにあったファイルをダウンロードします。
今回私は Macで動かしているので、electron-api-demos-mac.zip をダウンロードして展開します。

展開したら実行します。

Get Started ボタンを押してAPIを見てみましょう。
例えば、Windowを開くにはどうするか、サンプルのプログラムと実際の動きを見ることができます。

じゃあ、Electron を使ってどのようなものが作れるのか気になりますね。
例えば、みんな大好き Visual Studio Code も Electron が使われています。

他に面白いものとして、なんと昔のMac OS 8を再現しちゃった人もいます。

https://github.com/felixrieseberg/macintosh.js.git

JavaScriptで出来ているなんて驚きです。

Webクリエーターの皆さんが日頃親しんでいる技術で、3つのプラットフォームで動くデスクトップアプリが作れる環境が Electron で手に入ります。面白いものを作りたいですね。

  お問い合わせ  - お気軽にお問い合わせください - 

  • 株式会社 パブリックリレーションズ
  • 〒064-0807
  • 北海道札幌市中央区南7条西1丁目13番地 弘安ビル5階
メールでのお問い合わせはこちら

  • この記事をシェアする