Yeoman を使ってみる

2014 - 08/13 [Wed] - 21:36

Yeomanは簡単にいうと「今風のWebアプリのための土台／基盤を作ってくれるツール」です。PHPやRubyのscaffoldと似た感じです。

Yeomanは以下の３つのツールをまとめたものです
Yo・・・ひな型生成ツール
Bower・・・JavaScriptライブラリ依存管理
Grunt・・・タスクランナー

まずはこれらをインストールしておきます。

◆「Yeoman を使ってみる」の続きを読む◆

◆事前準備

$ npm install -g bower
$ npm install -g yo
$ npm install -g grunt

◆Node.jsモジュール「ジェネレータ」
アプリのひな形を生成してくれるジェネレータがたくさんあります。
一覧は以下のコマンドで確認できますが、とても時間がかかるのでご注意。今回はスルーしてOKです。

$ npm search yeoman-generator

欲しいものがあったらそれを使ってもいいですし、今回は割愛しますが自分で作成することも可能です。


◆ジェネレーターを使用してAngularJSを使ったひな型を生成
今回はAngularJSのひな形を使ってみます。

$ yo
[?] 'Allo your name! What would you like to do?
> Install a generator
  Find some help
  Get me out of here!

「Install a generator」を選択

次のように検索するジェネレーターを尋ねられるので、「angular」と入力してエンターキーを押してください。

[?] Search NPM for generators: angular

すると、名前に「angular」が含まれるyeomanのジェネレーターがリストアップされます。generator-angularを選択してエンター。

[?] Here's what I found. Install one? (Use arrow keys)
> generator-angular
  generator-angular-axiom
  generator-angular-beego
  generator-angular-bootstrap
  generator-angular-bootstrap-less
  generator-angular-brent

「Run the Angular generator」を選択してエンターキーを押します。

[?] 'Allo your name! What would you like to do?
> Run the Angular generator (0.9.5)
  Run the Karma generator (0.8.2)
  Update your generators
  Install a generator
  Find some help

アプリ生成のオプションをいくつか聞かれますが、取りあえず下記のようにします。

Sass／Compassは使用しない（No）
Bootstrapは使用する（Yes）
AngularJSの追加モジュールは全てインストール（スペースキーで選択・非選択を指定）

[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Bootstrap? Yes
[?] Which modules would you like to include? (Press <space> to select)
> angular-animate.js
  angular-cookies.js
  angular-resource.js
  angular-route.js
  angular-sanitize.js
  angular-touch.js

以上でひな形の生成は完了です。


◆動作確認
package.jsonやbower.json、Gruntfile.jsまで全て用意されているので、必要なパッケージをインストールしておきます。

$ npm install
$ bower install

では起動してみます。

$ grunt serve

すると自動的にブラウザが立ち上がり、デフォルトの画面が表示されます。

以上です。簡単ですね。


ソース：
あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方
パッケージマネージャBowerが大変便利で捗りそうです
◆「Yeoman を使ってみる」の続きを閉じる◆

nodebrew で node をインストール

2014 - 07/04 [Fri] - 10:18

以前はaptパッケージからインストールしました。
しかし nvm や nodebrew を使うと複数のバージョンを簡単に扱えるので、今回は nodebrew を使ってインストールしてみます。

もし過去に node をインストールしていたらアンインストールしてください。

◆nodebrewのインストール

$ curl -L git.io/nodebrew | perl - setup

※上記のワンライナーが上手くいかない場合は、以下のように一旦wgetでダウンロードしてから実行して下さい。

$ wget git.io/nodebrew
$ perl nodebrew setup

◆「nodebrew で node をインストール」の続きを読む◆

◆設定
.bashrc, .bash_profileあたりに以下の設定をつけます。

export PATH=$HOME/.nodebrew/current/bin:$PATH

設定を読み込みます。sourceをするかターミナルを再起動してください。

$ source ~/.bash_profile

◆nodeをインストール
利用可能なバージョンを見ます。

$ nodebrew ls-remote

表示された中からインストールします。install, install-binaryの２つがありますが、installだとコンパイルが非常に長いのでinstall-binaryが主流みたいです。

$ nodebrew install-binary v0.11.13

確認します。

$ nodebrew ls
v0.11.13

current: none

今はまだ使用するnodeを設定してないので、currentはnoneになっています。
使用するnodeを設定します。

$ nodebrew use v0.11.13
$ node -v
v0.11.13

◆グローバルモジュールの移行
当然ながら使用するnodeバージョンを切り替えるとグローバルモジュールも切り替わります。
「再インストールが面倒だな」と言う人にも優しいnodebrewは以下のコマンドが有ります。

$ nodebrew migrate-package v0.11.13

こうするとv0.11.13でインストールしたグローバルモジュールを、今使用中のnodeバージョンのグローバルモジュールとして全て再インストールしてくれます。


ソース：
node.jsのversionを管理するためにnodebrewを利用する

◆「nodebrew で node をインストール」の続きを閉じる◆

簡単にWebAPIモックサーバを作る

2013 - 11/13 [Wed] - 11:01

やや中規模な開発からはWebAPIサーバをたてる実装になったりしますね。

かといってフロント側がテストしたいときにいつもサーバにアクセスする or そもそもAPIサーバも構築途中で検証しづらい状況ってあると思います。

そんな時に簡単にモックサーバがたてられる便利なツールです。

◆インストール

$ npm install -g easymock

◆「簡単にWebAPIモックサーバを作る」の続きを読む◆

◆起動確認

$  easymock 
Server running on http://localhost:3000
Server running on http://localhost:3000/_documentation/

このように localhost:3000 としてサーバが立ち上がります。
なのでAPIサーバへの接続ホスト名・ポート番号は上記を指定してください。


◆使い方
基本的に、jsonファイルを配置したディレクトリの中でeasymockコマンドを実行します。

json形式でGET/POST/PUT/DELETEする方法を説明します。

実行用ディレクトリを作り、その中にapi取得したいjsonファイルを配置していきます。
ファイル名は xxx_get.json や xxx_post.json にします。例えばAPI先が

/users/

だった場合は

test(実行ディレクトリ。任意)
├users_get.json
└users_post.json

のように配置して、test ディレクトリで easymock を起動します。今回中身を
users_get.json

{
    "result": "get"
}

users_post.json

{
    "result": "post"
}

とかにしておきましょう。こちらAPIの response body に合わせて自分で好きに作成してください。

では動作確認としてブラウザで
http://localhost:3000/users

にアクセスすると

{"result":"get"}

と結果が返ってきます。
curlでやる場合は

$ curl -X GET http://localhost:3000/users

や

$ curl -X POST http://localhost:3000/users

で結果が返ると思います。


◆APIドキュメント
簡単です。
http://localhost:3000/_documentation/

にアクセスするだけです。以下の様なページになります。



◆ディレクトリ構造
http://localhost:3000/api/users/1

とかにしたいこともありますよね。この場合は
test(実行ディレクトリ)
└api
　└users
　　　└1_get.json

として作成すればOKです。


◆ルーティング

/users/:userId

とかにして、userIdを取得したい場合です。
実行ディレクトリ内にconfig.jsonを作ってその中で指定します。

構造としては
test
├config.json
└users
　　└userId_get.json

中身は
config.json

{
　"routes":[
　　"/users/:userId"
　]
}

userId_get.json

{
    "userId": #{userId}
}

userId_get.json中の #{userId} という記述が、URIで指定された/:userIdに置き換わります。

動作確認すると
http://localhost:3000/users/1

{"userId":1}

となります。


ソース：
node.jsでモックwebAPIを作るeasymock使ってみた
Web APIの開発に使えるモックサーバ「EasyMock Server」
◆「簡単にWebAPIモックサーバを作る」の続きを閉じる◆

Node で Cluster モジュールを使う

2013 - 09/25 [Wed] - 09:29

Clusterモジュールを使うと簡単にクラスタを実装できます。
導入すると何が良いの？　→　マルチコア環境で処理能力があがります。

というわけで実装します。どういう仕組みかは「Cluster」を参照してください。

まずは実験環境を導入します。Nodeがインストールされている環境で以下のようにしてください。

$ mkdir cluster-test
$ cd cluster-test
$ npm install cluster

◆「Node で Cluster モジュールを使う」の続きを読む◆

実験用のserver.jsを作成します。

$ emacs -nw server.js

var cluster = require('cluster');
var http = require('http');

var numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
    for (var i=0; i < numCPUs; i++) {
        // if master, then fork
        var worker = cluster.fork();
    }

    cluster.on('listening', function(worker) {
        console.log('worker is listening. pid: ' + worker.process.pid);
    });

    cluster.on('exit', function(worker) {
        console.log('worker is killed. pid: ' + worker.process.pid);
    });
} else {
    http.Server(function(req, res) {
        res.writeHead(200);
        res.end('Hello');
    }).listen(3000);
    console.log('server start: http://localhost:3000');
}

// if not this event, processes are alive
process.on('SIGINT', function() {
    if (cluster.isMaster) {
        console.log('master stopped. pid: ' + process.pid);
    } else {
        console.log('worker stopped. pid: ' + process.pid);
    }
    process.exit(0);
});

これで

$ node server.js

とするとCPUの分だけ子プロセスが起動します。
Ctrl-cすると 'SIGINT' のイベントでプロセスが終了しますし、
kill すると 'exit' イベントでプロセスが終了します。


ソース：
Cluster
node.js v0.8.1のClusterモジュールを試す
CPUを最大限活かそう。Nodeでclusterを使ってみる
◆「Node で Cluster モジュールを使う」の続きを閉じる◆

Protocol Buffersを使ってみる

2013 - 09/03 [Tue] - 21:41

Google Protocol Buffersを使ってみます。
これはJSONやXMLなどの冗長なファイルをシリアライズ（バイナリ化）することでデータの転送を速くするためのものです。

・プログラミング言語に依存しない
・コンパクトなバイナリ形式を採用
・データアクセスコードを自動生成

などのメリットがあります。

◆「Protocol Buffersを使ってみる」の続きを読む◆

使い方の流れとしては
◆前準備
①.protoファイルを作成（定義ファイル）
②protocコマンドでスキーマファイルの作成
◆プログラム内
③スキーマファイルからスキーマオブジェクト（schemaObj）を生成
④schemaObj.serialize(obj)でバイナリ化、schemaObj.parse(binary)でもとに戻す

です。

ではまずソースからインストールしてみます。

◆インストール
https://code.google.com/p/protobuf/downloads/list

ダウンロードして展開します。

$ tar xvzf protobuf-2.5.0.tar.gz
$ cd protobuf-2.5.0
$ ./configure
$ make
$ make check
$ sudo make install

でインストール完了です。

◆.protoファイルの作成
今回はNodeでやってみます。

var hoge = {x:1, y:"fuga", z:true};

というオブジェクトをシリアライズ、デコードしてみます。
./protos/test.proto

package Test;
message TestData {
    optional int32 x = 1;
    optional string y = 2;
    optional bool z = 3;
}

ファイルの型はprotoファイルの記述を参考にしてください。


◆protocコマンドでスキーマ作成
$ protoc -o protos/test.desc protos/test.proto

これで前準備は完了です。

◆Nodeにnode-protobufのインストール
パッケージをインストールします。
package.jsonのdependenciesに

"dependencies": {
  "protobuf": "git://github.com/chrisdew/protobuf.git"
}

を付け足して

$ npm install


◆シリアライズ、デコードをする
プログラムtest.jsを作ります。

var fs = require('fs');
var path = require('path');
var Schema = require('protobuf').Schema;

var readFileSyncRelative = function(file) {
  return fs.readFileSync(path.resolve(__dirname, file));
};

var schema = new Schema(readFileSyncRelative('protos/test.desc'));
var Test = schema['Test.TestData'];

var fuga = {x:1, y:"fuga", z:true};

var testEncode = Test.serialize(fuga);
var testDecode = Test.parse(testEncode);
console.log(testDecode);

実行します。

$ node test.js

結果：
{ x: 1, y: 'fuga', z: true }

確認できました。

ソース：
Protocol Buffersを使う
protoファイルの記述
protobuf-for-node
◆「Protocol Buffersを使ってみる」の続きを閉じる◆