自己紹介

Name:

佐川　夫美雄@albatrosary

http://albatrosary.hateblo.jp/

Users Group:Tokyo.R/html5j.org/html5biz/JJUG

Notes:最近、Ruby/Python/R言語/HTML5関連技術にはまってます。アジャイルスタイルも楽しいです。少し前までは OracleデータベースとJavaをやってました。

html5biz のスタッフをやってます。月１で勉強会を開催してますので、時間のある方はいらして下さい。

月１でハンズオンを開催してます。時間のある方はいらして下さい。** 次回は 6/1/2013(土) です **

きっかけ

この内容は 5/11/2013(土)に開催された HTML5ハンズオン で行った内容を記載しております。きっかけは「Chrome+HTML5 Developers Live Javan #4」です。直感的に「よさそう！」と思いました。

What’s Yeoman ?

Yeoman（今回のバージョンは 1.0）は　・Yo　・Grunt　・Bowerの３つのツールで構成される「Web App Development Through Tooling」です。

準備

・Node.js・Gitは必ず入れておく！必要であれば・Ruby・Compass

インストール簡単です！

でも http://yeoman.io/ は読みましょう！

その他1.CoffeeScript (http://coffeescript.org/):JavaScript を Ruby っぽくした言語2.Sass (http://sass-lang.com/):CSS ファイルを作成するために扱うプログラムのようなもの（Ruby が必要）

3.Compass (http://compass-style.org/):CSS オーサリングフレームワーク。Sass ベースの Sass をより便利に使えるようになったものが compass です（Rubyが必要）

4.Angular (http://angularjs.org/):JavaScript の MVCフレームワーク5.PhantomJS (https://code.google.com/p/phantomjs/):WebKitをヘッドレス化してJavaScript API を利用できるようにしたツール

6.Mocha (http://visionmedia.github.io/mocha/):Node.js 上もしくはブラウザ上で動く JavaScript テストフレームワーク

7.Twitter BootStrap (http://twitter.github.io/bootstrap/):Twitter社が提供するCSSフレームワーク

8.RequireJS (http://requirejs.org/):JSの非同期ローディングとモジュール化を行うライブラリ

もちろん、使うテンプレートで必要な知識が異なります

流れ（気軽に使うなら）

1.yo webapp によるひな形の作成2.grunt server を使用しアプリケーションの開発3.grunt build によるリリースビルド

yo コマンドでアプリケーションのひな形を作ります。プロジェクト用のディレクトリを作成したあと、このコマンドを実行します（想像以上に多くのタスクを実行しています）。

なにやら終わったので ls

さて実行！次は grunt です！

これで、これです！

keynote だとこの凄さわからない・・・

「Allo! Allo!」を適当に変えてみます

リロードされる！！

やっぱり keynote だとわからないですよね・・・

これは Yeoman に搭載されている LiveReload (http://livereload.com/) 機能のおかげです

さてリリースコマンドを実行すると dist ディレクトリに格納されますリリースのためのビルドでは JavaScript の min 化、画像の圧縮をしてもらえるます

HTML5になってロジカルな部分の多くがフロント（JavaScript,CSS）によっていってますので、今回やってませんが・Sass、CoffeeScriptのビルド・bower でのライブラリ管理・Unitテストを利用した場合にかなり威力を発揮するとツールです！！

インストールした Yeoman の中を覗く

node_modules となっている通り node が require でモジュールをサーチするディレクトリです（詳しくは node.js を参照願います）。検索順について node.js を引用します。

Loading from `node_modules` Folders If the module identifier passed to require() is not a native module, and does not begin with '/', '../', or './', then node starts at the parent directory of the current module, and adds /node_modules, and attempts to load the module from that location. If it is not found there, then it moves to the parent directory, and so on, until either the module is found, or the root of the tree is reached.

ちなみに require で node が検索するディレクトリは

npm は Node.js のパッケージ管理（Node Packaged Modules）

yo のディレクトリ

readme.md はマークダウンファイル：markdown 記法で書かれたテキストファイルを、HTMLマークアップせずに HTML に変換して表示してくれるもの

package.json は node に対し、プログラムとライブラリをディレクトリ内にまとめエントリポイントを示すためのもの

中を見ると yo に対する様々な情報が記載されています

いろいろありますが！！

続きは Web で！

http://albatrosary.hateblo.jp/entry/2013/05/13/124501http://albatrosary.hateblo.jp/entry/2013/05/16/151324

ご清聴ありがとうございました