node-webkit改めNW.jsを触ってみた
以前少しnode-webkitを触って、ちょっとした社内ツールなどに使ってみていました。
それからしばらく経ちますが、Node.jsから派生したio.jsの登場により、node-webkitもNW.jsと名前を改めることになったようです。
ちょっと新しいツールを作らなければならなくなったので、今度はNW.jsベースで作ってみようと思い、大きな違いはないと思いつつ、振り返りついでに使い方を確認してみました。
NW.jsのバージョンは0.12.0-1で試しています。
開発環境の構築(NW.jsのインストール)
いきなりつまづいたのは、 公式サイト を見ても、 GitHubのリポジトリ を見ても、パッケージのインストールについての記載が見当たらなかったこと。
以前は $ npm install nodewebkit
でインストールしていたのですが、どちらのページにもアーカイブのダウンロードリンクしかありません。
試しに $ npm info nwjs
をしてみても存在しないというエラーが返ってきてしまったのですが、Qiitaのこちらのエントリを見て解決しました。
NW.js (node-webkit) の開発をすぐ始める - Qiita
どうやらパッケージ名は nw になっていたようです。
さらにnwのpackage.jsonを見たところ、npm向けパッケージについては、 こちらのリポジトリ で管理しているようでした。
というわけで気を取り直して、 前回 同様プロジェクト用のディレクトリを作成後、NW.jsをインストールしました。
$ mkdir nwjsdemo $ cd nwjsdemo $ npm install nw
サンプルの作成
とりあえず基本的な使い方を確認するために、前回と同じサンプルをベースに動かしてみることにしました。
というわけで、プロジェクトディレクトリ内にindex.htmlとpackage.jsonを用意。
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using io.js <script>document.write(process.version)</script>. </body> </html>
package.json
{ "name": "nwjs-demo", "main": "index.html", "scripts": { "start": "nw" } }
index.htmlは前回とほぼ同じですが、npm-installerのREADME.md のusageに記載されている通り、package.jsonには scripts
フィールドを追加しました。
$ npm start
で実行すると、無事画面が表示されました。
Node.jsモジュールの利用
念のため、Node.jsモジュールが使えるかどうかも確認してみました。
これも前回同様、 Moment.js を導入して、現在時刻を表示させてみます。
まずはnpmでmomentを導入。
$ npm install moment --save
index.htmlを編集して、moment.jsの読み込みと、現在時刻の出力処理を実装します。
<!DOCTYPE html> <html> <head> <title>Hello World!</title> <script> var moment = require("moment"); </script> </head> <body> <h1>Hello World!</h1> We are using io.js <script>document.write(process.version)</script>. <h2><script>document.write(moment().format("YYYY/MM/DD hh:mm:ss"))</script></h2> </body> </html>
実行した結果がこちら。
感想
まだパッケージ化までは試していませんが、NW.jsのインストールだけ迷わなければ、基本的な使い方はnode-webkitのときと同じ感じでいけそうです。