AngularHotkeys.jsの使い方

AngularJSを使ったWebアプリに対して、キーボード・ショートカットを簡単に組み込む事ができるAngularHotkeys.jsの使い方をメモしておく。

【事前準備】

1. GitHub - chieffancypants/angular-hotkeys: Configuration-centric keyboard shortcuts for your Angular apps.から必要なライブラリ（hotkeys.jsとhotkeys.css）を取得し、所定のフォルダに配置する
2. mousetrapが前提ライブラリとして必要なので、GitHub - ccampbell/mousetrap: Simple library for handling keyboard shortcuts in Javascriptからmousetrap.js、もしくはmousetrap.min.jsを取得し、所定のフォルダに配置する

　以上で準備は完了。

【使い方】
まず、ライブラリを読み込むために、htmlファイルに以下のように記述する。

<link rel='stylesheet' href='/stylesheets/hotkeys.css' />
<script src="/javascripts/mousetrap.min.js"></script>
<script src="/javascripts/hotkeys.js"></script>

次にAngularのコントローラのコードにショートカットの定義を記載する。
具体的には以下のような形になる。

var testApp = angular.module('testApp', ['cfp.hotkeys']);

testApp.controller('mainCtrl', function($scope, hotkeys) {
    $scope.score = 0;

    hotkeys.add({
        combo: 'ctrl+up',
        description: 'This is a test shortcut.',
        callback: function() {
            $scope.score += 1;
        }
    });
});

これで、完了。Webアプリの画面上でcontrolキーとupを押すと、スコアを1増やす事が出来るようになる。
なお、AngularHotkeys.jsはショートカットのチートシートを自動的に生成してくれて便利。「？」キーを押すと以下のようなチートシートが表示される。

【おまけ】
チートシートが不要な場合には以下のようにすれば良い。

var testApp = angular.module('testApp', ['cfp.hotkeys']).config(function(hotkeysProvider) {
    hotkeysProvider.includeCheatSheet = false;
});

より詳細はGitHub - chieffancypants/angular-hotkeys: Configuration-centric keyboard shortcuts for your Angular apps.を参考に。

VirtualBoxにOpenStack (Icehouse)をインストールした時のメモ

MacBook Pro上のVirtualBoxにOpenStackをインストールしたのだが、その際にやった事などを以下にメモしておく。また、基本的にはOpenStack QuickStart - Icehouseに従ってインストール出来たので、特筆すべきところだけ記載する。

【利用環境】
[ノートPC (MacBook Pro)]

• CPU: Intel Core i7 (2.3GHz)
• Memory: 8GB
• SSD: 256GB
• OS: OS X 10.9.4

[VirtualBox]

• Version: 4.3.12 r93733
• Guest OS: Fedora 20 x86_64

[OpenStack]

• 2014.4 Icehouse
• RDO & Packstack

【インストール時にやった事】
[仮想マシンの作成]
Fedora 20をインストールするための仮想マシンを作成。
基本的にOpenStack QuickStart - Icehouseの設定を踏襲。

[Fedoraのインストール]
hiroki.kanaの日常を参考に、ソフトウェアの選択は「最小限のインストール」を選択しアドオンの「標準」にチェックを入れてインストールを実施。

[Fedoraの設定]
インストール後のOSの設定もOpenStack QuickStart - Icehouseを踏襲。
なお、DEVICEは指定せず、上記に記載以外の値で元々ファイルに書かれていたものはそのまま残した。
また、ネットワークの設定でファイル名が異なる。私の環境では以下。

/etc/sysconfig/network-scripts/ifcfg-p2p1 (vboxnet0)
/etc/sysconfig/network-scripts/ifcfg-p7p1 (vboxnet1)
/etc/sysconfig/network-scripts/ifcfg-p8p1 (NAT)

[OpenStackのインストール]
OpenStack QuickStart - Icehouseを踏襲。
注意点はyum updateを実施しておかないとインストールエラーになるケースがあるということと、http://openstack.redhat.com/Quickstartを参考にSELinuxを無効にしておくという事。あと念のためiptablesもオフにした。
Packstackのインストールは以下のようにバージョン指定無しで実行した。

$ sudo yum install -y openstack-packstack

また、Packstackを利用してOpenStackをインストールする際にAnswerファイルは利用しなかった。

$ packstack --allinone

【インストール後にやった事】
OpenStack QuickStart - Icehouseを踏襲。
/etc/nova/nova.confの設定の所は、libvirt_typeではなくvirt_typeというキーになっていた。

インストール後にMacから以下のようにIPアドレス指定でHorizonにアクセスしようとすると404 Not Foundになった。

http://192.168.55.2/dashboard

/etc/httpd/conf.d/15-horizon_vhost.confを見るとServerAliasに192.168.55.2が追加されていなかったので、Macのhosterなどを使ってホスト名（今回はrdo）でアクセス出来るようにすると、Horizonにアクセス出来るようになった。

【参考サイト】

• hiroki.kanaの日常

Frisby.jsのTips（expectJSONとexpectJSONTypesのpath指定）

REST APIのテストフレームワークであるFrisby.jsのTipsを以下に記載する。
なお、Frisby.jsの導入に関しては「REST APIのテストをFrisbyで自動化する - アシアルブログ」が分かりやすい。

レスポンスとして返ってくるJSONを検証するためにexpectJSONとexpectJSONTypesという関数が用意されているが、第一引数に指定可能なpathの使い方を紹介する（pathは省略可能）。

【pathによるショートカット】

{
    "member": {
        "name": "tomute",
        "sex": "male"
    }
}

まず、上記のようなレスポンスが返って来るREST APIを検証する場合には以下のようなコードになる。

frisby.create('Test using a path as the paramater')
    .get('http://localhost:3000/test')
    .expectJSONTypes({
        "member": {
            "name": String,
            "sex": String
        }
    })
    .toss()

一方、pathはショートカットとして利用出来るので、以下のように書ける。
ネストを浅く出来るのでコードが少し見やすくなる。

frisby.create('Test using a path as the paramater')
    .get('http://localhost:3000/test')
    .expectJSONTypes('member', {
        "name": String,
        "sex": String
    })
    .toss()

更に以下のようなjsonで"profile"部分だけを検証したいというケースにも利用可能。

{
    "member": {
        "name": "tomute",
        "sex": "male",
        "profile": {
            "job": "engineer",
            "hobby": "ski"
        }
    }
}

具体的には以下のような形で書けば良い。

frisby.create('Test using a path as the paramater')
    .get('http://localhost:3000/test')
    .expectJSONTypes('member.profile', {
        "job": String,
        "hobby": String
    })
    .toss()

【pathによる配列のチェック】
以下のようにJSONに配列が含まれている場合、pathに"*"や"?"を指定することで、チェックを効率的に行う事が出来る。

{
    "member": [
        {
            "name": "tomute",
            "sex": "male"
        },
        {
            "name": "tom",
            "sex": "male"
        },
        {
            "name": "kate",
            "sex": "female"
        }
    ]
}

例えば全ての配列のTypeが正しい事をチェックする場合には以下のようなコードになる。

frisby.create('Test using a path as the paramater')
    .get('http://localhost:3000/test')
    .expectJSONTypes('member.*', {
        "name": String,
        "sex": String
    })
    .toss()

一方、配列のどこかに"tomute"がいる事をチェックする場合には以下のようなコードになる。

frisby.create('Test using a path as the paramater')
    .get('http://localhost:3000/test')
    .expectJSON('member.?', {
        "name": "tomute",
        "sex": "male"
    })
    .toss()

EasyMock Server (node-easymock) のTips

node.jsでWeb APIのモックを簡単に作ることが出来るEasyMock Server (node-easymock) のTipsを以下に記載しておく。

【待ち受けポート番号の変更】
easymockの待ち受けポート番号はデフォルトで3000番になっているが、これを変更したい場合には以下のように-pオプションでポート番号を明示的に指定する。

$ easymock -p 3001

【アクセスログの確認】
モックサーバのアクセスログはTerminalでも確認出来るのだが、http://localhost:3000/_logs/にアクセスする事でも確認出来る。

【ドキュメントのカスタマイズ】
http://localhost:3000/_documentation/ にアクセスすると、自動的に生成されたAPIのドキュメントを見ることが出来る。
このドキュメントにAPI共通の情報などを付加したい場合には、_documentationというフォルダを作成し、そこにindex.mdというファイルを置けばよい。

## ほげほげのAPI
### 注意事項
必ずx-auth-tokenヘッダにトークンを指定すること

例えば上記のような記述を書いておくと、以下のように表示される。

【バックグラウンドプロセス化】
Terminalを閉じてもEasyMock Serverを動かし続けるには、以下の様に普通にLinuxのプロセスバックグラウンド化で対応。他にもっと良いやり方ありそう。

$ easymock >/dev/null 2>&1 &

【参考記事】

• Web APIの開発に使えるモックサーバ·EasyMock Server MOONGIFT
• http://yogisuzu.sakura.ne.jp/yogiblog/?p=85
• APIのモックを簡単に作成できる「node-easymock」 - 大学生からの Web 開発
• Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog

Frisby.jsでHTTPのレスポンスヘッダの情報を取得する方法

「REST APIのテストをFrisbyで自動化する - アシアルブログ」にHTTPのレスポンスボディの情報を取得する方法は書かれていたのだが、レスポンスヘッダの情報を取得する方法が書かれていなかったので、以下にメモしておく。

まず、上記ブログにもあるように、HTTPのレスポンスボディの情報を取得する方法は以下。

frisby.create('Test to get http body information.')
  .get('http://hoge.com/foo.json')
  .afterJSON(function(body) {
    frisby.create('Test to use use http body information.')
      .get('http://hoge.com/boo', {data: body})
      .... // do something.
      .toss();
  })
  .toss();

一方、HTTPのレスポンスヘッダの情報を取得する場合は以下のようになる（例はContent-Typeの情報を取得している）。
ポイントはafterJSON()の変わりにafter()を使う所。

frisby.create('Test to get http header information.')
  .get('http://hoge.com/foo.json')
  .after(function(err, res, body) {
    frisby.create('Test to use use http header information.')
      .get('http://hoge.com/boo', {contentType: res.headers['Content-Type']})
      .... // do something.
      .toss();
  })
  .toss();

Express入門をexpress 4.xで学ぶ場合のメモ

http://dotinstall.com/lessons/basic_expressjsはExpress 3.xが前提となっているのだが、Express 4.xで学ぶ場合には少し気をつけなければならない所があるので、以下にメモしておく。
【補足】
この記事を書いた時から更に変更が加わっているため、本記事のコメントも参考にして下さい。

http://dotinstall.com/lessons/basic_expressjs/26502
上記はexpressコマンドの使い方を学ぶ章であるが、Express 4.x以降はexpressコマンドのインストール方法が変わっているので注意が必要である。

$ sudo npm install express -g

演習では上記のコマンドを叩いているが、Express 4.x以降は以下のコマンドも実行する必要があった。

$ sudo npm install express-generator -g

$ node app

また、expressコマンドで作成したひな形アプリを起動するのに上記のコマンドを叩いているが、以下のコマンドに変更する必要がある。

$ npm start

http://dotinstall.com/lessons/basic_expressjs/26503
app.jsの内容を一部修正する必要がある。具体的には以下。

var express = require('express'),
    app = express();
 
// app.use(app.router); この行が不要になった
 
app.get('/', function(req, res) {
    res.send('hello world');
});
app.get('/about', function(req, res) {
    res.send('about this page!');
});
 
app.listen(3000);
console.log("server starting...");

http://dotinstall.com/lessons/basic_expressjs/26506
レッスンではmiddlewareが有効になるかどうかは、app.use(app.router)より前か後ろかで決まるとなっている。
しかし、Express 4.xではapp.use(app.router)の記載が不要になっているので、middlewareが有効になるかどうかはapp.get()より前か後ろかで決まる模様。

http://dotinstall.com/lessons/basic_expressjs/26507
ログ情報をターミナルに出力するmiddleware（logger）はexpressにバンドルされなくなったようなので、後継であるmorganを使う（GitHub - expressjs/morgan: HTTP request logger middleware for node.js）。具体的には、まず以下のコマンドでmorganをインストール。

$ npm install morgan

次にコードを以下のように変更する。

var express = require('express'),
    morgan = require('morgan'),
    app = express();
 
// middleware
// app.use(express.logger('dev'));
app.use(morgan());  // app.use(morgan('short')); 等とするとログの出力量を減らすことが出来る。

なお、Migrating from 3.x to 4.xによると、自分で作るmiddlewareはapp.get()やapp.post()より後ろに記載すべきとなっている。

http://dotinstall.com/lessons/basic_expressjs/26510
jsonとurlencodedの両middlewareもexpressにバンドルされていないので、後継であるbody-parserを使う。

$ npm install body-parser

コードは以下。

var express = require('express'),
    bodyParser = require('body-parser'),
    morgan = require('morgan'),
    app = express(),
    post = require('./routes/post');

// middleware
// app.use(express.json());
// app.use(express.urlencoded());
app.use(bodyParser());

http://dotinstall.com/lessons/basic_expressjs/26512
express.methodOverride()もexpressにバンドルされていないのでmethod-overrideもインストールする。

$ npm install method-override

コードは以下。

var express = require('express'),
    bodyParser = require('body-parser'),
    methodOverride = require('method-override'),
    morgan = require('morgan'),
    app = express(),
    post = require('./routes/post');

// middleware
// app.use(express.json());
// app.use(express.urlencoded());
// app.use(express.methodOverride());
app.use(bodyParser());
app.use(methodOverride());

http://dotinstall.com/lessons/basic_expressjs/26520
ここでも同様にexpress.cookieParser()、express.session({secret: '***********'})、express.csrf()が使えないので、それぞれcsurf、express-session、cookie-parserをインストールする。コードは割愛。

【参考資料】

• Migrating from 3.x to 4.x · expressjs/express Wiki · GitHub

GitHub + Travis CI + CoverallsでJavaプログラムのカバレッジ計測をする方法

Travis CIとCoverallsを使って、GitHubに公開しているJavaプログラムのカバレッジを測定する方法を以下に記載する（Mavenで管理されたJavaプロジェクトを想定）。

Travis CIとCoverallsの連携にはCoverallsの公式ページ（以下）で紹介されているcoveralls-maven-pluginを利用した。

• Coveralls Docs

ステップ1（事前準備）
GitHubとTravis CIの連携は以下のサイト等を参考に実施しておく。

• GithubにあるリポジトリをTravis CI連携する手順 #junitbook - くりにっき

また、Coverallsのサイトにログインして、カバレッジ計測対象のGitHubリポジトリを有効化しておく。

ステップ2（pom.xmlの編集）
Javaプロジェクトのpom.xmlに以下を追加する。

<plugin>
    <groupId>org.eluder.coveralls</groupId>
    <artifactId>coveralls-maven-plugin</artifactId>
    <version>2.2.0</version>
</plugin>

GitHubのcoveralls-maven-pluginのREADMEを見ると、CoverallsのRepo Tokenも書いているが、GitHubの公開リポジトリを利用している場合には、記載してはダメのようだ。

次にpom.xmlに以下のような記載を追加することで、利用するカバレッジ測定ツールを指定する（以下はCoberturaの例）。JaCoCo等を使う場合にはcoveralls-maven-pluginのREAMMEを参照。

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>cobertura-maven-plugin</artifactId>
    <version>2.6</version>
    <configuration>
        <format>xml</format>
        <maxmem>256m</maxmem>
        <!-- aggregated reports for multi-module projects -->
        <aggregate>true</aggregate>
    </configuration>
</plugin>

ステップ3（.travis.ymlの編集）
GitHubとTravis CI連携用に.travis.ymlファイルを作成していると思うが、その.travis.ymlに以下を追加する。

after_success:
  - mvn clean cobertura:cobertura coveralls:cobertura

以上で準備は完了。
GitHubにソースコードをpushすると、自動的にTravis CIでビルドとテストが走り、その後テストデータがCoverallsに自動転送され、テストの統計データを見られるようになる。
CoverallsのプロジェクトページのTECHNICAL DETAILSにバッジが表示されているが、以下のようにカバレッジ率が表示されていれば（unknownじゃなくなっていれば）連携成功である。