NW.jsを使ってHello World !

Tools

以前の記事でNW.jsを使ったWindowsアプリケーションを作りました。

このたびLinuxでもNW.jsを触る機会があったので、復習もかね改めてNW.jsの使い方をおさらいしてみます。

NW.jsをインストール

NW.jsの管理パッケージをグローバルにインストールし、次にnwコマンドでNW.js本体をインストールします。

$ npm install -g nwjs
// 使用できるNW.jsのバージョン一覧を確認
$ nw list-remote
$ nw install <version>
// SDK版をインストールする場合
$ nw install <version>-sdk

環境によっては本体インストール時にエラーが出るかもしれません(私のWindows環境では駄目でした)。その場合はNW.js本体を直接インストールします。

// 最新版がインストールされる
$ npm install -g nw

npmが使えない環境の場合

ブラウザなどでNW.js本体をダウンロードし、展開したディレクトリ内のnw(Windowsではnw.exe)を使います。以下で作成するファイルはnw本体と同じディレクトリに配置してください。

アプリケーションを作成

ディレクトリをつくり、アプリケーションの情報を記載したpackage.jsonと、ベースになるindex.htmlを作成します。

{
    "name": "helloworld",
    "main": "index.html"
}
<!DOCTYPE html>
    <head>
        <title>Hello World!</title>
    </head>
    <body> 
        <h1>Hello World!</h1>
    </body>
</html>

NW.jsを実行して起動を確認します。

$ cd <app_dir>
$ nw .

パッケージ化する

Node.jsやNW.jsがインストールされていない環境でも使えるようにパッケージ化します。

NW.js本体を用意する

実行する環境に合わせたNW.js本体をNW.jsのサイトからブラウザなどでダウンロードし、適当な場所に展開しておきます。NW.js本体にはNORMAL版とSDK版がありますが、NORMAL版には言語関係のファイルが含まれていません。日本語のアプリケーションを作成する場合にはSDK版を使用するか、SDK版から言語ファイルをNORMAL版にコピーして使いましょう(→ NORMAL版にも言語ファイルが含まれるようになったようです 17/03/01追記)。

作成ファイルを圧縮・リネーム

package.jsonとindex.html(ほか使用するJavaScriptや画像なども含めて)をzipでまとめて圧縮します。格納ディレクトリごと圧縮してしまわないように注意しましょう。

$ zip -r hello.zip .

圧縮したものをNW.js本体のディレクトリに移動させます。

$ mv hello.zip <NW.jsのディレクトリ>/

ファイルを結合してバイナリ作成

移動させた圧縮ファイルと、NW.jsのディレクトリにあるnw(Windowsの場合はnw.exe)を結合します。Linuxの場合は実行権限をつけます。

Linuxの場合

$ cat nw hello.zip > hello && chmod +x hello

Windowsの場合

> copy /b nw.exe+hello.zip hello.exe

できたバイナリを実行して起動するか確認してください。

必要に応じてResource Huckerなどを使ってアイコンの変更やアプリケーションの情報を編集して完成です。

コメント