はじめに

私の今の目標はElectronでアプリを作成することです。
とりあえず、画面を作成したいと思いましたが、自分で作るのは大変なので、何かないかと探していると
gentelellaという、かっこいい画面がありました。

GitHub：https://github.com/puikinsh/gentelella

そこでこの画面を表示するElectronアプリをまず作成してみようと思います。

参考にした他の方の記事

node.jsのインストール、Electronのインストールは下記の記事を参考に行っています。
参考記事：Visual Studio CodeとNode.jsの導入について

また、Electronのアプリの作成に関しては下記の記事を参考にさせて頂き、今回作成するのはその記事で作成したElectronアプリを少し変更したものとなります。
参考記事：Electronでアプリケーションを作ってみよう

開発環境

ちなみに私の環境は以下の通り
　OS：Windows10
　開発環境：Visual Studio code

gentelellaのインストール

まず、npmでインストール可能なため、以下のコマンドを実行します。

powershell

> npm install gentelella --save

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN nodejs_analysis@1.0.0 No description
npm WARN nodejs_analysis@1.0.0 No repository field.

+ gentelella@1.4.0
added 1 package from 2 contributors and audited 1 package in 12.025s
found 0 vulnerabilities

そうするとカレントディレクトリ配下に./node_modules/gentetellaのディレクトリが作成され、その配下に色々なファイルが展開されています。

Electronアプリにデモページを表示させる

mainWindow.loadURLに渡しているHTMLファイルのパスを上記でインストールしたデモページのパスに変更します。
ちなみにデモページのパスは以下の通り
./node_modules/gentelella/production/index.html

index.js

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

let mainWindow = null;

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

app.on('ready', function() {

  // ブラウザ(Chromium)の起動, 初期画面のロード
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/node_modules/gentelella/production/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

これで準備は完成です。

Electronアプリを起動する。

下記のコマンドを実行するとアプリが起動し、デモページが動かせます。