node-webkitを触ってみた
ズルズルときていた年度末案件がようやく収拾ついてきたので、なんとか次に向けての動きがとれるようになってきた今日このごろ。
業務にて、エンジニアではない人向けにちょっとしたツールを作る必要が出てきたので、この機会にと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" }
サンプルの実行
実行方法はいくつかあるみたいですが、一番シンプルなのはnodewebkit
コマンドで実行することで、作成したプロジェクト直下で
$ nodewebkit
で立ち上がりました。
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など、必要なファイルをコピーします。
この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>
scriptタグ内でrequireするなどして、呼び出すことができます。
配布形式にする
- node-webkit.app/Contents/Resources内にapp.nwフォルダを作成
- index.htmlなどと一緒にnode_modulesフォルダもコピー
- node-webkit.appを実行
で使えました。
注意点として、プラットフォーム特有の処理が含まれているモジュールなどは動かないといったことも発生するようなので、npm install
は対象とする各プラットフォームにおいて実行したものを使うのが良いっぽいです。
プラットフォーム依存がないものであれば、Mac上で配布形式にしてしまっても大丈夫そうな気もします。
まとめ
導入や取っ掛かりはとても簡単でした。
実際に開発を進めていくとnode-webkit特有の問題などもあると思いますが、マルチプラットフォームなGUIツールが簡単に作れるというのは非常に魅力的です。
これを使って、実際にツールを作っていってみようと思います。
サーバサイドJavaScript Node.js入門 (アスキー書籍)
- 作者: 清水俊博,大津繁樹,小林秀和,佐々木庸平,篠崎祐輔,高木敦也,西山雄也,Jxck
- 出版社/メーカー: KADOKAWA / アスキー・メディアワークス
- 発売日: 2014/02/27
- メディア: Kindle版
- この商品を含むブログを見る