こんにちは、古見澤です。
アルバイト時代以来となるので、実に7年ぶりの投稿となります。今後共よろしくお願いします。
久しぶりに技術畑に帰ってきたためブランクを取り戻すのに苦労していますが、鉄板の技術から胡散臭い(褒め言葉)新技術まで、色々なことが体験できる環境は楽しいですね。
さて、今回はプライベートで少し node-webkit を触る機会があったので、その紹介記事となります。
node-webkitはChromium と node.js ベースで作られた、GUIアプリを動作させるランタイムです。
アプリはHTMLやJavascriptで記述を行い、作ったアプリはLinux、Mac OS X、Windowsで動作が可能です。
配布元:https://github.com/rogerwang/node-webkit
node-webkitを利用したアプリケーションのリストを見ると、どんなものが作れるかが伝わると思います。
他のWebアプリとのマッシュアップに利用したり、ローカルファイルを編集・管理するために利用したり、音楽プレイヤーを作ったりと、利用用途は様々です。
まずは配布元にもあるクイックスタートを動かしてみましょう。
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ファイルを作成します。
それぞれのファイルの中身は以下の通りです。
<!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>
{
"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
index.htmlの中にある
<script>document.write(process.version)</script>
の記述に「おや?」と思われた方がいるかもしれませんが、node-webkitではこの process.version のように
htmlのscript要素にnode.jsを利用したプログラムを書く事ができます。
試しに index.html を以下のように変更(文字コードはUTF-8)してから、アプリを 起動してみましょう。
<!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ですが、このファイルの記述を変えることで起動するアプリの外観やサイズなどを制御することもできます。
どのような項目があるかはwikiの Manifest format をご参照ください。
さてもう一例、今度はHTTPサーバを立ててみましょう。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でインストールした追加モジュールも使用することができます。
node-webkitには、Native UI APIというものが用意されています。
その名の通り、ネイティブに動作するUIコントロールを操作するためのもので、これらのAPIを通してアプリ上にメニューを作成したり、クリップボードを利用したり、シェルを実行できたりします。
以下は、APIを使った一例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>node-webkitを試す</title>
</head>
<body style="background-color:#fa5;">
<h1>Native UI API