Umi Uyuraのブログ

プログラミング関連の作業ログ

node-webkit改めNW.jsを触ってみた

以前少しnode-webkitを触って、ちょっとした社内ツールなどに使ってみていました。

umi-uyura.hatenablog.com

それからしばらく経ちますが、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

で実行すると、無事画面が表示されました。

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

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>

実行した結果がこちら。

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

感想

まだパッケージ化までは試していませんが、NW.jsのインストールだけ迷わなければ、基本的な使い方はnode-webkitのときと同じ感じでいけそうです。

参考