こういうものをつくってみた話です。
最近新しい技術に触れていないなーと思って。ツールづくりをする機会が増えてきそうだったので、Electron を触ってみまして。ただチュートリアルをやるのも退屈なので、なにか作ってみたいなーと。その軌跡です。おっさんずラブを見ながらこれを書いています。
普段は C++ 組み込み系おじさんでして、Webっぽいあれこれは素人です（予防線）
セットアップとハローワールド
いくつか記事を見た感じでは下のページがわかりやすかった。
最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA
npm で Electron をインストールして、
npm i -D electron
ここでグローバルインストールする派と、グローバル環境汚すな派がいるけど、まあお試しなのでどっちでもいい。自分の体験として困ったことが起きてから考えようかなーというマインド
ページの説明どおりに index.js, index.html やらを書いて、
npx electron ./src
でアプリが立ち上がったらハローワールド完了。
npx っていうのはローカルインストールした electron の方を賢く参照してくれる魔法らしい。へー。
見た目を整える
テンションを上げるために、まず見た目をそれらしくするところから入ることにしましょう。
ウィンドウを透過したりタイトルバーを消したりしたいですね。
mainWindow = new BrowserWindow({
x: 80,
y: 0,
width: 400,
height: 200,
transparent: true,
frame: false,
resizable: false,
hasShadow: false,
alwaysOnTop: true,
});
ついでにアプリにクリックとかを奪われないようにしときましょう。
mainWindow.setIgnoreMouseEvents(true);
あとはコンテンツ側も適当に整えます。
<html>
<head>
<meta charset="UTF-8">
<title>desclock</title>
</head>
<body>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: rgb(250, 250, 250);
font-size: 7em;
font-family: "メイリオ";
}
</style>
00:00
</body>
</html>
ここまででだいたいそれっぽい見た目になります。なりました。
はい。
時計にする
時計を作るところは、まあどう書いたって似たようなもんだろうと思ったので下のページを見てフムフムして拝借した。
おてがる！JavaScriptでシンプルなデジタル時計をつくってみよう(Webフォント使用/サイズ自動調整) - Qiita
<div id="clo"></div>
<script type="text/javascript">
const clock = () => {
const now = new Date();
let h = now.getHours();
let m = now.getMinutes();
if(h<10) { h = "0" + h; }
if(m<10) { m = "0" + m; }
document.getElementById("clo").innerHTML = h + ":" + m;
};
setInterval(clock, 10000);
</script>
できあがりー
https://github.com/masayashi/DesClock
github においておきました。
よかったですね。
後記
つくったあとでN番煎じだったことに気づきました。
まあほら、NHKっぽい表記がしたかったし、そのへんで差別化できているということでご勘弁。
-
Electronでデスクトップウィジェットを作るまで - Qiita
- この記事はとてもよくまとまっていてオススメです。タスクトレイへの格納とか、自分のアプリも対応していこうと思います。
-
Electronで簡単なデスクトップ時計アプリを作った:目次 - Qiita
- とても丁寧にまとめられています。早く作りたい方にとっては冗長かもしれませんが、初心者はこちらを参考にするとよいでしょう。