Yeomanではじめる爆速webアプリ開発

36,904 views

Published on

Published in: Technology
1 Comment
114 Likes
Statistics
Notes
  • hello, my name is miss lynda i am a single girl i like to make new friends please contact me by my Email address > weahlynda@hotmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
36,904
On SlideShare
0
From Embeds
0
Number of Embeds
1,460
Actions
Shares
0
Downloads
96
Comments
1
Likes
114
Embeds 0
No embeds

No notes for slide

Yeomanではじめる爆速webアプリ開発

  1. 1. Yeoman ではじめる爆速Webアプリ開発 Sencha UG 勉強会 #19@大阪 2014.4.18 Bathtimefish 村岡 正和
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 HTML5-WEST.jp Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtimefish
  3. 3. 監修しました。 実例ごとの実装例がたくさん書いてあ ります。ウェブサイト制作やCMSの運 用時に便利です。 好評販売中!!
  4. 4. Firefox OSの 薄い本書きました。 http://goo.gl/mA8ebW 好評発売中! 開発に、「もえあがる」のはつきものだ 第一話 がいあハックス (Gaia開発環境の構築とデバッグ) 著
  5. 5. 今日のおはなし
  6. 6. HTML5でイマドキっぽい WebサイトやWebアプリをつ くるときにいろいろメンドイ ことがあって、
  7. 7. メンドイことがいい感じに 自動的になったりしたらめ んどくなくていいんだけど ナンかいいのない?
  8. 8. それ、Yeomanでできるよ。
  9. 9. Web制作の準備はいろいろめんどくさい
  10. 10. コード書く前の準備いろいろ • ディレクトリ構成 js/ styles/ images/ ... • 制作用Webサーバー • いいかんじのライブラリとかプラグインさがすの • いい感じのHTML5ページのテンプレート • 支援ツール altJS, js/css圧縮, Test ... etc...
  11. 11. このオッサンが全部用意します。
  12. 12. Yeoman
  13. 13. http://yeoman.io/
  14. 14. Yeoman s service デキるオッサン い ざ と い う と き の 際 立 っ た 働 き
  15. 15. こんな人にモロ刺さります。 • 制作テンプレ持ってない。つーか作るのメンドイ • 最初っからレスポンシブのテンプレがいい。 • 最適化・軽量化に細かいこだわりはない。いい感じ にやってほしい • JSライブラリさがすのだるい • Sass最高ヒャッハー! • つーかWeb制作めんどくさい • つーか仕事めんどくさい。生きるのもめんどい こんなの
  16. 16. セットアップ
  17. 17. 黒い画面で、
  18. 18. npm install -g yo
  19. 19. ...と、そのまえに入れておくもの。 node.js ruby (optional) compass (optional) ※ compass はgemで、node.jsは nodebrewが個人的にオススメ http://compass-style.org/ https://github.com/hokaccha/nodebrew
  20. 20. npm install -g generator-webapp
  21. 21. webappの作成
  22. 22. yo webapp
  23. 23. yo webapp --coffee CoffeeScriptを使う場合
  24. 24. サーバーの起動
  25. 25. grunt server
  26. 26. リリース前のビルド
  27. 27. grunt build
  28. 28. 実際にやってみる
  29. 29. Yeomanを構成するツール yo grunt bower scaffolding preview, build, test package management
  30. 30. Yo •Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのscaffoldingが可能。 HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。
  31. 31. Bower •JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管 理に便利。
  32. 32. Grunt •JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、フ ァイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神!
  33. 33. 実際につかってみるとわかるけど、 裏ではGruntが 相当がんばっている! コーディング中にお世話になるのはほとんどGrunt
  34. 34. Gruntfile.js 詳しくは公式で学びましょう http://gruntjs.com/
  35. 35. あと実は最初、、、 Bower要らないと思ってました サーセン! トリも食ってみるとウマかったです
  36. 36. component を検索してみよう http://sindresorhus.com/bower-components/
  37. 37. bower install underscore.number --save grunt bowerInstall bower install したライブラリを依存ライブラリとともに webページに追加してくれる webappでのJSライブラリの追加
  38. 38. まずはこれだけ覚えよう! $ yo webapp $ grunt server はじめる前のじゅもん リリースのじゅもん $ grunt build or $ grunt server:dist まずは Designing in the Browserを快適に楽しんでみるといいよ!
  39. 39. いろんなgeneratorをつかってみよう! http://yeoman.io/official-generators.html
  40. 40. 応用編
  41. 41. 1. YeomanでAMD Asynchronous Module Definition
  42. 42. RequireJS入りwebapp https://github.com/popox/generator-webapp-rjs
  43. 43. RequireJSをインクルードしてwebappを生成すると、 JSはモジュール化されたファイル構成で出力される。 •main.js •app.js モジュールの読み込み、依存関係を記述する (require) モジュール本体(define) AMDについては以下を読むといい http://requirejs.org/docs/why.html http://requirejs.org/docs/whyamd.html
  44. 44. RequireJSをとはつまり、 C言語の import とか Rubyの require みたいに JavaScriptで外部JavaScriptファイル の読み込みを実現するライブラリ
  45. 45. main.js モジュールのパスを指定 モジュールの依存関係を定義 モジュールを利用 した処理を記述
  46. 46. app.js モジュールの処理を記述
  47. 47. http://www.slideshare.net/bathtimefish/amd-basic-and-practice
  48. 48. Webページごとに別々のモジュール構成を持つJS を書くと、開発時には動いてるが、build後に動か なくなる。 ※ webappでAMDを使う場合の注意点 grunt buildではr.jsを使ったJSファイルのマージ、圧縮が行われる。このと きデフォルトの設定だとページごとのJSがひとつのファイルにマージ&圧 縮されてモジュール構成が破壊されるため。
  49. 49. ちゃんと動く設定例書きました。 https://github.com/bathtimefish/yeoman-webapp-rjs-multipage-example http://bathtimefish.hatenablog.com/entry/2013/11/03/185340 参考記事
  50. 50. 2.モジュール化した Coffeeをグローバルに コンパイルする
  51. 51. YeomanはCoffeeScriptを自動的にコンパイルする。 便利なんだけど、CoffeeScriptはデフォルトで即時関数 化するので複数のCoffeeファイル間でグローバル空間 を利用するようなプログラムはコンパイル後に動かな くなる。 ※ RequireJSとか使ってうまいことやらない場合のお話です。
  52. 52. Coffee -> JSはいつもこんなかんじ これはこれでいいことだけど複数Coffeeファイル間でオブジェクトをグローバ ルで共有してラフに楽をしたい場合とかちょっとアレ。
  53. 53. Gruntfile.js coffee:dist ブロックにオプションを追加する 参考: https://github.com/gruntjs/grunt-contrib-coffee#readme optionsについてはgrunt-contrib-coffeeを参照 https://github.com/gruntjs/grunt-contrib-coffee
  54. 54. 3.REST API サーバーを 同時に開発する
  55. 55. Yeomanはプレビュー用localhostサーバーを立てる。 便利なんだけど、JSONベースのREST APIサーバーを 同時に開発する場合は別サーバーを立てないといけな い。その場合クロスオリジンになるのでそのまんまだ とajax通信ができなくて不便。
  56. 56. やり方 長いのでブログに書きました。 http://goo.gl/SojUc
  57. 57. そしたら、 @kamiyamさんがもっと便利なの書いてくれた http://bit.ly/13r1xj5 ぜったいこっちをつかうべき!
  58. 58. こうが、、、 Web Browser Yoman Preview Server (localhost:9000) API Server (localhost:3000) ✘ajax request
  59. 59. こうなるイメージ Web Browser Yeoman Preview Server (localhost:9000) API Server (localhost:3000) Proxy Server (localhost:8000) ajax request
  60. 60. Yo, Grunt, Bower, (node.js) の相互依存 性が低いので工夫次第でいくらでも便利 にカスタマイズできる。:) これかなり重要!!
  61. 61. http://yeoman.io/generators.html#writing-your-first-generator カスタムGeneratorを作成する
  62. 62. とりあえずつくってみてます。 頓挫中 orz
  63. 63. むしゃくしゃしたのでやった https://github.com/bathtimefish/generator-webapp-typescript TypeScript 1.0 リリース記念
  64. 64. ビール飲みながらつくった。 HTMLをモジュール化してAjaxで取得できるWebApp サンプル https://github.com/bathtimefish/webapp-handlebars-ajax
  65. 65. 御社制作ワークフローのため のgenerator開発いたします。 企業のみなさまへ、 通常見積もり価格 3割増 のところを、 今ならなんと20%引き!! Call Now!!
  66. 66. generator hackation やりたいです。
  67. 67. まとめ
  68. 68. Yeomanを使うと、 Webアプリ開発効率が アップすると思います。
  69. 69. ぜひ使ってみてください!
  70. 70. happy

×