gist

2012年1月31日火曜日

この完成度に震えが止まらない!Node.js史上最高のIDE、Cloud9をインストールしよう。

今回はNodeのクラウドIDEのCloud9を紹介します。前のエントリーでNideを紹介しました。Nideはシンプルで美しいIDEでしたが、Cloud9は高機能でさらに美しいIDEです。

Cloud9は、クラウド上で様々な操作ができます。無料でエディタ、デバッグ、バージョン管理etc、、、作ったらボタンひとつで公開までできてしまいます。有料にすれば、チーム開発環境、プライベート開発環境も構築できます。

Cloud9 IDEは、ソースコードで公開されています。せっかくですからこの高機能で美しいCloud9 IDEをローカル環境に構築してみましょう。

システム環境

  • Mac OS X Lion

インストール手順

gitからダウンロードします。

$ git clone git://github.com/ajaxorg/cloud9.git
Cloning into cloud9...
remote: Counting objects: 30583, done.
remote: Compressing objects: 100% (10271/10271), done.
remote: Total 30583 (delta 19499), reused 30083 (delta 19087)
Receiving objects: 100% (30583/30583), 61.91 MiB | 149 KiB/s, done.
Resolving deltas: 100% (19499/19499), done.
$

cloud9/binディレクトリに移動して、cloud9.shを実行します。

$ cd cloud9/bin/
$ sudo ./cloud9.sh
Password:

(サブモジュールのダウンロードとインストール)

> ./build.sh

(ビルド)

気長に待つと、、、

Cloud9のロゴが表示され、ブラウザが起動します。

ダイアログの×ボタンを押して全体を見てみましょう。

左側にプロジェクトファイル一覧があります。ルートディレクトリが「cloud9」になっています。これはCloud9そのもののプロジェクトになります。

一旦ブラウザを閉じて終了しましょう。

ターミナルが終了しない場合はControl+Cで終了します。

Project root is: .
Trying to start your browser in: http://127.0.0.1:3000
Running user disconnect timer...
^C$ 

プロジェクトを指定して起動してみましょう。プロジェクトのあるディレクトリを指定するには-wオプションを使います。前のエントリーで書いたマウスを共有するアプリです。

$ ./cloud9.sh -w ~/Dropbox/Projects/node/mouse_share/

(ロゴ)

Project root is: /Users/inouetomoyuki/Dropbox/Projects/node/mouse_share/
Trying to start your browser in: http://127.0.0.1:3000

指定したプロジェクトで起動しました。

早速実行してみましょう。ポート3000はCloud9 IDEが使っていますので、8888などに変更しておきます。

app.js (30行目付近)


app.listen(8888);

上のメニューバーのDebugボタンをクリックします。

アプリが起動します。

下のOutputにNodeの実行結果が表示されています。どうやら上手く起動しているようです。

ChromeとSafariで http://127.0.0.1:8888/ にそれぞれアクセスします。

きちんと動作しているようです。

一旦Stopボタンでストップして、ブレークポイントを置いて実行するとこんな感じでデバッグも可能です。

Control+Spaceもコード補完もできます。

もはやブラウザであることを忘れてしまいます。

この完成度に震えが止まりません。衝撃です。革命です。Cloud9 IDEはNode開発環境のデファクトスタンダードになるでしょう。

関連ページ

バージョンアップで最高に美しい!NodeのIDE「Nide」を使ってみよう。

参考

大津谷亮祐ブログ:Mac OS X Lion(10.7)にCloud9 IDEをインストール

2012年1月30日月曜日

CPUを最大限活かそう。Nodeでclusterを使ってみる

Nodeでは、クラスタを簡単に実装できます。こんなに簡単でいいのか。

server.js

var cluster = require('cluster');
var http = require('http');

// CPUの数
var numCPUs = require('os').cpus().length;

if(cluster.isMaster) {
    for(var i=0; i<numCPUs; i++) {
        // マスターだったらforkします
        var worker = cluster.fork();
        console.log('worker forked: pid=' + worker.pid);
    }   

    // worker終了時のイベントハンドラ
    cluster.on('death', function(worker) {
        console.log('worker ' + worker.pid + ' died');
    }); 
}
else {
    // サーバー起動
    http.Server(function(req, res) {
        res.writeHead(200);
        res.end('Hello World\n');
    }).listen(3000);
    console.log('server started: http://localhost:3000/');
}

// node終了時に、forkしたworkerを終了します。
// これがないとworkerが終了しないです。
process.on('SIGINT', function() {
    if(cluster.isMaster) {
        console.log('master killed: pid=' + process.pid);
    }   
    else {
        console.log('worker killed: pid=' + process.pid);
    }   
    process.exit(0);
});

実行結果(CPUが2つの場合)

$ node server.js 
worker forked: pid=18981
worker forked: pid=18982
server started: http://localhost:3000/
server started: http://localhost:3000/
^Cmaster killed: pid=18980
worker killed: pid=18982
$ worker killed: pid=18981

起動後、Control+Cで終了すると、master→worker→workerの順に終了するのがわかります。

CPUを沢山お持ちの方は、負荷テストするとその効果がわかります。

参考:Node.js の Cluster のベンチマークをとってみた

2012年1月29日日曜日

「デバッグで問題を切り分けよう!」Nodeのデバッグ機能を使ってみる。

Nodeには標準でデバッグ機能が搭載されています。

server.js


var http = require('http');

http.createServer(function(rq, rs) {
    rs.writeHead(200, {'Content-Type': 'text/plain'});
    rs.end('Hello Debugger!');
}).listen(3000, 'localhost');

console.log('サーバーが起動しました: http://localhost:3000/');

デバッグモードで起動するには、nodeコマンドにdebugオプションをつけます。
node debug filePath 
$ node debug server.js 
< debugger listening on port 5858
connecting... ok
break in server.js:1
  1 var http = require('http');
  2 
  3 http.createServer(function(rq, rs) {
debug> 

debug> で入力待ちの状態になります。
break in server.js:1  
は、止まっている位置を示しています。server.jsの1行目で処理が中断しています。
  1 var http = require('http');
  2 
  3 http.createServer(function(rq, rs) {
は、中断している位置周辺のコードが表示されます。

この状態のまま、ブラウザから http://localhost:3000/ にアクセスすると、接続できないはずです。

server.js の1行目で処理が中断しているので、6行目のlisten関数が実行されておらず、ウェブサーバが起動していないためです。

処理を再開するには、debug> で「c」と入力します。

debug> c
< サーバーが起動しました: http://localhost:3000/
debug> 

「サーバーが起動しました」の出力があり、「break in server.js:N」の表示もありません。server.jsの最終行まで実行されています。ブラウザからアクセスすると、Hello Debugger! と表示されるはずです。

server.jsを修正し、クライアントからリクエストを受け取ったところで止めてみます。


var http = require('http');

http.createServer(function(rq, rs) {
    debugger;  // 追加。リクエストがきたら止める。
    rs.writeHead(200, {'Content-Type': 'text/plain'});
    rs.end('Hello Debugger!');
}).listen(3000, 'localhost');

console.log('サーバーが起動しました: http://localhost:3000/');

デバッグモードで実行してみます。

$ node debug server.js 
< debugger listening on port 5858
connecting... ok
break in server.js:1
  1 var http = require('http');
  2 
  3 http.createServer(function(rq, rs) {
debug%gt; c
< サーバーが起動しました: http://localhost:3000/
debug< 

「c」でサーバーが起動したら、ブラウザからアクセスしてみます。処理が完了しないはずです。

デバッガが起動しており、4行目で処理が中断しています。

(続き)
< サーバーが起動しました: http://localhost:3000/
break in server.js:4
  2 
  3 http.createServer(function(rq, rs) {
  4     debugger;
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
debug> 

インスタンス rq の中身を知るには、repl を使います。

(続き)
debug> repl
Press Ctrl + C to leave debug repl
>

replが起動します。REPL(Read-Eval-Print-Loop)は、読込→評価→表示を繰り返す対話型評価環境のこと。rubyやphythonなんかで使われています。

rqの中身を表示するには、rqと打ってReturnします。

> rq
{ httpVersion: '1.1',
  method: 'GET',
  headers: 
   { 'cache-control': 'max-age=0',
     'accept-encoding': 'gzip, deflate',
     'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, lik... (length: 119)',
     'accept-language': 'ja-jp',
     accept: 'text/html,application/xhtml xml,application/xml;q=0.9,*/*;q=0.8',
     connection: 'keep-alive',
     host: 'localhost:3000' },
  client: 

  (ズラーリ)

}
>

ポイントを絞ってHTTPヘッダだけ表示してみます。

> rq.headers
{ 'cache-control': 'max-age=0',
  'accept-encoding': 'gzip, deflate',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, lik... (length: 119)',
  'accept-language': 'ja-jp',
  accept: 'text/html,application/xhtml xml,application/xml;q=0.9,*/*;q=0.8',
  connection: 'keep-alive',
  host: 'localhost:3000' }
> 

いい具合です。

REPLを抜けるにはCtrl+Cです。

中断している行がわからない場合、bt, listコマンドを使います。

debug> list()
  1 var http = require('http');
  2 
  3 http.createServer(function(rq, rs) {
  4     debugger;
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
  7 }).listen(3000, 'localhost');
  8 
  9 console.log('サーバーが起動しました: http://localhost:3000/');
debug> bt
#0 server.js:4:5
debug> 

listは、中断しているコードの前後を表示します。表示された行の真ん中が、現在の行です。(例では、1行目が近いので、実際どこかわかりません。)

btは、現在の行、スタックを表示します。(例では4行目で止まっていることがわかります。)

ウオッチリストを追加しています。

watchでウオッチ追加、unwatchでウオッチ削除、watchersでウオッチの一覧を表示します。

rs.finishedを監視に加え、nコマンドで一行進めます。

(続き)
debug> watch('rs.finished')
debug> n
break in server.js:5
Watchers:
  0: rs.finished = false

  3 http.createServer(function(rq, rs) {
  4     debugger;
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
  7 }).listen(3000, 'localhost');
debug>

行が1行進んで5行目に、ウオッチリストと値が表示されます。

nを続けてみます。

(続き)
debug> n
break in server.js:6
Watchers:
  0: rs.finished = false

  4     debugger;
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
  7 }).listen(3000, 'localhost');
  8 
debug> n
break in server.js:7
Watchers:
  0: rs.finished = true

  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
  7 }).listen(3000, 'localhost');
  8 
  9 console.log('サーバーが起動しました: http://localhost:3000/');
debug>

7行目で、rs.finishedがtrueに変化しました。

ウオッチを削除してみます。

debug> watchers
  0: rs.finished = true
debug> unwatch(0)
debug> watchers
debug> 

現在の行にブレークポイントを追加してみます。sbコマンドを使います。

debug> sb()
  2 
  3 http.createServer(function(rq, rs) {
  4     debugger;
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
* 7 }).listen(3000, 'localhost');
  8 
  9 console.log('サーバーが起動しました: http://localhost:3000/');
 10 
 11 
 12 });
debug>

「*」印がついて7行目にブレークポイントが設定されました。

「c」で継続して、再度ブラウザからアクセスしてみます。

debug> c
break in server.js:4
  2 
  3 http.createServer(function(rq, rs) {
  4     debugger;
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
debug> c
break in server.js:7
  5     rs.writeHead(200, {'Content-Type': 'text/plain'});
  6     rs.end('Hello Debugger!');
* 7 }).listen(3000, 'localhost');
  8 
  9 console.log('サーバーが起動しました: http://localhost:3000/');
debug> 

4行目のdebuggerで一度止まります。c で継続するとブレークポイントの7行目まで処理が飛びます。

こんな感じでデバッグできます。より詳しいデバッグコマンドは、公式リファレンスを参考に。

2012年1月28日土曜日

バージョンアップで最高に美しい!NodeのIDE「Nide」を使ってみよう。

Nideは、Nodeのための美しいIDE(統合開発環境)です。Nideはブラウザで動作します。バージョン0.2からはMac用にアプリケーションも提供されています。


Nideは、Node 0.6.7 以降に対応しています。



早速、インストールしてみます。Macの人は、Nideからdmgファイルをダウンロードしてインストールできます。

ここではコマンドでインストールする方法を紹介します。

ターミナルで

$ sudo npm install -g nide

以上でインストール終了です。簡単ですね。

では、使ってみましょう。

適当にexpressで雛形を作ります。

$ express nide_sample
$ cd nide_sample && npm install

Nideを起動してみます。

$ nide init
Nide running at http://localhost:8123

ブラウザが起動します。これがNideの画面です。画面の左側、Project以下にファイル構成が表示されます。npmの追加削除、ドキュメント閲覧が可能です。



app.js。きれいです。



ファイルは自動的に保存されます。

エディタの上にある「Versions」ボタンを押すと、ファイルのバージョンを表示してくれます。美しい。ブラウザで動いてるのを忘れそうです。


おお。

右側でバージョンを選択して「Revert」ボタンで戻せます。

npmもここから追加、削除が可能です。



一覧の下にある「+」ボタンで追加です。

ダイアログが表示されるので、パッケージ名を入力してインストール完了。


ドキュメントも見れます。便利。

ファイル一覧のリフレッシュ機能、ファイルの表示/非表示機能。


ファイルの検索機能。ニョロってします。

とにかく美しいです。IDEの設計思想が伝わってきます。

これにコード補完機能がついたら完璧!


2012年1月27日金曜日

今からでも遅くない!Windows XPでAndroidの開発環境を構築しよう

いったい何番煎じかわかりませんが、リクエストを頂いたのでWindows XPにAndroidの開発環境を構築してみます。Android 4.0と2.3.3の開発環境です。2012/01/27時点での最短インストールです。

目次

  1. JDK7のインストール
  2. Eclipseのインストール
  3. ADTのインストール
  4. Android SDKの追加インストール
  5. HelloWorld

1. JDK7のインストール

 OracleのJavaのダウンロードサイトにアクセスします。


 JDKのDownloadボタンをクリックします。JREではありません。

 ダウンロードのページに移動します。

ちょっと下の「Java SE Development Kit 7u2」のところに、ラジオボタンが2つ並んでいます。「Accept License Agreement」をクリックします。

「Thank you for accepting〜」とメッセージが表示されます。



「Windows x86」の行の「jdk-7u2-windows-i586.exe」をクリックします。

保存ボタンをクリック。
 デスクトップに保存。

ダウンロードされるまで待ちます。

実行ボタンをクリックしてインストールを開始します。









継続をクリックします。製品登録情報は特に必要ありません。

JavaFX 2.0 SDKのセットアップが始まりますが、キャンセルします。


登録ページが表示されますが、閉じましょう。

以上で、JDK7のインストールは完了です。


2. Eclipse Indigoのインストール


Eclipseをダウンロードします。



Eclipse IDE for Java EE DevelopersのWindows 32 Bitをクリックします。

ダウンロードのページに移動します。

ページの下の方にダウンロードできるサイトが一覧で表示されています。どれも同じEclispeですが、近くの方が比較的早くダウンロードできます。今回は筑波を選択しました。



zipファイルを保存します。



ダウンロードが完了したら、zipファイルを展開します。





展開したフォルダを開きます。

eclipseをダブルクリックして起動します。

実行します。


作業フォルダを選択します。

eclisep起動完了。

以上でeclipseのインストール完了です。


3. ADTをインストールする


ADT(Android Developer Tools)のプラグインをEclipseにインストールします。


HelpからInstall New Software..を選択します。

Work Pathに「https://dl-ssl.google.com/android/eclipse/」と入力し、Addボタンをクリックします。


Nameに適当にAndroidと入力してOKボタンをクリックします。

しばらくすると、Developer Toolsが表示されます。

Nextボタンをクリックします。

ちょっと待ちます。


パッケージの詳細が一覧で表示されます。Nextボタンをクリックします。

ライセンスに同意します。「I accept the terms of the....」を選択してFinishボタンをクリックします。

インストールが始まります。

途中でセキュリティ警告が表示されます。OKボタンをクリックします。

Eclipseを再起動します。「Restart Now」ボタンをクリックします。


再起動後、ワークスペースを選択します。今回はそのままOKボタンをクリックしています。

「Install new SDK」を選択しNextボタンをクリックします。

Google社にフィードバックを送信する場合はYesを選択しますが、どちらでも構いません。Finishボタンをクリックします。

ダウンロードが開始されます。

再度、ライセンスに同意します。Accept Allを選択してInstallボタンをクリックします。

インストールが終了するまで待ちます。

インストールが完了すると コンソールの最終行に「Done N packages installed」と表示されます。

以上で、Android SDK Mangerのインストールが完了しました。

4. Android SDKの追加インストール


Android SDK 2.2.3をインストールします。ドロイド君のマークをクリックして、Android SDK Managerを起動します。



Android 2.3.3(API 10) のSDK Platform と Google APIs をチェックします。

Install N packages... ボタンをクリックします。

ライセンスでAccept Allを選択してInstallボタンをクリックします。


Install が完了すると 右側の列に 「Installed」と表示されます。


5. HelloWorld

早速、HelloWorldしてみましょう。

Eclipseの Package Explorer の適当な場所で、右クリックして、「New」>「Other...」をクリックします。


ウィザードが開きますので、「Android Project」をクリックしてNextボタンをクリックします。

Project Nameに「HelloWorld」と入力します。HelloとWorldの間にスペースを入れないで下さい。Nextボタンをクリックします。

Android 2.3.3を選択して、Nextボタンをクリックします。


Package Name を入力します。ここでは com.luckyandhappy.helloworldと入力しています。

Package Explorerに雛形が表示されます。

早速、起動してみましょう。ドロイド君の左側をクリックします。


シミュレーターがないのでエラーが出ます。Yesをクリックして設定を開始します。

Android Virtual Device Manager が起動します。右側のNewボタンをクリックしてシミュレータを作成しましょう。

Nameは適度で。ここでは「NexusS」としています。TargetはAnroid 2.3.3を選択します。最後にCreate AVDをクリックします。

一行増えました。

再度、実行してみます。Package Explorerの一番上「HelloWorld」を選択して、右クリックします。「Run As…」>「Android Application」を選択します。

すると、シミュレータが起動します。起動には数分かかるので気長に待ちます。


しばらくすると、「Hello World, HelloWorldActivity!」と表示されます。

右側のホームボタンをクリックして、アプリケーションを終了しましょう。

Androidのホーム画面が表示されます。


Eclipseに戻り、HelloWorldActivity.javaを見てみましょう。

以下のようなコードが表示されます。


ようやく開発をすすめる準備が整いました。
今からでも十分間に合います。ぜひチャレンジしてみましょう。