Help us understand the problem. What is going on with this article?

NW.jsを使ってWEBアプリをデスクトップアプリに移植する

概要

NW.jsはJavaScriptを使ってデスクトップアプリを作ることができるフレームワーク。 類似のフレームワークにelectronなどがある。

はじめはelectronを検証していたが、NW.jsの方がソースの隠蔽が可能とのことで、こちらも検証してみることにした。ただしNW.jsもただパッケージ化しただけだと、簡単に解析されてしまう旨の記述をよく見るため、こちらは後日調査。

ディレクトリ作成

以下の構成でディレクトリを作成 。package.jsonが2つあることに注意

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ファイル作成

マニュフェストファイルのmainに記載された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に指定した分だけパッケージが作成される

nw1.png

win64は以下のようになっており、 64bitWindows環境でnw.js-example.exeを実行できる

nw2.png

一方linux64は以下のような感じになっており、コマンドラインからnw.js-exampleを実行できる。 GUI経由でダブルクリックでは実行できないが、これはubuntuの設定の問題の様子。

nexeファイルというものについても後日調査。

$ ./nw.js-example

nw3.png

結果

nw4.png

デスクトップアプリとしてアプリケーションを実行することができた。

所感

工数の観点からwebアプリをデスクトップアプリ、ネイティブアプリに変換・流用することを検討しており、Erectron,NW.jsと調査をしたものの、いずれも制約があったり、性能面で不都合があったりと、思ったように簡単に変換・移植ができるわけではない。数年先のマルチプラットフォームフレームワークはどうなるかはわからないものの、直近はWEBアプリ、ネイティブアプリ別々の技術を習得していく必要があるかと思われる。

asakbiz
機械学習/ディープラーニングに関するコンサルやってます。好きな分野は自然言語処理やweb分析。 主な使用言語はPython。Javascript,特にVue.js勉強中。リブコード所属。
https://libchord.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした