Meteor を使用して応答性の良い売上表アプリケーションを作成する

2014年 7月 02日
PDF (354 KB)
 

IBM Bluemix™ にサインアップ
無償のサービス、ランタイム、インフラを含むクラウド・プラットフォームが、新たなモバイルやウェブ・アプリのクイックな構築とデプロイを実現します。

Meteor は、JavaScript 開発者のための完全なリアルタイム・アプリケーション・スタックです。Meteor の独特なリアクティブ・プログラミング・モデルでは、リアルタイムで更新される極めてインタラクティブなシングル・ページ Web アプリケーションを迅速に作成することができます。

私が書いた developerWorks 記事「Meteor を使用したインスタント Web アプリケーション」では、Meteor 開発と Meteor アーキテクチャーについて詳細に検討しています。その記事のサンプル・コードのなかに、シングル・ページ Web アプリケーションとして生成されるインタラクティブな売上グラフがあります。Bluemix が開始されたとき、私はこのアプリケーションをクラウド内でデモして共有するのに、Bluemix はうってつけの手段になるに違いないと思いました (この記事で扱うコードは、Meteor の最新のプレビュー・リリース V0.8.1.1 でテストしました。「Meteor を使用したインスタント Web アプリケーション」のコードは、それよりも古いバージョンの Meteor に基づいています)。しかし Bluemix は、Meteor アプリケーションのデプロイメントについてはまだ万全ではありませんでした。そこで、私は Bluemix での Meteor アプリケーションのデプロイメントを単純にするカスタム・ビルドパックを用意しました。

この記事では、リアルタイムの売上グラフ・アプリケーションを DevOps Services 上で作成し、そのアプリケーションを Bluemix にデプロイしてグローバルな Web アクセスに対応させる方法を紹介します。Meteor はサーバー・サイドの MongoDB を利用してデータを保管するため、このアプリケーションの売上高データは、Bluemix の定義済み MongoDB サービスを使用して保管します。アプリケーションが稼働状態になったら、アプリケーションのコードを変更して、Meteor のリアクティブ・プログラミング・モデルを調査することができます。

読む:Meteor を使用したインスタント Web アプリケーション

読む:Getting Started with Bluemix and DevOps Services using Node.js

必要なもの

 

私は Bluemix での Meteor アプリケーションのデプロイメントを単純にするカスタム・ビルドパックを作成しました。

ステップ 1. 既存のアプリケーションを探る

 

この記事の「アプリを実行する」ボタンをクリックして、売上グラフ・アプリケーションを操作してみてください。

  1. デスクトップ・ブラウザーまたは携帯電話のブラウザーの複数のインスタンスを開いて、そのすべてのインスタンスでアプリケーションの URL (http://meteorsales.ng.bluemix.net/) にアクセスします。
  2. 表に示されている売上高のいずれかを選択してクリック (またはタップ) し、数値を変更してから「OK」をクリックして更新します。この操作によって、すべてのアプリケーション・インスタンスで表と円グラフの両方が瞬時に更新されることを確認してください。
  3. 別のブラウザー・インスタンスまたはモバイル端末から売上高を更新した場合を試してみます。

このアプリケーションを同時に試している読者が他にもいる場合は、それらの読者が行った更新もアプリケーションに反映されます。

ステップ 2. プロジェクト・コードをフォークする

 
  1. この記事の「コードを入手する」ボタンをクリックします。
  2. DevOps Services に保管されている私の meteorsales プロジェクトで、ページの右上にある「EDIT CODE (コードの編集)」ボタンをクリックします。 DevOps Services プロジェクト・ページの「EDIT CODE (コードの編集)」ボタンのスクリーンショット
    IBM ID とパスワードを入力して DevOps Services にログインします。
  3. 「FORK (フォーク)」をクリックして新規プロジェクトを作成します。
    DevOps Services の「FORK (フォーク)」ボタンのスクリーンショット

    アプリケーションが Bluemix にデプロイされると、そのアプリケーションには DevOps Services プロジェクトと同じ名前が付けられます。現在、すべての Bluemix プロジェクトは同じ名前空間を共有するようになっているため、プロジェクト (アプリケーション) の名前を固有にする必要があります。

    meteorsales 以外のプロジェクト名を入力します。プロジェクトは公開することも、非公開にすることもできます。
  4. プロジェクトのディレクトリー構造を調べます。
    • manifest.yml— DevOps Services がアプリケーションを Bluemix にデプロイするために使用するマニフェスト
    • sales.css— 売上グラフ・アプリケーションの CSS スタイル
    • sales.html— アプリケーションの Meteor テンプレート・ファイル
    • sales.js— アプリケーションのクライアント・サイドおよびサーバー・サイドの JavaScript コード
    • client/*— アプリケーションが使用する jQuery プラグイン・ライブラリー
    • client/css/*— jQuery プラグイン・ライブラリーが使用する CSS スタイル

Meteor コードが機能する方法

 

Meteor で作業するときには、JavaScript でクライアント・ロジックおよびサーバー・ロジックを作成します。このアプリケーションのクライアント・サイドとサーバー・サイドのコードは、どちらも sales.js に含まれています (クライアントのコードとサーバーのコードをそれぞれ別個のサブディレクトリーに格納することもできます)。

Meteor は client ディレクトリー (およびそのサブディレクトリー) で CSS ファイルをスキャンして UI のスタイルを設定し、JS ファイルをスキャンして jQuery プラグインを選択します。HTML ファイルについては、Meteor は検出したファイルの <head> セクションと <body> セクションをマージします。

UI を構成するには、一般に Spacebar が使用されます。これは、Handlebars と同様の Meteor 固有のテンプレート・システムです。sales.html 内の売上グラフ・アプリケーションのテンプレート・コードは、以下のようになっています。

<head>
<title>Sales by Region</title>
</head>

<body>
  <div id="title">
  	<h1>Global Sales 2014</h1>
  </div>
  <div id="container">
  	<div id="salestable">
    	{{> salesdata}}
  	</div>
        {{> piechart}}
  </div>
</body>

<template name="piechart">
  	<div id="chart">
    </div>
</template>

<template name="salesdata">
  <div class="salesdata">
    {{#each dataset}}
      {{> datapoint}}
    {{/each}}
  </div>
</template>

<template name="datapoint">
  <div class="datapoint {{selected}}">
    <span id="{{_id}}_region" class="region">{{region}}</span>
    <span id="{{_id}}_total" class="sales editable">{{total}}</span>
  </div>
</template>

売上高の表をレンダリングする salesdata テンプレートの各行に、datapoint テンプレートのインスタンスが含まれます。chart <div> は、jqPlot プラグインが円グラフをレンダリングする場所です。jEditable プラグインのインスタンスは、売上高のインプレース編集を可能にするために作成されます。

UI で売上高が変更されるたびに、Meteor のクライアント・サイドの MongoDB 実装 (mini-mongo) が呼び出されます。mini-mongo によって数値が更新されると、Meteor のリアクティブ・エンジンがサーバー・サイドの MongoDB インスタンスと同期します。これにより、数値の変更が同じページを表示しているすべてのブラウザーまたはモバイル・インスタンスに伝播され、Meteor エンジンがその変更に従ってローカル・ビューを更新します。

MongoDB インスタンスをシード・データで初期化するのは、以下のサーバー・サイドのコードだけです。

if (Meteor.isServer) {
  Meteor.startup(function () {
      Sales2013.remove({});
      Sales2013.insert({region:"US East", total: 2032333});
      Sales2013.insert({region:"US Central", total: 150332});
      Sales2013.insert({region:"US West", total: 1202412});
      Sales2013.insert({region:"Asia Pacific", total: 701223});
                   
  });
}

ステップ 3. アプリケーションを Bluemix にデプロイする

 
  1. 「DEPLOY AS (次の項目としてデプロイ)」をクリックし、「Deploy application from Web IDE to Bluemix (Web IDE から Bluemix にアプリケーションをデプロイ)」を選択します。これまで一度も DevOps Services から Bluemix にデプロイしたことがない場合は、Bluemix のユーザー ID とパスワードを入力する必要があります。
  2. ターゲットとする Bluemix デプロイメント空間として「dev」スペースを選択し、「DEPLOY (デプロイ)」をクリックします。 「Configure Application Deployment (アプリケーション・デプロイメントの構成)」ダイアログ・ボックスのスクリーンショット
  3. デプロイメントを待機します。その間、ページの上部にポップアップ表示されるステータス・メッセージに注意してください。

最終的には、失敗メッセージが表示されることになります。このメッセージは、meteorsales という名前の Bluemix ルートはすでに別のアプリケーションで使用されていることを通知するものです。マニフェストのアプリケーション名 (現時点では meteorsales) は、アプリケーションに固有の名前でなければなりません。また、マニフェストは現在 Bluemix 上の私の MongoDB サービス・インスタンスを指しています。このインスタンスは、meteorsales アプリケーションがストレージに使用するインスタンスであり、皆さんのアプリケーションからこのインスタンスにアクセスすることはできません (ステップ 5 でマニフェストを更新します)。

ステップ 4. Bluemix MongoDB サービス・インスタンスを作成する

 

これから、皆さん独自の MongoDB サービス・インスタンスを作成して、そのインスタンスをアプリケーションにバインドします。

  1. Bluemix にログインします。
  2. スクロールダウンして「Add a service (サービスの追加)」をクリックします。
  3. 使用可能な「Data Management (データ管理)」サービスの中から「mongodb」を選択した後、「CREATE AND ADD TO APP (作成してアプリケーションに追加)」をクリックします。
  4. 「Add to: (追加先:)」には「Do not associate (関連付けない)」を選択して、サービスの名前を指定したら、「Create (作成)」をクリックします。

右上隅に、新規 MongoDB インスタンスの名前を示す通知が短時間表示されます。その通知を見逃した場合は、サービス・インスタンスのリストをスクロールして、指定した名前の MongoDB インスタンスを見つけてください。

ステップ 5. デプロイメント・マニフェストを更新する

 

DevOps Services プロジェクト内の manifest.yml ファイルを開いて編集します。現時点では、このファイルは私のプロジェクトの manifest.yml とまったく同じです。

マニフェストでは、カスタム・ビルドパックを使用していることに注意してください。このビルドパックは、Heroku Meteorite ビルドパックをベースに、Meteor アプリケーションを Bluemix にデプロイするため専用に変更したものです。

applications:
- services:
 - mongodb-bf
  host: meteorsales
  disk: 1024M
  name: meteorsales
  buildpack: https://github.com/Sing-Li/heroku-buildpack-meteorite
  path: .
  domain: ng.bluemix.net
  mem: 1024M
  instances: 1

プロジェクトに応じてマニフェストをカスタマイズします。

  1. host: 設定と name: 設定を変更して、プロジェクト固有の名前を反映させます。
  2. サービス・インスタンス名を、ステップ 4 で作成した MongoDB サービスの名前に変更します。
  3. 変更したマニフェストを保存します (「File (ファイル)」 > 「Save (保存)」)。

ステップ 6. アプリケーションを Bluemix に再デプロイする

 
  1. 「DEPLOY (デプロイ)」ボタンをクリックします。しばらくすると、デプロイメント・ステータス・メッセージが表示されます。今回は、デプロイメントに成功します。
  2. 「Manual Deployment Information (手動デプロイメント情報)」セクションに表示されるアプリケーション名の後に、大きなドットが示されているはずです。このドットが緑色の場合、Meteor アプリケーションは Bluemix で実行中になっているので、このステップの残りを実行する必要はありません。ドットが赤で示されている場合は、「Start application (アプリケーションの開始)」をクリックします。 「Start application (アプリケーションの開始)」ボタンのスクリーンショット
    赤のドットは最終的に、アプリケーションが実行中であることを示す緑色に変わります。また、アプリケーションの URL と、ステージング・ログおよびデプロイメント・ログへのリンクも表示されます。
  3. アプリケーションの URL をクリックして、実行中の売上グラフ・アプリケーションの独自のコピーを表示します。

これで、アプリケーションをいろいろと試すために、自由にコードを変更して再デプロイすることができます。

まとめ

 

今や、高価な開発ワークステーションとステージング・サーバー一式を揃えなくても、極めてインタラクティブにストリーミング・データを更新できる Web アプケーションを開発して、デスクトップ・ブラウザーやモバイル端末上で実行できるようになっています。Meteor のように迅速な開発を可能にする新しい世代のフルスタック・プラットフォームに DevOps ServicesBluemix が提供するクラウド・ベースの開発者向け機能を組み合わせれば、インターネットに接続したブラウザーだけを使用して、場所を問わずにどこからでも自分のアイデアを実現することができます。

コメントの追加

注意: HTML コードは、コメント内ではサポートされません。


残り 1000 文字

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Cloud computing
ArticleID=972561
ArticleTitle=Meteor を使用して応答性の良い売上表アプリケーションを作成する
publish-date=07022014