つかってみよう!Yeoman 〜riaビルドツール超入門+α〜

1,788 views

Published on

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,788
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
15
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

つかってみよう!Yeoman 〜riaビルドツール超入門+α〜

  1. 1. Yeoman RIA ビルドツール超入門+α JS MEET UPVol.1 2013.6.29 Bathtimefish 村岡 正和 つかってみよう!
  2. 2. 自己紹介 Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス ティバル実行委員など むらおか まさかず 村岡正和 @bathtimefish http://html5-west.jp/ HTML5-WEST.jp HTML5 JavaScript 中国拳法 Python 主夫になりたい 炊事 Google Apps
  3. 3. 監修しました。 実例ごとの実装例がたくさん書いてあ ります。ウェブサイト制作やCMSの運 用時に便利です。 好評販売中!!
  4. 4. マークアップ部発足! html5j.org 初代 部長になりました。
  5. 5. <htmlday> <htmlday> 凸撃生放送舞台裏 Photoレポート:世界のITエキスパートたちを捕獲! 凸撃インタビュー - @IT http://bit.ly/ZGGQA3
  6. 6. 今日のおはなし HTML5でイマドキっぽいWebサイ トやWebアプリをつくるときにいろ いろメンドイことがあって、
  7. 7. 今日のおはなし メンドイことがいい感じに自動的に なったりしたらめんどくなくていい んだけどナンかいいのない?
  8. 8. 今日のおはなし それ、Yeomanでできるよ。 というおはなし。 Yoemanつかったことない人向けに カンタンな紹介をします。 あと、実用的なこともすこし。
  9. 9. おはなしの流れ •制作でめんどうなこといろいろあるよね •セットアップ •Yeomanを構成するツール •実際に使ってみる •とりあえず覚えておくコマンド •応用編 Tips
  10. 10. 制作でめんどうなこといろいろあるよね?
  11. 11. コード書く前の準備いろいろ • ディレクトリ構成 • ローカルWebサーバー • クロスプラットフォームなページのスケルトン。 ベストプラクティスなやつ。 • いいかんじのライブラリとかプラグインさがすの etc...
  12. 12. コード書き中のいろいろ • Save Reload Save Reload Save Reload... • CoffeeとかSassとかのコンパイル • テストの実行 • 最適化、軽量化 • ライブラリやフレームワークのアップデート etc...
  13. 13. このオッサンがテキトーにやります。
  14. 14. Yeoman
  15. 15. http://yeoman.io/
  16. 16. Yeoman s service デキるオッサン い ざ と い う と き の 際 立 っ た 働 き
  17. 17. こんな人にモロ刺さります。 • 制作テンプレ持ってない。つーか作るのメンドイ • 最近JavaScript書いてない。Coffee依存症 • 最適化・軽量化に細かいこだわりはない。いい感じ にやってほしい • Sass最高ヒャッハー! • もうCompassでいいです • もうBootstrapでいいです こんなの
  18. 18. まずはつかってみる
  19. 19. セットアップ
  20. 20. 黒い画面で、
  21. 21. npm install -g yo grunt-cli bower ※ grunt0.3以前をインストールしている場合、アンインストールしておく。
  22. 22. ...と、そのまえに入れておくもの。 node.js (>=0.8.0) ruby compass ※ compass はgemで、node.jsは nodebrewが個人的にオススメ http://compass-style.org/ https://github.com/hokaccha/nodebrew
  23. 23. Yeomanを構成するツール yo grunt bower scaffolding preview, build, test package management
  24. 24. Yo •Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのscaffoldingが可能。 HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。
  25. 25. Bower •JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管 理に便利。
  26. 26. Grunt •JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、フ ァイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神!
  27. 27. 実際につかってみるとわかるけど、 裏ではGruntが 相当がんばっている! コーディング中にお世話になるのはほとんどGrunt
  28. 28. Gruntfile.js 詳しくは公式で学びましょう http://gruntjs.com/
  29. 29. あと実は最初、、、 Bower要らないと思ってました サーセン! トリも食ってみるとウマかったです
  30. 30. component を検索してみよう http://sindresorhus.com/bower-components/
  31. 31. まずはこれだけ覚えよう! $ yo webapp $ grunt server はじめる前のじゅもん リリースのじゅもん $ grunt build or $ grunt server:dist まずは Designing in the Browserを快適に楽しんでみるといいよ!
  32. 32. YeomanでAMD Asynchronous Module Definition
  33. 33. RequireJSをインクルードしてwebappを生成すると、 JSはモジュール化されたファイル構成で出力される。 •main.js •app.js モジュールの読み込み、依存関係を記述する (require) モジュール本体(define) AMDについては以下を読むといい http://requirejs.org/docs/why.html http://requirejs.org/docs/whyamd.html
  34. 34. RequireJSをとはつまり、 C言語の import とか Rubyの require みたいに JavaScriptで外部JavaScriptファイル の読み込みを実現するライブラリ
  35. 35. main.js モジュールのパスを指定 モジュールの依存関係を定義 モジュールを利用 した処理を記述
  36. 36. app.js モジュールの処理を記述
  37. 37. app.js を変更してjqueryを使えるようにする
  38. 38. 応用編
  39. 39. 1.モジュール化した Coffeeをグローバルに コンパイルする
  40. 40. YeomanはCoffeeScriptを自動的にコンパイルする。 便利なんだけど、CoffeeScriptはデフォルトで即時関数 化するので複数のCoffeeファイル間でグローバル空間 を利用するようなプログラムはコンパイル後に動かな くなる。 ※ RequireJSとか使ってうまいことやらない場合のお話です。
  41. 41. Coffeeはいつもこんなかんじ これはこれでいいんだけど複数Coffeeファイルで生成したインスタンスをグロ ーバルで共有して楽をしたい場合とかちょっとアレ。
  42. 42. Gruntfile.js coffee:dist ブロックにオプションを追加する 参考: https://github.com/gruntjs/grunt-contrib-coffee#readme 以前ブログに書きましたYeoman v0.9時点の話だけど。 http://goo.gl/hc4Em
  43. 43. 2.REST API サーバーを 同時に開発する
  44. 44. Yeomanはプレビュー用localhostサーバーを立てる。 便利なんだけど、JSONベースのREST APIサーバーを 同時に開発する場合は別サーバーを立てないといけな い。その場合クロスオリジンになるのでそのまんまだ とajax通信ができなくて不便。
  45. 45. やり方 長いのでブログに書きました。 http://goo.gl/SojUc
  46. 46. そしたら、 @kamiyamさんがもっと便利なの書いてくれた http://bit.ly/13r1xj5 ぜったいこっちをつかうべき!
  47. 47. こうが、、、 Web Browser Yoman Preview Server (localhost:9000) API Server (localhost:3000) ✘ajax request
  48. 48. こうなるイメージ Web Browser Yeoman Preview Server (localhost:9000) API Server (localhost:3000) Proxy Server (localhost:8000) ajax request
  49. 49. Yo, Grunt, Bower, (node.js) の相互依存 性が低いので工夫次第でいくらでも便利 にカスタマイズできそう。:)
  50. 50. まとめ
  51. 51. Yeomanを使うと、 Webアプリ開発効率が アップすると思います。
  52. 52. ぜひ使ってみてください!
  53. 53. happy

×