NW.js (node-webkit) を動かしてみた


この記事は[Gizumoエンジニア Advent Calendar 2015](http://www.adventar.org/calendars/919)の23日目の記事です

僕は株式会社Gizumoでフロントエンジニアをしています[osamu38](https://github.com/osamu38)と申します。最近はもっぱら受託開発に勤しんでいますが、隙をみてNode.jsの勉強だったり社内で流行中の[カードゲーム](http://mtg-jp.com/)で遊んでいます。
そんな僕が最近`node-webkit`とゆう`Node.js`で**ネイティブアプリ**が作れるツールがあるという噂を聞き、さっそくリポジトリを探しに行ってみたところ

**node-webkit is renamed NW.js**

`node-webkit`じゃなくて`NW.js`に変わっていました。まぁそんなことはどうでもいいのでひとまず導入手順を説明していきます。

# 導入手順

本家[NW.js](http://nwjs.io/)のサイトへ行き

![screencapture-nwjs-io-1450671066803.png](https://qiita-image-store.s3.amazonaws.com/0/76971/16fed92d-3e8a-b1d6-e032-d637d4aee75d.png)

NW.jsをダウンロードしちゃいましょう。

`nwjs-v0.12.3-osx-x64`を中を見てみると

![スクリーンショット-2015-12-21-13.18.19.png](https://qiita-image-store.s3.amazonaws.com/0/76971/d229fac7-de12-383c-ac32-536bf06eb9f1.png)

`credits.html`と`nwjc`と`nwjs`があるので、`nwjs`をアプリケーションフォルダに移動させます。

アプリケーションフォルダに移動した`nwjs`をダブルクリックしても「開発元を確認できないため、開けませんでした。」と出てしまうので、[これ](https://helpx.adobe.com/jp/x-productkb/global/cpsid_93896.html)をみて解決しましょう。

解決したらもう一度ダブルクリック！

![スクリーンショット 2015-12-21 14.44.20.png](https://qiita-image-store.s3.amazonaws.com/0/76971/868e0ef8-cecf-7762-8fdc-cc7eede75e5f.png)

おお！素晴らしい！**ネイティブアプリ**の画面が出てきましたね！

# 自分で作った画面を表示させてみる

そしてアプリケーションに移動した`nwjs`を右クリックしてパッケージの内容を表示します。

![スクリーンショット-2015-12-21-15.00.55.png](https://qiita-image-store.s3.amazonaws.com/0/76971/4685ebb9-c863-975c-f7f2-b22b9554f6fb.png)

このようなディレクトリ構造になっていると思います。

このResourcesフォルダの中に`app.nw`というフォルダを作り、その中に`index.html`と`package.json`を置きます。

```html:index.html
<!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>
```

```json:package.json
{
  "name": "nw-demo",
  "version": "0.0.1",
  "main": "index.html"
}
```

この状態で`nwjs`をダブルクリックしましょう。

![スクリーンショット 2015-12-21 16.28.46.png](https://qiita-image-store.s3.amazonaws.com/0/76971/0d712aee-bbed-a892-16a3-2a94e578f756.png)

おお！`Hello World!`が表示されています！
しかも`index.html`でクライアントでは取得できない`process.version`が取得できていますね。
ちゃんとNode.jsで動いているのがわかります。

# カードゲーム用のライフカウンターアプリを作ってみる

まず`package.json`を書き換えます。

```json:package.json
{
  "name": "mtg-life-counter",
  "version": "0.0.1",
  "main": "index.html",
  "window": {
    "toolbar": false,
    "resizable": false,
    "always-on-top": true,
    "width": 600,
    "height": 600
  }
}
```

ここではツールバーを消したり、リサイズできなくしたり、アプリを常に前にもってきたり、ウィンドウのサイズを設定したりしています。他にも色々と設定できるので公式サイトで確認してくださいー。

`app.nw`内に`images`・`javascripts`・`stylesheets`フォルダを作成し、`jquery.js`だったり、`reset.css`だったり、`logo.png`だったり、いわゆるWEBアプリを作るような感覚でどんどん入れていきましょう。

・
・
・
・
・
・
・
・
・
・
・
・
・
・

# 完成！！

![スクリーンショット 2015-12-21 18.57.00.png](https://qiita-image-store.s3.amazonaws.com/0/76971/1e02be45-0711-b911-a5f3-9c21e7e9b93b.png)

色々と端折ってしまいましたが、ライフカウンター完成しましたね！（結局Node.jsの機能を一切使っていないのはご愛嬌）

# まとめ

![20100504033544.png](https://qiita-image-store.s3.amazonaws.com/0/76971/46463605-7340-6d85-e0ca-a9cb016f0c98.png)


あ…ありのまま 今　起こった事を話すぜ！

「おれは　**ネイティブアプリ**を作ると
思ったら　**デスクトップアプリ**を作ってた」

な…　何を言っているのか(ry

というような感じで、そもそも`NW.js`の概要すら勘違いしていましたねw 素直に[Electron](http://electron.atom.io/)使えば良かったなーと思うのですが、`NW.js`には`NW.js`の良さがあるらしいです。[electronとnw.jsの技術的な違い](http://qiita.com/SFPGMR/items/afe8ac0bfad95e5ed50d)を見ると違いが良くわかるかと思います！

そして次回作るときがあれば、もっと`Node.js`の機能を使ってアプリを作成したいと思いました。

皆さまも暇な時間を使っ**てデスクトップアプリ**を作ってみてはいかがでしょうか！