NW.jsアプリ開発フォルダの作り方 (MacOSX)

  • 5
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Node-WebkitもといNW.jsは面白いんだけど日本語ドキュメントが少なくてGithub wikiの英語をちゃんと読む必要があります。

ここではNW.jsアプリのフォルダ構成について私なりに「こんな感じで作ればいいのかな」というものをメモしておきます。環境はMacOSX、NW.jsはv0.12.1です。

1. NW.jsをダウンロードしましょう
 公式サイトから自分の環境に合ったものをダウンロードします。
 私の場合はOSX64です。

2. アプリケーションフォルダへ配置
 ダウンロードしたzipフォルダをunzipすると以下3ファイルが現れます。

credits.html
nwjc
nwjs

このうち nwjs をアプリケーションフォルダへ移しましょう。
これが一つのアプリのひな形になります(おそらく)。

3. ソースの配置
 アプリケーションフォルダに配置したnwjsを右クリックして「パッケージの内容を表示」を選びます。

スクリーンショット 2015-05-09 0.09.15.png

以下のフォルダ構成となっていました。

スクリーンショット 2015-05-09 0.22.30.png

アプリのソースを配置するフォルダを"Contents\Resources"に作ります。

ここで一つ注意するべきなのが、フォルダ名の末尾に".nw"を付けるということです。ここでは”app.nw”とします。

このapp.nwフォルダ下にhtmlやjsファイルを格納します。NW.jsアプリは最低限一つのhtmlファイルとpackage.jsonファイルがあれば動きます。

package.jsonのフォーマットはGithubのwikiページなどを参考にしてください。

app.nwフォルダ下に最低限のファイルを入れるとフォルダ構成は以下のようになります。

スクリーンショット 2015-05-09 0.34.41.png

4. アプリを起動してみる
 通常のアプリと同様に、nwjsアプリを起動してみます。
 app.nwフォルダ下のindex.htmlに記述された内容が表示されるはずです。

5. ソースのバイナリ化をした場合は
 NW.jsにはセキュリティのためにアプリのソースファイルをビルドしてバイナリ化する機能が備わっています。

参考サイト

その場合にできる.nwファイルもResourcesフォルダ以下に配置すればOKです。

英語ドキュメントをざっくりで読んでいたら、バイナリ化したソースをResources下に入れることとか読み飛ばしていて結構ハマっていました。

注)私自身NW.jsを触り始めて日が浅いので以上の手順がスタンダードなものかは不明です。