Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

この記事はGizumoエンジニア Advent Calendar 2015の23日目の記事です

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

node-webkit is renamed NW.js

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

導入手順

本家NW.jsのサイトへ行き

screencapture-nwjs-io-1450671066803.png

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

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

スクリーンショット-2015-12-21-13.18.19.png

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

アプリケーションフォルダに移動したnwjsをダブルクリックしても「開発元を確認できないため、開けませんでした。」と出てしまうので、これをみて解決しましょう。

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

スクリーンショット 2015-12-21 14.44.20.png

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

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

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

スクリーンショット-2015-12-21-15.00.55.png

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

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

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>
package.json
{
  "name": "nw-demo",
  "version": "0.0.1",
  "main": "index.html"
}

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

スクリーンショット 2015-12-21 16.28.46.png

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

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

まずpackage.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内にimagesjavascriptsstylesheetsフォルダを作成し、jquery.jsだったり、reset.cssだったり、logo.pngだったり、いわゆるWEBアプリを作るような感覚でどんどん入れていきましょう。














完成!!

スクリーンショット 2015-12-21 18.57.00.png

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

まとめ

20100504033544.png

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

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

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

というような感じで、そもそもNW.jsの概要すら勘違いしていましたねw 素直にElectron使えば良かったなーと思うのですが、NW.jsにはNW.jsの良さがあるらしいです。electronとnw.jsの技術的な違いを見ると違いが良くわかるかと思います!

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

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

osamu38
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした