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

kimizuka.hatenablog.com

前回のつづきです。

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

f:id:kimizuka:20160607104424p:plain

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

新たに用意するもの

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

改修手順

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を用意します

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

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

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。