アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

透過がサポートされたnode-webkit(NW.js)でガジェットを作ろう

こんにちは、古見澤(コミザワ)です。
今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5JavascriptCSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。

ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。

動画


node-webkitって何?という方は、前回の記事も合わせてお読みください。

HTML5+CSS3+JSでネイティブGUIアプリが作れる、node-webkitを触ってみる

※本エントリーはWindows環境(Win7 Professional x64)での話になります。
(透過機能はMacLinuxでも使えます、後述するマニュアルを参照ください。)
また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、
Aero機能が使えない(もしくは無効化にしている)環境ではお試しいただくことができません。


準備



まずは試してみましょう。
前回Blog執筆時の最新バージョンは 0.10.3 でしたが、ウィンドウ透過は去年11月26日にリリースされた 0.11.2 でサポートされました。
起動の仕方などは前回の記事にも書いてありますので、初めて触る人はそちらもご参照ください。

node-webkit配布元Downloadsから目的の環境に合わせたファイルをダウンロードします。
私の場合はWindowsの64bitですね。
「v0.11.5」と「0.8.6」がありますが、後者はまだ透過をサポートしていないため、試す場合は前者をダウンロードするようにしてください。

【補足】1月15日に node-webkit は Node.js から io.js にマイグレートし、NW.jsという名称に変更されました。
公式サイト
それに伴い、最新版の v0.12.0 が公開されていますが、まだalphaなので今回は v0.11.5 を使います。
昨年末くらいから一部で話題になっているNode.jsとio.jsの問題に対応しただけで、基本的に中身は変わらないみたいです。


ダウンロードが終わったら解凍し、適当なパスに配置します。
わかりやすくフォルダ名を「node-webkit-v0.11.5-win-x64」から「node-webkit」にしておきます。

動作確認用に、シンプルに最小限のファイルを準備します。
node-webkitフォルダの中に資源を格納するために、適当な名前のフォルダを作ります。
ここでは「app」にしていますが何でも構いません。別の名前にした方は適宜読み替えて下さい。

作成したappフォルダの中に「index.html」と「package.json」の2ファイルを作成します。
それぞれのファイルの中身は以下の通りです。文字コードは「UTF-8」で保存します。

index.html



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>透過テスト</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    透過テスト
  </div>
</body>
</html>


package.json



{
  "name": "透過アプリ",
  "main": "index.html"
}


ここまで終了すると、ファイル構成は以下のような感じになります。



node-webkit
│  credits.html
│  d3dcompiler_46.dll
│  ffmpegsumo.dll
│  icudtl.dat
│  libEGL.dll
│  libGLESv2.dll
│  nw.exe
│  nw.pak
│  nwsnapshot.exe
│  pdf.dll
│
├─app
│      index.html
│      package.json
│  
└─locales
        am.pak
        ar.pak
         :
         :


では一旦ここでアプリを起動します。
appフォルダをnw.exeにドラッグ&ドロップしてもいいのですが、今回は実行時にパラメータを追加する必要が出てくるので、ショートカットを作成してそこから実行することにします。

nw.exeを右クリックして「ショートカットの作成」を選択。
更に作成したショートカットを右クリックして「プロパティ」を選択。
リンク先の内容の最後に、半角スペースで間を開けて先ほど作ったフォルダ名を追加。
(ショートカットの名前は何でも構いません、最悪そのままでも。ここではtransparentとします。)



ショートカットの準備ができたら実行します。
透過アプリという名前の、赤い正方形が描かれた白いウィンドウが出てくれば、まずは動作テスト完了です。



ウィンドウを透過させてみよう



ウィンドウを透過させる方法は、設定ファイルに記述するか、プログラムで動的に変えるかの二通りがありますが、今回は前者の紹介です。
package.jsonを、以下のように変更します。

package.json



{
  "name": "透過アプリ",
  "main": "index.html",
  "window": {
    "transparent": true
  }
}


透過設定(transparent)は、windowサブフィールドの項目の一つとして実装されています。
値はbooleanで、デフォルトは false(無効)なので true(有効)に設定します。
ファイル保存後、先ほどのテスト動作させたウィンドウが残っているなら閉じて、改めて起動してください。
赤い部分やタイトルバー、アドレス欄以外が透けたアプリが起動すれば成功です。

構文エラーに注意してください。
間違ったまま起動するとエラー画面が表示されるので、エラーメッセージを読んでカンマの有無やtypo等、確認してみてください。

透過させるには、デスクトップウィンドウマネージャー(DWM)が有効になっている必要があります。
ここで最初のテスト動作と同じウィンドウが表示される場合は、OSの設定を確認してください。

よくわかんなければ、デスクトップを右クリックし「個人設定」を選ぶとテーマの一覧が出てくるので、Aeroテーマ(のどれか)を選択すると改善される場合があります。
Aeroは重くなるから普段は切っている、という方はまず間違いなくこれに該当すると思いますので、一時的にAeroテーマに切り替えてテストしてみてください。
なお、この辺りのOS設定に関するご質問は受けられませんのでご了承ください。

ウィンドウの余計な部分を削除する



さて、背景は透明になったものの、タイトルバーやウィンドウの枠が邪魔なので消しましょう。
ついでにリサイズを出来なくして、常に最前列に表示するようにします。
package.jsonに更に記述を追加します。

package.json



{
  "name": "透過アプリ",
  "main": "index.html",
  "window": {
    "transparent": true,
    "toolbar": false,       //ツールバーを非表示に
    "frame": false,         //フレームを非表示に
    "resizable": false,     //ウィンドウのリサイズを無効化
    "always-on-top": true   //常に最前列に表示させる
  }
}


この他の記述項目についても知りたい方はマニュアルをどうぞ。

そして起動する前にもう一つ。
ツールバーを消すと、そのままではウィンドウの移動が出来なくなってしまうので、
赤い四角をドラッグしてウィンドウ自体を動かせるよう、CSSに一行追加します。

index.html



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>透過テスト</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      -webkit-app-region: drag;  /* 追加 */
    }
  </style>
</head>
<body>
  <div class="box">
    透過テスト
  </div>
</body>
</html>


それでは起動してみましょう。
フレームやツールバー部分が消えて、ポツンと赤い四角だけ表示された状態になると思います。
そしてこの赤い四角をドラッグすることで動かせるようになっています。
-webkit-app-regionを設定する場所を考えれば、ウィンドウを動かすための「ツマミ」の実装もできます。

また、常に最前列で表示する設定にしたので、他のウィンドウを選択してもその上に表示されるようになったかと思います。

最初のサンプル動画では、透過色を設定したPNGを表示させています。
また、CSSで背景色を rgba(255, 0, 0, .5) のように指定すると半透明にも出来ます。

透過部分の背後にクリックが伝達するようにする



さて、ここまででもアレコレ作れそうな気もしますが、まだ行っていない大事なことがあります。
上のサンプルだとわかりにくいですが、実はウィンドウ自体が透明になっていても、透けて見える後ろ側をクリックすることが出来ません。
せっかく透明にしても、クリックできない領域が広がっていては使い勝手悪いですよね。

そんな透過部分のクリックを背後に伝達できる設定(click-through)が、去年の12/24にリリースされたバージョン 0.11.4 で可能となりました。
但し、この記事を書いている時点でサポートしているのはWindowsmacのみで、Linuxについては完全にサポートはされていません。

さて肝心のclick-throughのやり方ですが、これまでの設定ファイルに記述するものとは違い、今回は実行時にパラメータを指定します。



 --disable-gpu --force-cpu-draw


冒頭の方で作ったショートカットを編集すると、こんな感じになります。



また、click-throughは「フレーム無し」で「リサイズ不可」なウィンドウのみ、サポートしています。
また先ほど書きましたが、「現時点ではOSXWindowsのみ」のサポートとなっています。
Linux環境は、「環境や設定によっては動くかも知れない」としており、issueでディスカッションされています。
透過についてはここ数ヶ月の間に次々と対応されていることもあり、今後の動きに期待です。

冒頭のサンプル



ここまでの設定で、ガジェットのようなものを作る土台は大体揃ったのではないかと思います。
まずは透過設定を一度オフにして、ウィンドウの大きさを確認しながら作るとやりやすいかもしれません。

以下、Blog用に何か動くものをと、急ごしらえしたソースです。稚拙なコードですが、参考にどうぞ。
キャラクター表示しているdivを1個、吹き出し用のdivを1個置いただけのシンプルな内容です。

せっかくnodeが使えるので、twitをインストールして、TwitterのStreamingAPIを利用してみました。
単に文字が表示されるだけでは面白くないので、動きを出すためにキャラクターに喋らせてみました。
(キャラクター画像はキャラクターなんとか機をお借りしました。)
某デスクトップマスコットみたいですが、まぁこんなのも作れますよということで一つ。

index.html



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>sample app for node-webkit</title>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <style>
    body {
      overflow  : hidden;
      margin  : 0;
      padding  : 0;
      height  : 100%;
    }
    #character {
      -webkit-app-region: drag;
      position  : absolute;
      right  : 0;
      top  : 0;
      width  : 300px;
      height  : 400px;
    }
    .default {
      background  : url(character/default.png) no-repeat right bottom;
    }
    .angry {
      background  : url(character/angry.png) no-repeat right bottom;
    }
    .talk {
      background  : url(character/talk.png) no-repeat right bottom;
    }
    #comment {
      font-family  : "メイリオ";
      position  : absolute;
      left  : 10px;
      top  : 100px;
      width  : 300px;
      padding  : 10px;
      background-color  : rgba(255,255,200,1);
      border  : solid 2px #660000;
      border-radius: 10px;
    }
    #comment:before {
      content: '';
      position: absolute;
      border-left: solid 20px #660000;
      border-top: solid 13px transparent;
      border-right: solid 10px transparent;
      border-bottom: solid 7px transparent;
      top: 20px;
      right: -30px;
    }
    #comment:after {
      content: '';
      position: absolute;
      border-left: solid 18px rgba(255,255,200,1);
      border-top: solid 11px transparent;
      border-right: solid 8px transparent;
      border-bottom: solid 5px transparent;
      top: 22px;
      right: -26px;
    }
  </style>
  
  <script>
    //ウィンドウを右下に配置(マルチディスプレイは今回考慮せず)
    var gui = require('nw.gui');
    var win = gui.Window.get();
    win.moveTo(
      window.screen.availWidth - win.width,
      window.screen.availHeight - win.height
    );
    
    var commentTimer = null;
    
    // TwitterのStreamingAPIの利用部分。
    var Twit = require('twit');
    var T = new Twit({
        consumer_key:         '(この部分はご自分のアプリケーション設定に置き換えます)'
      , consumer_secret:      '(この部分はご自分のアプリケーション設定に置き換えます)'
      , access_token:         '(この部分はご自分のアプリケーション設定に置き換えます)'
      , access_token_secret:  '(この部分はご自分のアプリケーション設定に置き換えます)'
    });
    var stream = T.stream('statuses/filter', { track: 'ニュース' }); //ひとまず「ニュース」をキーワードに設定
    
    stream.on('tweet', function (tweet) {
      var data = tweet.text;
      $('#character').attr('class', 'talk');
      $('#comment').text(data).fadeIn();
      
      if (commentTimer) {
        clearTimeout(commentTimer);
        commentTimer = null;
      }
      commentTimer = setTimeout(function(){
        $('#comment').fadeOut();
        $('#character').attr('class', 'default');
      }, 3000);
    });
  </script>
</head>
<body>
  <div id="character" class="default"></div>
  <div id="comment" style="display:none;"></div>
</body>
</html>


package.json



{
  "name": "sample-app",
  "main": "index.html",
  "single-instance": true,
  "window": {
    "transparent": true,
    "toolbar": false,
    "frame": false,
    "resizable": false,
    "always-on-top": true,
    "width": 600,
    "height": 400
  }
}


フォルダ構成はこんな感じになってます。



node-webkit
│  index.html
│  package.json
│  
├─character (キャラ毎にフォルダ作ればスキン変更ができそう)
│      angry.png
│      default.png
│      talk.png
│      
└─node_modules
    └─twit
        │
         :(以下、twitインストールで格納されるファイル)


なお、画像等の素材や、npmでインストールするファイルはご自分でご用意ください。

HTMLやJavascriptは知ってるけどnodeとか触った事ない……という人がこのサンプルでつまづきそうな事を列挙しておきます。
長くなってしまうのでここでは詳しく解説しませんが、どういう事柄を調べればいいのか参考にしてください。

・node.jsやnpmの導入のやり方、npm installのやり方 等
・TwitterAPIを使うための、Twitter Developersへの登録 トークンの作成等
・twitの使い方
・サーバサイドスクリプトの書き方

最後に



今回の透過に関する設定などは、公式のドキュメントからでも見る事ができます。
最近よく更新されているみたいなので、時々目を通すといいかもしれません。

node-webkitでは、HTMLやJavascriptといったWeb開発の技術がそのまま使える事に加え、node.jsで割と突っ込んだコードを書けるため、アイデア次第でとてもいいものが作れるのではないかと思っています。
特に今回紹介した、透過に関する機能がサポートされてグンと化けた感じがします。
特別なアプリをインストールする必要も無く、作り終えたアプリもソースを圧縮すれば簡単に手渡せる気楽さもあるので、意欲がある方は自作アプリを作って公開などしてみてはいかがでしょうか。

HTML5+CSS3+JSでネイティブGUIアプリが作れる、node-webkitを触ってみる

こんにちは、古見澤です。
アルバイト時代以来となるので、実に7年ぶりの投稿となります。今後共よろしくお願いします。
久しぶりに技術畑に帰ってきたためブランクを取り戻すのに苦労していますが、鉄板の技術から胡散臭い(褒め言葉)新技術まで、色々なことが体験できる環境は楽しいですね。

さて、今回はプライベートで少し node-webkit を触る機会があったので、その紹介記事となります。

node-webkitとは



node-webkitChromium と node.js ベースで作られた、GUIアプリを動作させるランタイムです。
アプリはHTMLやJavascriptで記述を行い、作ったアプリはLinuxMac OS XWindowsで動作が可能です。

配布元:https://github.com/rogerwang/node-webkit

node-webkitを利用したアプリケーションのリストを見ると、どんなものが作れるかが伝わると思います。
他のWebアプリとのマッシュアップに利用したり、ローカルファイルを編集・管理するために利用したり、音楽プレイヤーを作ったりと、利用用途は様々です。

まずは動かしてみよう



※ここからはPCの都合上、Windows環境(Win7 x64)の話になります。他の環境ではアプリ実行方法が若干異なります。詳しくは How to run apps をご参照ください。作成するhtml等の資源は同じです。


まずは配布元にもあるクイックスタートを動かしてみましょう。
githubにアクセスし、少し下がった所にあるDownloadsを確認します。



目的やご自分の環境に応じたファイルをダウンロードします。私は新機能を試す目的もあったので v0.10.3をダウンロードしました。
ダウンロードしたら解凍して、出てきたフォルダを適当なパスに配置します。
フォルダ構成は以下のようになっているはずです。(解凍してできたフォルダはnode-webkitにリネームしました)



node-webkit
│  credits.html
│  ffmpegsumo.dll
│  icudtl.dat
│  libEGL.dll
│  libGLESv2.dll
│  nw.exe
│  nw.pak
│  nwsnapshot.exe
│  
└─locales
        ○○.pak
        :
        :

(※0.8.6をダウンロードした場合、localesフォルダが無かったりicudtlがbatではなくdllだったりしますが、今回は気にしないで大丈夫です。)

さて、アプリを動作させるために、これから2つのファイルを作成します。
ですがその前に、それらを格納するためのフォルダを準備しておきましょう。

node-webkit直下に「app」というフォルダを作ります。(フォルダ名は何でも構いません。)
そしてそのフォルダの中に「index.html」と「package.json」の2ファイルを作成します。
それぞれのファイルの中身は以下の通りです。

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",
  "main": "index.html"
}


ここまで終了すると、フォルダ構成は以下のようになっているはずです。



node-webkit
│  credits.html
│  ffmpegsumo.dll
│  icudtl.dat
│  libEGL.dll
│  libGLESv2.dll
│  nw.exe
│  nw.pak
│  nwsnapshot.exe
│  
├─app              ←追加したフォルダ
│      index.html   ←追加したファイル
│      package.json ←追加したファイル
│  
└─locales
        ○○.pak
        :
        :


これでアプリケーション実行の準備ができました。簡単ですね。

さて次はアプリケーションを実行します。
実行のやり方はいくつかあるのですが、わかりやすいやり方としては以下の通り。
エクスプローラーでnode-webkit直下を開く
・「appフォルダ」をドラッグ&ドロップで「nw.exe」に落とす



アプリケーションが起動し、HelloWorld の文字とバージョンが表示されると思います。
これで基本サンプルが動作しました。



(補足)コマンドラインからappフォルダをパラメータにnw.exeを実行でも構いません。


~~\node-webkit>nw.exe app





node.jsが使える



index.htmlの中にある


<script>document.write(process.version)</script>

の記述に「おや?」と思われた方がいるかもしれませんが、node-webkitではこの process.version のように
htmlのscript要素にnode.jsを利用したプログラムを書く事ができます。

試しに index.html を以下のように変更(文字コードUTF-8)してから、アプリを起動してみましょう。

index.html



<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>node-webkitを試す</title>
  </head>
  <body>
  <script>
    var fs = require('fs');
    
    fs.readFile('package.json', function (err, data) {
      if (err) throw err;
      document.write(data);
    });
  </script>
  </body>
</html>

(起動したアプリケーションがまだ開いている場合は、一度閉じてから再度起動させてください。)
起動は先ほどと同じく、「appフォルダ」を「nw.exe」にドラッグ&ドロップです。



node.jsのFile Systemを利用して、同階層においてあるpackage.jsonの中身をそのまま表示しています。
サーバサイドで書くJavascriptのような記述をhtmlのscript内に書くのは違和感があるかもしれませんね。

またこのpackage.jsonですが、このファイルの記述を変えることで起動するアプリの外観やサイズなどを制御することもできます。
どのような項目があるかはwikiManifest format をご参照ください。




さてもう一例、今度はHTTPサーバを立ててみましょう。index.htmlを以下のように変更します。

index.html



<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>node-webkitを試す</title>
  </head>
  <body>
  <script>
    var http = require('http');
    var server = http.createServer();

    server.on('request', function(req, res) {
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end("connect");
      new Notification("リクエストがありました。");
    });

    server.listen(8888);
  </script>
  </body>
</html>

変更が終わったら、またいつものようにappフォルダをnw.exeにドラッグ&ドロップです。
(ドラッグ&ドロップが面倒だったらコマンドを書いたbatを作成し、実行してもいいですね)

アプリケーションが起動している間、8888ポートで要求を受け付けた状態となります。
適当なブラウザからアクセスしてみましょう。
ブラウザにはconnectという文字が表示され、「リクエストがありました。」というデスクトップ通知が現れると思います。
※デスクトップ通知は、node-webkit v0.10.1 からサポートされました



この他、npmでインストールした追加モジュールも使用することができます。




Native UI APIを試す



node-webkitには、Native UI APIというものが用意されています。
その名の通り、ネイティブに動作するUIコントロールを操作するためのもので、これらのAPIを通してアプリ上にメニューを作成したり、クリップボードを利用したり、シェルを実行できたりします。
以下は、APIを使った一例です。

index.html



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>node-webkitを試す</title>
</head>
<body style="background-color:#fa5;">
  <h1>Native UI APIを使う</h1>
  <script>
    var gui = require('nw.gui');
    var win = gui.Window.get();

    var menu = new gui.Menu();
    var mSubMenu = new gui.Menu();

    //サブメニュー1
    mSubMenu.append(
      new gui.MenuItem({
        label: "sample 1",
        click: function() {
          gui.Shell.openItem('C:/Users/Public/Music/Sample Music/Sleep Away.mp3');
        }
      })
    );
    //サブメニュー2
    mSubMenu.append(
      new gui.MenuItem({
        label: "sample 2",
        click: function() {
          gui.Shell.openItem('C:/Users/Public/Music/Sample Music/Kalimba.mp3');
        }
      })
    );

    //メインメニュー(大きく3つ。1個目と2個目の間にセパレータを挿入)
    menu.append(new gui.MenuItem({ label: '音楽', submenu: mSubMenu}));
    menu.append(new gui.MenuItem({ type: 'separator' }));
    menu.append(
      new gui.MenuItem({
        label: "キャプチャ(別窓)",
        click: function() {
          takeSnapshot();
        }
      })
    );
    menu.append(
      new gui.MenuItem({
        label: "キャプチャ(出力)",
        click: function() {
          saveSnapshot();
        }
      })
    );

    //メニュー表示
    function popMenu() {
        menu.popup(70, 80);
    }

    //スナップショットを別ウィンドウで表示
    function takeSnapshot() {
      win.capturePage(function(img) {
        var popWindow = gui.Window.open('popup.html', { width: 480, height: 270 });
        popWindow.on('loaded', function() {
          var image = popWindow.window.document.getElementById('image');
          image.src = img;
        });
      }, { format : 'png' });
    }

    //スナップショットをファイルとしてサーバ上に保存
    function saveSnapshot() {
      win.capturePage(function(img) {
        require("fs").writeFile("out.png", img, 'base64', function(err) {
          console.log(err);
        });
      }, { format : 'png', datatype : 'raw' });
    }
  </script>

  <button onclick="popMenu()">menu</button>
</body>
</html>


そしてindex.htmlと同じ階層に、popup.htmlを以下の内容で作成します。

popup.html



<html>
  <head>
    <title>Popup window</title>
  </head>
  <body>
    <img id="image" alt="snapshot"/>
  </body>
</html>


一気にコード量が多くなりましたが、ほとんどがメニュー作成部分で中身は大した事はやってません。ゆっくり見て行きましょう。

この画面から使える機能は大きく2つ、「曲の再生」と「スクリーンショットの撮影」です。



21行目と30行目、openItemは引数のファイルを開くShellのメソッドです。
ここではWindowsに入っていたサンプルの音楽ファイルを指定しています。
拡張子に紐付けられているプログラムで実行されるため、起動するアプリケーションは環境によって異なります。また、txtファイルを指定したらメモ帳やエディタが開いたり、xlsxファイルを指定したらExcelが起動したりします。

62~68行目と72~78行目、capturePageはウィンドウ上の可視範囲をキャプチャするメソッドです。
キャプチャした画像フォーマットはjpegpngを選択でき、そのファイルをrawデータとして利用したり、保存場所のURIを使ってimg要素のsrcに利用が可能です。
今回のサンプルプログラムでは、メニューから「キャプチャ(別窓)」を選ぶと別ウィンドウがポップアップし、そこにメインウィンドウのスクリーンショットが埋め込まれて表示されます。
また「キャプチャ(出力)」を選ぶと、画面上では何も起こらないのでわかりにくいですが、メインウィンドウのスクリーンショットが、index.htmlと同じ階層に「out.png」というファイルが作成されます。



このサンプルでは、以下のAPIを利用しています。横の補足はこのプログラム内での用途です。

  • Menu ボタン押下後に表示されるメニュー

  • MenuItem メニューの見た目やクリック時の動作等

  • Window 画面キャプチャー、別窓の表示

  • Shell ファイル実行(音楽再生)


それぞれ色々な機能があるので、おもちゃの如く色々触りたくなってしまいますね。




アプリを配布する



作ったアプリを配布する時は、フォルダ構成そのままを受け渡す方法もありますが、一つの実行ファイルにまとめてしまうやり方もあります。この場合は
・必要な資源をzip圧縮して1つにする。
・node-webkitフォルダの直下にあった「nw.exe」と、↑で圧縮したファイルを結合する。
となります。

今回の例で言うと、まず「app」フォルダの中身を1個のzipに固め、拡張子を「.nw」にします。
(解凍時にpackage.jsonがルートに来るように圧縮する必要があるため、appフォルダ自体をzip化してはダメです。)

次に、コマンドプロンプトからcopyコマンドを使い、node-webkitフォルダの直下にあった「nw.exe」と、今作った「.nwファイル」を、バイナリファイルとして(/bをつけて)結合します。
これで完成です。




OS環境や作成したプログラムの内容に応じて、実行ファイルと一緒にnode-webkitフォルダの中のファイルを同梱する必要があります。
どのファイルを同梱する必要があるかは、配布元の解説を参照してください。





最後に



いかがだったでしょうか。
今回は紹介ということで動作は単純・見た目も地味なアプリでしたが、導入から動作、配布への流れくらいは伝えられたなら幸いです。

開発をやっているとわかるのですが、DevToolが普通に備えられているのはなかなか便利です。デバッグのやり方を重要視する方にとっては朗報かもしれません。

jsファイルの呼び出しが、HTMLからなのかnode.jsからなのかがわかりにくい点が少し開発をやっていてつまづきましたが、Webサイトを作るような感じで自分好みのツールが作れるのはなかなか新鮮でした。
特別に何かをインストールしたりすること無く動作するのも魅力的です。

ここに載せられなかった細かい決まり事や注意点、API情報などは配布元のwikiをご参照ください。