Electronで時計アプリをCentos7用に作る

20620 ワード
Electron centos7 Vue.js Vue.js テキストリンク

Electronで時計アプリをCentos7用に作る

なんか GNOME って、標準の時計アプリが見づらいなぁと思ってたので
折角だからElectronで作るかぁと重い腰をあげる。

Electronに移植

以下をElectronに移植する。
理由はカッコいいから！
Digital Clock with Vue.js
Toshiyuki TAKAHASHI氏の作成物。

前提・環境

・CentOS7.6
・nodeJS / Yarn導入済

環境構築

yarn add -D electron@latest --save-dev
sudo npm i electron-packager -g

※以下がでたら、参照してください

FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found,〜

移植ソース

index.js
index.js
'use strict';

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

let mainWindow;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden', "width": 400, "height": 130,
    "frame": false,  "resizable": false, autoHideMenuBar: true, maximizable: false,
  }); 
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html
index.html
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Share+Tech+Mono">
<link rel="stylesheet" href="css/main.css">
<script src="js/vue.js"></script>
</head>
<body>
<div id="clock">
  <p class="date">{{ date }}</p>
  <p class="time">{{ time }}</p>
  <script src="js/main.js"></script>
</div>
</body>
</html>

js/main.js
js/main.js
var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: ''
    }
});

var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}

css/main.css
css/main.css
html {
  -webkit-app-region: drag;
}

html, body {
  height: 100%;
  width:  100%;
  margin: 0;
  background: #0f3854;
  background-size: 100%;
  /*background-color: rgba(0, 0, 0, 0.0);*/
}

p {
  margin: 0;
  padding: 0;
}
#clock {
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #daf6ff;
  text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
}
#clock > .time {
  letter-spacing: 0.05em;
  font-size: 80px;
  padding: 5px 0;
}
#clock > .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
#clock > .text {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}

vue.js

面倒だからwget

cd js
wget https://cdn.jsdelivr.net/npm/vue -O vue.js

仕上げ

sudo electron-packager ./electron_clock/ DigitalClock --platform=linux --arch=x64 --electronVersion=5.0.0 --asar
sudo mv DigitalClock-linux-x64/ DigitalClock
sudo chown root:root DigitalClock/chrome-sandbox 
sudo chmod 4755 DigitalClock/chrome-sandbox

実行

~/DigitalClock/DigitalClock

所感

Electron。いいんだけど、ただ時計表示するのに、225Mbのアプリ。
Mbのインフレが半端ない。
Chromiumは、IEにも使われるし、もはやJavaと同じように個別インストールするようにすれば
もう少し軽くなるんじゃ。。。と思った。

bat入門の[if]
出力をファイルにリダイレクト