つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,907 views

 

Statistics

Views

Total Views
1,907
Views on SlideShare
1,894
Embed Views
13

Actions

Likes
16
Downloads
13
Comments
0

2 Embeds 13

http://connpass.com 12
http://192.168.33.10 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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