Electronでgentelellaのデモページを動かす
はじめに
私の今の目標は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でインストール可能なため、以下のコマンドを実行します。
> npm install gentelella --save
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
+ [email protected]
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
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アプリを起動する。
下記のコマンドを実行するとアプリが起動し、デモページが動かせます。
> electron .
最後に
gentelellaはかなりかっこよく私はすぐに気に入りました。
ですが、中々記事もなくどうしようかと思いましたが、自分でこつことと調べて行こうと思います。
自分のための備忘録としても、何か調べたらまた記事にしたいと思います。
Author And Source
この問題について(Electronでgentelellaのデモページを動かす), 我々は、より多くの情報をここで見つけました https://qiita.com/AlwaysDietter/items/84bfdcd10c98b528a26a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .