デスクトップに常時表示される時計アプリをElectronで作ってみたら驚くほど簡単だった話

9092 ワード
Electron widget widget テキストリンク

こういうものをつくってみた話です。

最近新しい技術に触れていないなーと思って。ツールづくりをする機会が増えてきそうだったので、Electron を触ってみまして。ただチュートリアルをやるのも退屈なので、なにか作ってみたいなーと。その軌跡です。おっさんずラブを見ながらこれを書いています。
普段は C++ 組み込み系おじさんでして、Webっぽいあれこれは素人です（予防線）

セットアップとハローワールド

いくつか記事を見た感じでは下のページがわかりやすかった。
最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA

npm で Electron をインストールして、
npm i -D electron

ここでグローバルインストールする派と、グローバル環境汚すな派がいるけど、まあお試しなのでどっちでもいい。自分の体験として困ったことが起きてから考えようかなーというマインド

ページの説明どおりに index.js, index.html やらを書いて、

npx electron ./src

でアプリが立ち上がったらハローワールド完了。
npx っていうのはローカルインストールした electron の方を賢く参照してくれる魔法らしい。へー。

見た目を整える

テンションを上げるために、まず見た目をそれらしくするところから入ることにしましょう。
ウィンドウを透過したりタイトルバーを消したりしたいですね。

index.js
  mainWindow = new BrowserWindow({
    x: 80,
    y: 0,
    width: 400,
    height: 200,
    transparent: true,
    frame: false,
    resizable: false,
    hasShadow: false,
    alwaysOnTop: true,
  });

ついでにアプリにクリックとかを奪われないようにしときましょう。

index.js
  mainWindow.setIgnoreMouseEvents(true);

あとはコンテンツ側も適当に整えます。

index.html
<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

index.html
  <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っぽい表記がしたかったし、そのへんで差別化できているということでご勘弁。