Web フレームワークの Node.js を利用して、公共交通機関についてのシミュレーションを行う JavaScript アプリケーションを構築してサーバーに接続する方法を学んでください。将来、このアプリケーションがいかに役立つ可能性があるかを示すために、このアプリケーションを dashDB サービス (旧 BLU Acceleration サービス) に接続する方法を紹介します。この方法により、公共交通機関からの大量のデータを短時間で処理して評価することが可能になります。
“IBM Bluemix によって、クラウドでのプログラミングは容易になります。それは、この公共交通機関のシミュレーターのような便利なアプリケーションの開発を、クラウドで始めるために必要なすべてのツールが揃っているからです。”
アプリケーションを作成するために必要となるもの
- JavaScript の基礎知識 — ループ、条件式、モジュール、フレームワーク、ライブラリー (jQuery など) の知識。
- SQL、CSS3、Bootstrap、HTTP の基礎知識 — 単純な SQL クエリーの知識 (dashDB サービスから jQuery API および JavaScript に接続してデータを取得するために使用します)。
GETやPOSTなどのリクエスト/レスポンス・メソッドの十分な知識 (Node.js と JavaScript の間での通信に使用します)。 - インターネット接続 —
DevOps Servicesへのアクセス。 - Bluemix アカウント
ステップ 1. Bluemix で新規アプリケーションを作成する
IBM Bluemix では、Java プログラミング言語、JavaScript、Ruby on Rails をはじめ、さまざまな言語がサポートされています。この例では、サーバー・サイドの開発とデプロイメントのプロセスを単純化する目的、そして他のサービス (dashDB サービスなど) とのやりとりを改善する目的で、Node.js ランタイムを作成します。
- Bluemix アカウントにログインします (または、無料トライアルにサインアップします)。
- Bluemix のダッシュボードでは、「Create an Application (アプリケーションの作成)」をクリックし、適切なサービスを選択します。この例の場合は、「Node.js」ランタイムを選択します。
- この時点で、サービスに関するドキュメントにアクセスして、サービスの機能とその使用方法を調べることができます。「Create an Application (アプリケーションの作成)」をクリックして、アプリケーションの名前とホスト名を指定します。
作成プロセスが完了すると、使用可能になった実行中のサービスがダッシュボードに表示されます。アプリケーションをクリックして、アプリケーションの概要を表示してください。 - dashDB サービスを追加します。dashDB サービスは、データベース・ストレージと、データ分析、その他の機能を提供するサービスです。プロジェクトの「Overview (概要)」ページで、「Add a service (サービスの追加)」をクリックします。「Big Data (ビッグ・データ)」セクションにある「dashDB」を見つけて選択した後、「Create and Add to App (作成してアプリケーションに追加)」をクリックします。このサンプル・プロジェクトを選択して、このインスタンスに名前をつけます。
- DevOps Services をアプリケーションに統合します。それには、アプリケーションのステータスを示すページの上部にある「Add Git Integration (Git 統合を追加)」をクリックします。「Populate the repository with the starter application package and deploy it to the application (リポジトリーにスターター・アプリケーション・パッケージを取り込んで、アプリケーションにデプロイする)」オプションにチェック・マークを付けてから、「Continue (続行)」をクリックして先を続けます。アプリケーション・ファイルにアクセスするには、「CODE (コード)」をクリックします。
ステップ 2. Node.js をセットアップして dashDB と接続する
このステップには、複数の段階があります。
1. DevOps Services と連携させる
このアプリケーションを機能させるためにコンピューターにインストールしなければならないものは、何もありません。DevOps Services と同期した後は、グループで共同作業して、変更をリポジトリーにコミットすることができます。
- DevOps アカウントでアプリケーションのコピーを作成するために、bussimulator をクリックします。続いて「EDIT CODE (コードの編集)」 > 「FORK (フォーク)」の順にクリックします。DevOps プロジェクトに有効な名前を指定して、プロジェクトを開きます。
- フォークされたプロジェクトで、manifest.yml ファイルを編集して、アプリケーション名を、前に作成したアプリケーションの名前 (この例では、
willbus) に変更します。 - プロジェクトをデプロイするには、「DEPLOY (デプロイ)」(「FORK (フォーク)」ボタンの横にあるボタン) をクリックします。これで、アプリケーションはバス・シミュレーター・プロジェクトを実行中の状態になりました。次は、dashDB をセットアップします。
2. dashDB をセットアップする
このアプリケーションを独自のインスタンス上で (このサンプル・プロジェクトで使用するのと同じファイルを使用して) 実行させるには、以下の手順に従います。
- DevOps で database/tables.dll を開き、その中身をクリップボードにコピーします。
- 「Manage (管理)」 > 「Work with tables (テーブルの処理)」の順にクリックし、クリップボードにコピーした内容を貼り付けます。これで、プロジェクト・データを入力するテーブルが作成されます。
- 「Manage (管理)」 > 「Load Data (データのロード)」の順にクリックします。BLU スキーマを選択し、データをロードするテーブル名を選択します。「Load Data (データのロード)」をクリックした後、データベース・フォルダーで見つかった CSV ファイルのうちの 1 つを選択し、そのファイル名に対応するテーブルにファイルをロードします (例えば、LINE.CSV は LINE テーブルにロードします)。他のテーブルのそれぞれについて、このステップを繰り返してください。
この作業が完了した時点で、皆さんのアプリケーションは、このサンプル・プロジェクトと同じ状態で実行されているはずです。記事の残りでは、サンプル・プロジェクトを反映した手順の詳細を説明します (バックエンド、フロントエンド、およびノードと dashDB の接続)。
3. package.json ファイルを更新する
Node.js をランタイムから作成すると、package.json ファイルが作成されます。
dependencies の下に、DB2 でのアクセスを有効にする、以下のキーが追加されます。
"ibm_db" : "~0.0.1",
「jade」が出現する箇所は、すべて「ejs」に変更されます。
"jade" : "*" to "ejs" : "*"
EJS と JADE は、Node.js Express がサーバーから Web ページを作成するために使用するテンプレート・エンジンです。
- EJS は、JavaScript ロジックを直接追加して、HTML コードのストリングに値をインポートします。
- JADE は、独自の構文とドキュメントを持つ完全なテンプレート言語です。
どちらのテンプレート・エンジンもクライアントと相性が良く、Node.js アプリケーションでかなり一般的に使用されています。この記事で EJS を使用することにした理由は、プレーン HTML および HTML タグと似ているためです。
4. app.js に変更を加える
app.js は、Node.js アプリケーションで最も重要な JavaScript ファイルです。このファイルは、Express フレームワークを使用してサーバーの動作を制御します。Express は、イベント駆動型 (リアルタイム) Web アプリケーションに簡単に使えるフレームワークです。サンプル・アプリケーションと同じ設定を使用するようにアプリケーションを変更するには、以下の変更を加えてください。
view_engineがjadeではなくejsを読み込むように変更します。- 変数を作成し、プロジェクトで DB2 の操作を開始するのに
ibmdbが必要になるようにします。 - 基本となる Node.js のライン 36 で、コメント
「TODO」を見つけます。このコメントが、データベースと接続するためのサービス情報を取得する変数serviceを提供します。 - 以下のコードを追加すれば、クライアント・サイドからの
POSTを受信できるようにするためのサーバー・サイドの準備が完了します。
5. クライアント･サイドのファイルをセットアップする
dashDB から取得されるデータ、そしてサンプル・アプリケーションの DB2 から取得されるデータを受信するために、以下のコードを使用して POST リクエストをサーバーに送信し、シミュレーションを開始しました (jQuery を使用)。
$.post('/', {JSON}, function(data){ //do something });バス・シミュレーターは、JSON オブジェクトを送信して、データベースから情報を取得します。このオブジェクトには、キーとしてはテーブル名を指定する table、クエリーから選択する特定の列を指定する columns、条件式 (JOIN データおよび WHERE 節) に使用する extras などのキーが含まれています。この一般的なデータ・アクセス手法は、さまざまなシミュレーションに応じてカスタマイズすることができます。
public/js/database.js ファイルのライン 13 を見ると、バス・シミュレーターのバージョンでは、$.post が別の $.post のコールバックにネストされていることがわかります。このコードにより、ページはアニメーションをロードする前に、データベースの全コンテンツをロードすることになります。
ステップ 3. JavaScript オブジェクトのバックエンドの開発を行う
バックエンドのコードは、bussimulator/public/js/controller.js ファイルにあります。このコードは単純なもので、フロントエンドで使用するコードとオブジェクト (次のステップで説明) が含まれているだけです。以下の図に、controller.js の単純なクラス図を示します。
コードに含まれているオブジェクトは、Line、Stop、Bus、Person、Event の 5 つです。このシステムは、オブジェクト指向の方法で開発されています。その目的は、コードの内部で何が行われているのかを簡単に理解できるようにして、システムに含まれる要素とオブジェクトを制御しやすくするためです。
Line オブジェクトには、複数の変数、そして reset 関数が組み込まれています。このオブジェクトが表すのは、バスの実際の路線です。Line ごとに、Stop オブジェクトの配列と Bus オブジェクトの配列があります。Line オブジェクトには、バスの出発時刻の間隔を格納する interval が必要です。新規の Line オブジェクトを作成する際には、ID (id)、名前 (name)、間隔 (interval) を引数として指定する必要があります (例えば、var line1 = new Line(001, "Bloor St", 20))。バックエンドでは、このコードは以下のリストのようになります。
var Line = function(id, name, interval){
this.id = id;
this.name = name;
this.interval = interval;
this.stops = [];
this.buses = [];
this.onSim = false;
}
this.reset = function(){
this.onSim = true;
for (var i = 0; i < this.buses.length; i++)
this.buses[i].reset();
}
}新しい路線を追加したら、次のステップとして、この路線にバス停を追加します。Stop オブジェクトは、ID (id)、名前 (name)、場所 (location)、乗客 (passengers) を格納します。各バス停の場所は、パーセンテージで定義されます。例えば、路線に 3 つのバス停がある場合、最初のバス停はその路線全体の 0 パーセントの場所に位置し、2 番目のバス停は 50 パーセントの場所、最後のバス停は 100 パーセントの場所に位置することになります。passengers 変数は、Person オブジェクトを格納する配列です。従って、この配列には各乗客の乗車地と降車地も含まれます。
var Stop = function(id,name){
this.id = id;
this.name = name;
this.location = undefined; //in %
this.passengers = [];
/* Show people at stop */
this.showPeople = function(){
$("#stop_" + this.id + "_people")
.html(this.passengers.length);
}
}Bus オブジェクトには、乗客、現在の路線、現在のバス停、およびバスに収容できる最大乗客数に関する情報が含まれます。このオブジェクトでも、passengers 配列は Person オブジェクトを格納します。また、reset 関数はバスを停止して出発地 (最初のバス停の場所) に戻します。このオブジェクトには、他にも changeColor、showPeople、addPeople など、多数のメソッドがあります。それぞれの説明は、各関数のすぐ上のコメントに示されています。
Event オブジェクトは、このシミュレーターのスケジュールのように機能します。このオブジェクトは、時刻、アクション、バスを取得します。例えば、路線の最初のバスを 5 秒後にあるバス停から別のバス停に移動するとします。その場合のイベントのコードは、new Event("00:05", goToNextStop, line.buses[0]) - となります。ここで、line.buses[0] は、路線にリンクされている移動対象のバスです。
コードの残りの部分にざっと目を通すと、これらのオブジェクトがどのようにリンクされていて、フロントエンドでどのように使用できるのかがわかります。controller.js はシミュレーターの土台となるので、フロントエンドのコードの開発に取り掛かる前に、理解しておく必要があります。完全なコードは、DevOps Services リポジトリーからダウンロードすることができます。
ステップ 4. Bootstrap および jQuery API でフロントエンドの開発を行う
フロントエンドの開発には、Bootstrap フレームワークを使用します。jQuery API は、シミュレーターのエフェクトおよびアニメーションに使用します。
バス・シミュレーターのインターフェースは、キャンバス、タイマー、サイドバーの 3 つの主要部分に分かれています。キャンバスには、路線とバスが表示されます。右上隅にあるタイマーは、「Start (開始)」、「Pause (一時停止)」、「Stop (停止)」ボタンで制御することができます。サイドバーでは、路線と乗客を追加したり、シミュレーションの情報を確認したりすることができます。
シミュレーターに路線を追加するには、「Line (路線)」タブを表示します。小さい丸とその上に示されている数字は、バス停、各バス停で待っている乗客数を表します。小さい四角形はバスを表し、四角形の中に示されている数字はバスごとの乗客数を表します。路線をシミュレーターから削除するには、路線名の隣にある「X」をクリックします。
シミュレーターで、バスの路線沿いの各バス停に人を追加するには、「People (乗客)」タブを選択します。路線の各セグメントをクリックすると、そのセグメントの交通量を変更することができます。乗客数や、現在のバス停、次のバス停までの時間など、バスごとの情報を表示するには、バスをクリックします。
シミュレーションを開始するには、「Start (開始)」をクリックします。シミュレーションのイベントは、「Home (ホーム)」タブで追跡することができます。このタブには、時刻および各バスに対するアクション示すイベント・リストが表示されます。シミュレーションの一時停止、再開、停止ができるほか、シミュレーターに路線を追加することや、シミュレーターから路線を削除することができます。
この例の場合、アニメーションはイベント・リストに基づいています。各イベントは、時刻、バス、そして実行する特定のアクションに関連付けられます。新しい路線がキャンバスに追加されると、その新規路線の各バスの出発時刻が、イベントに割り当てられます。これらのイベントが、イベント・リストに表示されます。シミュレーションの開始時には、まず、最初のイベントの時刻がチェックされて、シミュレーターの時刻と同じであるかどうかが判別されます。時刻が同じであれば、そのイベントのアクションが実行され、このバスの次のイベントがスケジューリングされます。
次のバス停に向かうためのアクションと、バス・ターミナルに戻るためのアクションがあります。前者のアクションでは、バスは現在のバス停で乗客が乗り降りする間、停車した後、次のバス停に向かいます。速度は、路線のこのセグメントの交通量によって変わります。後者のアクションは、バスが最後のバス停に到着したときに実行されます。バスは最後のバス停で乗客が降りるのを待ってから、バス・ターミナルに戻ります。
アプリケーションにスタイルとアニメーションを追加するには、以下に記載するファイルをプロジェクトにコピーし、css フォルダーと js フォルダーに含まれる Bootstrap ファイル、jQuery ファイルをコピーして、ディレクトリー構造を維持してください。
- bussimulator/public/css/style.css
- bussimulator/public/js/animation.js
- bussimulator/views/index.ejs
まとめ
Bluemix には、公共交通機関のシミュレーターをオンラインで開発するために必要なツールがすべて揃っているため、ローカルにソフトウェアをインストールする必要がありません。このプロジェクトをグループで共同作業するために必要な環境は、IBM DevOps Services が提供します。これはまさに、開発プロセスを大幅に簡易化するセットアップです。
BLUEMIX SERVICES USED IN THIS TUTORIAL:
- SDK for Node.js ランタイム は、サーバー・サイド JavaScript アプリケーションを簡単に開発、デプロイ、スケーリングできるようにします。
- dashDB サービス は、次世代の列指向インメモリー・データベースへのデータの移行や、インデータベース・アルゴリズムを用いた複雑な分析クエリーの実行、さらには分析ビジネス・インテリジェンス・ツールとの統合などに役立ちます。
関連トピック：Node.jsJavaScriptjQuery