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 は削除しておきましょう。

参考資料

• rogerwang/node-webkit
• Home · rogerwang/node-webkit Wiki

つくってみたもの

Imaguria

画像を Data URI に変換する node-webkit 製の単機能アプリケーション。 画像をアプリケーション画面にドロップするか、 コピーした画像をアプリケーション画面にペーストすると、 Data URI が表示されます。

Windows版とMac版をご用意しました。 あまり使い道が思いつきませんが、せっかく作ったのでもしよろしければ。

この内容ならWebアプリケーションで十分用を足せるので あまり良い題材とは言えないかもしれませんが、 なにせ手頃な題材が思いつかなかったので。

おかげでおおまかな開発の流れがわかりました。

作ってみた感想

node-webkit は chronium を内包しているので、Webの技術でデスクトップアプリケーションが作れます。 Adobe AIR や Titanium Desktop 等に似た存在ですね。

強みの一つは、独自のAPIの他に node.js をフロントのJavaScriptから利用できる点で、 require(…) 等してモジュールを利用する事ができます。

node.js がそうであるように、Win / Mac / Linux のいずれでも動くマルチプラットフォームのアプリケーションが開発出来ます。 どの環境でも chronium がベースになるので、 Web開発者が常に悩まされ続けてきたクロスブラウザなどという物に縛られずに新しい技術を使い放題です。 これは結構書いていて爽快ですね。

node.js でローカルのファイルシステムを扱える他、Webストレージや Web SQLなどもサポートしている様です。

ちなみに、開発はMacがダントツでやり易かったです。

参考URL

• rogerwang/node-webkit
• Home · rogerwang/node-webkit Wiki

まとめ

node-webkit でのアプリの作り方はまた別の機会にします。

Webの技術でデスクトップアプリケーションを作るための選択肢が一つ増えました。喜ばしいことです。 これとは別に、Windows8のストアアプリもJavaScriptで開発出来る様ですよ。