Yeoman.io を触ってみる

864 views
818 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
864
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Yeoman.io を触ってみる

  1. 1. 自己紹介
  2. 2. Name:佐川 夫美雄@albatrosaryhttp://albatrosary.hateblo.jp/Users Group:Tokyo.R/html5j.org/html5biz/JJUGNotes:最近、Ruby/Python/R言語/HTML5関連技術にはまってます。アジャイルスタイルも楽しいです。少し前までは OracleデータベースとJavaをやってました。
  3. 3. html5biz のスタッフをやってます。月1で勉強会を開催してますので、時間のある方はいらして下さい。
  4. 4. 月1でハンズオンを開催してます。時間のある方はいらして下さい。** 次回は 6/1/2013(土) です **
  5. 5. きっかけこの内容は 5/11/2013(土)に開催された HTML5ハンズオン で行った内容を記載しております。きっかけは「Chrome+HTML5 Developers Live Javan #4」です。直感的に「よさそう!」と思いました。
  6. 6. What s Yeoman ?Yeoman(今回のバージョンは 1.0)は ・Yo ・Grunt ・Bowerの3つのツールで構成される「Web App Development Through Tooling」です。
  7. 7. 準備・Node.js・Gitは必ず入れておく!必要であれば・Ruby・Compass
  8. 8. インストール簡単です!でも http://yeoman.io/ は読みましょう!
  9. 9. その他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の非同期ローディングとモジュール化を行うライブラリ
  10. 10. もちろん、使うテンプレートで必要な知識が異なります
  11. 11. 流れ(気軽に使うなら)1.yo webapp によるひな形の作成2.grunt server を使用しアプリケーションの開発3.grunt build によるリリースビルド
  12. 12. yo コマンドでアプリケーションのひな形を作ります。プロジェクト用のディレクトリを作成したあと、このコマンドを実行します(想像以上に多くのタスクを実行しています)。
  13. 13. なにやら終わったので ls
  14. 14. さて実行!次は grunt です!
  15. 15. これで、これです!
  16. 16. keynote だとこの凄さわからない・・・
  17. 17. 「Allo! Allo!」を適当に変えてみます
  18. 18. リロードされる!!
  19. 19. やっぱり keynote だとわからないですよね・・・
  20. 20. これは Yeoman に搭載されている LiveReload (http://livereload.com/) 機能のおかげです
  21. 21. さてリリースコマンドを実行すると dist ディレクトリに格納されますリリースのためのビルドでは JavaScript の min 化、画像の圧縮をしてもらえるます
  22. 22. HTML5になってロジカルな部分の多くがフロント(JavaScript,CSS)によっていってますので、今回やってませんが・Sass、CoffeeScriptのビルド・bower でのライブラリ管理・Unitテストを利用した場合にかなり威力を発揮するとツールです!!
  23. 23. インストールした Yeoman の中を覗く
  24. 24. node_modules となっている通り node が require でモジュールをサーチするディレクトリです(詳しくは node.js を参照願います)。検索順について node.js を引用します。Loading from `node_modules` Folders If the module identifier passed torequire() is not a native module, and does not begin with /, ../, or ./, thennode 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 notfound there, then it moves to the parent directory, and so on, until either themodule is found, or the root of the tree is reached.
  25. 25. ちなみに require で node が検索するディレクトリは
  26. 26. npm は Node.js のパッケージ管理(Node Packaged Modules)
  27. 27. yo のディレクトリ
  28. 28. readme.md はマークダウンファイル:markdown 記法で書かれたテキストファイルを、HTMLマークアップせずに HTMLに変換して表示してくれるもの
  29. 29. package.json は node に対し、プログラムとライブラリをディレクトリ内にまとめエントリポイントを示すためのもの中を見ると yo に対する様々な情報が記載されています
  30. 30. いろいろありますが!!
  31. 31. 続きは Web で!http://albatrosary.hateblo.jp/entry/2013/05/13/124501http://albatrosary.hateblo.jp/entry/2013/05/16/151324
  32. 32. ご清聴ありがとうございました

×