ElectronでHello Worldアプリを作成する - プログラマーの調べ物

ElectronはGitHubによって開発されたデスクトップアプリケーションフレームワークです。 AtomやSlackのクライアントアプリもElectronを使って作られています。

electronのhello world appを作ってみましょう。

まずはnpm install -g electronでelectronをインストールします。

今回のプロジェクトのフォルダ構成は以下のとおりです。

f:id:sho322:20170704203736j:plain

適当なフォルダにpackage.jsonを作りましょう。

{
    "name": "hello-world-nwjs",
    "main": "index.html",
    "version": "1.0,0"
}

次に、main.jsを作ります。

'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

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

app.on('ready', () => {
    mainWindow = new BrowserWindow();
    mainWindow.loadURL(`file://${__dirname}/index.html`);
    mainWindow.on('closed', () => {mainWindow = null;});
})

最後に、main.jsが読み込むindex.htmlを作成します。

<html>
  <head>
   <title>Hello Electron</title>
   <style>
        body {
            background-image: linear-gradient (45deg, #EAD790 0%, #EF8C53 100%);
            text-align: center;
        }

        button {
            background: rgba(0,0,0,0.40);
            box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.50);
            border-radius: 8px;
            color: white;
            padding: 1em 2em;
            border: none;
            font-family: 'Roboto', sans-serif;
            font-weight: 100;
            font-size: 14pt;
            position: relative;
            top: 40%;
            cursor: pointer;
            outline:none;         
        }
    </style>
   <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
   <script>
       function sayHello() {
           alert('Hello World');
       }
   </script>
  </head>
  <body>
      <button onclick="sayHello()">Say Hello!</button>
  </body>
</html>

早速実行してみましょう。 electron .

で実行すると、以下のような画面が表示されます。

f:id:sho322:20170704203749j:plain