ブラウザ から Ajaxで送ったデータを、Node.js 経由で代表的な NoSQLデータベースの一つである Cloudant に格納する簡単サンプルです。

=> まだの方はこの前回のサンプルを見て、まず Node.jsで Ajaxと連携するアプリを作ってください。

Node.jsアプリの Cloudant 対応

前回のサンプルを手順どおり Bluemix 上で稼動させ、ブラウザで名称を入力して 「追加」 ボタンを押すと、上の表に名称がリストされます。しかし、他のブラウザで同様に画面を表示してもそのリストは表示されません。また、サーバーを立ち上げ直すと、その入力データは消えてしまいます。これは、ブラウザ上にデータを保持しているだけで、サーバー側のデータベース (DB) に保存していないためです。

そこで今回は、前回のサンプルに手を加え、「追加」 したらJSONをそのまま Cloudant の DB に保管し、DBの中身を 「全件表示」 したり、「全件削除」 したりできるように機能追加してみましょう。追加した結果は、以下のような画面になります。

最初に、Node.js のサーバー側 JavaScriptアプリケーションである 「app.js」 に手を加えて、Cloudant DBにデータを格納するよう機能追加します。
そのために以下のように、Cloudant のベースとなっている、CouchDB 用のアクセス・モジュールである、「cradle」 を以下のように 「package.json」 に追加し、[実行] [npm install] で導入します。

{
    "name": "Nodejs_Start",
    "version": "1.0.0",
    "description": "Sample nodejs + ajax app for Bluemix",
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "4.12.x",
        "body-parser": "*",
        "date-utils": "*",
        "cradle": "0.6.x"
    },
    "repository": {}
}

次に、Node.jsサーバー・アプリの、「app.js」 を以下のように変更します。
Cloudantへのアクセス・モジュールである、「cradle」 を組み込み、Cloudantへの接続情報である、‘cloudantNoSQLDB’ の credentials を環境変数より取得します（後述）。
cradle.Connection を new してDBへの接続を確立し、db.save でデータ追加、db.view で全件表示、db.remove で全件削除します。

// expressアプリ・フレームワークの設定
var express = require('express');
var app = express();

// POSTパラメータ取得用 body-parser設定 (express4からurlencoded()とjson()必要)
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// index.htmlの /public ディレクトリ設定
app.use(express.static(__dirname + '/public'));

// Date()で現在時刻を取得するためのユーティリティ
var dateutil = require('date-utils');

// Cloudant用アクセス・モジュール「cradle」設定
var cradle = require('cradle');

// Cloudant DB接続情報取得
var services = JSON.parse(process.env.VCAP_SERVICES);
var credentials = services['cloudantNoSQLDB'][0].credentials;
var host = credentials.host;
var port = credentials.port;
var options = {
 cache : true,
 raw : false,
 secure : true,
 auth : {
 username : credentials.username,
 password : credentials.password
 }
};

// データベース接続
var db = new (cradle.Connection)(host, port, options).database('itemsdb');

// 「追加」ボタンの id=add, ui_item.jsの url:'/add'でcall
app.post('/add', function(req, res){
 var date = new Date();
 var now = date.toFormat("YYYY/MM/DD HH24:MI:SS");
 req.body.date = now;

 // 項目の保存
 db.save(now, req.body);
 console.log('app.js saved: ' + JSON.stringify(req.body));

 res.send(req.body);
});

//「全件削除」ボタンの id=removeAll, ui_item.jsの url:'/removeAll'でcall
app.post('/removeAll', function(req, res){

 // 全件検索を、作成したview名 items_view にて実行
 db.view('items/items_view', function (err, rows) {
 if (!err) {
 rows.forEach(function (id, row) {
 db.remove(id);
 console.log("removed key is: %s", id);
 });
 } else { console.log("app.js db.remove error: " + err); }

 });

 res.send({});
});


//「全件表示」ボタンの id=getAll, ui_item.jsの url:'/getAll'でcall
app.post('/getAll', function(req, res){
 returnTable(res);
});

var returnTable = function(res) {
 // 全件検索を、作成したview名 items_view にて実行
 db.view('items/items_view', function (err, rows) {
 if (!err) {
 rows.forEach(function (id, row) {
 console.log("key: %s, row: %s", id, JSON.stringify(row));
 });
 } else { console.log("app.js returnTable error: " + err); }

 res.send(rows);
 });
};

//環境変数にポート番号が無ければ、port=3000 設定
var port = (process.env.VCAP_APP_PORT || 3000);
// サーバー開始
app.listen(port);
console.log('App started on port ' + port);

Bluemix上の Cloudantの設定

次に、=>リンク先のBluemixにログイン し、ダッシュボード画面からCloudant DBの設定を行います。対象のアプリケーションの画面（このサンプルでは「BMSampleC」）で以下の画面で、[Cloudant NoSQL DB] をクリックしてください。

すると Cloudant の初期画面が表示されるため、下の右にある、[起動] アイコンをクリックして Cloudant のコンソール（操作画面）を起動してください。（うまく起動しない場合はしばらくして再実行）

すると、以下のような Cloudant コンソールが表示されるはずです。ここで右上の [Add New Database] をクリックし、新しいデータベース名 「itemsdb」 を入力して、[Create] をクリックしデータベースを作成します。

次にそのitemsdbで検索するための索引(キーのIndex)を作成します。[All Design Docs +] で、[New Search Index] をクリックすることで索引を追加できます。

右に入力画面が表示されたら、以下のように [_design] に 「items」。[index name] に 「items_index」 とします。ここでは、キーを日付の「date」にしましょう。[Search Index Function] を以下のように 「date」 に変更し、[Save & Build Index] をクリックします。これで 「date」 をこキーにしての検索が可能になります。

次にそのitemsdbで検索するためのビュー(返す列を決められる)を作成します。[All Design Docs +] で、[New View] をクリックすることでビューを追加できます。

以下のように既に作った 「_design/items」 に対して、Index name 「items_view」 を追加し、その Map function （返す列のオブジェクト）を以下のように記述し [Save & Build Index] で保存してください。

function(doc) {
 var row = { id: doc._id,
   date: doc.date,
   item1: doc.item1 };
 emit(doc._id, row);
}

これで、これらの索引（Index）やビューで検索可能になります。

Bluemixの Cloudant用環境変数の変更

メニューの [ダッシュボードに戻る] をクリックし、ダッシュボード（上の最初の画面）に戻り、左のメニューから [環境変数] をクリックすると、環境変数エディターになります。（左にメニューが表示されていない場合は、[ダッシュボードに戻る] の右側の [∧] をクリック）

このエディターに表示されている、「 { 」 から始まるテキストを全てコピーし、テキスト・エディターやメモ帳で、改行を削除して一行の文字列にしてください。
（「 { “cloudantNoSQLDB”: [ { “name”: “Cloudant NoSQL DB-qn”,”label”: “cloudantNoSQLDB”,”plan”: “Shared”,”credentials”: { “username”: ・・・」 となります）

次に、Eclipseの 「app.js」 を右クリックし、[実行] [実行の構成] を選びます。左のリストの中から、「Node Application」 の下の自分のNode.jsプロジェクトの、「-app.js」 が付いているものを選んでください。右にダイアログが出ますので、[環境] タブを選び [新規] ボタンを押してください。
そこの [名前] に 「VCAP_SERVICES」 を入力し、下の [値] に、先ほどの一行にした文字列 「 { “cloudantNoSQLDB”: [ { “name”: “Cloudant NoSQL DB-qn”, ・・・」 をコピーしてください。
これで、ローカルでもBluemixのクラウド上でも、同じ Cloudantアクセス用環境変数を取得できるようになりました。

画面の機能追加

画面 「index.html」 は以下のように変更し、「全件表示 (getAll)」 や 「全件削除 (removeAll)」 のボタンを加えます。index.html はシンプルなままにしておきました。

<html>
 <head>
 <title>Node.js Ajax Cloudant Sample</title>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="js/ui_item.js"></script>
 </head>

 <body>
 <table id="dataTable" border="1">
 <thead>
 <tr>
 <th>時間</th><th>項目</th>
 </tr>
 </thead>
 <tbody id='tableItems'></tbody>
 </table><br>

 <div id="form">
 <br>
 <button value="全件表示" id="getAll"> 全件表示 </button>
 <button value="全件削除" id="removeAll"> 全件削除 </button>
 <br><br>
 <span>項目名: </span><span><input type="text" id="item1"></span>
 <button value="追加" id="add"> 追加 </button>
 <br>
 </div>
 </body>
</html>

ブラウザ側 JavaScript として作成した、「ui_item.js」は以下のように、$.ajax のサーバー呼び出しに、追加の「/add」、全件表示の「/getAll」、全件削除の「/removeAll」 の３つの機能を追加しました。
いずれも、画面上部の表 「#tableItems」 に結果を表示するようになっています。

// ui_item.js ブラウザUI用 JavaScript (index.htmlより呼ばれる)

 $(function(){
 console.log('ui_item.js in');

 // サーバから取得したデータを、htmlテーブルに追加
 var showTable = function(data) {
 $("#tableItems").append("<tr></tr>")
 .find("tr:last")
 .append("<td>" + data.date + "</td>")
 .append("<td>" + data.item1 + "</td>")
 };

 // 追加ボタン（index.htmlのid=add）押下時 実行
 $("#add").click(function(e){ e.preventDefault();
 var param = {};
 param.item1 = $("#item1").val() || "";

 // POSTでのajaxコールで、サーバーのapp.jsのapp.post /add呼び出し
 $.ajax({
 type: 'POST',
 data: JSON.stringify(param),
 contentType: 'application/json',
 url: '/add',
 success: function(data) {
 console.log('success add: ' + JSON.stringify(data));
 showTable(data);
 },
 error: function(data) { console.log('error add: ' + JSON.stringify(data)); }
 });

 // 入力項目名を空白に
 $("#item1").val('');
 });

 // 全件表示ボタン（index.htmlのid=getAll）押下時 実行
 $("#getAll").click(function(e){ e.preventDefault();
 $("#tableItems").empty();

 // POSTでのajaxコールで、サーバーのapp.jsのapp.post /getAll呼び出し
 $.ajax({
 type: 'POST',
 data: {},
 contentType: 'application/json',
 url: '/getAll',
 success: function(rows) {
 for(var i=0; i<rows.length; i++) {
 console.log(' row '+ i +": "+ JSON.stringify(rows[i]));
 showTable(rows[i].value);

 }
 },
 error: function(data) { console.log('error getAll: ' + JSON.stringify(data)); }
 });
 });

 // 全件削除ボタン（index.htmlのid=removeAll）押下時 実行
 $("#removeAll").click(function(e){ e.preventDefault();

 // POSTでのajaxコールで、サーバーのapp.jsのapp.post呼び出し
 $.ajax({
 type: 'POST',
 data: {},
 contentType: 'application/json',
 url: '/removeAll',
 success: function(data) { console.log('success removeAll'); },
 error: function(data) { console.log('error getAll: ' + JSON.stringify(data)); }
 });

 $("#tableItems").empty();
 });
 });

前回同様、Eclipseで、「app.js」を右クリックし、[実行] [Node Application] を実行することで、Node.js サーバーを立ち上げて、ブラウザで 「http://localhost:3000/」 をアクセスすると、最初に貼り付けた画面のイメージが表示されるはずです。項目の「追加」や、「全件表示」、「全件削除」ができるはずです。

これらのソースコードは、Eclipseでは以下のような構成になります。

Node.js とそのフレームワークである Express v4 を活用し、Ajaxからアクセスする簡単サンプルを Eclipse で作って、クラウドの Bluemix で動かしてみましょう。次のサンプルも考慮し、Cloudantも一緒にセットアップします。完成すれば以下のような画面になり、下に名前を入力すると、上の表に追加されます。

Bluemixの Node.jsと Cloudant のセットアップ

リンク先のBluemix にログインし、クラウド環境を構築します。（=>Bluemixを利用したこと無い方は、こちら）
Bluemix の初期画面から、[＋ アプリの作成] で [Web]、[SDK for Node.js] と選び、[新規アプリの名前] で自分の好きな名前を入力して [完了] してください。（ここでは、「BMSampleC」という名前にしていますが、同じ名前は登録できないので、変えてください）

[どのようにコーディングを開始するか] は [GIT] をクリックした上で、画面一番下の [アプリの概要の表示] をクリックしてください。

そこの [＋ サービスまたはAPIの追加] をクリックし、Bluemixの数あるサービスの中から、[データ管理] の [Cloudant NoSQL DB] をクリックし、[作成] してください。ポップアップが出たら、[再ステージング] をクリックしてください。「ダッシュボード」 に戻り、Cloudantが追加されていると思います。これでもう、Bluemix のクラウド側は Ready！ です。

ダッシュボードの右上に、[GITの追加] がありますので、そこをクリックしてください。[GITリポジトリーの作成] で [作成] とし、「ダッシュボード」 に戻ると先ほど [GITの追加] と表示されていたところが、[GIT URL:] になります。この右のURL （「https://hub.jazz.net/git/xxxx/BMSampleC」 など）をクリップボードにコピーしておきます。

Bluemix上の DevOpsサービスで開発を継続しても良いのですが、今回はローカルPCでのテストを試すために、自分のPCのEclipseで開発してみます。（=>Eclipseの導入はまずこちら）

Eclipseの設定と、ローカルPCへのNode.jsの導入

Eclipseの [ファイル]メニューで [インポート] [Git] [Gitからプロジェクト] で、[URIの複製] のURIに、上でコピーしたURLを貼り付けます。下の[ユーザー：][パスワード：]は、BluemixのユーザーID/パスワード（IBM ID）か、JazzHubのを入力して、[次へ]をクリック。[master]がチェックされている状態で[次へ]をクリックし、ディレクトリの変更が無ければそのまま[次へ]で、[一般的なプロジェクトとしてインポート]を選択し[次へ]に行き[完了]をクリックします。

Eclispeの「プロジェクト・エクスプローラ」上に、Bluemix上のGITのプロジェクトがインポートされ、表示されているはずです。

次に、Eclipseでの Node.js開発に便利な、nodeclipse を導入します。Eclipseメニューの[ヘルプ] [Eclipseマーケットプレース] をクリックしてマーケットプレースを立ち上げ、[検索:] に、「nodeclipse」 と入力してください（”e”の数に注意！）。リストの中から、「Nodeclipse .17.plus」 の[インストール] ボタンをクリックし導入します。（=>参考）

[選択されたフィーチャー] は基本全て選択の状態で、[確認] [使用条件に同意] にチェックし、[完了] してください。

次に、Note.js 本体 (JavaScriptエンジンと、npm) を導入します。以下からダウンロード (INSTALL) してください。node-xxxx.msi がダウンロードされたら実行し、基本そのままのデフォルト設定で導入します。

=>Node.js の ダウンロード (INSTALL)

Eclipseで Node.jsの実行

Bluemixから取得したサンプルのプロジェクトを Eclipseで開き（上の例は、BMSampleC）、「package.json」 を右クリックします。そこで、[実行] [npm install] で、package.json で実行すると、package.json に記述された、このサンプルに必要なモジュールが全て自動的にダウンロードされ、セットアップされます。（npmはNode.jsに含まれているため、ローカルへの導入と、PATHがきれていることが前提）

次に同様に、サンプルの中の、「app.js」 を右クリックし、[実行] [Node Application] をクリックすることで、Node.js がローカルPCで実行されます。（エラーの場合は、下の章を参照）
実行後に、「Port番号 3000 で実行」 などと英語で表示されますので、Eclipseの地球アイコンの「Webブラウザーを開く」か、通常のブラウザで以下のURLをアクセスして、実行結果を表示してください。

http://localhost:3000/

起動したサーバーを止めるには、Eclipseの下の [コンソール] のペインで [選択されたコンソールの表示] アイコンで起動した 「Node.js process」 を選択して表示し、赤い四角の [終了] ボタンを押すと停止します。停止すると、サーバーを再度実行できます。

Node.jsの実行でエラーが表示された場合

「app.js」の実行で、Eclipseのコンソールに以下のエラーが表示される場合があります。

path.js:233
      throw new TypeError( ‘Arguments to path.join must be strings’);

 これは、サンプルで使われている、「cfenv」 というCloud Foundryを使って環境情報を取得する部品のバージョン不整合エラーです。
「app.js」 を以下のように「cfenv」を使わないように書き換えて、保存して再度実行してみてください。（これを動かさなくても次のステップに行けます）

// This application uses express as it's web server
// for more info, see: http://expressjs.com
var express = require('express');

// create a new express server
var app = express();

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));

//------
//There are many useful environment variables available.
//VCAP_APPLICATION contains useful information.
var appInfo = JSON.parse(process.env.VCAP_APPLICATION || "{}");
var services = JSON.parse(process.env.VCAP_SERVICES || "{}");
var host = (process.env.VCAP_APP_HOST || 'localhost');
var port = (process.env.VCAP_APP_PORT || 3000);
//Start server
app.listen(port, host);
console.log('App started on port ' + port);

Ajaxを使う Node.jsサンプル・アプリケーションの開発

次に、サンプル・アプリケーションを Ajaxを活用するよう変更します。このサンプルでは 「express」 のv4.x に加え、「body-parser」 「date-utils」 というオープンソースを使います。
まずEclipseのプロジェクト・エクスプローラーで、「package.json」 を開き、以下のように変更してください。

{
    "name": "Nodejs_Start",
    "version": "1.0.0",
    "description": "Sample nodejs + ajax app for Bluemix",
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "4.12.x",
        "body-parser": "*",
        "date-utils": "*"
    },
    "repository": {}
}

次にEclipseでその 「package.json」 を右クリックし、[実行] [npm install] をクリックすると、ローカルPCで Node.js のパッケージ管理機能である 「npm」 が必要なモジュールを一通りダウンロードしてくれます。「node_modules」 フォルダに保管されるため、プロジェクト・エクスプローラーのプロジェクトを [リフレッシュ] して確認してください。

最初に起動されるサーバー側の 「app.js」 は、以下のように変更してください。汎用アプリケーション・フレームワークの 「express」 と、ブラウザとサーバーでやり取りするデータを取得するための 「body-parser」 と、日付を取得するための 「date-utils」 をセットアップし、「app.post」 でブラウザからPOSTで送られてきたデータに日付を追加し、「res.send」 で返します。

// expressアプリ・フレームワークの設定
var express = require('express');
var app = express();

// POSTパラメータ取得用 body-parser設定 (express4からurlencoded()とjson()必要)
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// index.htmlの /public ディレクトリ設定
app.use(express.static(__dirname + '/public'));

// Date()で現在時刻を取得するためのユーティリティ
var dateutil = require('date-utils');

app.post('/', function(req, res){
    var date = new Date();
    var now = date.toFormat("YYYY/MM/DD HH24:MI:SS");
    req.body.date = now;

    console.log('app.js req.body: ' + JSON.stringify(req.body));
    res.send(req.body);
});

//環境変数にポート番号が無ければ、port=3000 設定
var port = (process.env.VCAP_APP_PORT || 3000);
// サーバー開始
app.listen(port);
console.log('App started on port ' + port);

Node.jsにデータを送る Ajax画面サンプルの開発

次に画面側を作成します。プロジェクトエクスプローラの 「public」フォルダにある、「index.html」 を以下のように変更してください。
「script」で、ブラウザ上で動かすJavaScriptである 「js/ui_item.js」を指定しています。 前半の 「dataTable」 が表示する表で、中央の 「dataItems」 に後からデータの行を追加します。一番下の 「form」 のところが、データ追加用ボタンです。

<html>
    <head>
        <title>jsonp test</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/ui_item.js"></script>
    </head>

    <body>
    <table id="dataTable" border="1">
    <thead>
        <tr>
            <th>時間</th><th>項目</th>
        </tr>
    </thead>
    <tbody id='tableItems'></tbody>
    </table><br>

    <div id="form">
        <br>
        <span>項目名: </span><span><input type="text" id="item1"></span><br>
        <button value="追加" id="add">追加</button>
        <br>
    </div>
    </body>
</html> 

その index.html から呼ばれるJavaScriptを追加しますので、「public」フォルダを右クリックし、 [新規追加] [フォルダ] で、「js」 を追加し、その下に、[新規追加] [ファイル] で、「ui_items.js」 を追加し中に以下をコピー＆ペーストしてください。
最初の 「showTable」 が、画面の表に一行追加する部分で、「#add」 部分が「追加」ボタンが押された際に呼び出され、「$.ajax」 部分でサーバーにデータがPOST送信されます。

// ui_item.js ブラウザUI用 JavaScript (index.htmlより呼ばれる)

 $(function(){
   console.log('ui_item.js in');

   // サーバから取得したデータを、htmlテーブルに追加
   var showTable = function(data) {
     $("#tableItems").append("<tr></tr>")
     .find("tr:last")
     .append("<td>" + data.date + "</td>")
     .append("<td>" + data.item1 + "</td>")
   };

   // 追加ボタン（index.htmlのid=add）押下時 実行
   $("#add").click(function(e){
        e.preventDefault();
        var param = {};
        param.item1 = $("#item1").val() || "";

        // POSTでのajaxコールで、サーバーのapp.jsのapp.post呼び出し
        $.ajax({
            type: 'POST',
            data: JSON.stringify(param),
            contentType: 'application/json',
            url: '/',
            success: function(data) {
                console.log('add success: ' + JSON.stringify(data));
                showTable(data);
            },
            error:  function(data) { console.log('error ' + JSON.stringify(data)); }
        });

        // 入力項目名を空白に
        $("#item1").val('');
     });
 }); 

これらのファイルを追加すると、以下のようなフォルダ構成になります。

稼動テスト

保管が終了したら、まず Eclipse上で 「app.js」 を右クリックし [実行] [Node.js] を実行してください。コンソール上に ポート3000 で稼動していると英語で表示されたら、サーバーは稼動しています。ブラウザで以下のURLをアクセスして、実行結果を表示してください。一番上のWeb画面が表示されるはずです。

http://localhost:3000/

=> 次の記事は、このサンプルの Node.js側で、データを Cloudant DBに格納します！

補足）ローカルEclipseと、クラウドBluemixのコードの同期

最後にローカルPCのEclipseで変更したコードを、クラウド上のBluemixと同期します。Eclipseの [プロジェクト・エクスプローラー] のプロジェクトを右クリックし、、[コミット] を実行します。[コミット・メッセージ]  にコメントを記入して、[ファイル] の右の [全て選択] アイコンをクリックし、 [コミット] ボタンを押します。（=>詳しくはこちら参照）

[チーム同期化] パースペクティブの、[同期化]タブのアイコンのうち、左から4番目の矢印がオレンジ色の [プッシュ] をクリックし、ローカルの更新をリモートのクラウドにプッシュします。

Bluemix上のGITビューで、[着信] が来ているはずですので、真ん中の上向き矢印アイコン [ブランチのコンテンツをアクティブ・ブランチにマージ] をクリックします。上に「成功しました」と表示されれば、変更の全体への反映が完了です。（=>詳しくはこちら参照）

これでBluemix上に反映することができましたので、Bluemixの 「アプリケーションURLを開く」 か、「経路」 をクリックして稼動を確認してください！

なお、Bluemix 上に反映された変更を、他のEclipse と同期する場合は、まずローカルPCのEclispeで同様に、プロジェクトに対し [チーム] [ワークスペース同期化] を実行します。プロジェクトに対し、[マージ] を実行すると、ローカルのソースコードと、リモート（Bluemix）のコードの比較が表示されます。そこで、[ソースの比較] タブの左から2番目のアイコンで [双方向比較 （上位を無視）] をクリックします。次に、左から3番目のアイコンの [右から左に全ての非競合をコピー] か、4番目の [右から左に現在の非競合をコピー] で一つずつ反映するかを選択し、実行してください。サーバーのコードとマージできますので、[保管] してください。

単純にBluemixからコードを取得する場合は、[チーム同期化] パースペクティブの [同期化] タブの [プル] を実行してください。

ソースコードが何かのはずみでおかしくなり、元のバージョンに戻したい場合は、そのファイルに対し右クリックし、[置換] [ローカルヒストリーの前回のものと置換] を実行し元に戻してください。

最近よく耳にする Node.js ですが、要するに サーバー・マシン (ノード) で動く JavaScript ですね。Java と違って JavaScript はクラス定義や変数定義が楽なので、何か作って動かしてみるには速そうです。
まず、まだの人は以下のリンクで、Bluemixの Node.js サーバー環境と DevOps環境を立ち上げてください。無料で簡単に作れます。

=>Bluemixで動く クラウド開発環境 簡単サンプル

上記で既に Node.js が動いている状態なのですが、初めての人には何がどう動いているのか分からないと思います。Node.js はサーバー側で簡易プログラム(JavaScript)が動くため、自分のPCはブラウザがあれば何のセットアップもいりません。上の簡単サンプルで立ち上げれば、プログラムも全てサーバー (BluemixのGIT)上で以下のように管理されています。

Node.js のサーバー用設定ですが、まず上の「manifest.yml」をクリックして開いて見て下さい。ここで、Host名: bmsample2、Domain名： mybluemix.net になっており、Path： . (下のディレクトリ無し) となっているため、この Node.js が実行されるURLは、「http://bmsample2.mybluemix.net/」 となります。
name: はアプリケーション名なので、自分で好きに付けてください。

では、実行されるサーバー側の JavaScriptはどう指定するのでしょうか？上記の設定だけでも、app.js が実行されますが、明示的に以下の真ん中5行目のハイライト部分のように、 command: で実行 サーバーJavaScript 「app.js」 を指定することもできます。

Node.js のサーバーの構成上重要なのは、以下の 「package.json」 になります。  Node.js を動かす時に利用する、他のモジュール(オープンソース)とそのバージョンの指定になります。これがあることで、このプログラムをどこに持っていっても同じセットで動かすことができます。

以下のBluemix付属のサンプルは、真ん中にある、「express」と「jade」を利用するようにpackageが設定され既に組み込まれていますが、最低限のセットとしてはこれで十分ですので、このままで進めましょう。（新しいサンプルには、jade を使ってないバージョンがありますので、packageにjadeが入ってない場合はjadeの部分は読み飛ばしてください）

ここで、「express」とは、Node.jsでWebアプリケーションを作成するためのフレームワーク(基本機能)で、例えば画像ファイルやスタイルシート(CSS)ファイルの扱いを簡単にしてくれたりします。また、URLとプログラムの対応付けや、テンプレート呼び出し、エラー対応なども基本機能として備えているため、開発者は設定が楽になります。

またそのexpressで活用可能なWeb画面テンプレートが、「Jade」になります。Jadeは、htmlが通常 <head> などタグで区切って記述するのに対し、ややプログラム的にシンプルに記述できるのが特徴です。

Bluemix環境でNode.js を実行すると、サーバーJavaScriptである app.js が実行されますが、 その冒頭で expressと Jadeの設定を行います。

app.js の後半は、以下のようにアプリケーションの環境変数の(JSONをparseして)読み込みと、サービスの環境変数の読み込みが実行されています。
最後は、Host名 (loalhost)と、Port番号 (3000) を設定し、Webアプリケーション express (=app) を、同じマシン内であれば、http://localhost:3000/ で実行するように、listen で設定します。

app.js のここまでの記述はほとんど決まりきったお作法なので、Bluemixサンプルのままにしておいてください。

console.log は、サーバー・コンソールにログのメッセージを出力するものです。自分の好みのメッセージを出力してください。

ここまでで、app.js には何もWeb画面に出力する内容が含まれてないことに気が付かれたと思います。画面出力は、express フレームワークに登録した、Jade の部分になります。これは、「views」 ディレクトリにある、「index.jade」 ファイルに登録されている .jade ファイルが呼び出されます。サンプルでは、「head.jade」 「body.jade」 2ファイルが登録されているため、これらが表示されます。「head.jade」 はヘッダー用で、文字コードやスタイルシート名が記述されているのでそのままにしてください。
（jadeが使われないサンプルの場合は、これら .jade は含まれず、代わりに通常の「index.html」が画面部分の全てとなります）

実際に画面に表示される本体は、上の 「body.jade」 です。例えば、img の中で指定されている /images/newapp-icon.png ファイル  (静的ファイルは全て 「public」 ディレクトリ下) が画面に表示され、「h1」 や 「p」 タグでその右に記述されたメッセージが表示されます。
このメッセージを書き換えると画面表示が変わることは、既に前回実行いただいていると思います。

Node.js が動くのに必要なファイルの仕組みは、これで理解いただけましたね。後はいろいろと変更して動かしてみましょう！

=> express、Jade についての詳細

=> 以下の記事は新しく更新し、こちらに引っ越しました！

Eclipse で開発した コード をすぐに クラウドの サーバーで稼動させる、いわゆる DevOps (Dev:開発と Ops:運用の統合)が Bluemixで簡単に（cfコマンド不要!）できるということなので、やってみました。前提として Bluemix の クラウド の セットアップ(無料)ができている必要があるので、まだの方は以下で一通り セットアップください。

=>Bluemixで動く クラウド開発環境 簡単サンプル

Eclipseのセットアップ

まずは、ローカルPC開発環境用のEclipseのダウンロードと導入です。(既に持っている方は飛ばしてください)
MergeDocプロジェクトのページ (http://mergedoc.sourceforge.jp/) で、Eclipse 4.4 Luna Pleiades All in Oneを選択してください。以下が表示され、Java等のオープンな統合開発環境である Eclipse と周辺オープンソースコードがまとめてダウンロードできます。

Downloadボタンの中から、64 bit / Full Edition / Java でクリックすると、約1GBのZIPファイルがダウンロードされます。ZIPを開き、c: ドライブ直下などに解凍してください（ExplorerでpleiadesディレクトリごとZIPファイル内からDrag&Dropなど）。

pleiadeseclipse フォルダ下のeclipse.exeを実行すると、以下の画面が表示されます。（ワークスペースを聞かれたら、「../workspace」 のままでOKです）
まず、Bluemixに接続しますので、メニューの[ヘルプ][Eclipseマーケットプレース]をクリックしてください。

すると、以下のようなマーケットプレースの画面が表示されますので、上部の[検索]タブの[検索：]のところに「bluemix」と入力し、検索してください。真ん中にBluemix関連が表示されますので、「IBM Eclipse Tools for Bluemix」の右の[インストール] ボタンをクリックします。全てにチェックしたままで[確認]ボタンをクリックし、次で [使用条件に同意] をクリックすると、Bluemixへ接続可能になりました。

まず、Eclipseのメニューの [ウィンドウ][パースペクティブを開く][その他]で[Java EE]を選んで画面構成をJava EE用にしてください。

次に、右下のServerタブの中で右クリックし、[新規][サーバー]で、[IBM][Bluemix]を選択してください。（もしリストに[IBM]が無ければEclipseを立ち上げ直し、リストが見えにくい場合はウィンドウを縦に引き伸ばす）
次の画面で、Bluemix用のEメールとパスワードを入力（分からない場合はココをクリック）。[Validate Account]でチェックの上、完了します。
うまく接続できれば、画面の右下の[サーバー]タブに 「IBM Bluemix – …」 のサーバーが表示されます。

BluemixのDevOps環境との連携

次に、Bluemix上に構成されているDevOps開発環境（GIT）に接続し、そのプログラムをこのローカルPCのEclipseにコピーします。

既に自分のBluemix DevOpsサービスのチーム開発環境が以前のサンプルでセットアップされている場合は、こちらのBluemixにアクセスし、以前作成した[アプリケーション] （以前のサンプルは「BMSample」）を開き、以下のように右上の[GIT URL:]の右に表示されるURLをクリップボードにコピーして下さい。（https://hub.jazz.net/git/xxxxx/BMSample など）

Eclipseの [ファイル]メニューで [インポート] [Git] [Gitからプロジェクト]から、[URIの複製] のURIに、上でコピーしたURLをペーストします。下の[ユーザー：] [パスワード：]は、BluemixのユーザーID/パスワード（IBM ID）か、JazzHubのを入力して、[次へ]をクリック。[master]がチェックされている状態で[次へ]をクリックし、ディレクトリの変更が無ければそのまま[次へ]で、[一般的なプロジェクトとしてインポート] を選択し[次へ]に行き[完了]をクリックします。

これでうまくローカルPCにコピーできれば、以下のように左のプロジェクトのタブにBluemixのクラウドDevOps環境と同じコードがコピーされています。例えば[views]下の[body.jade]をダブルクリックすると、真ん中の領域にソースコードが表示され編集可能です。

ここで以下のように、[body.jade]の11行目の後ろに文字を追加し、以下のように書き換えて保管して（Ctrl+S 実行）みましょう。

h1 Hi there! Eclipseより！！

BluemixのDevOpsとの同期

保管後、左のプロジェクトのタブでプロジェクト名（上の例では「BMSample」）を右クリックし、[チーム][ワークスペース同期化]をクリックします。

[チーム同期化パースペクティブを開きますか？] と聞かれるので[はい]で開きます。以下のように、Eclipse右上の[チーム同期化]パースペクティブが選択されている状態で、左の[同期化]タブのGitの中で、変更したファイルをダブルクリックすると、ローカルのファイルと、クラウド上のファイルの差分を表示してくれます。以下の状態は、ローカルとリモートのファイルの色が付いている部分が異なっているため、まだローカルPCの変更がリモートのクラウド上に反映されていない事を意味しています。

リモートに反映させるためには、まず変更を確定させるため、ローカルにコミットする必要があります。変更した、頭に [＞] が付いたファイル（かプロジェクト）を右クリックし、[コミット]を実行します。次に画面が表示され、[コミット・メッセージ] に対し 「ローカルPCで変更」などコメントを記入して、[ファイル] の右の [全て選択] アイコンをクリックし、 [コミット] ボタンを押します。すると頭の [＞] が消え、ローカルにコミットされた状態になります。

次にいよいよクラウドに送ります。上の画面左の[同期化]タブの下のアイコンのうち、左から4番目の矢印がオレンジ色の [プッシュ] をクリックし、ローカルの更新をリモートのクラウドにプッシュします。
ユーザーIDを聞かれたらBluemixのID （IBM ID）を入力します。（[セキュア・ストーレージに保管]をチェックしておくと、秘密のパスワードを登録でき、次から入力不要）

最初はプッシュ仕様を指定するため[構成済みリモート]を選択し[次へ]で、以下の画面で[ソース参照：]は[master]を選択。真ん中の [すべてのブランチ仕様を追加] をクリックし、[完了]をクリックします。

次の画面で[構成]をクリックし、[プッシュ構成]でブランチは「master」の状態で[保管およびプッシュ]をクリックすると、[プッシュ結果]が表示さます。先のコミットのコメントなどを確認し[OK]をクリックすると、リモートのクラウドに反映されているはずです。

以下のように、Bluemixのクラウド上のGITでその変更依頼を確認できます。[コードの編集 (Editor)] 画面からであれば、左に縦に並んでいるアイコンのうち、3番目のひし形の[Git]アイコンをクリックし、Gitリポジトリを表示してください。以下の画面が表示されます。（この時点ではまだ変更は全体のアクティブ・ブランチには反映されておらず、エディターで見えるクラウド上のファイルは古いままです）

ローカルPCのEclipseから、リモートのクラウドのGITへの反映依頼が成功していれば、以下の左真ん中のように [着信 (1)] となり、コミット時のコメント「ローカルPCで変更」などが表示されているはずです。（更新されてなければ[フェッチ]ボタンでリフレッシュ）

Bluemixでの稼動確認

これでローカルPCからの変更依頼を受け取った状態ですので、左側でその着信をクリックして選択し、着信のところにあるアイコンのうち真ん中の上向き矢印アイコン[ブランチのコンテンツをアクティブ・ブランチにマージ]をクリックします。上に「成功しました」と表示されれば、変更の全体への反映が完了です。

最後に、Bluemixの左側の鉛筆アイコン[編集]でエディターに戻って、コードの反映を確認します。以下のように同じ [views]下の[body.jade]を開くと、ローカルPCでの変更が、BluemixのDevOpsサービス環境（のアクティブ・ブランチ）にも反映されていることがわかります。

このコミットやブランチへのマージの仕組みは少々手間に思えますが、何人かのチームで開発する場合には有効です。自分のコードのちょっとした変更が不用意に他の人の環境に影響を与えたりとか、他の人がコードを勝手に上書きしたりするのを防ぐことができるからです。

上画面の中央の[再生ボタン]の[ワークスペース・コンテンツを使用したアプリケーションのデプロイ]をクリックしてしばらく待ち、その3つ右の[アプリケーションURLを開く]アイコンをクリックすると、以下のような画面で実行結果のWeb画面が表示されるはずです！

上記を一度やっておけば、Eclipseでソースを変更・コミットして、クラウドのGitにプッシュして、すぐにサーバーの上で稼動できるので、本当に開発と実行環境を統合したDevOps環境の出来上がりですね！

=> 次は上記を発展させて、Ajaxを活用し画面をダイナミックに変更するサンプルです

=> Node.jsとは何？ まず仕組みを理解したい場合はこちら

=> 以下の記事は新しく更新し、こちらに引っ越しました！

Bluemixとは、IBM が提供するソフトウェア込みの クラウド環境、つまり PaaS です。これが、ローカル環境を一切使わず アプリ開発できる クラウド開発環境ということなので、どういう事かやってみました。
最近は複数PCを使っていたり、タブレット を使う時間も増えているので、クラウド開発環境 があれば確かに便利かもです。

Bluemixの無料試用登録

Bluemix は 30日間は無料で使えるので、まず以下の入り口画面に入り、右上の[登録]ボタンから無料ユーザーIDを取得します。

https://console.ng.bluemix.net/       (トップのイメージ)

すると以下の登録（Register）画面になるので、アスタリスク（*）付きの必須項目に入力します。Security Questionは、「高校」とかにして、その右に高校名を入れるといった感じです。

Bluemixのログインとセットアップ

そこで入力したe-mailアドレスと、指定したパスワードがIBM IDになりますので、それで Bluemix にサインイン（ログイン）します。すると以下のような「ダッシュボード」が表示されます。Bluemix のクラウド環境を構成する場合は、必ずこの画面から実施します。

下にスクロールすると、[アプリケーション]のところに、[＋ アプリの作成] という四角がありますので、ここをクリックします。

すると以下のように、[WEB] と [モバイル] を選択する画面が出てきます。何と、これだけでどちらかの環境が自動的に構成されます。（これは素晴らしい） [WEB] をクリックしてブラウザ用アプリを作りましょう。

次に、まずどのサービス（ソフトウェア）の上でプログラムを動かすか聞いてきますので、一番簡単な、Node.js を選びましょう。[SDK for Node.js] というのがソレです。js とは JavaScriptのことで、言語としては JavaScript がクラウド側で動かせるようになります。[続行] ボタンで次に進んでください。

次に、新規作成するアプリの名前を入力します。以下の [アプリ名] のところに自由な名前を入れることができますが、既存の名称と重複すると再入力になるので、重複しないように名前を入れます。（この名称がURLになるため）
私は 「BMSample」 にしましたが、これとは違う名前にしてください。入力し、Enterを押したらすぐにアプリケーション環境が起動します。

すると、以下のような開発環境を選択する画面が表示されます。一番右の [GIT] を選んでみましょう。ローカルPC環境でなく、クラウド上で開発することができます。

下にスクロールして、[アプリの概要の表示] ボタンを押してください。

すると以下のような「アプリの概要」の画面になり、既に自分で追加したアプリケーションがクラウド上で稼動しているのが確認できます。右に [アプリは稼動しています] とありますよね。

Bluemix開発環境: DevOpsサービスのセットアップ

次に、開発環境を作成します。上の画面の右上に、[GITの追加] がありますので、そこをクリックしてください。すると、以下のように Jazz ID でのログイン画面が表示されます。Jazz IDを既に持っている場合は入力し、持っていない場合は別途取得してからこの画面に戻ってきてください。（以下のURLで簡単に取得でき、後からBluemixのIDと統合できます）

Jazz IDの取得: https://jazz.net/wiki/

以下の画面が表示されたら、[リポジトリにスターター・アプリケーション・パッケージを取り込み・・・] にチェックがされていることを確認の上、[続行] ボタンを押してください。チェックされていると、サンプルコード等が一緒に取り込まれます。

Gitリポジトリを作るのに少し時間がかかるため、待ちます。Gitリポジトリはソースコードを置く場所のことです。普通自分のPCにソースコードを置いて、それをEclipse等で編集してプログラムを作成しますが、クラウド上のGitリポジトリにプログラムを置き、そのままクラウド上で編集・稼動させることができるようになります。
ちなみにJazzは、そういったソースコードを共有しながら複数の人で共同開発するための環境です。

[正常に終了しました] と表示されると、以下の [アプリの概要] に戻れます。右上に[GIT URI: xxxx] と、 [コードの編集] が表示されるようになります。GIT URLがソースコードの置かれる場所のアドレスになります。右の [コードの編集] をクリックして、クラウド開発環境である Web IDE 環境に入りましょう。
（このGIT URLでDevOpsのコード編集画面に直接ジャンプできますので、このURLをブックマークしておいてください）

Node.jsサンプルを変更して稼動確認

すると以下のようなブラウザ上の統合開発環境、Web IDE（統合開発環境）が表示されます。Eclipse Orionプロジェクトで開発されている、Webブラウザだけで動く統合開発環境ですね。左のツリーの [views]フォルダーから、[body.jade] を選択してみてください。右にソースコードが表示されます。

そのソースコードの 11行目は、以下のようになっていると思います。

h1 Hi there!

この後ろに以下のように、「こんにちは！」 と入力して以下のように変更してみましょう。（下のイメージは変更後）

h1 Hi there! こんにちは！

変更したら、左にある、[ファイル] メニューを開いて、[保存] をクリックして保存しましょう。

以下のようにメニューバーのやや右にある [▶] をクリックして、「このアプリケーションを再度デプロイ」 してください。サーバーが一度停止し、再起動します。（このボタンが無かったら、右上の[Build&Deploy]をクリックしてから戻ってください）
しばらく時間がかかりますが、[実動の実行中] の緑●の表示に変わったら、再度実行可能になります。

次に、この変更したプログラムを実行してWeb画面に結果を表示しましょう。先ほどの２つ右のアイコンをクリックし、「URLを開く」 を実行します。

すると、以下のように自分で入力した 「こんにちは！」 が、画面に追加されているはずです！これで自分で変更したアプリがクラウド上で動いたことが確認できます。

ブラウザに表示される URL も、以下のように自分が指定したアプリ名称のURLになっていることが確認できます。

https://bmsample.mybluemix.net/

これは自分のPCではなく、既にクラウドで動いているため、どのPCのブラウザからでもこのURLを入力すれば画面を見ることができます。

次にもう少し編集してみましょう。以下の2行を、それだけ残して後は削除するか、その下のイメージのように行の先頭に 「//」 を入力しコメントアウトすることで実行しないようにしてください。

body
h1 こんにちは！

そして再度保存し、「このアプリケーションを再度デプロイ」 と、「URLを開く」 を実行すると、以下のように表示されるはずです！

後は自分の好きに編集してみてください！

クラウド上の開発環境、面白いですね。
Web IDEなどこのブラウザ上の開発環境は、IBM DevOps Services (IDS) と呼んでいるようですが、まさにクラウド開発したものをすぐに同じクラウドで動かす 「DevOps」 環境ですね！

決して反応は速くはありませんが、気軽に何か作って動かしてみるには、いろんな端末から使えるので便利そうです。

=> Eclipseを使ってBluemixの開発をするための手順

=> Node.jsとは何？ まず仕組みを理解しよう

=> Bluemixについての紹介資料