アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

node-webkit を使ってみる 2 - Nuwk! の構成ファイル

December 07, 2014開発iconutil, JavaScript, nw.js

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 側に dependenciesdevDependencies を定義する運用がよいだろう。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! でビルドすればアイコンが更新される。

...今回はここまで。次回は簡単なファイラーでも作ってみようと思う。