atom-shell情報
atom-shellとはどういうもので、どのようにすれば動かせるのかということを調べているので、その過程で得られた情報をまとめておく。
atom-shellでデスクトップアプリをつくれる
GitHub製のAtomというエディタはatom-shellというライブラリを利用して実現されている。atom-shellはJavaScriptでデスクトップアプリケーションをつくるための便利なライブラリで、ネイティブAPIを実行するための実行環境を提供することでそれを実現させようとしている。Webサーバの代わりにデスクトップアプリケーションに特化したNode.jsの実行環境だと考えても良いだろう。
atom-shellには2つの側面がある
Node.jsでWebアプリを書いたことがあれば分かるかもしれないが、JavaScriptのコードにはサーバサイドで動かすためのものとクライアントサイドで動かすためのものの二種類が存在する。サーバサイドのものはNode.jsの実行環境で動作し、クライアントサイドのものはユーザのブラウザ上で動作する。
クライアントとブラウザという風に呼び分ける
atom-shellでも、画面上でWebページを描画しつつatom-shellの実行環境でコードを動かす必要があるので、このサーバサイド-クライアントサイドの関係と似たような概念を持っている。Node.jsに合わせて、atom-shellではWebページの描画環境で動作するコードをクライアントスクリプト、atom-shellの実行環境で動作するコードをブラウザスクリプトと呼ぶことにする。Webブラウザのことではなく、Node.jsでサーバサイドを担当していたもののことを「ブラウザ」と呼ぶことにしているので注意。
クライアント-ブラウザ間はRPCで通信する
Node.js製のアプリではWebSocketを利用してクライアントとサーバ間の通信を行ったりするが、atom-shellではipcと呼ばれるモジュールを利用してクライアントとブラウザ間の通信を行う。また、RPCを簡単に行うためのremoteと呼ばれるモジュールも提供している。普通のWebページはWebブラウザの外側と通信するように出来ていないが、これではネイティブのシステム部分と協調させるのには不便なので、atom-shellではNode-WebkitのようにWebページの中からNode.jsのAPIを触れるようになっている。
atom-shellでサンプルアプリを動かす
適当なJavaScriptのファイルと、そのファイルの名前を記述したpackage.json、それからアプリを動かすOS用のatom-shellのバイナリファイルを用意すれば、アプリを動かせる。
// package.json
{
"main": "main.js"
}
// main.js
var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;
app.on('ready', function () {
mainWindow = new BrowserWindow({
width: 800,
height: 600
});
mainWindow.loadUrl('https://github.com/');
});
以上のファイルを用意して、ここからatom-shellのバイナリファイルを用意して、コマンドラインから引数でディレクトリを指定しながら起動すればアプリが起動する。800x600の大きさのウィンドウが開いてGitHubを描画するだけというアプリになる。下記のコードではAtom.appとなっているが、これはエディタのAtom.appと同名ではあるものの全く別のアプリなので注意されたい。
~/Downloads/atom-shell-v0.15.9-darwin-x64/Atom.app/Contents/MacOS/Atom .
node-webkitとそこまで変わらない
atom-shellは、Atomエディタをつくるためにnode-webkitを改良してつくられている。atom-shellはプログラムのエントリポイント(アプリ開発者から見て最初に実行されるところ)としてJavaScriptを指定するようになっているが、node-webkitはアプリのエントリポイントとしてHTMLファイルを指定する。また、提供するウィンドウのサイズやアプリ全体の挙動なども、atom-shellではJavaScriptで制御するようになっているのに対して、node-webkitではpackage.jsonで指定するようになっている (その設計が原因かnode-webkitよりatom-shellの方が複数のウィンドウを持つアプリを実装するのが容易である)。以下はnode-webkitで至極単純なアプリを動かすときのコード例。
// package.json
{
"main": "main.html"
}
<!DOCTYPE html>
<html>
<head>
<title>main.html</title>
</head>
<body>
foo
</body>
</html>
以上のファイルを用意して、ここからnode-webkitのバイナリファイルを用意し、(atom-shellのときと同様に)コマンドラインから引数でディレクトリを指定しながら起動すればアプリが起動するという仕組みになっている。
/Users/r7kamura/Downloads/node-webkit-v0.10.2-osx-x64/node-webkit.app/Contents/MacOS/node-webkit .
この辺を読むと参考になる
atom/atom-shellのレポジトリに幾つかのドキュメントが含まれているので、まず一通りその資料に目を通すのが良い。Atomエディタはatom-shellを利用して実装されているので、atom/atomをサンプルコードとして見ることもできる。また、atom-shellの開発者の1人がSpeaker Deckに資料を上げており、Node.jsとatom-shellとの関係性ついての説明が含まれている。
もし更に踏み込みたい場合は、atom-shellがどのように実現されているのかということを知る必要があるだろうから、atom-shellをビルドするために利用されているgypやninja、それから内部で利用されているchromiumについて調べるのも良いかもしれない。
また、atom-shellよりもnode-webkitの方が現状より多く利用されており、サンプルやドキュメントなどもnode-webkitのものを見るほうが現状では情報量が多い。rogerwang/node-webkitにプレゼン資料やブログ記事などへのリンクが掲載されているので、これを見るとnode-webkitのことがより理解できるかもしれない。