タグ別アーカイブ: bluemix

モバイルアプリ開発 – クラウドで動くWebアプリ

iPhone iPad や Android で使える、モバイル・アプリ を開発してみましょう。iPhone や Android 固有のネイティブ機能を使わなければ、HTML や JavaScript などの Web技術だけでモバイル・アプリを作ることができます。AppStoreなどに登録しなくても良いのも利点ですが、Webサーバーが必要になるので、クラウドの Bluemix環境で作ってみます。

=> まだの方はこちらで Bluemix + Node.js の環境を構築してください

開発するのは、以下のアプリです。外国の方が日本に来た時に、日本のお店でこれを見せてコミュニケーションをすることを想定した、サンプル・アプリ です。

howsay_top

howsay_shop

このようにモバイル・アプリでは、通常のWeb画面に比べ、大きなボタンや、大きな展開画面になりますよね。iPhone、iPad、Androidデバイスは通常指でタップするため、マウスで操作するWeb画面とは異なるユーザー・インターフェースが必要です。

この時便利なのが、jQuery Mobileです。JavaScriptライブラリでポピュラーな jQueryの Mobile版です。上の画面のボタン等は、jQuery Mobileを使って表示しています。
ちなみにこの画面からjQuery Mobileを外すと以下のようにちょっと寂しい画面になってしまいます。比較してみると一目瞭然ですよね。

howsay_nojquery

jQuery Mobileは、以下のダウンロード・サイトのリンクから、その下の2つのファイルをダウンロードしてください。「min」 が付いているファイルは、インターネットで利用されることを想定し、サイズが圧縮され小さくなっているファイルになります。

=> jQuery Mobileのダウンロードはこちらから

Minified and Gzipped: jquery.mobile-1.4.5.min.js

Minified and Gzipped with Default theme: jquery.mobile-1.4.5.min.css

一番上のリンクにあった、「Bluemix + Node.jsの環境」 で、app.js などのNode.jsのファイルなどは、そのままにしておいてください。今回のサンプルではNode.jsは使いませんが、次のサンプルで使います。

Bluemixの、GITリポジトリにあるフォルダの中の、「public」 の下にHTMLファイルを置くことでこのモバイル・アプリをアクセスできるようにします。

「public」 フォルダ直下に、以下の index.htmlファイルを作ってください。

<!DOCTYPE html>
<html>
<head>
<title>How say in Japan Top</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 <div data-role="page" id="p-button-jqm">
 <div data-role="header">
 <h2>How say in Japan Top</h2>
 </div>
 <div data-role="content">
 <h4>Where are you now ?</h4>
 <a rel="external" href="shop/index.html" data-role="button">Shop</a>
 <br />
 <a rel="external" href="station/index.html" data-role="button">Station</a>
 <br />
 <a rel="external" href="airport/index.html" data-role="button">Airport</a>
 </div>
 </div>
</body>
</html>

この中で指定している、先ほどダウンロードした、「jquery.mobile-1.4.5.min.js」 を、publicの下に 「js」 ディレクトリを作成してその中にコピーし、「jquery.mobile-1.4.5.min.css」 を、publicの下に 「css」 ディレクトリを作成してその中にコピーしてください。(EclipseならファイルのDrag&Dropで可能)

また、index.cssファイルを、その作成した 「css」 の中に作ってください。cssファイルは、「Cascading Style Sheets」 の略で、Webページの色やフォントの大きさといったデザインを指定するファイルです。「background」で背景色、「color」で文字の色、「font-size」で文字の大きさを指定します。また、「.ui-header」で一番上の横長ヘッダーのスタイルを指定でき、「linear-gradient」 は徐々に色が濃くなる度合いを指定できます。

/* index.css for How say in Japan */

.ui-page, .ui-mobile-viewport {
 background: #222230;
}

.ui-content {
 font-size: 120%;
 color: #88aacc; /* body text */
}

/* Header gradient */
.ui-header {
 background: #8888a0; /* Old browsers */
 background: -webkit-linear-gradient(top, #8888a0 0%, #303040 100%); /* Chrome10+,Safari5.1+ */
 background: -ms-linear-gradient(top, #b0bccd 0%,#8888a0 0%, #303040 100); /* IE10+ */
 background: linear-gradient(top, #b0bccd 0%, #8888a0 0%, #303040 100); /* W3C */
}


/* Button gradient */
.ui-btn {
 font-size: 120%;
 background: #8888a0; /* Old browsers */
 background: -webkit-linear-gradient(top, #c0c0e0 0%, #585868 100%); /* Chrome10+,Safari5.1+ */
 background: -ms-linear-gradient(top, #b0bccd 0%,#c0c0e0 0%, #585868 100); /* IE10+ */
 background: linear-gradient(top, #b0bccd 0%, #c0c0e0 0%, #585868 100); /* W3C */
 cursor: default;
}

その結果、以下のようなディレクトリ構成になります。

howsay_devops

また、Eclipseで開発し、Bluemix DevOpsにプッシュするのであれば、以下のようなイメージになります。

howsay_eclipse

そして、Bluemixの サーバーのダッシュボードから、「経路:」 のリンクをクリックすることで、最初のボタンが並んでいる画面が表示されます!

実際に上記サンプルが Bluemix でアクセスできるリンクは、以下になります。

=> How say in Japan

また、ボタンを押したら遷移する 「Shop」 の画面には、「public」フォルダの下に、「shop」フォルダを作成し、その中に 「index.html」 ファイルを作成しその内容を以下としてください。

<!DOCTYPE html>
<html>
<head>
<title>How say in Japanese Shop</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" href="../css/index.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/index.js"></script>
<link rel="shortcut icon" href="../img/touchstone.jp.icon2.gif">
</head>
<body>
 <div data-role="page" id="p-collapsible">
 <div data-role="header">
 <a href=".." data-rel="back">戻る</a>
 <h2>How say in Japan Shop</h2>
 </div>
 <div data-role="content">
 <div data-role="collapsible" data-content-theme="b">
 <h3>How much is it ?</h3>
 <p>これはいくらですか?</p>

 <div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
 <select name="select-choice-100man" id="select-choice-100man">
 <option value=" "> </option>
 <option value="1">1 ,</option>
 <option value="2">2 ,</option>
 <option value="3">3 ,</option>
 <option value="4">4 ,</option>
 <option value="5">5 ,</option>
 <option value="6">6 ,</option>
 <option value="7">7 ,</option>
 <option value="8">8 ,</option>
 <option value="9">9 ,</option>
 </select>
 
 <select name="select-choice-100" id="select-choice-100">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 <select name="select-choice-10" id="select-choice-10">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 <select name="select-choice-1" id="select-choice-1">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 <label for="select-choice-man"> 円 (yen)</label>
 </fieldset>
 </div>

 </div>
 <div data-role="collapsible" data-content-theme="b">
 <h3>Does this size fit for me?</h3>
 <p>このサイズは私に合っていますか?</p>
 </div>

 <div data-role="collapsible" data-content-theme="b">
 <h3>What is my size in Japan?</h3>
 <p>日本での私のサイズは何ですか?</p>
 <div data-role="fieldcontain">
 <label for="select-choice-1">Size: </label>
 <select name="select-choice-1" id="select-choice-1">
 <option value="10">XS</option>
 <option value="20">S</option>
 <option value="30">M</option>
 <option value="40">L</option>
 <option value="50">LL</option>
 <option value="30">XL</option>
 <option value="30">XXL</option>
 </select>
 </div>
 </div>

 <div data-role="collapsible" data-content-theme="b">
 <h3>Is there other color?</h3>
 <p>他の色はありますか?</p>
 <div data-role="fieldcontain">
 <label for="select-choice-1">Color: </label>
 <select name="select-choice-1" id="select-choice-1">
 <option value="10">白 White</option>
 <option value="20">黒 Black</option>
 <option value="30">赤 Red</option>
 <option value="40">青 Blue</option>
 <option value="50">水色 Turquoise</option>
 <option value="60">金色 Gold</option>
 <option value="70">グレー Gray</option>
 <option value="80">ピンク Pink</option>
 </select>
 </div>
 </div>

 <div data-role="collapsible" data-content-theme="b">
 <h3>Is there larger one?</h3>
 <p>もう少し大きいサイズはありますか?</p>
 </div>
 <div data-role="collapsible" data-content-theme="b">
 <h3>Is there smaller one?</h3>
 <p>もう少し小さいサイズはありますか?</p>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

この中で 「p-collapsible」 は「+」が付いている展開可能な画面部分のことで、「select」 は数値やサイズを選択する事が可能になります。
最初のTop画面の 「Shop」 ボタンをクリックすると、この shop/index.html が表示されます!

他の画面のソースコードも必要であれば、以下のリンク先で表示し、ブラウザの 「ソースコードを表示」 機能でソースを表示してください。

=> How say in Japan

Node.jsのアプリを追加したい場合は、以下を参考にしてください。

=> Node.js と Ajax を使った Bluemixサンプル

また、jQuery Mobile の様々な機能に関しては、以下にアクセスしてソースコードを表示して見るのが一番参考になりました!

=> jQuery Mobileの様々な機能

 

Bluemixで クラウド DevOps開発 サンプル特集

Bluemixを活用し、Node.js や Ajax、Cloudantを活用するアプリケーションを開発するためのシリーズです。クラウドを活用した、DevOps開発ができるようになります。環境設定も手順を追って 分かりやすく解説していますので、これから始める方は以下の順番に従って進めてください。

最終的には、Bluemix上で動く、ブラウザ上の Ajaxから、クラウド上の Bluemixの Node.jsにアクセスし、Cloudantにデータを格納することができるようになります。

(以下、新Bluemix画面に対応しました!)

Login – Bluemix ログイン して無料で活用

IBMのクラウド環境である、Bluemixにログインするためには、まず「IBM ID」を取得してその ID でログインします。いずれも無料ですので、気軽に試せます!・・・

What is – Bluemixとは何か 使い方知って納得

Bluemixとは何か 。IBM が提供するソフトウェア込みの クラウド環境 (PaaS) です。これがローカル環境無しで アプリ開発できる クラウド開発環境ということなので、百聞は一見にしかずで試してみました。・・・

Sample – Bluemix DevOpsで作る Node.jsで動く 簡単サンプル

Bluemix のクラウド上の開発環境である DevOps を使って、簡単なNode.js の サンプルを作ってみました。プログラム言語は JavaScript です。まず以下のような、名前を表に追加していく簡単な画面のWebアプリを作ります。・・・

Bluemix – Eclipseと連携して DevOps開発する方法

Bluemix は、ブラウザ だけでも クラウド上で開発・稼動させることができます。が、やはりしっかり開発する時は、ローカルPCの Eclipse でコーディングしてからクラウドに上げたいですよね。その場合も、コマンドとか使わず開発(Dev)後すぐにサーバーで運用(Ops)できる DevOps 開発ができるということで、やってみました。・・・

 

(以下はまだ旧Bluemix画面対応です)

Node.js Express4 Ajaxを活用した Bluemixで動く 簡単サンプル

Node.js とそのフレームワークである Express v4 を活用し、Ajaxからアクセスする簡単サンプルを Eclipse で作って、クラウドの …
Read More

Node.jsで ajaxと Cloudantを連携させる Bluemixで動く 簡単サンプル

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

モバイルアプリ開発 – クラウドで動くWebアプリ

iPhone iPad や Android で使える、モバイル・アプリ を開発してみましょう。iPhone や …
Read More

 

Node.jsで ajaxと Cloudantを連携させる Bluemixで動く 簡単サンプル

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

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

Node.jsアプリの Cloudant 対応

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

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

cloudant_ajax

最初に、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] をクリックしてください。

bm_cloudant

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

bm_cloudant起動

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

bm_cloudant_add

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

bm_cloudant_index

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

bm_cloudant_index2

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

bm_cloudant_newview

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

cloudant_bm_view

 

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

 

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

Bluemixの Cloudant用環境変数の変更

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

bm_環境変数2

このエディターに表示されている、「 { 」 から始まるテキストを全てコピーし、テキスト・エディターやメモ帳で、改行を削除して一行の文字列にしてください。
(「 { “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」 の3つの機能を追加しました。
いずれも、画面上部の表 「#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では以下のような構成になります。

cloudant_eclipse

 

 

Node.js Express4 Ajaxを活用した Bluemixで動く 簡単サンプル

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

nodejs.ajax.web

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

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

add_appl

add_web

add_nodejs

add_appl_name

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

add_GIT

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

add_service

add_cloudant

ダッシュボードの右上に、[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」 の[インストール] ボタンをクリックし導入します。(=>参考)

add_nodeclipse

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

次に、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がきれていることが前提)

npm_install

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

http://localhost:3000/

app.js_result

起動したサーバーを止めるには、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('');
     });
 }); 

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

nodejs.ajax


稼動テスト

保管が終了したら、まず 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とは何?まず Bluemix で仕組みを理解する

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

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

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

node.js_devops

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_command

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

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

node.js_package

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

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

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

node.js_app.js

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

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

node.js_app.js_2

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

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

node.js_body.jade

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

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

 

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

 

Eclipseと Bluemixで DevOpsする 簡単サンプル

 

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

 

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 と周辺オープンソースコードがまとめてダウンロードできます。

eclipse_download2

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

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

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

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

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


BluemixのDevOps環境との連携

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

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

bm_code_url

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より!!

bm_eclipse2_body


BluemixのDevOpsとの同期

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

bm_eclipse4_syncronize

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

bm_eclipse4_syncronize2

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

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

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

bm_eclipse6_push3 全てのブランチ仕様を追加をクリック2

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

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

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

bm_git


Bluemixでの稼動確認

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

bm_git4

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

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

bm_editor

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

bm_result


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

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

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

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

 

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

 

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

Bluemixの無料試用登録

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

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

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

bm00_register


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

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

bm01_select

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

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

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

bm05_nodejs

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

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

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

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


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

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

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

bm08_jazzid

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

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

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

bm09_2_editCode


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

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

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

h1 Hi there!

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

h1 Hi there! こんにちは!

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

bm010_edit_save

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

bm011_redeploy

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

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

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

https://bmsample.mybluemix.net/

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

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

body
h1 こんにちは!

bm013_edit2

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

bm014_result2

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

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

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


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

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

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