Your SlideShare is downloading. ×
Html5 in-nagoya-11th
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Html5 in-nagoya-11th

908
views

Published on

「業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?」スライドのショートバージョンです

「業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?」スライドのショートバージョンです

Published in: Technology

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

No Downloads
Views
Total Views
908
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5勉強会#11 in 名古屋
  • 2. Profile: ! ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER HTML5勉強会#11 in 名古屋
  • 3. Single-page Application(SPA) 何か最近話題だよね?!でもSPAって書くとお風呂になっちゃうんだよ 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 HTML5勉強会#11 in 名古屋
  • 4. こんなの簡単さ! HTML5勉強会#11 in 名古屋
  • 5. SPAを開発するには? HTML CSS JavaScript image HTML5勉強会#11 in 名古屋
  • 6. SPAを開発するには? HTML CSS Sass Compass JavaScript image HTML5勉強会#11 in 名古屋
  • 7. SPAを開発するには? HTML CSS Sass Compass JavaScript CoffeeScript image HTML5勉強会#11 in 名古屋
  • 8. SPAを開発するには? HTML CSS Sass Compass JavaScript CoffeeScript image backbone underscore jQuery require HTML5勉強会#11 in 名古屋
  • 9. SPAを開発するには? HTML CSS Sass Compass JavaScript CoffeeScript image Yuidoc backbone underscore jQuery require HTML5勉強会#11 in 名古屋
  • 10. SPAを開発するには? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore jQuery require HTML5勉強会#11 in 名古屋
  • 11. SPAを開発するには? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore jQuery require テスト mocha chai HTML5勉強会#11 in 名古屋
  • 12. ちょっと大変じゃない。。。 HTML5勉強会#11 in 名古屋
  • 13. どーやって開発するの? ┐( ̄ヘ ̄)┌ HTML5勉強会#11 in 名古屋
  • 14. そこで統合開発ツールの登場です! HTML5勉強会#11 in 名古屋
  • 15. 開発環境のおはなし 面倒なことは全部このおっさんにやらせちゃえばいいんだよ http://yeoman.io/ HTML5勉強会#11 in 名古屋
  • 16. Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) Javaのmavenみたいなもんです もうちょっと高機能かも HTML5勉強会#11 in 名古屋
  • 17. 使ってみる インストールは簡単 $ npm install -g yo HTML5勉強会#11 in 名古屋
  • 18. yo これだけで使いたい環境ができてしまう! $ yo backbone AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ! HTML5勉強会#11 in 名古屋
  • 19. yo モジュールのテンプレートが作成できる $ $ $ $ yo yo yo yo backbone:view view名 --coffee backbone:model model名 --coffee backbone:collection collection名 --coffee backbone:router router名 --coffee HTML5勉強会#11 in 名古屋
  • 20. bower bower.jsonとは? 依存関係およびライブラリの情報を管理するためのファイル HTML5勉強会#11 in 名古屋
  • 21. bower 使い方 $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情 報を書き込みます HTML5勉強会#11 in 名古屋
  • 22. grunt タスクランナー gruntにはpackage.jsonとGruntfile.jsが必要 HTML5勉強会#11 in 名古屋
  • 23. grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル HTML5勉強会#11 in 名古屋
  • 24. grunt Gruntfile.jsとは? タスクを定義したファイルです HTML5勉強会#11 in 名古屋
  • 25. grunt Gruntfile.jsとは? いろんなタスクがあります $ grunt serve $ grunt build $ grunt test grunt serveってやるとnodeサーバが立ち上がるんだぜぃ HTML5勉強会#11 in 名古屋
  • 26. 完璧だ!! さー開発しよう! HTML5勉強会#11 in 名古屋
  • 27. ちょっと待って! HTML5勉強会#11 in 名古屋
  • 28. そう言えばAjaxってAPIサーバ必要なんだけど・・ HTML5勉強会#11 in 名古屋
  • 29. よし!全員APIサーバ構築しろ!! HTML5勉強会#11 in 名古屋
  • 30. Σ(゚д゚;) ヌオォ!? HTML5勉強会#11 in 名古屋
  • 31. モック開発で効率良く gruntタスクに追加するんだよ HTML5勉強会#11 in 名古屋
  • 32. モック開発で効率良く grunt-connect-proxyの構築 $ npm install grunt-connect-proxy --save-dev Gruntfile.jsを少し書き換えろ! connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }], HTML5勉強会#11 in 名古屋
  • 33. モック開発で効率良く grunt-easymockの構築 $ npm install grunt-easymock --save-dev Gruntfile.jsを少し書き換えろ! grunt.initConfig({ yeoman: yeomanConfig, /* easymockの設定 */ easymock: { mockapi: { options: { port: 3000, path: 'server/api-server', config: { routes: [ '/users/:id' ] }, }, }, }, HTML5勉強会#11 in 名古屋
  • 34. モック開発で効率良く モックサーバを構築するとめんどうなAPIサーバを構築しなくていい Yeoman HTML5勉強会#11 in 名古屋
  • 35. モック開発で効率良く 詳しくはこちら http://albatrosary.hateblo.jp/entry/2014/02/06/155004 HTML5勉強会#11 in 名古屋
  • 36. イカしてるだろ Yeomanを使って効率良くSingle-page Applicationを作ろう! 結構大変だけどね。。 HTML5勉強会#11 in 名古屋
  • 37. ご清聴ありがとうございました HTML5勉強会#11 in 名古屋