node-webkit というクロス プラットフォーム向けのデスクトップ用アプリ開発ランタイムがある。

動作環境は Chromium と node.js を組み合わせたものとなる。Chromium により Web フロントエンド技術 ( HTML/CSS/JavaScript ) のアプリ実装を可能とし Node.js 経由でプラットフォームのネイティブ機能も呼び出せる。

いまどきの Web フロントエンド技術を学ぶための題材としてもよさそうだ。node-webkit に関するブログ記事をみるとそうした技術が普通に利用されている。特に AngularJS や vue.js といった JavaScript フレームワーク、Yeoman のようなツールを用いた環境管理は興味あるし実務にも役立つだろう。

というわけで node-webkit について学んでみる。

開発環境

はじめに node-webkit の GitHub プロジェクトからランタイムを入手。Downloads 欄にプラットフォームごとのイメージが公開されている。私は Mac 10.7+ の 64bit 版を選んだ。

• rogerwang/node-webkit

入手した ZIP を展開すると複数のファイルがあらわれる。それらのうち node-webkit.app がランタイムとなる。ファイルの置き場所は自由だが、後の作業を楽にするため今回はアプリケーション フォルダへ移動しておく。

node-webkit.app をアプリ実行ランタイムとして利用する場合、コマンドラインから以下を実行する。MyApp 部分はアプリのフォルダ パスになる。

$ /Applications/node-webkit.app/Contents/MacOS/node-webkit MyApp

指定が非常に長く入力補完があっても面倒なので公式 Wiki の How to run apps で紹介されているように .bash_profile にでもエイリアスを設定しておこう。ターミナルから以下のコマンドを実行してファイルを開き、

$ cd
$ vi .bash_profile

末尾あたりに以下の記述を追加して保存する。

alias nw="/Applications/node-webkit.app/Contents/MacOS/node-webkit"

保存したら変更を有効にして、nw コマンドで node-webkit が実行されることを確認する。

$ cd
$ source .bash_profile
$ nw

成功すれば標準の node-webkit ウィンドウが表示されるはず。アプリのフォルダを指定するときのコマンドも以下のように簡略化される。

$ nw MyApp

次に Nuwk! を入手する。これは node-webkit アプリのひな形を作成したり配布用イメージをビルドしてくれたりする便利ツールである。

• Nuwk! Simple Mac App Builder based on node-webkit

Download Nuwk! というリンクをクリックすると MediaFire に飛ばされる。ここから ZIP ファイルをダウンロード。ZIP を展開すると nuwk!.app があらわれるのでこれをアプリケーション フォルダに移動させる。

Nuwk! を利用するためには node-webkit.app をアプリケーション フォルダに置く必要がある。ここに存在しない場合、Nuwk! は node-webkit が見つけられずダウンロードを促すメッセージを表示する。通常は以下のような表示になる。

最後に Node.js をインストールす。事前に入っているならこの手順は不要。

OS X の場合、公式サイトのインストーラだけでなく Homebrew からもインストールできる。バージョン更新が楽なので私はこちらにしている。Homebrew から入れる場合はターミナルから以下のコマンドを実行。

$ brew install node

Node.js をインストールすると npm というパッケージ管理ツールも付いてくる。node-webkit でアプリ開発している時、たとえば SQLite を利用したくなった場合はターミナルでアプリのフォルダに移動してから以下のコマンドを実行する。

$ npm install sqlite3

するとアプリのフォルダ内に node_modules というフォルダが作成され、その中に SQLite 関連のモジュールがインストールされる。ここにあるものは node-webkit の JavaScript から require 関数でオブジェクトを取得できる。

Hello World

まずはお約束ということで Hello World アプリを作成。Nuwk! を起動して New Project 欄に hello-world と入力してチェックマークをクリックする。プロジェクトの保存先を問い合わせるダイアログが表示されるので適当な場所を選ぶ。するとその場所にプロジェクト名のサブフォルダが作成されて以下のフォルダが用意される。

この状態で Nuwk! から Build を実行すると Build フォルダに hello-world 1.0.0.app というファイルが出力される。これを実行すると以下のウィンドウが表示されるはず。

OS X システム環境設定のセキュリティとプライバシーでセキュリティとプライバシー欄がすべてのアプリケーションを許可以外になっていると Nuwk! でビルドしたアプリをそのまま実行することはできない。Nuwk! の Run はビルドしてから実行となるため実行の部分で失敗する。

これはセキュリティ上、仕方のないことなので受け入れよう。おそらく Mac Developer Program へ登録したうえで info.plist などに開発者の情報を設定すればよいのだろう。これは後で調べる。

できあがった hello-world 1.0.0.app のサイズを見ると 85.8MB もある。私がこれまでみた Hello World サンプルの中でも最大だ。なぜこうなるのかというとビルド時に Chromium と Node.js をアプリのイメージに内包するためである。その他 node_module なども組み込み対象となる。サイズは巨大だがランタイムや依存モジュールがすべて組み込まれるため、アプリを単体配布できるメリットもある。

ちなみにビルドするのはアプリの第三者検証やリリース時ぐらいでよいので開発中は前述の nw コマンドを利用するほうが効率的だ。Nuwk! で作成したプロジェクトなら App フォルダが実行対象となる。ターミナルでここに移動しておいて nw App を実行すればよい。

...今回はここまで。次回は node-webkit アプリの構成ファイルなどについて学ぶ。