node-webkitを触ってみた - Umi Uyuraのブログ

ズルズルときていた年度末案件がようやく収拾ついてきたので、なんとか次に向けての動きがとれるようになってきた今日このごろ。

業務にて、エンジニアではない人向けにちょっとしたツールを作る必要が出てきたので、この機会にとnode-webkitを使ってみることにしました。

非エンジニア向けということでGUIが必要であったことと、私も含め社内のほとんどの人はMacを使っているものの、一部Windowsを使っている人もいるため、マルチプラットフォームに作れるものが欲しかったということがあります。

というわけで、試したことの作業メモ。

開発環境の構築（node-webkitのインストール）

プロジェクト用のフォルダを作成した後、npmを使ってインストールしました。

$ mkdir nwdemo
$ cd nwdemo
$ npm install nodewebkit@0.9.2-6

はじめバージョンを指定しなかったところ、少し古い0.8系がインストールされてしまったので、改めてバージョンを指定しつつインストールしなおしました。私が試した時は、0.9.2-6というのが最新でした。

最新版を使いたい場合は、GitHubのリポジトリ rogerwang/node-webkit からダウンロードするのが良いようです。

また、グローバルにインストールしようとも思ったのですが、Readme.mdを読むと、基本的にはプロジェクトごとにローカルにインストールするのを推奨しているようだったので、そのようにしました。

サンプルの作成

ひとまず、Readme.mdに掲載されていたサンプルを作ってみました。

プロジェクト直下に以下の2ファイルを作成します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

package.json

{
  "name": "nw-demo",
  "main": "index.html"
}

f:id:umi-uyura:20140628012001p:plain

サンプルの実行

実行方法はいくつかあるみたいですが、一番シンプルなのはnodewebkitコマンドで実行することで、作成したプロジェクト直下で

$ nodewebkit

で立ち上がりました。

f:id:umi-uyura:20140628011917p:plain

npmを使った実行

package.jsonへ設定しておくことで、npmコマンドからの実行もできます、と。

package.json

{
  "scripts": {
    "start": "nodewebkit"
  }
}

$ npm start

ZIPアーカイブして実行

必要なファイルをZIPで固めておくことで、単独のファイルとして配布し、nodewebkitコマンドで実行することもできます。

$ zip app.nw index.html package.json
$ nodewebkit app.nw

nodewebkitコマンドが使える環境同士で、作ったものを渡す場合などに使えそうでしょうか。

配布形式の作成

CLIが苦手な人や、そもそもnodewebkitコマンドが入っていない環境で動かすために、各プラットフォームに対応した配布形式にする必要があります。

Macの場合

rogerwang/node-webkitから、Mac用のPrebuilt binariesとして用意してあるnode-webkit-v0.9.2-osx-ia32.zipをダウンロードし、展開します。

node-webkit.app/Contents/Resources内にapp.nwフォルダを作成し、index.htmlなど、必要なファイルをコピーします。

f:id:umi-uyura:20140628012017p:plain

このnode-webkit.appをアプリとして配布でき、これを実行するとアプリが起動します。

node-webkit.appの"node-webkit"部分は任意の名称に変更できるようです。

Windowsの場合

rogerwang/node-webkitから、Windows用のPrebuilt binariesとして用意してあるnode-webkit-v0.9.2-win-ia32.zipをダウンロードし、展開します。

Windowsの場合は、ZIPアーカイブして実行の手順で、まずZIPアーカイブしておきます。

そのZIPアーカイブを、展開したフォルダにコピーし、nw.exeと結合します。

Windows上では、

$ copy /b nw.exe+app.nw nwdemo.exe

として結合できますが、開発はMacでやりたかったので、

$ cat nw.exe app.nw > nwdemo.exe

と、catコマンドで結合してみました。

結合してできたexeと、*.dllおよびnw.pakを同梱してWindows 7環境の人に送り、nwdemo.exeを実行してもらったところ、見事実行できました。

Node.jsモジュールの利用

$ npm install moment --save

などとして、npmでモジュールをインストールし、

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
   <script>
     var moment = require("moment");
   </script>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>.
    <h2><script>document.write(moment().format("YYYY/MM/DD hh:mm:ss"))</script></h2>
  </body>
</html>