NW.jsでデスクトップウィジェット的な

2016年11月02日 · 1 min read · Node.js  ·
Share on:

前回トラブって上手くいかなかったのでNW.jsでリトライした

仕組みの都合上フロントのjsからウィンドウ操作が簡単に出来るので共存出来ました
こちらのコードをほぼそのままお借りました
変えたのは操作対象をwindowにしたくらい

package.json

 1{
 2  "name": "desktop",
 3  "version": "1.0.0",
 4  "description": "",
 5  "main": "index.html",
 6  "scripts": {
 7    "test": "echo \"Error: no test specified\" && exit 1",
 8    "start": "nw"
 9  },
10  "window": {
11    "width": 400,
12    "height": 600,
13    "toolbar": false,
14    "transparent": true,
15    "frame": false,
16    "resizable": false,
17    "always-on-top": true
18  }
19}

transparentとframeしか有効になってない気がする
常に全面になってないしツールバーはtrue/false時に挙動が変わらないような…

index.html

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4    <meta charset="utf-8">
 5    <title>デスクトップマスコット</title>
 6
 7    <script src="js/jquery.min.js"></script>
 8    <script src="js/script.js"></script>
 9
10    <style>
11        html, body{
12            margin: 0;
13            padding: 0;
14            width: 100%;
15            height: 100%;
16        }
17        body{
18            -webkit-user-select: none;
19        }
20    </style>
21</head>
22<body>
23    適当な内容
24</body>
25</html>

scripts.js

 1$(document).ready(function () {
 2    var wX = 0;
 3    var wY = 0;
 4    var dragging = false;
 5    $(window).mousedown(function (e) {
 6        dragging = true;
 7        wX = e.pageX;
 8        wY = e.pageY;
 9    });
10
11    $(window).mousemove(function (e) {
12        e.stopPropagation();
13        e.preventDefault();
14        if (dragging) {
15            var xLoc = e.screenX - wX;
16            var yLoc = e.screenY - wY;
17            try {
18                window.moveTo(xLoc, yLoc);
19            } catch (err) {
20                console.log(err);
21            }
22        }
23    });
24    $(window).mouseup(function () {
25        dragging = false;
26    });
27    $("body").on("click", function(){
28        console.log("click!");
29    });
30});

これでウィンドウでクリックとドラッグによる移動が共存出来る

別件だけど

1$ npm install nv -g

したものは公式サイトでいうところのNormal版なんだろうか
というのもDevTools使おうと思ったものの開き方が分からない
公式ドキュメント読んでもSDK版ならF12で開けるよ！としか書いてない
仕方ないので公式からSDK版と落として来て
Userdir/AppData/Roaming/npm/nw/nwjs
に丸々上書きして誤魔化した