HTML/Javascriptでデスクトップアプリが作れるElectron試した

2016/02/06 2017/09/28

HTML/Javascriptでデスクトップアプリが作れるElectronを試してみました。

デスクトップアプリといえば、WindowsだとC#やJavaあたりが思い浮かぶところですが、HTMLとJavascriptで作るという発想は盲点ですね（昔から話題にはありましたが）。Web系とデスクトップ系が同じ言語に統合されるという点は注目の技術です。

[ad#top-1]

1 Electronのインストール
2 まずはプロジェクト作成
3 生成されたpackage.jsonを修正
4 プログラミング
5 実行
6 まとめ
7 後日談

Electronのインストール

Electronを使うにはnode.jsのインストールが必要になります。

node.jsのウェブサイトからnode.jsの安定板の４系をダウンロートしインストールしました。

https://nodejs.org/en/

ダウンロード後にコマンドプロンプトで操作することになります。

まずはプロジェクト作成

まずは開発するフォルダを作成してください。コマンドプロンプトでそのフォルダまで行って、以下のコマンドを打ちます。

npm init –y

以下のように現れたら成功です。※testという部分は作ったフォルダ名によって変わります。

{
“name”: “test”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

次にElectronをインストールします。以下のコマンドを打ちます。

npm i electron-prebuilt --save-dev

以下のように現れたら成功です。

npm WARN package.json test@1.0.0 No description
npm WARN package.json test@1.0.0 No repository field.
npm WARN package.json test@1.0.0 No README data
|
> electron-prebuilt@0.36.7 postinstall C:\Users\…\test\node_modules\electron-prebuilt
> node install.jselectron-prebuilt@0.36.7 node_modules\electron-prebuilt
├── extract-zip@1.4.1 (debug@0.7.4, mkdirp@0.5.0, yauzl@2.4.1, concat-stream@1.5.0)
└── electron-download@1.4.1 (path-exists@1.0.0, home-path@1.0.1, minimist@1.2.0, debug@2.2.0, rc@1.1.6, mkdirp@0.5.1, mv@2.1.1, nugget@1.6.0)

生成されたpackage.jsonを修正

同時にpackage.jsonというファイルが生成され、上記と同じコードが書かれています。このファイルを開き１文だけ追加します。(7行目のところ)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js", //追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^0.36.7"
  }
}

プログラミング

次に、index.jsというファイルを作って以下のようなコードを書きます。動作部分(javaScript)とデザイン部分(index.html)とで分かれています。

'use strict';

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

let mainWindow;

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

で、最後に、index.htmlの作成。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>a</title>
  <style>
    body{
      font-family: Meiryo UI;
      padding: 10px;
      background: skyblue;
    }
    p{
      color: #fff;
      font-size: 36px;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <p id="quote">Hello World!</p>
</body>
</html>

実行

で、コマンドプロンプトで以下のコマンドを打つと、

npm start

以下のウィンドウが現れたら成功です。

まとめ

まだ、「Hello World!」と表示させただけですが、イベント処理も可能。ここまで来れればあとはググって何とななるでしょう。とりあえず簡単なソフトが作れるまで進めていきたいと思います。

それより、このElectronってどんな用途があるんだろう？？今回触っただけではメリットがよくわかりませんでした。まあ、そのあたりは追々かなと思います。

後日談

このプロジェクトをOneDrive上に作ったのですが、Electronライブラリが生成してくれたのはいいのですが、なんと、フォルダ構成が深すぎてOneDriveが同期できない事態が発生。６文字多い・・・。場所を変えれば回避できそうですが、こんなところで躓くとは思いもよりませんでした。

[ad#ad-1]

- Electron