TaillookTech

フルスタックエンジニアになる

Electronでカラーピッカーを表示するメニューバーアプリを作る

概要

Electronでこんな感じのカラーピッカーを表示するメニューバーアプリを作る.
f:id:taillook:20170224202643p:plain

使ったもの

  • jscolor
    (カラーピッカーを表示するjavascriptライブラリ)
  • menubar
    (Electronでメニューバーアプリケーションを作るライブラリ)

GitHub

Taillook/MenuBar-ColorPicker

コード

main.js

const electron = require("electron");

const app = electron.app;

var menubar = require('menubar')

var mb = menubar()

mb.on('ready', function ready () {})

app.on('window-all-closed', () => {})

var shouldQuit = app.makeSingleInstance((argv, workingDirectory) => {})
if (shouldQuit) app.quit()

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="jscolor.js"></script>
  </head>
  
  <body>
    Color:<input class="jscolor {hash:true}" value="ab2567">
  </body>
</html>

今回はメニューバーのアイコンしか使わないのでウィンドウの表示はしてないです.