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


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

## Electronに移植
以下をElectronに移植する。
理由はカッコいいから！
[Digital Clock with Vue.js](https://codepen.io/gau/pen/LjQwGp)
Toshiyuki TAKAHASHI氏の作成物。

## 前提・環境
・CentOS7.6
・nodeJS / Yarn導入済

## 環境構築
```bash
yarn add -D electron@latest --save-dev
sudo npm i electron-packager -g
```

※以下がでたら、[参照](https://qiita.com/fujisystem/items/01cbbebc9115ba8f6bc2)してください

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

## 移植ソース

<details><summary>index.js</summary><div>

```javascript: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;
  });
});
```
</div></details>

<details><summary>index.html</summary><div>

```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>
```
</div></details>

<details><summary>js/main.js</summary><div>

```javascript: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);
}
```
</div></details>

<details><summary>css/main.css</summary><div>

```javascript: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;
}
```
</div></details>

## vue.js
面倒だからwget

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

## 仕上げ
```bash
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 
```

## 実行
```bash
~/DigitalClock/DigitalClock
```

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