目次


IBM Cloud 上で稼動する Web アプリケーション開発方法 - Node.js 編

Comments
1

はじめに

IBM Cloud とは、Web アプリケーションやモバイル・アプリケーションを構築、提供、管理するためのオープン・スタンダードをベースとした PaaS (Platform as a Service) 環境です。IBM Cloud では幅広いプログラミング言語やフレームワークを使用することができ、Node.js もそのひとつです。

当記事では IBM Cloud の Node.js 実行環境を使用した、Web アプリケーション開発の流れをステップ・バイ・ステップで解説します。もし Node.js に触れたことがあり、まだ IBM Cloud を体験したことがない場合は、ぜひ無料のトライアル・アカウントを取得して試してみてください。

当記事の全体構成について説明します。

  • 1 章 「はじめに」
    事前準備として、ローカル PC 環境へ IBM SDK for Node.js と cf コマンドライン・インターフェースをインストールします。IBM SDK for Node.js は開発したアプリケーションの動作確認に使用します。cf コマンドライン・インターフェースは IBM Cloud 環境へアプリケーションをデプロイする際に使用します。
  • 2 章 「アプリケーションの開発」
    Web ベースのシンプルなメモ帳アプリケーションの開発を通じて、IBM Cloud の Node.js 実行環境の使用方法を説明します。開発したアプリケーションはローカル PC 環境で動作確認を行った後、IBM Cloud 環境へデプロイします。
  • 3 章 「アプリケーションの拡張」
    メモ帳アプリケーションの拡張を通じて、IBM Cloud のサービスの使用方法を説明します。IBM Cloud では多種多様なサービスが提供されていますが、データ管理サービスのひとつである Cloudant NoSQL DB サービスを使用します。

当記事の手順は、Microsoft Windows 7 環境で実施することを前提に執筆しています。他プラットフォームでも基本的な流れは同様ですが、OS のコマンドやディレクトリー・パスなどは異なる場合があります。ご留意ください。

1-1. Node.js の概要

Node.js とは、スタンドアローンおよびサーバー・サイドで動作する JavaScript 言語の実行環境です。イベント駆動、ノンブロッキング I/O モデルを採用しているという特徴があり、大規模な同時接続が生じるようなネットワーク・アプリケーションにおいて、優れたスケーラビリティーを発揮します。

IBM Cloud では標準で Node.js 実行環境が提供されており、迅速な Web アプリケーションの構築、提供を行うことができます。当記事は Node.js の基礎知識を有することを前提に執筆していますので、これから Node.js に触れてみようという方は以下の参考サイト、参考記事も参照ください。

1-2. IBM SDK for Node.js のインストール

アプリケーションを開発する際、ローカル PC 上にテストやデバッグができる環境を用意しておくと、効率的に作業を進めることができます。当記事においても、開発したアプリケーションの最初の動作確認はローカル PC 環境で行います。当節では IBM が提供する Node.js 実行環境である、IBM SDK for Node.js をローカル PC へインストールします。なお、IBM SDK for Node.js 以外の Node.js 実行環境 (V0.10.x) が既にインストールされている場合は、当節をスキップいただいても問題ありません。

IBM SDK for Node.js は Node.js オープン・ソース・プロジェクトの成果物をベースにしており、IBM Power Systems や IBM System z など、広範なプラットフォームに Node.js 実行環境を提供しています。IBM Cloud の Node.js 実行環境でも IBM SDK for Node.js が使用されています。

  1. 前提要件の確認

    IBM SDK for Node.js のインストール前提要件を下記ページの「Planning」セクションで確認ください。Microsoft Windows 7 環境であれば、x86 (32bit) 、x64 (64bit) 、どちらもサポートされています。

    ※ IBM SDK for Node.js のインストールには Java ランタイム環境 (JRE) V6 以降が必要です。JRE V6 以降がインストールされていない場合は先に JRE をインストールください。

  2. インストーラーのダウンロード

    IBM SDK for Node.js のインストーラーを下記ページの「Downloads」セクションからダウンロードください。

  3. IBM SDK for Node.js のインストール

    ダウンロードしたインストーラーを実行し、ウィザードに従ってインストールください。入力項目は全てデフォルトのままで問題ありません。なお、「インストール フォルダーを選択」画面で指定したインストール先パスは次の手順で必要になりますので、記録しておいてください。

    IBM SDK for Node.js のインストール画面
  4. Path 環境変数への追加

    ローカル PC の Path 環境変数へ IBM SDK for Node.js インストール先パス (インストーラーで指定したパス) と npm (Node Package Manager) ディレクトリー・パス (%APPDATA%\npm) を追加します。

    Microsoft Windows 7 環境では、「コントロールパネル」→「システムとセキュリティ」→「システム」→「システムの詳細設定」を開き、「環境変数」ボタンをクリックすることで設定画面が表示されます。Path 環境変数の末尾へセミコロン区切りで追加ください。例えば、インストール先が「C:\Program Files\IBM\node」である場合は末尾へ「;C:\Program Files\IBM\node;%APPDATA%\npm」を追加することになります。

    Path 環境変数の設定画面
  5. node コマンド、npm コマンドの動作確認

    IBM SDK for Node.js が使用可能になっていることを確認するために、コマンド・プロンプトを起動して「node -v」および「npm -v」を実行ください。正常であれば、それぞれインストールされているバージョンが表示されます。

    「node -v」の実行 (例)
    C:\Users\Bluemix>node -v
    v0.10.31
    「npm -v」の実行 (例)
    C:\Users\Bluemix>npm -v
    1.4.23

1-3. cf のインストール

IBM Cloud は Cloud Foundry オープン・ソース・プロジェクトをベースとしているため、アプリケーションのデプロイや管理に Cloud Foundry のコマンドライン・インターフェースを使用することができます。当節ではコマンドライン・インターフェースの cf をローカル PC へインストールします。なお、cf が既にインストールされている場合も、最新バージョンの cf へ置き換えることを検討ください (古いバージョンでは使用可能なオプションが異なる場合があります) 。

  1. インストーラーのダウンロード
    cf のインストーラーを下記ページの「Stable Installers」セクションからダウンロードください。
  2. cf のインストール
    ダウンロードしたインストーラーを実行し、ウィザードに従ってインストールください。入力項目は全てデフォルトのままで問題ありません。なお、Path 環境変数への追加はインストーラーによって自動的に行われます。
    cf のインストール画面
  3. cf コマンドの動作確認
    cf が使用可能になっていることを確認するために、コマンド・プロンプトを起動して「cf -v」を実行ください (Path 環境変数が更新されているため、コマンド・プロンプトは起動し直してください) 。正常であれば、インストールされているバージョンが表示されます。
    「cf -v」の実行 (例)
    C:\Users\Bluemix>cf -v
    cf version 6.6.0-dbf6f21-2014-09-23T20:53:08+00:00
2

アプリケーションの開発

当章ではメモ帳アプリケーションの開発を通じて、IBM Cloud の Node.js 実行環境の使用方法を説明します。Eclipse のような統合開発環境は使用しませんので、任意のテキスト・エディターを用意ください (Microsoft Windows に付属している「メモ帳」でも問題ありません) 。

開発するメモ帳アプリケーションの提供機能は、「メモ一覧の表示」、「新規メモの作成」、「既存メモの編集」、「既存メモの削除」とします。また、メモを構成する要素は、「タイトル」、「本文」、「更新日時」とします。なお、次章との区別のため、当章のメモ帳アプリケーションを V1.0.0 とします。

メモ帳アプリケーションの画面遷移

迅速かつ容易に実装するために、アプリケーション・フレームワークに Express、画面テンプレート・エンジンに EJS、ユーザー・インターフェースに Bootstrap を使用します。

当記事の手順は、作業ディレクトリーとして「C:\Bluemix\MemoApp」を使用する前提で執筆しています。他ディレクトリーを使用する場合は適宜読み替えてください。また、作業ディレクトリーの直下に「models」、「views」、「routes」という 3 つのディレクトリーを作成しておいてください。

作業ディレクトリーの作成 (例)
C:\Users\Bluemix>mkdir C:\Bluemix\MemoApp

C:\Users\Bluemix>mkdir C:\Bluemix\MemoApp\models

C:\Users\Bluemix>mkdir C:\Bluemix\MemoApp\views

C:\Users\Bluemix>mkdir C:\Bluemix\MemoApp\routes

C:\Users\Bluemix>cd C:\Bluemix\MemoApp

C:\Bluemix\MemoApp>

2-1. npm モジュールのインストール

メモ帳アプリケーション V1.0.0 では下表の npm モジュールが必要となります。当節では package.json ファイルを作成し、これらの npm モジュールをインストールします。

使用するnpmモジュールの一覧
モジュール名使用目的
expressアプリケーション・フレームワーク
ejs画面テンプレート・エンジン
morganHTTPアクセス・ログの出力
body-parserHTTPボディーの読み込み
method-overrideHTTPメソッドのオーバーライド
node-uuidメモ識別子(ランダムUUID)の生成
momentメモ更新日時の書式設定
  1. package.json ファイルの作成
    使用する npm モジュールを依存関係 (dependencies) として、package.json ファイルへ定義します。下記内容で作業ディレクトリーに「package.json」ファイルを作成ください。
    package.json ファイル (C:\Bluemix\MemoApp\package.json)
    {
      "name": "MemoApp",
      "version": "1.0.0",
      "private": true,
      "dependencies": {
        "express": "~4.9.5",
        "ejs": "~1.0.0",
        "morgan": "~1.3.2",
        "body-parser": "~1.8.4",
        "method-override": "~2.2.0",
        "node-uuid": "~1.4.1",
        "moment": "~2.8.3"
      }
    }
  2. npm モジュールのインストール
    package.json ファイルへ定義した npm モジュールをインストールします。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「npm install」を実行ください。
    npm install」の実行 (例)
    C:\Bluemix\MemoApp>npm install
    node-uuid@1.4.1 node_modules\node-uuid
    
    ejs@1.0.0 node_modules\ejs
    
    morgan@1.3.2 node_modules\morgan
    (中略)
    
    method-override@2.2.0 node_modules\method-override
    (中略)
    
    body-parser@1.8.4 node_modules\body-parser
    (中略)
    
    express@4.9.5 node_modules\express
    (中略)
    
    moment@2.8.3 node_modules\moment
  3. インストールされた npm モジュールの確認
    定義した npm モジュールが全てインストールされていることを確認します。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「npm list --depth=0」を実行ください。正常であれば、package.json ファイルへ定義した npm モジュールが全てリストされます (バージョンは異なっていても問題ありません)。
    「npm list --depth=0」の実行 (例)
    C:\Bluemix\MemoApp>npm list --depth=0
    MemoApp@1.0.0 C:\Bluemix\MemoApp
    ├── body-parser@1.8.4
    ├── ejs@1.0.0
    ├── express@4.9.5
    ├── method-override@2.2.0
    ├── moment@2.8.3
    ├── morgan@1.3.2
    └── node-uuid@1.4.1

    ※ npm コマンドおよび package.json ファイルの詳細については、以下の参考サイトを参照ください。

2-2. app.js ファイルの作成

メモ帳アプリケーション V1.0.0 のプログラム・コード作成に入ります。まず、サーバー機能を提供するコードを作成します。下記内容で作業ディレクトリーに「app.js」ファイルを作成ください。保存時の文字エンコードは UTF-8 に設定ください。

app.js ファイル (C:\Bluemix\MemoApp\app.js)
// MemoApp - app.js

// (a)使用モジュールの読み込み
var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var routes = require('./routes');

// (b)アプリケーションの作成
var app = express();

// (c)ビューの設定
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// (d)ミドルウェアの設定
app.use(logger('dev'));
app.use(bodyParser.urlencoded({ extended : true }));
app.use(methodOverride('_method'));

// (e)ルーティングの設定
app.use('/', routes);

// (f)リクエストの受け付け
var server = app.listen(process.env.PORT || 3000, function() {
  console.log('Listening on port %d', server.address().port);
});

app.js ファイルの処理概要は以下のとおりです。

  1. 使用モジュールの読み込み
    使用する npm モジュールを読み込みます。routes は後ほど作成する routes\index.js ファイルです。
  2. アプリケーションの作成
    Express アプリケーションを作成します。
  3. ビューの設定
    画面テンプレートの格納先と画面テンプレート・エンジンを設定します。画面テンプレート・エンジンとして、EJS を使用するように設定しています。
  4. ミドルウェアの設定
    使用する Express ミドルウェアを設定します。HTTP アクセス・ログの出力などを設定しています。
  5. ルーティングの設定
    コンテキスト・ルート (/) に対する処理を設定します。routes を使用するように設定しています。
  6. リクエストの受け付け
    HTTP リクエストの受け付けを開始します。PORT 環境変数が設定されている場合はそれを使用し、設定されていない場合は 3000 番ポートを使用するようにしています。

2-3. models\memo.js ファイルの作成

続いて、メモ・データへのアクセスを提供するコードを作成します。下記内容で作業ディレクトリー内 models ディレクトリーに「memo.js」ファイルを作成ください。保存時の文字エンコードは UTF-8 に設定ください。

models\memo.js ファイル (C:\Bluemix\MemoApp\models\memo.js)
// MemoApp – models\memo.js (メモリー版)

// (a)メモ・データを保持するオブジェクト
var docs = {};

// (1)メモ一覧の取得
exports.list = function(callback) {
  var list = Object.keys(docs).map(function(id) {
    var row = {
      id : id,
      title : docs[id].title,
      updatedAt : docs[id].updatedAt
    };

    return row;
  }).sort(function(a, b) {
    if (a.updatedAt < b.updatedAt)
      return 1;
    if (a.updatedAt > b.updatedAt)
      return -1;

    return 0;
  });

  process.nextTick(function() {
    callback(null, list);
  });
};

// (2)メモの取得
exports.get = function(id, callback) {
  var doc = {
    title : docs[id].title,
    content : docs[id].content,
    updatedAt : docs[id].updatedAt
  };

  process.nextTick(function() {
    callback(null, doc);
  });
};

// (3)メモの保存
exports.save = function(id, doc, callback) {
  docs[id] = {
    title : doc.title,
    content : doc.content,
    updatedAt : doc.updatedAt
  };

  process.nextTick(function() {
    callback();
  });
};

// (4)メモの削除
exports.remove = function(id, callback) {
  delete docs[id];

  process.nextTick(function() {
    callback();
  });
};

models\memo.js ファイルの処理概要は以下のとおりです。

  1. メモ・データを保持するオブジェクト
    作成されたメモを Key-Value 形式 (Key:メモ識別子、Value:メモ) で、メモリー上にオブジェクト (docs) で保持します。メモはタイトル (title) 、本文 (content) 、更新日時 (updatedAt) の 3 つのプロパティーで構成されるオブジェクトとしています。
  1. メモ一覧の取得
    メモ・データを保持するオブジェクト (docs) からメモ一覧の配列を作成し、更新日時順にソートします。結果はコールバックで返します。
  2. メモの取得
    渡されたメモ識別子 (id) を基に、メモ・データを保持するオブジェクト (docs) からメモを取得します。結果はコールバックで返します。
  3. メモの保存
    渡されたメモ識別子 (id) を基に、メモ・データを保持するオブジェクト (docs) へメモ (doc) を保存します。
  4. 渡されたメモ識別子 (id) を基に、メモ・データを保持するオブジェクト (docs) からメモを削除します。

2-4. routes\index.js ファイルの作成

最後に、ルーティングと処理を提供するコードを作成します。下記内容で作業ディレクトリー内 routes ディレクトリーに「index.js」ファイルを作成ください。保存時の文字エンコードは UTF-8 に設定ください。

routes\index.js ファイル (C:\Bluemix\MemoApp\routes\index.js)
// MemoApp - routes\index.js

// (a)使用モジュールの読み込み
var express = require('express');
var uuid = require('node-uuid');
var moment = require('moment');
var memo = require('../models/memo');
var package = require('../package.json');

// (b)ルーターの作成
var router = express.Router();

// (1)メモ一覧の表示(ページ表示)
router.get('/', function(req, res) {
  memo.list(function(err, list) {
    res.render('index', { version : package.version, list : list });
  });
});

// (2)新規メモの作成(ダイアログ表示)
router.get('/memos', function(req, res) {
  res.render('dialog', { id : null, doc : null });
});

// (3)既存メモの編集(ダイアログ表示)
router.get('/memos/:id([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})', function(req, res) {
  var id = req.param('id');

  memo.get(id, function(err, doc) {
    res.render('dialog', { id : id, doc : doc });
  });
});

// (4)新規メモの保存
router.post('/memos', function(req, res) {
  var id = uuid.v4();
  var doc = {
    title : req.body.title,
    content : req.body.content,
    updatedAt : moment().zone('+0900').format('YYYY/MM/DD HH:mm:ss')
  };

  memo.save(id, doc, function(err) {
    res.redirect('/');
  });
});

// (5)既存メモの保存
router.put('/memos/:id([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})', function(req, res) {
  var id = req.param('id');
  var doc = {
    title : req.body.title,
    content : req.body.content,
    updatedAt : moment().zone('+0900').format('YYYY/MM/DD HH:mm:ss')
  };

  memo.save(id, doc, function(err) {
    res.redirect('/');
  });
});

// (6)既存メモの削除
router.delete('/memos/:id([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})', function(req, res) {
  var id = req.param('id');

  memo.remove(id, function(err) {
    res.redirect('/');
  });
});

module.exports = router;

routes\index.js ファイルの処理概要は以下のとおりです。

  1. 使用モジュールの読み込み
    使用する npm モジュールを読み込みます。memo は先ほど作成した models\memo.js ファイルです。
  2. ルーターの作成
    Express アプリケーションのルーターを作成します。
  1. メモ一覧の表示 (ページ表示)
    「GET /」リクエストに対する処理です。メモ一覧を取得し、メモ一覧ページを返します。画面テンプレートとして、後ほど作成する views\index.ejs ファイルを指定しています。
  2. 新規メモの作成 (ダイアログ表示)
    「GET /memos」リクエストに対する処理です。メモ作成ダイアログを返します。画面テンプレートとして、後ほど作成する views\dialog.ejs ファイルを指定しています。
  3. 既存メモの編集 (ダイアログ表示)
    「GET /memos/<メモ識別子>」リクエストに対する処理です。メモ識別子に対応するメモを取得し、メモ編集ダイアログを返します。画面テンプレートとして、後ほど作成する views\dialog.ejs ファイルを指定しています。
  4. 新規メモの保存
    「POST /memos」リクエストに対する処理です。HTTP ボディーからメモのタイトル (title) と本文 (content) を取得し、メモ識別子 (id) を割り当てて新規保存します。保存後はリダイレクトを返します。
  5. 既存メモの保存
    「PUT /memos/<メモ識別子>」リクエストに対する処理です。HTTP ボディーからメモのタイトル (title) と本文 (content) を取得し、更新保存します。保存後はリダイレクトを返します。
  6. 既存メモの削除
    「DELETE /memos/<メモ識別子>」リクエストに対する処理です。メモ識別子に対応するメモを削除します。削除後はリダイレクトを返します。

※ HTML の<form>要素では PUT メソッド、DELETE メソッドがサポートされません。メモ帳アプリケーションでは method-override モジュールを使用することで、擬似的に PUT メソッド、DELETE メソッドを使用可能にしています。

2-5. views\index.ejs ファイルの作成

メモ帳アプリケーション V1.0.0 の画面テンプレート作成に入ります。まず、メモ一覧の表示 (ページ表示) で使用する画面テンプレートを作成します。下記内容で作業ディレクトリー内 views ディレクトリーに「index.ejs」ファイルを作成ください。保存時の文字エンコードは UTF-8 に設定ください。

views\index.ejs ファイル (C:\Bluemix\MemoApp\views\index.ejs)
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MemoApp</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>MemoApp <small>Version <%= version %></small></h1>
      <a href="#" data-remote="/memos" class="btn btn-primary" data-toggle="modal" data-target="#dialog" data-backdrop="static" data-keyboard="false">新規作成</a>
      <div class="table-responsive">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th class="col-sm-8">タイトル</th>
              <th class="col-sm-3 text-center">更新日時</th>
              <th class="col-sm-1 text-center">削除</th>
            </tr>
          </thead>
          <tbody>
            <% list.forEach(function(row) { %>
            <tr>
              <td>
                <a href="#" data-remote="/memos/<%= row.id %>" data-toggle="modal" data-target="#dialog" data-backdrop="static" data-keyboard="false"><%= row.title %></a>
              </td>
              <td class="text-center">
                <%= row.updatedAt %>
              </td>
              <td class="text-center">
              <form method="POST" action="/memos/<%= row.id %>?_method=DELETE">
                <button type="submit" class="btn btn-link btn-xs">
                  <span aria-hidden="true" class="glyphicon glyphicon-remove"></span><span class="sr-only">削除</span>
                </button>
              </form>
              </td>
            </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
      <div class="modal" id="dialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content"></div>
        </div>
      </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(document).on("hidden.bs.modal", function(event) {
          $(event.target).removeData("bs.modal").find(".modal-content").empty();
        });
      });
    </script>
  </body>
</html>

2-6. views\dialog.ejs ファイルの作成

続いて、新規メモの作成 (ダイアログ表示) 、既存メモの編集 (ダイアログ表示) で使用する画面テンプレートを作成します。下記内容で作業ディレクトリー内 views ディレクトリーに「dialog.ejs」ファイルを作成ください。保存時の文字エンコードは UTF-8 に設定ください。

views\dialog.ejs ファイル (C:\Bluemix\MemoApp\views\dialog.ejs)
<form method="POST" action="/memos<%= id ? '/' + id + '?_method=PUT' : '' %>">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
      <span aria-hidden="true">&times;</span><span class="sr-only">閉じる</span>
    </button>
    <h4 class="modal-title" id="modalTitle">メモ</h4>
  </div>
  <div class="modal-body">
    <fieldset>
      <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control" id="title" name="title" placeholder="タイトル" value="<%= doc ? doc.title : '' %>" autofocus>
      </div>
      <div class="form-group">
        <label for="content">本文</label>
        <textarea class="form-control" id="content" name="content" rows="5" placeholder="本文"><%= doc ? doc.content : '' %></textarea>
      </div>
    </fieldset>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary">保存</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal">キャンセル</button>
  </div>
</form>

2-7.ローカル PC 環境での動作確認

メモ帳アプリケーション V1.0.0 が完成しましたので、まずはローカル PC 環境で動作確認を行います。当節ではローカル PC 上の Node.js 実行環境でメモ帳アプリケーションを実行し、一連の機能に問題がないことを確認します。

  1. メモ帳アプリケーションの実行
    コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「node app」を実行ください。正常であれば、「Listening on port 3000」というメッセージが表示され、3000 番ポートでリクエスト受け付けが開始されます。
    「node app」の実行 (例)
    C:\Bluemix\MemoApp>node app
    Listening on port 3000

    ※Windows ファイアウォールによって通信がブロックされている旨のメッセージが表示される場合があります。必要に応じてアクセスを許可ください。

  2. メモ帳アプリケーションへアクセス
    Web ブラウザーで「http://localhost:3000」を開いてください。正常であれば、メモ帳アプリケーションのトップ・ページである、メモ一覧が表示されます。作成済みのメモがないため、メモ一覧は空欄で表示されます。
    「メモ帳アプリケーションへアクセス」手順の画面
  3. 新規メモ作成の確認
    「新規作成」をクリックください (画面(1)) 。正常であれば、メモ作成のダイアログが表示されます。そして、表示されたダイアログの「タイトル」と「本文」に任意の内容を入力し、「保存」をクリックください (画面(2)) 。正常であれば、メモ一覧に作成したメモが表示されます (画面(3))。

    同様の操作を繰り返し、3 つ程度のメモを作成ください。

    「新規メモ作成の確認」手順の画面(1)
    「新規メモ作成の確認」手順の画面(2)
    「新規メモ作成の確認」手順の画面(3)
  4. 既存メモ編集の確認
    メモ一覧で既存メモのタイトルをクリックください (画面(1)) 。正常であれば、メモ編集のダイアログが表示されます。そして、表示されたダイアログの「タイトル」と「本文」を任意の内容で更新し、「保存」をクリックください (画面(2)) 。正常であれば、メモ一覧の一番上に更新したメモが表示されます (画面3)。
    「既存メモ編集の確認」手順の画面(1)
    「既存メモ編集の確認」手順の画面(2)
    「既存メモ編集の確認」手順の画面(3)
  5. 既存メモ削除の確認
    メモ一覧で既存メモの「X」 (削除) をクリックください (画面(1)) 。正常であれば、そのメモが削除され、メモ一覧に表示されなくなります (画面(2))。
    「既存メモ削除の確認」手順の画面(1)
    「既存メモ削除の確認」手順の画面(2)
  6. 再実行時の振る舞い確認
    メモ帳アプリケーションを再実行すると作成されたメモが消えてしまうことを確認します。メモ帳アプリケーションが実行中となっているコマンド・プロンプトにて「Ctrl+C」を入力ください。メモ帳アプリケーションが停止します。そして、再度「node app」を実行し、Web ブラウザーで「http://localhost:3000」を開き直してください。メモ・データをメモリー上に保持する実装であるため、再実行によって作成されたメモが消え、メモ一覧は空欄で表示されます。
    「node app」の再実行 (例)
    C:\Bluemix\MemoApp>node app
    Listening on port 3000
    GET / 200 33.338 ms - 1636
    GET /favicon.ico 404 2.656 ms - 24
    GET /memos 200 7.699 ms - 976
    POST /memos 302 41.012 ms - 58
    GET / 200 137.403 ms - 2444
    GET /memos 200 1.818 ms - 976
    POST /memos 302 2.978 ms - 58
    GET / 200 2.688 ms - 3252
    GET /memos 200 1.681 ms - 976
    POST /memos 302 1.271 ms - 58
    GET / 200 4.660 ms - 4060
    GET /memos/62ab8719-a765-4df2-9bf0-4355b8548da6 200 2.244 ms - 1202
    PUT /memos/62ab8719-a765-4df2-9bf0-4355b8548da6?_method=PUT 302 1.456 ms - 58
    GET / 200 4.124 ms - 4060
    DELETE /memos/279e9654-d10b-47bb-91dc-7ee67a1a1a19?_method=DELETE 302 4.135 ms - 58
    GET / 200 39.045 ms - 3252
    ^C
    
    C:\Bluemix\MemoApp>node app
    Listening on port 3000

    ※メモ帳アプリケーションでは morgan モジュールを使用することで、コンソールへの HTTP アクセス・ログ出力を行っています。

    「再実行時の振る舞い確認」手順の画面

2-8. IBM Cloud 環境へのデプロイ

メモ帳アプリケーション V1.0.0 のローカル PC 環境での動作確認が終わりましたので、IBM Cloud 環境へメモ帳アプリケーションを移します。当節では cf コマンドライン・インターフェースを使用し、IBM Cloud 上の Node.js 実行環境へメモ帳アプリケーションをデプロイします。

  1. Procfile ファイルの作成
    IBM Cloud 上でメモ帳アプリケーションを開始するための実行コマンドは Procfile ファイルで指定します。下記内容で作業ディレクトリーに「Procfile」 (拡張子なし) ファイルを作成ください。テキスト・エディターによって拡張子が付加されてしまう場合がありますので、ご注意ください。
    Procfile ファイル (C:\Bluemix\MemoApp\Procfile)
    web: node app
  2. .cfignore ファイルの作成
    IBM Cloud 上へメモ帳アプリケーションをアップロードする際、除外したいディレクトリーやファイルは.cfignore ファイルで指定します。下記内容で作業ディレクトリーに「.cfignore」ファイルを作成ください。npm モジュールは package.json ファイルによって別途インストールされますので、node_modules ディレクトリーを除外する必要があります。
    .cfignore ファイル (C:\Bluemix\MemoApp\.cfignore)
    node_modules
  3. IBM Cloud 環境への接続設定
    cf コマンドライン・インターフェースの IBM Cloud 環境への接続設定を行います。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「cf api https://api.ng.bluemix.net」を実行ください。
    「cf api https://api.ng.bluemix.net」の実行 (例)
    C:\Bluemix\MemoApp>cf api https://api.ng.bluemix.net
    Setting api endpoint to https://api.ng.bluemix.net...
    OK
    
    API endpoint:   https://api.ng.bluemix.net (API version: 2.11.0)
    Not logged in. Use 'cf login' to log in.
  4. IBM Cloud 環境へのログイン
    cf コマンドライン・インターフェースで IBM Cloud 環境へログインします。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「cf login」を実行ください。コンソールで対話形式のログインになりますので、「Email>」のプロンプトで IBM Cloud のユーザーID、「Password>」のプロンプトで IBM Cloud のパスワードを入力ください。
    「cf login」の実行 (例)
    C:\Bluemix\MemoApp>cf login
    API endpoint: https://api.ng.bluemix.net
    
    Email> <ユーザーID>
    
    Password> <パスワード>
    Authenticating...
    OK
    
    Targeted org <ユーザーID>
    
    Targeted space dev
    
    API endpoint:   https://api.ng.bluemix.net (API version: 2.11.0)
    User:           <ユーザーID>
    Org:            <ユーザーID>
    Space:          dev
  5. メモ帳アプリケーションのアップロード
    cf コマンドライン・インターフェースで IBM Cloud 環境へメモ帳アプリケーションをアップロードします。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「cf push MemoApp --random-route」を実行ください。なお、コンソールで「urls」という部分に表示される URL は、Web ブラウザーでアクセスする際に使用する URL になりますので記録しておいてください。
    「cf push MemoApp --random-route」の実行 (例)
    C:\Bluemix\MemoApp>cf push MemoApp --random-route
    Creating app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    Creating route memoapp-tectonic-averment.mybluemix.net...
    OK
    
    Binding memoapp-tectonic-averment.mybluemix.net to MemoApp...
    OK
    
    Uploading MemoApp...
    Uploading app files from: C:\Bluemix\MemoApp
    Uploading 8.9K, 10 files
    OK
    
    Starting app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    (中略)
    
    1 of 1 instances running
    
    App started
    
    Showing health and status for app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    requested state: started
    instances: 1/1
    usage: 1G x 1 instances
    urls: memoapp-tectonic-averment.mybluemix.net
    
         state     since                    cpu    memory        disk
    #0   running   2014-10-07 01:30:14 PM   0.0%   21.7M of 1G   31.2M of 1G

    ※ IBM Cloud 上の全アプリケーションにおいて URL は一意である必要があるため、--random-route オプションによってランダムな単語を含む URL を生成させています。一意であれば、任意の URL を明示指定することも可能です。

    ※ その他のオプションなど、cf コマンドライン・インターフェースの詳細については、以下の参考サイトを参照ください。

2-9. IBM Cloud 環境での動作確認

メモ帳アプリケーション V1.0.0 の IBM Cloud 環境へのデプロイが終わりましたので、続いて動作確認を行います。当節では IBM Cloud 上の Node.js 実行環境で動作するメモ帳アプリケーションについて、一連の機能に問題がないことを確認します。

  1. メモ帳アプリケーションへアクセス
    Web ブラウザーで「http://<アップロード時に記録した URL>」を開いてください。正常であれば、メモ帳アプリケーションのトップ・ページである、メモ一覧が表示されます。作成済みのメモがないため、メモ一覧は空欄で表示されます。
    「メモ帳アプリケーションへアクセス」手順の画面
  2. 一連の機能の確認
    「2-7. ローカル PC 環境での動作確認」の手順 3、4、5 を実施し、IBM Cloud 環境でも一連の機能に問題がないことを確認ください。

2-10. アプリケーションの管理

IBM Cloud 環境にデプロイされたアプリケーションは、IBM Cloud のダッシュボードもしくは cf コマンドライン・インターフェースを使用して管理することができます。当節では IBM Cloud のダッシュボードを使用した、アプリケーションの管理について説明します。

  1. IBM Cloud ダッシュボードへのログイン
    Web ブラウザーで「https://ace.ng.bluemix.net」を開き、「LOG IN」をクリックして IBM Cloud のダッシュボードへログインください。
    「IBM Cloud ダッシュボードへのログイン」手順の画面
  2. 管理対象アプリケーションの選択
    ダッシュボードにはデプロイされているアプリケーションが表示されます。「MemoApp」をクリックし、メモ帳アプリケーションの管理画面を開いてください。以降の手順は管理画面の説明を目的としていますので、現時点で設定の変更は行わないでください。
    「管理対象アプリケーションの選択」手順の画面
  3. Overview 画面の内容
    左ペインで「Overview」を選択して表示する画面では、主に以下を行うことができます。
    • アプリケーションのインスタンス数の変更
    • インスタンスあたりの割り当てメモリー量の変更
    • アプリケーションの状態確認
    • アプリケーションの開始、停止
    • サービス・インスタンスの追加、バインド (次章で説明します)

    また、歯車 (右上) をクリックするとメニューが表示され、アプリケーションの名前変更や URL (ルート) 変更、削除などを行うことができます。

    Overview 画面
    Overview 画面のメニュー
  4. SDK for Node.js 画面の内容
    左ペインで「SDK for Node.js」を選択して表示する画面では、主に以下を行うことができます。
    • インスタンスの稼働状況やリソース使用状況 (CPU、メモリー、ディスク) の確認
    • VCAP_SERVICES 環境変数の確認 (次章で説明します)
    • ユーザー定義環境変数の追加、削除
    SDK for Node.js 画面
  5. Files and Logs 画面の内容
    左ペインで「Files and Logs」を選択して表示する画面では、主に以下を行うことができます。
    • アプリケーション・ファイルの確認、ダウンロード
    • ログ・ファイルや出力ファイルの確認、ダウンロード
    Files and Logs 画面
3

アプリケーションの拡張

当章ではメモ帳アプリケーションの拡張を通じて、IBM Cloud のサービスの使用方法を説明します。IBM Cloud では多種多様なサービスが提供されていますが、当記事ではデータ管理サービスのひとつである、Cloudant NoSQL DB サービスを使用します。

前章で開発したメモ帳アプリケーションは、メモ・データをメモリー上に保持する実装であるため、アプリケーションを再実行する度にメモが消えてしまっていました。IBM Cloud の Cloudant NoSQL DB サービスを使用してメモ帳アプリケーションを拡張し、メモ・データがデータベース (Cloudant) に永続化されるようにします。なお、前章との区別のため、当章のメモ帳アプリケーションを V2.0.0 とします。

Cloudant は、Apache CouchDB と互換性のある NoSQL データベースを提供する DBaaS (Database as a Service) です。シンプルな HTTP ベースのインターフェースで JSON ドキュメントへアクセスすることができ、容易に使用することができます。Cloudant および Apache CouchDB にご興味がありましたら、以下の参考サイト、参考記事も参照ください。

3-1. Cloudant NoSQL DB サービスの追加

アプリケーションから IBM Cloud のサービスを使用するには、サービスのインスタンスを作成して追加する必要があります。当節では IBM Cloud のダッシュボードを使用し、メモ帳アプリケーションへ Cloudant NoSQL DB サービスを追加します。

  1. 管理対象アプリケーションの選択
    「2-10. アプリケーションの管理」の手順 1、2 を実施し、メモ帳アプリケーションの Overview 画面を開いてください。
    「管理対象アプリケーションの選択」手順の画面
  2. メモ帳アプリケーションへのサービスの追加
    メモ帳アプリケーションへのサービスの追加を開始するために、Overview 画面で「ADD A SERVICE」をクリックください。追加できるサービスの一覧 (カタログ) が表示されます。
    「メモ帳アプリケーションへのサービスの追加」手順の画面
  3. 追加するサービスの選択
    表示されたカタログから Data Management カテゴリーにある、「Cloudant NoSQL DB」をクリックください。Cloudant NoSQL DB サービスの概要が表示されます。
    「追加するサービスの選択」手順の画面
  4. Cloudant NoSQL DB サービスのインスタンス作成
    Cloudant NoSQL DB サービスのインスタンスを作成するために「CREATE」をクリックください。サービス名やプランはデフォルトの内容で問題ありません。Overview 画面に戻り、アプリケーションのリステージが必要である旨のダイアログが表示されますので、「OK」をクリックください。
    「Cloudant NoSQL DB サービスのインスタンス作成」手順の画面
  5. 追加されたサービスの確認
    メモ帳アプリケーションの Overview 画面に「Cloudant NoSQL DB」が追加されていることを確認ください。
    「追加されたサービスの確認」手順の画面
  6. VCAP_SERVICES 環境変数の保存
    左ペインで「SDK for Node.js」を選択し、SDK for Node.js 画面を開いてください。そして、下部の「Environment Variables」セクションから「VCAP_SERVICES」の内容をコピーし、記録しておいてください。後ほどローカル PC 環境での動作確認の際に使用します。

    この VCAP_SERVICES 環境変数には、アプリケーションにバインドされたサービス (ここでは Cloudant NoSQL DB サービス) に関する接続情報が格納されています。サービスを使用するアプリケーションを作成する場合、プログラム・コードから VCAP_SERVICES 環境変数を参照することにより、バインドされたサービスに関する情報を動的に取得できます。

    「VCAP_SERVICES 環境変数の保存」手順の画面

3-2. データベースの作成

メモ帳アプリケーションへの Cloudant NoSQL DB サービスの追加が終わり、サービスが使用できるようになりました。当節では Cloudant のダッシュボードを使用し、メモ・データを格納するデータベースとメモ一覧を取得するためのビューを作成します。

  1. Cloudant NoSQL DB サービスの選択
    メモ帳アプリケーションの Overview 画面で「Cloudant NoSQL DB」をクリックください。Cloudant NoSQL DB サービスの概要が表示されます。
    「Cloudant NoSQL DB サービスの選択」手順の画面
  2. Cloudant ダッシュボードの起動
    Cloudant のダッシュボードを起動するために「LAUNCH」をクリックください。新しいウィンドウ (タブ) に Cloudant のダッシュボードが表示されます。
    「Cloudant ダッシュボードの起動」手順の画面
  3. データベースの作成
    メモ・データを格納するデータベースを作成するために「Add New Database」をクリックください。
    「データベースの作成」手順の画面
  4. データベース名の入力
    データベース名の入力ダイアログが表示されますので「memo」と入力し、「OK」をクリックください。データベースが作成され、データベースの管理画面が表示されます。
    「データベースの作成」手順の画面
  5. ビューの作成
    メモ一覧を取得するためのビューを作成するために、All Design Docs の右側の「+」をクリックして「New Design Doc」を選択ください。
    「ビューの作成」手順の画面
  6. ビュー定義の入力
    ビューの定義画面が表示されますので、_design/の横に配置されたフィールドに「memos」と入力し、Index name フィールドに「list」と入力ください。そして、Map function フィールドに下記「ビューのマップ関数」の内容を入力ください。3 つのフィールドが正しく入力されていることを確認し、「Save & Build Index」をクリックください。
    ビューのマップ関数
    function(doc) {
      var row = {
        id : doc._id,
        title : doc.title,
        updatedAt : doc.updatedAt
      };
    
      emit(doc.updatedAt, row);
    }
    「ビュー定義の入力」手順の画面
  7. 作成されたビューの確認
    memo データベースの管理画面に「memos/list」ビューが作成されていることを確認ください。
    「作成されたビューの確認」手順の画面

3-3. npm モジュールの追加インストール

メモ帳アプリケーション V2.0.0 では下表の npm モジュールが追加で必要となります。前述のとおり、Cloudant は CouchDB と互換性がありますので、CouchDB 用の cradle モジュールで接続することができます。当節では package.json ファイルを更新し、この npm モジュールを追加インストールします。

追加する npm モジュールの一覧
モジュール名使用目的
cradleCloudant NoSQL DB サービスへの接続
  1. package.json ファイルの更新
    追加する npm モジュールを依存関係 (dependencies) として、package.json ファイルへ定義します。下記内容で作業ディレクトリーの「package.json」ファイルを更新ください。
    package.json ファイル (C:\Bluemix\MemoApp\package.json)
    {
      "name": "MemoApp",
      "version": "2.0.0",
      "private": true,
      "dependencies": {
        "express": "~4.9.5",
        "ejs": "~1.0.0",
        "morgan": "~1.3.2",
        "body-parser": "~1.8.4",
        "method-override": "~2.2.0",
        "node-uuid": "~1.4.1",
        "moment": "~2.8.3",
        "cradle": "~0.6.7"
      }
    }
  2. npm モジュールの追加インストール
    package.json ファイルへ追加した npm モジュールをインストールします。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「npm install」を実行ください。
    「npm install」の実行 (例)
    C:\Bluemix\MemoApp>npm install
    cradle@0.6.7 node_modules\cradle
    (後略)
  3. インストールされた npm モジュールの確認
    定義した npm モジュールが全てインストールされていることを確認します。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「npm list --depth=0」を実行ください。正常であれば、package.json ファイルへ定義した npm モジュールが全てリストされます (バージョンは異なっていても問題ありません)。
    「npm list --depth=0」の実行 (例)
    C:\Bluemix\MemoApp>npm list --depth=0
    MemoApp@2.0.0 C:\Bluemix\MemoApp
    ├── body-parser@1.8.4
    ├── cradle@0.6.7
    ├── ejs@1.0.0
    ├── express@4.9.5
    ├── method-override@2.2.0
    ├── moment@2.8.3
    ├── morgan@1.3.2
    └── node-uuid@1.4.1

3-4. models\memo.js ファイルの修正

メモ帳アプリケーション V2.0.0 のプログラム・コード修正に入ります。修正が必要なコードはメモ・データへのアクセスを提供する部分のみです。下記内容で作業ディレクトリー内 models ディレクトリーの「memo.js」ファイルを更新ください。保存時の文字エンコードは UTF-8 に設定ください。

models\memo.js ファイル (C:\Bluemix\MemoApp\models\memo.js)
// MemoApp – models\memo.js (Cloudant版)

// (a)使用モジュールの読み込み
var cradle = require('cradle');

// (b)Cloudant接続情報の取得
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
  }
};

// (c)メモ・データを保持するデータベース
var db = new (cradle.Connection)(host, port, options).database('memo');

// (1)メモ一覧の取得
exports.list = function(callback) {
  db.view('memos/list', { descending : true }, callback);
};

// (2)メモの取得
exports.get = function(id, callback) {
  db.get(id, callback);
};

// (3)メモの保存
exports.save = function(id, doc, callback) {
  db.save(id, doc, callback);
};

// (4)メモの削除
exports.remove = function(id, callback) {
  db.remove(id, callback);
};

models\memo.js ファイルの処理概要は以下のとおりです。

  1. 使用モジュールの読み込み
    使用する npm モジュールを読み込みます。cradle モジュールを読み込み、Cloudant NoSQL DB サービスへの接続に使用します。
  2. Cloudant 接続情報の取得
    Cloudant NoSQL DB サービスに対する接続情報 (ホスト名、ポート番号、認証情報) を取得します。VCAP_SERVICES 環境変数を参照することにより、バインドされたサービスに関する情報を動的に取得できます。
  3. メモ・データを保持するデータベース
    Cloudant NoSQL DB サービスに対する接続情報を使用し、「memo」データベースへのアクセスに使用するオブジェクト (db) を取得します。
  1. メモ一覧の取得
    メモ・データを保持するデータベース (db) の「memos/list」ビューからメモ一覧の配列を取得します。結果はコールバックで直接返されます。
  2. メモの取得
    渡されたメモ識別子 (id) を基に、メモ・データを保持するデータベース (db) からメモを取得します。結果はコールバックで直接返されます。
  3. メモの保存
    渡されたメモ識別子 (id) を基に、メモ・データを保持するデータベース (db) へメモ (doc) を保存します。
  4. メモの削除
    渡されたメモ識別子 (id) を基に、メモ・データを保持するデータベース (db) からメモを削除します。

3-5. ローカル PC 環境での動作確認

メモ帳アプリケーション V2.0.0 が完成しましたので、まずはローカル PC 環境で動作確認を行います。当節ではローカル PC 上の Node.js 実行環境でメモ帳アプリケーションを実行し、一連の機能に問題がないことを確認します。

  1. VCAP_SERVICES 環境変数の設定
    ローカル PC 環境から Cloudant NoSQL DB サービスへ接続できるよう、VCAP_SERVICES 環境変数を設定します。「3-1. Cloudant NoSQL DB サービスの追加」の手順 6 で記録した VCAP_SERVICES のテキストに対して、先頭行の行頭に「set VCAP_SERVICES=」を追加し、最終行を除く行末に「^」を追加することで、VCAP_SERVICES 環境変数の設定コマンドを作成ください。そして、コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、この環境変数の設定コマンドをコピー&ペーストして実行ください。
    VCAP_SERVICES 環境変数の設定コマンド (例)
    set VCAP_SERVICES={^
       "cloudantNoSQLDB": [^
          {^
             "name": "Cloudant NoSQL DB-c7",^
             "label": "cloudantNoSQLDB",^
             "plan": "Shared",^
             "credentials": {^
                (中略)
             }^
          }^
       ]^
    }
    環境変数設定コマンドの実行 (例)
    C:\Bluemix\MemoApp>set VCAP_SERVICES={^
    More?    "cloudantNoSQLDB": [^
    More?       {^
    More?          "name": "Cloudant NoSQL DB-c7",^
    More?          "label": "cloudantNoSQLDB",^
    More?          "plan": "Shared",^
    More?          "credentials": {^
                 (中略)
    More?          }^
    More?       }^
    More?    ]^
    More? }
  2. メモ帳アプリケーションの実行
    コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「node app」を実行ください。正常であれば、「Listening on port 3000」というメッセージが表示され、3000 番ポートでリクエスト受け付けが開始されます。
    「node app」の実行 (例)
    C:\Bluemix\MemoApp>node app
    Listening on port 3000
  3. メモ帳アプリケーションへアクセス
    Web ブラウザーで「http://localhost:3000」を開いてください。正常であれば、メモ帳アプリケーションのトップ・ページである、メモ一覧が表示されます。作成済みのメモがないため、メモ一覧は空欄で表示されます。
    「メモ帳アプリケーションへアクセス」手順の画面
  4. 新規メモ作成の確認
    「新規作成」をクリックください (画面(1)) 。正常であれば、メモ作成のダイアログが表示されます。そして、表示されたダイアログの「タイトル」と「本文」に任意の内容を入力し、「保存」をクリックください (画面(2)) 。正常であれば、メモ一覧に作成したメモが表示されます (画面(3))。

    同様の操作を繰り返し、3 つ程度のメモを作成ください。

    「新規メモ作成の確認」手順の画面(1)
    「新規メモ作成の確認」手順の画面(2)
    「新規メモ作成の確認」手順の画面(3)
  5. 既存メモ編集の確認
    メモ一覧で既存メモのタイトルをクリックください (画面(1)) 。正常であれば、メモ編集のダイアログが表示されます。そして、表示されたダイアログの「タイトル」と「本文」を任意の内容で更新し、「保存」をクリックください (画面(2)) 。正常であれば、メモ一覧の一番上に更新したメモが表示されます (画面(3))。
    「既存メモ編集の確認」手順の画面(1)
    「既存メモ編集の確認」手順の画面(2)
    「既存メモ編集の確認」手順の画面(3)
  6. 既存メモ削除の確認
    メモ一覧で既存メモの「X」 (削除) をクリックください (画面(1)) 。正常であれば、そのメモが削除され、メモ一覧に表示されなくなります (画面(2))。
    「既存メモ削除の確認」手順の画面(1)
    「既存メモ削除の確認」手順の画面(2)
  7. 再実行時の振る舞い確認
    メモ帳アプリケーションを再実行しても作成されたメモが消えないことを確認します。メモ帳アプリケーションが実行中となっているコマンド・プロンプトにて「Ctrl+C」を入力ください。メモ帳アプリケーションが停止します。そして、再度「node app」を実行し、Web ブラウザーで「http://localhost:3000」を開き直してください。メモ・データを Cloudant NoSQL DB サービスによって永続化する実装に変更したため、再実行によって作成されたメモが消えることはありません。
    「node app」の再実行 (例)
    C:\Bluemix\MemoApp>node app
    Listening on port 3000
    GET / 200 830.955 ms - 1636
    GET /favicon.ico 404 3.686 ms - 24
    GET /memos 200 7.786 ms - 976
    POST /memos 302 1094.170 ms - 58
    GET / 200 641.883 ms - 2444
    GET /memos 200 1.863 ms - 976
    POST /memos 302 837.582 ms - 58
    GET / 200 590.986 ms - 3252
    GET /memos 200 2.303 ms - 976
    POST /memos 302 808.186 ms - 58
    GET / 200 640.681 ms - 4060
    GET /memos/06537730-6e64-4de5-a7fa-686e0e1fc8a3 200 2.848 ms - 1202
    PUT /memos/06537730-6e64-4de5-a7fa-686e0e1fc8a3?_method=PUT 302 899.967 ms - 58
    GET / 200 629.960 ms - 4060
    DELETE /memos/2a4a78e0-8a6c-49cc-96c5-fc20e7edb23a?_method=DELETE 302 700.121 ms - 58
    GET / 200 606.118 ms - 3252
    ^C
    
    C:\Bluemix\MemoApp>node app
    Listening on port 3000
    「再実行時の振る舞い確認」手順の画面

3-6. IBM Cloud 環境への再デプロイ

メモ帳アプリケーション V2.0.0 のローカル PC 環境での動作確認が終わりましたので、IBM Cloud 環境へメモ帳アプリケーションを移します。当節では cf コマンドライン・インターフェースを使用し、IBM Cloud 上の Node.js 実行環境へメモ帳アプリケーションを再デプロイします。

  1. メモ帳アプリケーションの再アップロード
    cf コマンドライン・インターフェースで IBM Cloud 環境へメモ帳アプリケーションを再アップロードします。コマンド・プロンプトで作業ディレクトリーをカレント・ディレクトリーとし、「cf push MemoApp」を実行ください。
    「cf push MemoApp」の実行 (例)
    C:\Bluemix\MemoApp>cf push MemoApp
    Updating app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    Uploading MemoApp...
    Uploading app files from: C:\Bluemix\MemoApp
    Uploading 8.7K, 10 files
    OK
    
    Stopping app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    Starting app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    (中略)
    
    1 of 1 instances running
    
    App started
    
    Showing health and status for app MemoApp in org <ユーザーID> / space dev as <ユーザーID>...
    OK
    
    requested state: started
    instances: 1/1
    usage: 1G x 1 instances
    urls: memoapp-tectonic-averment.mybluemix.net
    
         state     since                    cpu    memory        disk
    #0   running   2014-10-07 02:43:12 PM   0.0%   39.6M of 1G   119.4M of 1G

3-7. IBM Cloud 環境での動作確認

メモ帳アプリケーション V2.0.0 の IBM Cloud 環境への再デプロイが終わりましたので、続いて動作確認を行います。当節では IBM Cloud 上の Node.js 実行環境で動作するメモ帳アプリケーションについて、一連の機能に問題がないことを確認します。

  1. メモ帳アプリケーションへアクセス
    Web ブラウザーで「http://<アップロード時に記録した URL>」を開いてください。正常であれば、メモ帳アプリケーションのトップ・ページである、メモ一覧が表示されます。ローカル PC 環境での動作確認で作成したメモが表示されます。
    「メモ帳アプリケーションへアクセス」手順の画面
  2. 一連の機能の確認
    「2-7. ローカル PC 環境での動作確認」の手順 3、4、5 を実施し、IBM Cloud 環境でも一連の機能に問題がないことを確認ください。
4

まとめ

当記事では IBM Cloud の Node.js 実行環境を使用した、Web アプリケーション開発の流れをステップ・バイ・ステップで解説しました。例として Node.js と Cloudant NoSQL DB サービスの組み合わせを使用しましたが、IBM Cloud では幅広いプログラミング言語やフレームワークを使用でき、さらに多種多様なサービスも提供されています。この中にはモノのインターネット (Internet of Things) やコグニティブ・コンピューティング (IBM Watson) といった、先進的なテクノロジーのサービスも含まれています。ぜひ様々な組み合わせに挑戦し、イノベーティブなアイデアをカタチにしていただければと思います。


ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing
ArticleID=992104
ArticleTitle=IBM Cloud 上で稼動する Web アプリケーション開発方法 - Node.js 編
publish-date=12112014