개요

NW.js는 JavaScript를 사용하여 데스크톱 앱을 만들 수 있는 프레임워크입니다. 유사한 기구에는 electron 등이 있다.

처음에는 electron을 검증하고 있었지만, NW.js 쪽이 소스의 은폐가 가능하다는 것으로, 이쪽도 검증해 보기로 했다. 다만 NW.js도 단지 패키지화했을 뿐이라고 간단하게 해석되어 버리는 취지의 기술을 잘 보기 위해, 이쪽은 후일 조사.

디렉토리 작성

다음 구성으로 디렉토리를 만듭니다. package.json이 두 가지 있음

nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json

매니페스트 파일 만들기

매뉴페스트 파일, src/package.json 만들기
이렇게 하면 만들 앱의 설정을 설명합니다.

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}

HTML 파일 작성

매뉴페스트 파일의 메인에 기재된 html 파일이 최초로 실행된다
따라서 view.html/main.html 만들기

빌드 설정

루트의 package.json을 편집하는 빌드시 설정하기
name, version 모두 package.json 파일에 같은 것을 기재하지 않으면
패키지를 만들 수 없으므로 요주의.

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  },
  "scripts":{
    "dev":"nw src/",
    "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  }
}

필요한 패키지 설치

다음 명령을 실행하여 위의 devDependencies에 설명 된 패키지 설치

$ npm install

디버그 실행

$ npm run dev  

패키징

$ npm run prod

package.json의 scripts : prod에 지정된만큼 패키지가 생성됩니다.



win64는 다음과 같으며 64bit Windows 환경에서 nw.js-example.exe를 실행할 수 있습니다.



한편 linux64는 이하와 같은 느낌이 되어 있어, 커멘드 라인으로부터 nw.js-example를 실행할 수 있다. GUI를 통해 더블 클릭으로 실행할 수 없지만, 이것은 우분투 설정 문제의 모습.
nexe 파일이라는 것에 대해서도 나중에 조사.

$ ./nw.js-example

결과

데스크톱 앱으로 응용 프로그램을 실행할 수있었습니다.

소감

공수의 관점에서 웹 앱을 데스크톱 앱, 네이티브 앱으로 변환·유용하는 것을 검토하고 있어, Erectron, NW.js와 조사를 했지만, 모두 제약이 있거나, 성능면에서 불편함이 있다고 , 생각한 것처럼 간단하게 변환·이식을 할 수 있는 것은 아니다. 몇 년 앞의 멀티 플랫폼 프레임워크는 어떻게 될지는 모르지만, 최근에는 WEB 어플리케이션, 네이티브 어플 별개의 기술을 습득해 갈 필요가 있을까 생각된다.