[Electron]今日の日付カレンダーアプリを作った（Calectron）

2024.05.132024.08.19

Electronを使用して、Windows 7のガジェットにあったカレンダーのようなアプリケーションを作成しました。
このアプリケーションは、今日の日付と曜日を表示するだけのシンプルなものです。
macOS風にデザインを変更し、タイトルバーを削除して、ウィンドウ全体をドラッグできるようにしました。

1. Windows 7のカレンダーのようなアプリを作った

Electronで Windows 7の「ガジェット」にあったカレンダーのようなものを作りました。

Windows 7のカレンダーのようなアプリを作った

ただ、今日の日付・曜日を表示するだけのアプリケーションです。

（ダウンロード：無保証です）

（Windows）calectron-win32-x64.zip（399MB）
（macOS）calectron-1.0.0-mac-intel.dmg（96MB）
（code）calectron-code-2024-05.zip（0.2MB）

Windows 7のカレンダーのようなアプリを作った

自分用のツールなので、動作は無保証です。

Windows 7の「ガジェット」には、このようなカレンダーがあったのですが、2012年ごろに廃止されてしまいました¹。

出典：ガジェットの「カレンダー」を使用して現在の日付を表示する方法＜Windows(R)7＞｜dynabook(ダイナブック公式)

Electronを採用したのは、Macで手軽に作れて、Windowsでも使えるようにしたかったからです。

ファイル構成をtreeコマンドで出力すると、こんな感じ²。

Windows 7のカレンダーのようなアプリを作った

たったこれだけの構成でマルチプラットフォームのGUIプログラムが作れます。

mac用のiconファイルは、PNG ICNS 変換（aconvert.com ）で変換して作りました。

目次に戻る

1-1. main.js

Electronを使用してウィンドウを作成し、index.htmlファイルを読み込むアプリケーションの主要部分を示しています。

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
      width: 180,
      height: 200,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
      },
  });
  
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
});

目次に戻る

1-2. renderer.js

現在の日付と曜日を取得し、HTMLの特定の要素に表示する関数であり、1秒ごとに更新されます。

function updateDate() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(1, '0');
  const day = String(now.getDate()).padStart(1, '0');
  const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
  const weekday = weekdays[now.getDay()];
  
  document.getElementById('weekday').textContent = `${weekday}曜日`;;
  document.getElementById('day').textContent = day;
  document.getElementById('month').textContent = `${year}年${month}月`;
}

updateDate();
setInterval(updateDate, 1000);

目次に戻る

1-3. index.html

HTML、CSS、JavaScriptを使用して、日付と曜日を表示するシンプルなウェブページの構造とスタイリングを定義しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>calectron</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: orange;
      color: white;
      text-align: center;
    }
    #weekday {
        line-height: 1em;
      margin: 0;
        padding: 0;
      font-size: 24px;
      font-weight: bold;
    }
    #day {
      margin: 12px;
        padding: 0;
      font-size: 72px;
      font-weight: bold;
        line-height: 1em;
    }
    #month {
        line-height: 1em;
      margin: 0;
        padding: 0;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div>
    <div id="weekday"></div>
    <div id="day"></div>
    <div id="month"></div>
  </div>

  <script src="renderer.js"></script>
</body>
</html>

目次に戻る

1-4. package.json

Electronアプリケーションのパッケージ設定とビルド構成を定義するpackage.jsonファイルの内容を示しています。

{
  "name": "calectron",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "calectron.app.id",
    "productName": "Calectron",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron-builder": "^24.13.3"
  }
}

目次に戻る

2. ElectronBuilderでビルドした

npm install --save-dev electron-builder  
npm run build

Windows環境でビルドしたら、アイコンがうまく反映できなかったので、electron-packageでビルドしました。

目次に戻る

3. macOSのカレンダー風にデザイン変更

index.htmlを編集してデザインを変更しました。

macOSのカレンダー風にデザイン変更

また、タイトルバーをなくして、その分ウィンドウ全体をドラッグできるようにしました。

「閉じる」ボタンがないのですが、ウィンドウの右クリックで終了できるので、とりあえずこのままです。

こちらもどうぞ。

Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】

Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】

レンダラープロセスから、メインプロセスで処理を移した後、レンダラープロセスに処理を戻すには、どうすればよいかハマったのでメモをしておきます。結果としては、IPC通信とasync, awaitという非同期の関数を利用することで、解決しました。プロセス間通信と処理の流れやりたいことは、・UIの実行ボタンが押して、・端末のファイル操作を行い、・終わってからUIに貯めた入力データをクリアする、ということです。 UIに関するデータは、レンダラープロセスにあります。ただ、node...

「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】

「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】

前回は、Electronの環境を作ったのですが、既存のソースからのビルドはうまくいきませんでした。というのも、設定が中途半端で fsやpathのライブラリがうまく読み込めないようです。そこで、原点に帰って、改めてElectronのひな形をビルドしてみました。 Electronクイックスタート Electronの公式ドキュメント「クイックスタート」に沿って、アプリを作成します。クイックスタート | Electron MacBookでチュートリアル通りにそのままできるか、...

（補足）

目次に戻る

QRコードを読み込むと、関連記事を確認できます。

[Electron]今日の日付カレンダーアプリを作った（Calectron）

タイトルとURLをコピーしました