Electronを触ってみた

  • 8
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

この記事はバルテック アドベントカレンダー2015 Advent Calendar 2015の11日目の記事です。

女性エンジニアに会いたくて女性限定のElectronの勉強会に行ってきたので
Electronについて書きます。
勉強会で触っただけなので超超超入門編的な感じで紹介とHelloWorldまでです。

Electronとは

デスクトップアプリケーションを作るためのフレームワークです。
JavaScript/HTML/CSSといったWEBの技術でデスクトップアプリケーションを作ることができます。
ステキ♥

AtomSlackなどがElectronを使って作られています。

触ってみる

Hello Worldを表示させます。

Electronのインストール

npm install electron-prebuilt -g

プロジェクト作成

こんな感じの構成になります。

your-app
├index.html
├main.js
└package.json

ディレクトリ作ったり

mkdir your-app
cd your-app
npm init -y
package.json
{
    省略
    "main": "main.js",
    省略
}

main.jsがエントリポイントになります。

main.jsを作成

中身の理解はあとで。

main.js
var app = require('app');
var BrowserWindow = require('browser-window');

var mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

上記のindex.htmlが表示されます。

index.htmlを作成

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

実行!

electron .

ウィンドウが開いた♥♥♥
Hello World!

まとめ

超超超入門編なので、自分でも物足りないです。。。
何かステキなアプリを作ったらまた記事を書きたいと思います。

とりあえず勉強のためにこんなのやってみたいと思います。↓
Electronでデスクトップウィジェットを作るまで - Qiita

あとElectronのアドベントカレンダーもあります。読んでみよう!
Electron Advent Calendar 2015 - Qiita