node-webkit を使ってみる 2 - Nuwk! の構成ファイル
node-webkit を使ってみるシリーズその 2。前回は node-webkit と Nuwk! をインストールして Hello World アプリを作成するところまでいった。今回はそのファイル構成について Nuwk! の生成するフォルダ単位で調べてみる。
App
アプリを開発するためのフォルダ。初期状態では以下のように構成されている。
index.html
アプリのエントリー ポイントになるファイル。Nuwk! で作成されたものは以下のように定義されている。
<!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>シンプルな HTML5 ファイルのようだが script タグ内で Node.js のバージョン情報取得 API を呼び出している。特別な設定や宣言なしにそのまま Node.js の機能を利用できるようだ。もちろん js フォルダに置いたスクリプト ファイルについても同様である。
package.json
アプリの設定を定義するファイル。詳細な仕様は公式 Wiki の Manifest format を参照のこと。Nuwk! が生成するものは以下のように定義されている。初期状態ではインデントや改行がなくて見辛いため整形している。
{
"name": "hello-world",
"main": "index.html",
"version": "1.0.0",
"window": {
"title": "node-webkit demo",
"toolbar": true,
"frame": true,
"width": 600,
"height": 560,
"position": "mouse",
"resizable": false
}
}ファイル名と内容からして npm で使用されるものと同様のようだ。
node_modules
node.js のモジュールをインストールするフォルダ。ターミナルで App フォルダ直下に移動して npm install コマンドを実行することで、この階層にモジュールがインストールされる。
プロジェクトを Git リポジトリで管理するならこのフォルダは除外しておき package.json 側に dependencies や devDependencies を定義する運用がよいだろう。Node.js を利用した開発ではおなじみだが npm install するときに
$ npm install sqlite3 --saveとすると package.json の dependencies に依存モジュール定義が追加され
$ npm install grunt --save-devなら devDependencies 側に追加される。この定義がある package.json のフォルダで
$ npm installを実行すると依存情報に基いてモジュールをインストールしてくれる。よってモジュールを直にリポジトリーへコミットしなくて済む。
$ npm install --productionとした場合は dependencies のものだけがインストールされる。この機能を前提として grunt みたいな開発補助ツールなどは dev 側に定義する慣習があるようだ。
Build
Nuwk! で Build や Run したとき、アプリの実行ファイルが生成されるフォルダ。パッケージの内容を表示すると中に node-webkit 関連や後述する Resources のファイルが組み込まれていることを確認できる。.app ファイルの仕様については Bundle Programming Guide: Bundle Structures を参照のこと。
Resources
OS X 用アプリとして必要なリソースを格納するフォルダ。以下のファイルで構成される。
Info.plist
アプリ情報を定義するファイル。仕様については Information Property List Key Reference: About Info.plist Keys を参照のこと。Nuwk! でビルドする場合、いじる機会はないと思われる。
nw.icns
アプリのアイコンとなるファイル。Xcode で OS X アプリを開発する場合、アイコンは Image Set の AppIcon で管理するのだが node-webkit では自前で .icns ファイルを用意する。その場合 iconutil というコマンドライン ツールを利用する。
まずはアイコンに使用する画像をサイズ別に用意。High Resolution Guidelines for OS X: Optimizing for High Resolution によれば以下が必要らしい。フォーマットは sRGB の透過 PNG になる。
- icon_16x16.png
- icon_16x16@2x.png
- icon_32x32.png
- icon_32x32@2x.png
- icon_128x128.png
- icon_128x128@2x.png
- icon_256x256.png
- icon_256x256@2x.png
- icon_512x512.png
- icon_512x512@2x.png
@2x は Retina 用の画像で倍のサイズになる。例えば icon_32x32@2x.png ならばサイズは 32 の倍となる 64x64 にしておく。これらを例えば ~/Pictures/nw.iconset/ に格納した場合、以下のようにターミナルで ~/Pictures/ に移動して iconutil コマンドを実行する。
$ cd ~/Pictures/
$ iconutil -c icns nw.iconsetファイル名が間違っていると以下のエラーが表示される。
nw.iconset:error: Iconset not found.成功したら ~/Pictures/ に nw.icns が生成されるので、これを Resources のファイルと差し替えて Nuwk! でビルドすればアイコンが更新される。
...今回はここまで。次回は簡単なファイラーでも作ってみようと思う。