久々にjavascriptでデスクトップアプリを触りたくなったので作成メモ。
基本的に凝ったものはelectron、楽に作るならnw.jsの認識なのでnw.jsでビルドまで動かしてみました。
実行環境はWindows10(64bit)。
ツールのインストール
公式ページからダウンロードもできますが、npmの方が楽です。
|
1 2 |
npm i nw [-g] npm i nw-builder [-g] |
グローバルインストールすると直接コマンドを使えますが、あまり使い続ける気もないので今回はローカルインストールしてます。
プロジェクトの作成
適当なフォルダを作って初期化します。
|
1 |
npm init -y |
NWの機能をローカルインストールした場合パスが通ってません。
そこでpackage.jsonのscriptsにstart,buildコマンドを追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nw src", "build": "nwbuild --platforms win64 src" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "nw": "^0.35.2", "nw-builder": "^3.5.4" } } |
色々いらないものがくっついてますがとりあえず無視。
次にフォルダ内にソース用フォルダを作ってindex.htmlとpackage.jsonを作成。
package.jsonが被って紛らわしいけど、こっちはNWプロジェクト用です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>NW.js TEST</h1> <h2>ビルドテスト</h2> </body> </html> |
|
1 2 3 4 5 |
{ "name":"nw-test-app", "version": "0.0.1", "main":"index.html" } |
開発とビルド
後はsrc内でhtml, js, cssをいじって npm start でテスト。
npm run build で build/{appname}/{platform}/ に実行ファイルができます。
簡単に実行ファイルを作ることができました。
ファイルサイズは２MB（最初package.jsonを混同して500MBあって驚いた）。
ここからちょっとやってみたいことができるか試してみます。