Node.js + Express (+ ejs) + Mongoose, Bootstrap + AngularJSの開発環境作成その２

AngularJSを勉強しながら適当なサンプルを実装する。
AngularJSのコントローラの書き方として3つあるようだ。サンプルで出てくるのは、コントローラをグローバル関数として定義するパターンだ。
これは、サンプルとしてわかりやすいためこうしているようだが、規模が大きくなると破綻するパターンのよう。
モジュールにコントローラを追加するパターンがお勧めパターン。
AngularJSのDIの仕組み、minify対策は覚えておこうにどのようなパターンで、どうしておすすめかがまとめてあるので参考にする。
また、今回のアプリケーションは、Flexのように、すべてのHTML(MXML)をクライアントに読み込んで、必要な部分だけを表示することにする。
サーバーとのやりとりはRESTfulにデータはJSONPで、行う。JSONPのセキュリティ上の視点では、JSONPはセキュアではないのか？にかかれているので参照する。

また、［気になる］JSONPの守り方という@ITの記事を参考にする。

次にCloud9にMongoDBをインストールする方法が、Cloud9のマニュアルのMongoDB使用方法に記述してある。
Running MongoDB on a Cloud9 workspaceを参照する。
ただ、これだと多分mongodを実行した時にハードディスクのほとんどの容量をMongoDBように予め確保されてしまうため、--nopreallocもオプションに加える。
ついで、Mongooseをインストールする。

$ npm install mongoose

これはちょっと時間がかかるのでしばらく待っておく。 インストールが終了すると、ターミナルで、mongodbコンソールを起動する。officeデータベースを使用する。

mongo $IP/office

Node.js + ExpressでJSONPをレスポンスするときには、サーバーサイドで、

app.enable("jsonp callback");
app.get("/hoge/api", function(req, res){
    res.json({"code":"1000", "name":"fuga"});
}

としてから、/hoge/api?callback=fnのように呼び出すと、fn({"code":"1000", "name":"fuga"});と返ってくるみたいなことがネットに書いてあったので、そのまま実装すると、{"code":"1000", "name":"fuga"}と返ってきている。 受け側はJSONPと想定して受け取っているため、エラーとなる。 Expressの公式サイトを見てみると、responseのメソッドとして、jsonpというのがあった。 やっぱり公式サイトを見るべきだ。

Node.js + Express (+ ejs) + Mongoose, Bootstrap + AngularJSの開発環境作成

サーバーサイドは、Node.js + Express (+ ejs) + Mongoose、クライアントサイドはBootstrap + AngularJSで開発をするための環境を作成する。 前提として、Node.jsとNode.jsのパッケージ管理システムのnpmがインストールされているものとする。 オンライン開発環境の Cloud9 は、これらはすでに用意されている。 まずはNode.jsのWebアプリケーションフレームワークであるExpressをグローバルインストールする。

$ npm install -g express

ソースのルートに移動して、Expressのテンプレートファイルを作成する。デフォルトのHTMLテンプレートはjadeだが、ejsを使用する。jadeのテンプレートのサンプルをちょっと見ただけで判断しているのだが、jadeのテンプレートはHTMLを吐き出すコードを書かなくてはならないように見える。一方ejsのテンプレートは、HTMLファイルに動的な値を注入する。

$ express -e .

すでにコードのルートにいるので、現在のディレクトリを表す . を指定した。 すると現在のディレクトリにpublic, routes, viewsというディレクトリとapp.js, package.jsonというファイルが追加された。 package.jsonの内容は、以下のとおりである。

{
  "name": "billman",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "ejs": "*"
  }
}

bootstrapはバージョン3がグリッドシステムもわかりやすくなったので、バージョン3を使用する。ただし、カスタマイズをしたいので、LESSを使用するように設定する。ココらへんは、https://github.com/twbs/bootstrapのREADME.mdに記載されている。 まず、publicに最新のbootstrapを複製する。

$ cd public
$ git clone git://github.com/twbs/bootstrap.git

bootstrapのCSSとJavascriptをコンパイルするために、Gruntをインストールする。

$ npm install -g grunt-cli
$ cd bootstrap
$ npm install

bootstrapディレクトリにpackage.jsonというファイルとnode_modulesディレクトリが追加された。 bootstrapディレクトリで、コマンドラインから grunt distとすると、recessとUglifyJSを使用して、bootstrap/distディレクトリにコンパイルしたファイルが作成される。 素晴らしいのが、grunt watchとコマンドを打つと、Lessファイルを監視して、ファイルが変更されると自動的にコンパイルされる。 単にgruntとするとコンパイルからテスト、ドキュメント作成までしてくれる。ただし、ローカルにドキュメントを作成するには、Jekyllが必要なのだが、JekyllはRubyで動作するので、ひとまずインストールはしないことにした。 コンパイル済みのbootstrapを使用しないのは、グリッドシステムのカラム数を12ではなく、24で使用したいためである。 bootstrap/less/variables.lessファイルの

// Number of columns in the grid system
@grid-columns:              12;

を

// Number of columns in the grid system
@grid-columns:              24;

にする。 col-画面サイズ-カラムクラスのカラムはgrid.lessで、12までしか定義されていないので、24まで追加する。
AngularJSは、長くなるので割愛。MongoDBとmongooseの設定は後回し。