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

Like this? Share it with your network

Share

Html5 in-nagoya-11th

  • 1,045 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,045
On Slideshare
758
From Embeds
287
Number of Embeds
4

Actions

Shares
Downloads
6
Comments
0
Likes
2

Embeds 287

http://albatrosary.hateblo.jp 266
http://blog.hatena.ne.jp 13
https://twitter.com 5
http://s.deeeki.com 3

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 名古屋