├── app
    ├── clock.css
    ├── clock.js
    ├── icon.png
    ├── index.html
    ├── main.js
    └── package.json
├── app_option
    ├── clock.css
    ├── clock.js
    ├── icon.png
    ├── img
    │   ├── clock_bg.png
    │   ├── clock_hh.png
    │   ├── clock_mm.png
    │   └── clock_ss.png
    ├── index.html
    ├── main.js
    └── package.json
├── icon.ico
├── readme.md
├── screenshot_app.png
└── screenshot_app_option.png


/app/clock.css:
--------------------------------------------------------------------------------
 1 | @import url(http://fonts.googleapis.com/css?family=Iceland);
 2 | 
 3 | body {
 4 | 	overflow: hidden;
 5 | 	margin: 0;
 6 | 	padding: 0;
 7 | 	border: 5px solid rgb(42, 42, 42);
 8 | 	background-color: rgba(24, 24, 24, .7);
 9 | 	box-shadow: 0 0 8px 3px #000 inset;
10 | 
11 | 	-webkit-app-region: drag;
12 | 	-webkit-user-select: none;
13 | }
14 | 
15 | #digital_clock {
16 | 	font-family: "Iceland";
17 | 	font-size: 25px;
18 | 	line-height: 22px;
19 | 	margin-top: 9px;
20 | 	text-align: center;
21 | 	color: #fff;
22 | 	text-shadow: 1px 1px 3px #000;
23 | }
24 | 


--------------------------------------------------------------------------------
/app/clock.js:
--------------------------------------------------------------------------------
 1 | // ウィンドウを開く
 2 | openWindow();
 3 | 
 4 | // 時計の描画処理をスタート
 5 | clock();
 6 | 
 7 | function openWindow () {
 8 | 	// ウィンドウのオブジェクトを取得
 9 | 	var win = require("remote").getCurrentWindow();
10 | 
11 | 	// ウィンドウ位置を復元
12 | 	if (localStorage.getItem("windowPosition")) {
13 | 		var pos = JSON.parse(localStorage.getItem("windowPosition"));
14 | 		win.setPosition(pos[0], pos[1]);
15 | 	}
16 | 
17 | 	// クローズ時にウィンドウ位置を保存
18 | 	win.on("close", function() {
19 | 		localStorage.setItem("windowPosition", JSON.stringify(win.getPosition()));
20 | 	});
21 | 
22 | 	// ウィンドウを表示
23 | 	win.show();
24 | }
25 | 
26 | function clock () {
27 | 	// 現在日時を取得
28 | 	var d = new Date();
29 | 
30 | 	// デジタル時計を更新
31 | 	updateDigitalClock(d);
32 | 
33 | 	// 次の「0ミリ秒」に実行されるよう、次の描画処理を予約
34 | 	var delay = 1000 - new Date().getMilliseconds();
35 | 	setTimeout(clock, delay);
36 | }
37 | 
38 | function updateDigitalClock (d) {
39 | 	var AA_str = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
40 | 	var YY = d.getFullYear().toString().slice(-2);
41 | 	var MM = d.getMonth() + 1;
42 | 	var DD = d.getDate();
43 | 	var AA = d.getDay();
44 | 	var hh = d.getHours();
45 | 	var mm = d.getMinutes();
46 | 	var ss = d.getSeconds();
47 | 
48 | 	// 桁あわせ
49 | 	if(MM < 10) { MM = "0" + MM; }
50 | 	if(DD < 10) { DD = "0" + DD; }
51 | 	if(hh < 10) { hh = "0" + hh; }
52 | 	if(mm < 10) { mm = "0" + mm; }
53 | 	if(ss < 10) { ss = "0" + ss; }
54 | 
55 | 	var text = YY + '/' + MM + '/' + DD + ' (' + AA_str[AA] + ')<br>' + hh + ':' + mm + ':' + ss
56 | 	document.getElementById("digital_clock").innerHTML = text;
57 | }
58 | 


--------------------------------------------------------------------------------
/app/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/app/icon.png


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <link href="./clock.css" rel="stylesheet">
3 | <title>clock</title>
4 | 
5 | <div id="digital_clock"><!-- ここに時刻が入る --></div>
6 | 
7 | <script src="./clock.js"></script>
8 | 


--------------------------------------------------------------------------------
/app/main.js:
--------------------------------------------------------------------------------
 1 | var app = require("app");
 2 | var BrowserWindow = require("browser-window");
 3 | 
 4 | var mainWindow = null;
 5 | 
 6 | app.on("window-all-closed", function() {
 7 | 	if (process.platform != "darwin") {
 8 | 		app.quit();
 9 | 	}
10 | });
11 | 
12 | app.on("ready", function() {
13 | 	mainWindow = new BrowserWindow({
14 | 		// ウィンドウ作成時のオプション
15 | 		"width": 180,
16 | 		"height": 70,
17 | 		"transparent": true, 	// ウィンドウの背景を透過
18 | 		"frame": false, 		// 枠の無いウィンドウ
19 | 		"resizable": false, 	// ウィンドウのリサイズを禁止
20 | 		"skip-taskbar": true, 	// タスクバーに表示しない
21 | 		"show": false 			// アプリ起動時にウィンドウを表示しない
22 | 	});
23 | 
24 | 	// index.html を開く
25 | 	mainWindow.loadUrl("file://" + __dirname + "/index.html");
26 | 
27 | 	mainWindow.on("closed", function() {
28 | 		mainWindow = null;
29 | 	});
30 | 
31 | 	// タスクトレイに格納
32 | 	var Menu = require("menu");
33 | 	var Tray = require("tray");
34 | 	var nativeImage = require("native-image");
35 | 
36 | 	var trayIcon = new Tray(nativeImage.createFromPath(__dirname + "/icon.png"));
37 | 
38 | 	// タスクトレイに右クリックメニューを追加
39 | 	var contextMenu = Menu.buildFromTemplate([
40 | 		{ label: "表示", click: function () { mainWindow.focus(); } },
41 | 		{ label: "終了", click: function () { mainWindow.close(); } }
42 | 	]);
43 | 	trayIcon.setContextMenu(contextMenu);
44 | 
45 | 	// タスクトレイのツールチップをアプリ名に
46 | 	trayIcon.setToolTip(app.getName());
47 | 
48 | 	// タスクトレイが左クリックされた場合、アプリのウィンドウをアクティブに
49 | 	trayIcon.on("clicked", function () {
50 | 		mainWindow.focus();
51 | 	});
52 | 	// タスクトレイに格納 ここまで
53 | });
54 | 


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name"    : "tutorial_clock_digital",
3 |   "version" : "0.0.1",
4 |   "main"    : "main.js"
5 | }
6 | 


--------------------------------------------------------------------------------
/app_option/clock.css:
--------------------------------------------------------------------------------
 1 | @import url(http://fonts.googleapis.com/css?family=Iceland);
 2 | 
 3 | body {
 4 | 	overflow: hidden;
 5 | 	width: 250px;
 6 | 	height: 70px;
 7 | 	margin: 0;
 8 | 	padding: 0;
 9 | 	
10 | 	-webkit-app-region: drag;
11 | 	-webkit-user-select: none;
12 | }
13 | 
14 | .content {
15 | 	height: calc(100% - 10px);
16 | 	border: 5px solid rgb(42, 42, 42);
17 | 	border-left-width: 70px;
18 | 	background-color: rgba(24, 24, 24, .7);
19 | 	box-shadow: 0 0 8px 3px #000 inset;
20 | }
21 | 
22 | .analog {
23 | 	position: absolute;
24 | 	left: 5;
25 | 	float: left;
26 | 	width: 60px;
27 | }
28 | 
29 | .analog .pin {
30 | 	position: absolute;
31 | }
32 | 
33 | .digital .text {
34 | 	font-family: "Iceland";
35 | 	font-size: 25px;
36 | 	line-height: 22px;
37 | 	margin-top: 9px;
38 | 	text-align: center;
39 | 	color: #fff;
40 | 	text-shadow: 1px 1px 3px #000;
41 | }
42 | 


--------------------------------------------------------------------------------
/app_option/clock.js:
--------------------------------------------------------------------------------
 1 | // ウィンドウを開く
 2 | openWindow();
 3 | 
 4 | // 時計の描画処理をスタート
 5 | clock();
 6 | 
 7 | function openWindow () {
 8 | 	// ウィンドウのオブジェクトを取得
 9 | 	var win = require("remote").getCurrentWindow();
10 | 
11 | 	// ウィンドウ位置を復元
12 | 	if (localStorage.getItem("windowPosition")) {
13 | 		var pos = JSON.parse(localStorage.getItem("windowPosition"));
14 | 		win.setPosition(pos[0], pos[1]);
15 | 	}
16 | 
17 | 	// クローズ時にウィンドウ位置を保存
18 | 	win.on("close", function() {
19 | 		localStorage.setItem("windowPosition", JSON.stringify(win.getPosition()));
20 | 	});
21 | 
22 | 	// ウィンドウを表示
23 | 	win.show();
24 | }
25 | 
26 | function clock () {
27 | 	// 現在日時を取得
28 | 	var d = new Date();
29 | 
30 | 	// アナログ時計を更新
31 | 	updateAnalogClock(d);
32 | 
33 | 	// デジタル時計を更新
34 | 	updateDigitalClock(d);
35 | 
36 | 	// 次の「0ミリ秒」に実行されるよう、次の描画処理を予約
37 | 	var delay = 1000 - new Date().getMilliseconds();
38 | 	setTimeout(clock, delay);
39 | }
40 | 
41 | function updateAnalogClock (d) {
42 | 	// 秒針
43 | 	var ss_deg = d.getSeconds() * 6;
44 | 	document.getElementById("pin_ss").style.transform = "rotate(" + ss_deg + "deg)";
45 | 
46 | 	// 分針
47 | 	var mm_deg = d.getMinutes() * 6 + d.getSeconds() / 10;
48 | 	document.getElementById("pin_mm").style.transform = "rotate(" + mm_deg + "deg)";
49 | 
50 | 	// 時針
51 | 	var hh_deg = d.getHours() * 30 + d.getMinutes() / 2;
52 | 	document.getElementById("pin_hh").style.transform = "rotate(" + hh_deg + "deg)";
53 | }
54 | 
55 | function updateDigitalClock (d) {
56 | 	var AA_str = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
57 | 	var YY = d.getFullYear().toString().slice(-2);
58 | 	var MM = d.getMonth() + 1;
59 | 	var DD = d.getDate();
60 | 	var AA = d.getDay();
61 | 	var hh = d.getHours();
62 | 	var mm = d.getMinutes();
63 | 	var ss = d.getSeconds();
64 | 
65 | 	// 桁あわせ
66 | 	if(MM < 10) { MM = "0" + MM; }
67 | 	if(DD < 10) { DD = "0" + DD; }
68 | 	if(hh < 10) { hh = "0" + hh; }
69 | 	if(mm < 10) { mm = "0" + mm; }
70 | 	if(ss < 10) { ss = "0" + ss; }
71 | 
72 | 	var text = YY + '/' + MM + '/' + DD + ' (' + AA_str[AA] + ')<br>' + hh + ':' + mm + ':' + ss
73 | 	document.getElementById("digital_text").innerHTML = text;
74 | }
75 | 


--------------------------------------------------------------------------------
/app_option/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/app_option/icon.png


--------------------------------------------------------------------------------
/app_option/img/clock_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/app_option/img/clock_bg.png


--------------------------------------------------------------------------------
/app_option/img/clock_hh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/app_option/img/clock_hh.png


--------------------------------------------------------------------------------
/app_option/img/clock_mm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/app_option/img/clock_mm.png


--------------------------------------------------------------------------------
/app_option/img/clock_ss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/app_option/img/clock_ss.png


--------------------------------------------------------------------------------
/app_option/index.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <link href="./clock.css" rel="stylesheet">
 3 | <title>clock</title>
 4 | 
 5 | <div class="content">
 6 | 	<div class="analog">
 7 | 		<img class="pin" id="pin_bg" src="./img/clock_bg.png">
 8 | 		<img class="pin" id="pin_hh" src="./img/clock_hh.png">
 9 | 		<img class="pin" id="pin_mm" src="./img/clock_mm.png">
10 | 		<img class="pin" id="pin_ss" src="./img/clock_ss.png">
11 | 	</div>
12 | 	<div class="digital">
13 | 		<div class="text" id="digital_text"></div>
14 | 	</div>
15 | </div>
16 | 
17 | <script src="./clock.js"></script>
18 | 


--------------------------------------------------------------------------------
/app_option/main.js:
--------------------------------------------------------------------------------
 1 | var app = require("app");
 2 | var BrowserWindow = require("browser-window");
 3 | 
 4 | var mainWindow = null;
 5 | 
 6 | app.on("window-all-closed", function() {
 7 | 	if (process.platform != "darwin") {
 8 | 		app.quit();
 9 | 	}
10 | });
11 | 
12 | app.on("ready", function() {
13 | 	mainWindow = new BrowserWindow({
14 | 		// ウィンドウ作成時のオプション
15 | 		"width": 250,
16 | 		"height": 70,
17 | 		"transparent": true, 	// ウィンドウの背景を透過
18 | 		"frame": false, 		// 枠の無いウィンドウ
19 | 		"resizable": false, 	// ウィンドウのリサイズを禁止
20 | 		"skip-taskbar": true, 	// タスクバーに表示しない
21 | 		"show": false			// アプリ起動時にウィンドウを表示しない
22 | 	});
23 | 
24 | 	// index.html を開く
25 | 	mainWindow.loadUrl("file://" + __dirname + "/index.html");
26 | 
27 | 	mainWindow.on("closed", function() {
28 | 		mainWindow = null;
29 | 	});
30 | 
31 | 	// タスクトレイに格納
32 | 	var Menu = require("menu");
33 | 	var Tray = require("tray");
34 | 	var nativeImage = require("native-image");
35 | 
36 | 	var trayIcon = new Tray(nativeImage.createFromPath(__dirname + "/icon.png"));
37 | 
38 | 	// タスクトレイに右クリックメニューを追加
39 | 	var contextMenu = Menu.buildFromTemplate([
40 | 		{ label: "表示", click: function () { mainWindow.focus(); } },
41 | 		{ label: "終了", click: function () { mainWindow.close(); } }
42 | 	]);
43 | 	trayIcon.setContextMenu(contextMenu);
44 | 
45 | 	// タスクトレイのツールチップをアプリ名に
46 | 	trayIcon.setToolTip(app.getName());
47 | 
48 | 	// タスクトレイが左クリックされた場合、アプリのウィンドウをアクティブに
49 | 	trayIcon.on("clicked", function () {
50 | 		mainWindow.focus();
51 | 	});
52 | 	// タスクトレイに格納 ここまで
53 | });
54 | 


--------------------------------------------------------------------------------
/app_option/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name"    : "tutorial_clock",
3 |   "version" : "0.0.1",
4 |   "main"    : "main.js"
5 | }
6 | 


--------------------------------------------------------------------------------
/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/icon.ico


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # tutorial_clock
 2 | Electronによる、シンプルな時計ウィジェット
 3 | 
 4 | ## app
 5 | ![スクリーンショット](./screenshot_app.png)  
 6 | [Electronでデスクトップウィジェットを作るまで - Qiita](http://qiita.com/SallyAcolyte/items/94ed26ab62b8b32b1b2c)用のサンプルプログラム
 7 | 
 8 | ダウンロード: [tutorial_clock_app.zip](https://github.com/SallyAcolyte/tutorial_clock/releases/download/0.0.1/tutorial_clock_app.zip)
 9 | 
10 | ## app_option
11 | ![スクリーンショット](./screenshot_app_option.png)  
12 | appにアナログ時計を追加したもの
13 | 
14 | ダウンロード: [tutorial_clock_app_option.zip](https://github.com/SallyAcolyte/tutorial_clock/releases/download/0.0.1/tutorial_clock_app_option.zip)
15 | 


--------------------------------------------------------------------------------
/screenshot_app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/screenshot_app.png


--------------------------------------------------------------------------------
/screenshot_app_option.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SallyAcolyte/tutorial_clock/79a011119e963b7c3c2bb0cab9c0796d7640ca14/screenshot_app_option.png


--------------------------------------------------------------------------------