この記事は Node.js Advent Calendar 2014 - Qiita の5日目です。
atom-shellを使って、nodeつかった「アプリケーション」 -- そう、そのブラウザとかと同じような実行環境ですよ -- で配布する方法を紹介します。
今日紹介する方法は、チーム内でエンジニアじゃない人に渡してボタン押して実行してもらう、みたいなのを意図してます。
使えればいいという記事であって、この手続きで作ったものをプロダクションで配布したりとかはしないでください。
1. AtomShellをダウンロードして作業ディレクトリを作る
Resources/app以下にディレクトリを作ってそこで作業します。
ダウンロードはここから最新のやつを https://github.com/atom/atom-shell/releases
$ mkdir -p ~/Downloads/Atom.app/Contents/Resources/app
$ cd ~/Downloads/Atom.app/Contents/Resources/app
$ npm init
Macだと Atom.app/Contents/Resources/app ですが、Windowsだと Atom/resources/app になります。
2. AtomShell用のおまじないをする
$ npm init で雑にpackage.json生成
package.jsonのmainで main.js を指定。
次にAtomShellを起動させるための main.jsを書く。最小構成でこんな感じ。
var app = require('app');
var BrowserWindow = require('browser-window');
app.on('ready', function() {
var mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
});
おまじないと思ってもらって大丈夫。ここはまだnode領域です。これはウィンドウサーバーみたいなもんです。
ここで同ディレクトリに 空のindex.htmlを作ってAtom.appを実行してみてください。起動出来ましたか？
こんなディレクトリ構成になってるはずです。
app/
- package.json
- main.js
- index.html
確認したら Cmd+Q で終了してください
3. index.html でやりたいことを書く
この生成されたウィンドウ、npmのモジュールならなんでも呼べます。一部例外ありますが、まあ動きます。
たとえばnpmからexpressいれて実行してみます。
package.jsonのあるとこでいつものやつをうちます
npm install express
じゃあこれをウィンドウ側から読んでみましょう
<html>
<head>
<script>
var express = require('express');
function startServer(){
var app = express.createServer();
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(3000);
}
</script>
</head>
<body>
<button onClick='startServer'>Start Server!</button>
</body>
</html>
ブラウザの中からexpressでサーバーを起動しています。主従関係が逆転したこの背徳感、堪らないですね。
この中から外部スクリプトを呼びたい場合、scriptタグで読んでもいいですが、ローカルパスへのrequireでも呼べます。つまりはなんでもアリです。
node-webkitと違って、細かいコンテキストポリシーありません。
注意点
ネイティブモジュールに依存する場合は、そのプラットフォームでビルド(npm install)する必要があります。WindowsならWindows, MacならMac．
それさえ守れば逆に言えばなんでもできます。
詳しく原理知りたい人は atom-shell/docs at master · atom/atom-shell
を読んでください。
次は n0bisuke さんです