“node-webkit” – Alphabetical Advent Calendar 2013

2013年12月13日 10:46 （2013年12月13日 23:15 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

“N” は node-webkit の “N”。

node-webkit

node-webkit は、HTML + CSS + JavaScript でネイティブアプリケーションを作る事が出来る、 Chromiumをバンドルした node.js ベースのランタイムです。 Mac / Windows / Linux 用にそれぞれビルドする事が可能で、1セットのコードからクロスプラットフォームを実現出来ます。

Titanium Desktop や Adobe AIR 等と似たような存在ですが、組み込んだ JavaScript からそのまま node.js のモジュールを利用出来るという大きなメリットがあります。勿論 Titanium や AIR と同じように node-webkit 独自のAPIも提供されています。

アプリケーションを作ってみる (Mac編)

実際にシンプルなMac向けのアプリケーションを作ってみる事にします。

下準備

まず node-webkit をダウンロードしてインストールしておきましょう。（ビルドする場合には同梱する事になるのですが、開発中はアプリケーションから開いた方が効率が良いと思います。）

Download / rogerwang/node-webkit

上記URLの Download から、各環境向けにビルドしたバイナリが取得できます。 Mac 用のバイナリをダウンロードし、普段アプリケーションをインストールするのと同じように、 node-webkit.app をアプリケーションフォルダにコピーします。

ファイル構成

アプリケーションを立ち上げるのに最低限必要な物は次の要素です。

app.nw/
├ package.json
└ application/
     └ index.html

app.nw : アプリケーションのルートディレクトリ
package.json : マニフェストファイルとなります
application : アプリケーションのリソースを格納するディレクトリ
index.html : アプリケーション本体です

package.json

package.json はアプリケーションの基本的な情報を書き込んでいきます。このファイルが無かったり記法が間違っていたりするとアプリケーションは立ち上がりません。中身は JSON で記述し、アプリケーションの名前やメインファイルのパス、ウィンドウの見た目などを指定する事ができます。

{
    "name": "nw-hello",
    "version": "0.0.0",
    "main": "application/index.html",
    "window": {
        "width": 800,
        "height": 600,
        "toolbar": false
    }
}

“main” で指定したファイルがアプリケーションの本体となります。

設定項目はこの他に沢山用意されています。項目の詳細については公式のwikiに詳しく記載されていますのでそちらをご覧ください。
Manifest format · rogerwang/node-webkit Wiki

index.html

メインファイルとなるHTMLでは、普段通りのHTML/CSS/JavaScriptを記述していけば良いです。勿論 js や css ファイル等を外部リソースにしても構いません。

ここでは試しに node.js の機能を少し使ってみます。

<p>
    Hello, <span id="user-name"></span>
</p>
<script>
    var cp = require("child_process");
    var userName = document.getElementById("user-name");
    cp.exec("whoami", function(e, out, error){
        userName.innerHTML = out;
    });
</script>

アプリケーションを立ち上げると “Hello, [ユーザー名]” と表示されます。ユーザー名を取得する為の whoami コマンドの実行に node.js の child_process を使用しています。

アプリケーションを立ち上げる

はじめにインストールした node-webkit.app を使ってアプリケーションを立ち上げます。ターミナルで open コマンドを使い、引数にアプリケーションのディレクトリを指定します。

$ open -a node-webkit /the/path/to/app.nw

または、node-webkit をインストールしておくと *.nw に関連付けがされる様なので、 finder から app.nw を叩くか、直接 open コマンドでも開きます。

$ open /the/path/to/app.nw

無事立ち上がりましたか？

Windowsの場合はどうなるか

Windowsの環境でも基本的な開発の仕方はかわりません。アプリケーションの起動は、ダウンロードしたバイナリ（nw.exe）にアプリケーションディレクトリをドラッグドロップして行います。

（パスを通して引数にディレクトリを渡して起動する事も出来ますが、それをする人は稀でしょう）

パッケージングする（Mac編）

このままではこのアプリケーションは自分の環境でしか動かないので、他のコンピューターでも使用出来るようにします。といっても、Macの場合は恐ろしく簡単で、 node-webkit.app を複製してファイルを差し替えるだけで出来てしまいます。

node-webkit.app は finder で見るとファイルのように見えますが、実際は次のような構造のディレクトリになっています。

node-webkit.app/
└ Contents/
     ├ Frameworks/
     ├ Info.plist
     ├ MacOS/
     ├ PkgInfo
     └ Resources/

この Resources の中にアプリケーションのディレクトリを入れ、 node-webkit.app を hello.app のようにリネームしてあげれば完成です。

hello.app/
└ Contents/
     ├ <省略>
     └ Resources/
          └ app.nw/
               ├ package.json
               └ application/

こんな感じになりますね。

パッケージングする（Windows編）

Windows向けのアプリケーションは、Macのようにディレクトリのままリリースする方法と、アプリケーションディレクトリを exe ファイルに結合する方法があります。

まずはWindows用のバイナリをダウンロードして zip を展開しておきましょう。これは共通して使用します。
https://github.com/rogerwang/node-webkit#downloads

ディレクトリのままパッケージングする

Macのようにディレクトリのままコピーしてしまう方法も取ることが出来ます。但し、package.json は nw.exe と同じディレクトリになければなりませんので、アプリケーションディレクトリの中身をそのままコピーするイメージです。（その為、アプリケーションのリソースはまとめて application/ 等に格納しておくと管理が楽です）

node-webkit-vX.X.X-win-ja32
├ credits.html
├ *.dll
├ nw.exe
├ nw.pak
├ nwsnapshot.exe
├ package.json
└ application/
     └ index.html

nw.exe はアプリケーションの名前にあわせてリネームしておくと良いでしょう。ディレクトリ内の dll ファイルや pak ファイルは動作時に必要なので、まとめて同梱して配布しましょう。

結合してパッケージングする

まず、node-webkitのディレクトリの中に、アプリケーションディレクトリを zip 圧縮した物を格納します。

node-webkit-vX.X.X-win-ja32
├ nw.exe
├ <省略>
└ app.zip（zipファイル）

zip 圧縮する際に注意しなければならないのは、zip のルートに package.json がなければならない点です。多くの圧縮ツールは圧縮時に同名フォルダを中に作ってその中に展開してしまいますが、その構成ではアプリケーションは正常に立ち上がりません。 Git CUI 等にある zip コマンドを使用した方が手っ取り早いかもしれませんね。

結合は、コマンドライン（コマンドプロンプト）で行います。

> copy /b nw.exe+app.zip hello-world.exe

Mac等の環境でシェルコマンドで行う事もできます。

$ cat nw.exe app.zip > hello-world.exe

これで完成です。古い nw.exe と app.zip は削除しておきましょう。

参考資料

コメントを書く