この記事は、Electron と HTML/CSS/JavaScript を使って開発した「クリップボード履歴管理アプリ」の完成までの実装手順を整理した手順ガイドです。
目的
Mac上で実行できる、履歴を自動保存するクリップボードアプリを作成
UIにより履歴の再利用、お気に入り登録、削除を表示よりスムーズに操作
Electron ビルド完成後に .app 化 して Dock や Finder からのワンクリック起動を可能に
機能要件
| 機能カテゴリ | 内容 |
|---|---|
| クリップボード監視 | 1秒ごとに Electron の clipboard.readText() で監視し、localStorage に保存 |
| 履歴表示 | 「通常」と「お気に入り」をタブ切替で表示し、最新順で並べ替え |
| 再コピー / 削除 / お気に入り | 各履歴項目の右側にアイコンで再操作可能 |
| ダークモード切替 | OSのテーマを取得し、localStorageに記憶。切り替えトグルボタン付き |
| 起動ウィンドウ位置 | ディスプレイ左上の25%に自動配置（高さ90%で中央寄せ） |
| Dock起動 & ショートカット | Automator Quick Action + macOSのキーボードショートカットと連携 |
| ビルド & GitHub Push | electron-packager で .app 作成、.gitignore で除外。Gitの制限回避済み |
実装手順
【1. ファイル構成を作成】
electron_clipboard_app/
├── index.html
├── main.js
├── preload.js
├── package.json
├── js/
│ └── script.js
├── css/
│ └── style.css
└── .gitignore【2. Electron の基礎構成を作成】
main.js で BrowserWindow を定義
preload.js で contextBridge 経由で clipboardイベントを接続
【3. HTML + CSS + JS で UI/UX 実装】
index.html に textarea + コピーボタン + tabs
style.css で表示分割, dark/light class
script.js でデータ管理, localStorage, ElectronAPI連携
【4. .gitignore と GitHub push】
.gitignore に以下を追加
node_modules/
*.app
clipboard-app-darwin-*/
.DS_Storepush 時は git add . → git commit → git push (または -f)
【5.後続のアップデートのための組み込み】
Dock や Quick Action からの起動済
.app は Electron Packager で再生成
後日の updater や Release の自動化も検討可
おわりに
このアプリは、ちょっとした日常の作業を快適にしてくれる「自分専用ツール」としての使い道にぴったりです。
Electron の学習や、自作アプリのパッケージング方法の理解にも役立つ構成になっていますので、今後の開発のたたき台として活用していただければうれしいです。
気になる機能の追加や改善も自由に試せますので、あなたの好みに合わせてどんどん育ててみてください！