nwjs

# nwjs の使い方 0.35.4 頃の話 (2019/01) ## resuirements * node (npm) * Windows では ***WSLから使わない*** ようにするのがおすすめ。 linux 用のバイナリを引っ張ってきてしまうので面倒なことになる。 ## 準備 ~~~bash npm init -y npm i -D nwjs-builder-phoenix ~~~ nwjs-builder-phoenix は、勝手に nwjs のバイナリを取ってきてくれるので、nwjs そのもののインストールは基本的には不要。 nwjs-builder-phoenix はコマンドが他と被りがちなので、***グローバルインストールは避ける*** 。 package.json に以下を追記 ~~~json "build": { "nwVersion": "stable" }, "main": "index.html" ~~~ nwVersion を指定しないと、かなり古い LTS 版を使おうとするので、 stable 指定を推奨。 nw のエントリポイントは html で良いのでここでは "index.html" とした。 js も指定できるけれど、その場合 window を開く手間が増える。 例: ~~~js nw.Window.open("index.html"); ~~~ ## 実行 ~~~bash npx run . ~~~ ## パッケージング Windows 64 bit 向けの例 ~~~bash npx build --tasks win-x64 . ~~~ `--tasks` に複数指定することで、各プラットフォーム向けのパッケージを一度に作ることができる。 ~~~bash npx build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 . ~~~ 成果物は `dist` ディレクトリに作られる。 package.json の "build" 項目に追記することで、 パッケージングを色々コントロールできる。 一部ファイルやディレクトリを除外するなども楽なので、electron と違って、 別途アプリフォルダを掘る必要はほぼない。 詳細は https://github.com/evshiron/nwjs-builder-phoenix/blob/HEAD/docs/Options.md ## nw のインストールが別途必要になる場合 nwjc (javascript のバイトコードコンパイル)等を使いたい場合は、nwjs の sdk が必要になるので、別途インストールが要る。 (phoenix のキャッシュから引っ張ることもできなくはないが...) ~~~bash npm i -D nw@sdk ~~~ 悲しいことに bin に配置してくれないので、 scripts で直指定。 ~~~json "scripts": { "nwjc": "./node_modules/nw/nwjs/nwjc" } ~~~ usage ~~~bash npm run nwjc <js-file> <bitecode-file> ~~~ ## その他 エントリポイントは js でも html でも。 html の方がいろいろと楽。 以下、書いておきたいもの。 ### ファイルドロップの禁止 node や nwjs の機能を使えてしまうので、 意図しない HTML ファイルの読み込みは危険。 ~~~js window.addEventListener('dragover', e => { e.dataTransfer.dropEffect = "none"; e.preventDefault(); e.stopPropagation(); return false; }); window.addEventListener('drop', e => { e.preventDefault(); e.stopPropagation(); return false; }); ~~~ ### フルスクリーン F11 での最大化/最小化は無効化されているので、 使いたければ自分で設定する。 ~~~js nw.App.registerGlobalHotKey(new nw.Shortcut({ key: "F11", active: () => nw.Window.get().toggleFullscreen(); })); ~~~ (追記) リロード時に効かなくなる模様。 registerGlobalHotKey ではなく、素直にキーボードイベントを拾った方が良いかもしれない。