みかづきブログ その3

3ヶ月つづけてみました。

ウェブフロントエンドエンジニアであればElectronをつかって数分でデスクトップアプリがつくれるぞ。 その2

kimizuka.hatenablog.com

前回 のつづきです。

前回はターミナルに「GOLLIRA.」と出力するだけのアプリだったので、今回はそこに画面を足します。

f:id:kimizuka:20160607104424p:plain

こちらが前回の最終形態です。


新たに用意するもの

  1. ゴリラのイラスト
  2. index.html
  3. main.css(デザインを入れたければ)
  4. 画面をつくるという気持ち

改修手順

index.htmlを作成します
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>Gollira</title>
  </head>
  <body>
    <img class="gollira" src="gollira.jpg" width="500" height="500" />
  </body>
</html>
main.cssを作成します
* {
  margin: 0; padding: 0;
}

body {
  background: #000;
}

.gollira {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 500px; height: 500px;
}
gorilla.jpgを用意します

http://cdn-ak.f.st-hatena.com/images/fotolife/k/kimizuka/20131125/20131125172323.jpg

index.jsを編集します
"use strict";

console.log("GOLLIRA.");

var electron      = require("electron"),
    app           = electron.app,
    BrowserWindow = electron.BrowserWindow,
    mainWindow;

app.on("ready", function() {
  mainWindow = new BrowserWindow({
    width  : 600,
    height : 600
  });

  mainWindow.loadURL("file://" + __dirname + "/index.html");
});

ディレクトリ構成

f:id:kimizuka:20160607135118p:plain

こんな感じになりました。

実行

golliraディレクトリに移動して、

electron .

で実行してみましょう。

f:id:kimizuka:20160607135227p:plain

無事にウィンドウが立ち上がったと思います。
今回は以上としましょう。