PhoneGap Command-line InterfaceでHello World

satkakuです。

PhoneGapは、iOSやらAndroidやらで動くハイブリッドアプリをごにょっと作れるフレームワークですが、気付けばnpmからインストールできるようになったので、試してみました。

ちなみに、環境はMac(OS X 10.8.4)です。

まずはnpmでPhoneGapをインストールします。

% npm install -g phonegap

% phonegap --version
3.0.0-0.14.3

早速、サンプルアプリを作ってみます。

% phonegap create hello com.example.hello HelloWorld
% cd hello

今回はiOS向けにビルド。

% phonegap build ios

シミュレーターで動かしてみます。

% phonegap run ios

すると、ios-simが無いよ！ と怒られるので、Homebrewから入れてあげます。

% brew install ios-sim

気を取り直して走らせてみます。

% phonegap run ios

できた！

ここらでどういった中身になっているのか見てみます。

% tree -L 2
.
├── merges
│   └── ios
├── platforms
│   └── ios
├── plugins
│   └── ios.json
└── www
    ├── config.xml
    ├── css
    ├── icon.png
    ├── img
    ├── index.html
    ├── js
    ├── res
    ├── spec
    └── spec.html

ここから先は、pluginやらを色々入れていく感じっぽいですが、今日はここまでです。
ちなみにドキュメントはここにあります。

Node.jsで形態素解析

satkakuです。
Node.jsで形態素解析をしたかったので、そのメモです。

まずは、何はともあれ、形態素解析エンジンのMeCabを入れます。
MacでHomebrewを使っていればすぐです。

% brew install mecab
% brew install mecab-ipadic

mecab-ipadicは形態素解析の辞書となるので、併せてinstallしておきます。

とりあえず試してみましょう。

% mecab
吾輩は猫である。名前はまだ無い。
吾輩	名詞,代名詞,一般,*,*,*,吾輩,ワガハイ,ワガハイ
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
猫	名詞,一般,*,*,*,*,猫,ネコ,ネコ
で	助動詞,*,*,*,特殊・ダ,連用形,だ,デ,デ
ある	助動詞,*,*,*,五段・ラ行アル,基本形,ある,アル,アル
。	記号,句点,*,*,*,*,。,。,。
名前	名詞,一般,*,*,*,*,名前,ナマエ,ナマエ
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
まだ	副詞,助詞類接続,*,*,*,*,まだ,マダ,マダ
無い	形容詞,自立,*,*,形容詞・アウオ段,基本形,無い,ナイ,ナイ
。	記号,句点,*,*,*,*,。,。,。
EOS

Node.jsから呼び出したいので、適当なディレクトリをつくって、mecab.jsというファイルを作成します。
今回は、node-mecab-asyncを使用するので、これもnpmでinstallしておきます。

% npm install mecab-async

そして、mecab.jsの中身を書きます。

var MeCab = new require('mecab-async')
,mecab = new MeCab()
,src = '吾輩は猫である。名前はまだ無い。';

mecab.parse(src, function(err, result) {
	if (err) { throw err; }
	console.log("\n parse -----------------------")
	console.log(result);
});

mecab.wakachi(src, function(err, result) {
	if (err) { throw err; }
	console.log("\n wakachi -----------------------")
	console.log(result);
});

最後に実行して確認です。

% node mecab.js

 parse -----------------------
[ [ '吾輩', '名詞', '代名詞', '一般', '*', '*', '*', '吾輩', 'ワガハイ', 'ワガハイ' ],
  [ 'は', '助詞', '係助詞', '*', '*', '*', '*', 'は', 'ハ', 'ワ' ],
  [ '猫', '名詞', '一般', '*', '*', '*', '*', '猫', 'ネコ', 'ネコ' ],
  [ 'で', '助動詞', '*', '*', '*', '特殊・ダ', '連用形', 'だ', 'デ', 'デ' ],
  [ 'ある', '助動詞', '*', '*', '*', '五段・ラ行アル', '基本形', 'ある', 'アル', 'アル' ],
  [ '。', '記号', '句点', '*', '*', '*', '*', '。', '。', '。' ],
  [ '名前', '名詞', '一般', '*', '*', '*', '*', '名前', 'ナマエ', 'ナマエ' ],
  [ 'は', '助詞', '係助詞', '*', '*', '*', '*', 'は', 'ハ', 'ワ' ],
  [ 'まだ', '副詞', '助詞類接続', '*', '*', '*', '*', 'まだ', 'マダ', 'マダ' ],
  [ '無い', '形容詞', '自立', '*', '*', '形容詞・アウオ段', '基本形', '無い', 'ナイ', 'ナイ' ],
  [ '。', '記号', '句点', '*', '*', '*', '*', '。', '。', '。' ] ]

 wakachi -----------------------
[ '吾輩', 'は', '猫', 'で', 'ある', '。', '名前', 'は', 'まだ', '無い', '。' ]

とりあえずのメモですが、これで、吾輩も猫もばらし放題です。

StyleDoccoでスタイルガイドを作る

こんにちは iijmyaです。

今回はスタイルガイドを作成できる「StyleDocco」をご紹介します。

1．スタイルガイドとは

ページの部品（ボタンなど）について実際にどのような見た目になるのかについて、一覧にまとめるものとなります。

2．StyleDoccoでスタイルガイドを作る

「StyleDocco」は、CSSファイルにコメント形式でコンポーネントの説明とHTMLを書き込むとスタイルガイドを生成してくれる、node.jsで実装されたスタイルガイドジェネレータです。

■ StyleDoccoのインストール

それでは早速、ターミナル上で以下のコマンドを打ち、StyleDoccoをインストールしましょう。
※ StyleDoccoをインストールするには、事前に「node.js」とパッケージ管理ツール「npm」がインストールされている必要があります。

$ sudo npm install -fg styledocco

■ StyleDoccoの対象ディレクトリを作成する

まずは任意の場所に、スタイルガイドを生成する対象のCSSファイルを置くディレクトリを作成しておきましょう。
今回は以下のようなディレクトリ構造にします。

styledocco
┗css
　┗test.css

■ CSSファイルの作成

それでは実際にtest.cssファイルにCSSを書いてみましょう。

@charset "utf-8";
/*
# スタイルガイド
## 見出し
### 大見出し
 
大見出しは`div.headLine`をベースに、`.bigHl`を付与する。
 
```
<div class="headLine bigHl">
  <p>大見出し</p>
</div>
```

### 中見出し
中見出しは`div.headLine`をベースに、`.middleHl`を付与する。
```
<div class="headLine middleHl">
  <p>中見出し</p>
</div>
```

## ボタン
### 送信ボタン
送信ボタンは`input`に、`.sendBtn`を付与する。
```
<input class="sendBtn" type="submit" value="送  信" />
```
*/

.headLine {
	width: 100%;
	padding: 0;
	margin-bottom: 0;
}

.headLine p {
	font-weight: bold;
	margin: 5px;
}


.bigHl {
	border-left: 13px solid #FF9900;
	border-bottom: 3px solid #FF9900;
}

.bigHl p {
	color: #555;
	margin: 0;
	margin-left: 10px;
	font-size: 24px;
}

.middleHl p {
	color: #555;
	font-size: 20px;
}

.middleHl p:before {
	color: #FF9900;
	content: "■ ";
}

.sendBtn {
	width: 130px;
	height: 45px;
	font-size: 18px;
	border: 0;
	border-radius: 7px;
	padding: 7px 25px;
	background: #f08300;
	color: #fff;
	display: inline-block;
}

.sendBtn:hover {
	background-color: #ff8f1f;
}

.sendBtn:active {
	background-color: #e07300;
}

コメント内の「#」はスタイルガイド上の見出しを表します。
コメント内の「```」で囲まれたHTMLが、スタイルが反映されるコンポーネントになります。

■ スタイルガイドの生成

さて、CSSファイルが作成出来たので、いよいよスタイルガイドを生成しましょう。
ターミナル上で、先ほど作成したstyledoccoディレクトリに移動し、以下のコマンドを実行します。

$ styledocco -n "Style Guide" ./css/test.css

• nオプションにはプロジェクト名を指定します。

上記コマンドを実行すると、styledoccoディレクトリ下にdocsディレクトリが生成され、以下のようなディレクトリ構造になっているはずです！

styledocco
┗css
　┗test.css
┗docs
　┗index.html
　┗test.html

■ スタイルガイドの完成

docs内のtest.htmlを見てみると、以下のようなスタイルガイドになっていると思います。

以上のように、コメントとCSSだけで、一瞬でスタイルガイドが作れちゃうんです。便利ですね・・
これならスタイルガイドの更新も簡単ですし、CSSと一緒に実際の見栄えも確認できるので、共有もしやすいですね。

three.jsでWebGL入門

ご無沙汰しています iijmyaです
3ヶ月ぶりの更新です。すみません・・

先日、私はWebGLのJavaScriptライブラリである、「three.js」を使う機会がありました。
そこで、今回はthree.jsについてご紹介します！

1．WebGLとは

そもそもWebGLとは何なのでしょうか。

WebGLとは、ウェブブラウザ上で3次元空間を作り、仮想的な立体物を表示させるための標準仕様です。
WebGLは、2013年8月21日現在、Internet Explorerではバージョン10以下がサポートされていないため、Google Chromeでの閲覧が望ましいです

2．three.jsで3Dオブジェクトを描く（下準備）

それでは早速、three.jsを使ってWebGLを体験してみましょう！

■ three.jsのダウンロード

three.jsはこちらからダウンロードすることができます。

■ three.jsのjsファイルを読み込む

ダウンロードしたzipファイルを解凍すると、buildディレクトリの中に以下のファイルがあります。

• three.js
• three.min.js

今回は「three.min.js」をHTMLファイル内で読み込み、three.jsを使いましょう。

<script src="three.min.js"></script>

2．three.jsで3Dオブジェクトを描く

■ オブジェクトの描画工程

three.jsは内部的にcanvas要素を生成し、そこにオブジェクト(仮想的な立体物)を描画します。

オブジェクトを描画するには、以下の様な工程を踏みます。（場合によって順序が前後したり、省略する工程もあります）

• シーンの作成
• 表示するオブジェクトの作成
• カメラの作成
• 光源の作成
• レンダラの作成
• レンダリング

■ 変数の定義

あらかじめ使用する値を変数に格納しておきましょう。

var width  = 600;            //横幅
var height = 600;            //縦幅
var fov    = 80;             //画角
var aspect = width / height; //画面アスペクト比
var near   = 1;              //クリッピング手前
var far    = 1000;           //クリッピング奥

■ シーンの作成

描画対象となる物体やその他のオブジェクトを格納するSceneクラスのインスタンスを作成します。
以降で作成するオブジェクトはすべてこのインスタンスに追加していき、最後にそれをレンダラに渡して描画します。

var scene = new THREE.Scene();

■ 表示するオブジェクトの作成

実際に表示したいオブジェクトをシーンに追加します。
three.jsでは、表示するオブジェクトは以下の3つの要素で構成されます。

• 形状 (Geometry)
• 質感 (Material)
• 実際に表示するオブジェクト (Mesh)

var geometry = new THREE.CubeGeometry(300, 300, 300); //幅、高さ、奥行きの指定
var material = new THREE.MeshLambertMaterial( { color: 0x77dd00 } ); //オブジェクトの色の指定
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

■ カメラの作成

シーン内のどこから見た風景を描画するかを指定するカメラを作成し、シーンに追加します。

var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 500;

■ 光源の作成

オブジェクトを照らす光源をシーンに追加します。
光源を追加することで、オブジェクトの角度により明暗が出るため、より立体的に見えます！

var light = new THREE.DirectionalLight( 0xffffff, 3 ); //光の色と強さの指定
light.position.z = 3;
scene.add( light );

■ レンダラの作成

オブジェクトの描画処理を担うレンダラを初期化します。
描画領域のサイズなどを設定したあと、描画領域となるDOM要素を取得し、ドキュメントの任意の位置に挿入します。

var renderer = new THREE.WebGLRenderer({ antialias:true }); //アンチエイリアス処理有効
renderer.setSize( width, height ); //描画領域のサイズ設定
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );

■ レンダリング

以上の工程で表示させるシーンの準備が整ったのでレンダリングします。
静止画をただ描画するだけでは3D感が薄いので、今回はオブジェクトを回転させてみましょう。
オブジェクトの角度を変更するにはrotationプロパティを使用します。

function rendering(){
　mesh.rotation.x += 0.01;
　mesh.rotation.y += 0.01;
　renderer.render( scene, camera );
　setTimeout(rendering, 15);
}

rendering();

■ まとめ

<html>
<head>
  <meta charset="utf-8" />
  <title>three.jsでWebGL入門</title>
</head>
<body>
  <script src="./js/three.min.js" type="text/javascript"></script>
  <script>
  	var width  = 600;            //横幅
	var height = 600;            //縦幅
	var fov    = 80;             //画角
	var aspect = width / height; //画面アスペクト比
	var near   = 1;              //クリッピング手前
	var far    = 1000;           //クリッピング奥

	//------------------------------
	// シーンの作成
	//------------------------------
	var scene = new THREE.Scene();
	
	//------------------------------
	// 表示するオブジェクトの作成
	//------------------------------
	var geometry = new THREE.CubeGeometry(300, 300, 300); //幅、高さ、奥行きの指定
	var material = new THREE.MeshLambertMaterial( { color: 0x77dd00 } ); //オブジェクトの色の指定
	var mesh = new THREE.Mesh(geometry, material);

	scene.add(mesh);

	//------------------------------
	// カメラの作成
	//------------------------------
	var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );

	camera.position.z = 500;

	//------------------------------
	// 光源の作成
	//------------------------------
	var light = new THREE.DirectionalLight( 0xffffff, 3 ); //光の色と強さの指定
	light.position.z = 3;
	scene.add( light );

	//------------------------------
	// レンダラの作成
	//------------------------------
	var renderer = new THREE.WebGLRenderer({ antialias:true }); //アンチエイリアス処理有効
	renderer.setSize( width, height ); //描画領域のサイズ設定
	document.body.appendChild( renderer.domElement );
	renderer.render( scene, camera );

	//------------------------------
	// レンダリング
	//------------------------------
	function rendering(){
		mesh.rotation.x += 0.01;
		mesh.rotation.y += 0.01;
		renderer.render( scene, camera );
		setTimeout(rendering, 15);
	}

	rendering();
  </script>
</body>
</html>

さて、ここまで書いたらHTMLファイルをブラウザ上で表示してみましょう。
くるくる回る立方体が表示されるはずです！

いかがでしたでしょうか。
WebGLのJavaScriptライブラリ「three.js」でグラフィックの表現の幅が広がりますね。

タスクボードの活用

こんにちは iijmyaです。

私たちWebサービス事業部は、毎週金曜日にその週のフィードバックミーティング（以下、FBMTG）を行っています。

以前、FBMTGを通して挙がった問題の中に「タスクが見えにくい」というものがありました。
この問題の解決策として導入したのが、タスクボードです！

手作り感が溢れていますね。

タスクの状況によって各エリアに振り分けを行います。

• ToDoエリア…直近でやるタスクを振り分ける
• Doingエリア…現在実行中のタスクを振り分ける
• Doneエリア…完了したタスクを振り分ける

ちなみにタスクボードの下にはバックログエリアがあり、直近のToDoタスク以外をここに置いています。

それぞれのタスクシートはこのように記入しています。

タスクを実行した日付と実行者のアイコン、見積もり時間と実績時間を記入しています。
あえて実行者名ではなくアイコンであるのは、決して名前を書くのが面倒だという訳ではなく、遊び心です。

このタスクボードを導入することでタスクが見える化し、お互いのタスク状況を把握しやすくなり、
また、見積もりと実績の差も見てすぐわかるようになりました。

最悪、紙とペンさえあれば、今からでも出来るタスクボード。皆さんも試してみてはいかがでしょうか。

パララックス効果を実現したページをscrolldeckで実現

こんにちは iijmyaです。

今回はscrolldeckを利用して、パララックス効果を実現してみましょう。

1．パララックス効果とは

パララックス(parallax)とは、直訳すると「視差」という意味です。
Web上で言われるパララックス効果とは、ページをスクロールする際に、画像や文字などが異なるスピードやタイミングで動作することを指します。

２．パララックス効果を実現する

言葉だけではなかなか想像し辛いと思いますので、実際にパララックス効果を実現したページを作ってみましょう。

■ scrolldeckのダウンロード

scrolldeck*1はこちらからダウンロードすることができます。

■ scrolldeckのjsファイルを読み込む

scrolldeckを用いるには、以下のファイルを読み込みます。

• jquery.easing.1.3.js
• jquery.min.js
• jquery.scrolldeck.js
• jquery.scrollorama.js
• jquery.scrollTo-1.4.2-min.js

<script type="text/javascript" 
　src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" 
　charset="utf-8"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/jquery.scrolldeck.js"></script>

■ナビゲーションの初期化

$(document).ready(function() {
　var deck = new $.scrolldeck({
　　slides: '.slide'
　});
});

この他にも「buttons」や「duration」などのオプションを指定することが出来ます。

■対象モジュールにマークアップ

あとは、複数モジュールの親モジュールのclass属性の値に「slide」を指定して構成を作り、各モジュールに対して、「class=”animate-in”」や「data-animation」属性などの属性や属性値を付けてあげるだけです。

<div class="slide" id="para">
　<p  class="title animate-in" data-animation="fade-in">Parallax.</p>
　<p class="main animate-in" data-animation="fly-in-left">〜略〜</p>
　<div class="img animate-in" data-animation="fly-in-right">
　　<img src="./img/sample.jpg" />
　</div>
</div>

data-animation属性の値によってパララックス効果が異なります。
　＜例＞

• "fly-in-left"…対象モジュールが左側から現れる
• "space-in"…対象モジュールが拡大された状態から現れる
• "fade-in"…対象モジュールがフェードインする

■イメージ画

スクロールしていくと・・・

以上です。
使い込めばかっこいいページを作ることが出来そうですね。

*1:scrolldeck…jQueryのプラグインのひとつ

gruntからrsyncする(syncDestIgnoreExclの話)

satkakuです。

gruntからrsyncしたいなーと思ってたら、案の定既にあったので、grunt-rsyncを試してみました。

• 使い方

とりあえずインストールします。

% npm install grunt-rsync

Gruntfile.jsを以下のように書きます。

module.exports = function(grunt){
  grunt.initConfig({
    rsync: {
      dist: {
        src: "./",
        dest: "~/hoge",
        host: "remote",
        recursive: true,
        syncDest: true,
        exclude:[ "test/*" ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-rsync');
  grunt.registerTask('deploy', ['rsync']);
};

excludeには、同期に含めたくないファイルのパターンを記述します。
これで、後は以下のコマンドを実行すれば終了です。

% grunt deploy

簡単！

とはいえ、いきなりリモートにぶん投げるのは怖いので、dry-runで一覧だけ見たいところです。

module.exports = function(grunt){
  grunt.initConfig({
    rsync: {
      dist: {
        src: "./",
        dest: "~/hoge",
        host: "remote",
        recursive: true,
        syncDest: true,
        dryRun: true,
        exclude:[ "test/*" ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-rsync');
  grunt.registerTask('deploy', ['rsync']);
};

dryRunを指定してあげれば、リモートとの差分を一覧で出してくれます。簡単！

……ですが、実際に吐き出されたrsyncのコマンドは以下となっています。

rsync ./ remote:~/hoge --rsh=ssh --recursive --delete --delete-excluded --dry-run --verbose --exclude=test/*

delete-excludedがついちゃっています。delete-excludedが指定されていると、excludeで指定しているものについても、リモート上にあれば削除してしまいます。
例えば、ログファイルなど、リモートに同期したくないファイルをexcludeで指定していても、delete-excludedがついていることによりリモート上のファイルが消えてしまう結果になってしまいます。これは困る。

どうしようと思ってREADMEを見てみると、細かいオプションはrsyncwrapper使ってるから、そっちのドキュメント見てね、と書いてあります。

ということでrsyncwrapperを見てみると、syncDestIgnoreExclというオプションを使えばそんな感じのことが出来そうです。

これだ！　と早速試してみますが、うまく行きません。何故？ と思って、grunt-rsyncの中にあるnode_modulesを見てみると、中にあるrsyncwrapperのバージョンが0.0.12となっています。GitHubのコミットログを見ると、syncDestIgnoreExclが追加されたのはその後……！

##################################

ということで、grunt-rsyncのところで、npm installをして、rsyncwrapperを最新の0.0.13にします。
これで行けるはず！

module.exports = function(grunt){
  grunt.initConfig({
    rsync: {
      dist: {
        src: "./",
        dest: "~/hoge",
        host: "remote",
        recursive: true,
        syncDestIgnoreExcl: true,
        dryRun: true,
        exclude:[ "test/*" ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-rsync');
  grunt.registerTask('deploy', ['rsync']);
};

rsync ./ remote:~/hoge --rsh=ssh --recursive --delete --dry-run --verbose --exclude=test/*

消えた！　これで、ログファイルなどに関しても同期に含めないようにしつつ、リモートのファイルも削除しないように出来ました。

めでたし。