業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?

26,692 views

Published on

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

No Downloads
Views
Total views
26,692
On SlideShare
0
From Embeds
0
Number of Embeds
2,433
Actions
Shares
0
Downloads
141
Comments
0
Likes
75
Embeds 0
No embeds

No notes for slide

業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?

  1. 1. Profile: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
  2. 2. HTML5はただのテキストファイル
  3. 3. はい!その通り!
  4. 4. エディターがあれば何でもできる!
  5. 5. はい!その通り!
  6. 6. 簡単です!
  7. 7. ほんと?
  8. 8. HTML5は簡単? HTML CSS JavaScript image
  9. 9. HTML5は簡単? HTML CSS Sass JavaScript image Compass
  10. 10. HTML5は簡単? HTML CSS Sass JavaScript CoffeeScript image Compass
  11. 11. HTML5は簡単? HTML CSS Sass JavaScript CoffeeScript image backbone underscore jQuery require Compass
  12. 12. HTML5は簡単? HTML CSS Sass JavaScript CoffeeScript image Yuidoc backbone underscore jQuery require Compass
  13. 13. HTML5は簡単? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore jQuery require
  14. 14. HTML5は簡単? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore jQuery require テスト mocha chai
  15. 15. HTML5は簡単? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore easymock jQuery require テスト mocha chai
  16. 16. 想像以上に技術要素ないですか?
  17. 17. どこがCSSでしょうか?
  18. 18. どこがCSSでしょうか? この色
  19. 19. どこがCSSでしょうか? フォン トサイズ この色
  20. 20. どこがCSSでしょうか? フォン トサイズ フォント の色 この色
  21. 21. どこがCSSでしょうか? フォン トサイズ フォント の色 丸まって るところ この色
  22. 22. どこがCSSでしょうか? 丸まって るところ フォント の色 フォン トサイズ 丸まって るところ この色
  23. 23. どこがCSSでしょうか? 丸まって るところ フォント の色 フォン トサイズ 丸まって るところ このメニュー この色
  24. 24. こんな風にもなる なにこれ・・ 縮めてみた
  25. 25. こんな風にもなる なにこれ・・ 縮めてみた メニューだった りします
  26. 26. CSSの中身を覗いてみる .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
  27. 27. CSSの中身を覗いてみる -webkit -moz -ms -o ! って何???
  28. 28. CSSの中身を覗いてみる -webkit -moz -ms -o ! って何??? ベンダープレ フィックスっす!
  29. 29. ちょっと大変じゃない。。。
  30. 30. 開発環境のおはなし 多くのアーキテクチャをどうやって開発するか http://yeoman.io/
  31. 31. Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ)
  32. 32. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド http://yeoman.io/
  33. 33. これはですね。。 Javaのmavenみたいなもんです もうちょっと高機能かも
  34. 34. 使ってみる インストールは簡単 $ npm install -g yo
  35. 35. yo 雛形作成ツール generator はどのくらいある? http://yeoman.io/community-generators.html
  36. 36. HTML カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! View ! ejs Collection Model サーバサイドのアプリケーションと連動するため の RESTful JSON など
  37. 37. Single-page Application(SPA) 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 change DOM events render View Template get set Model Ajax Storage
  38. 38. yo 雛形作成ツール $ yo backbone
  39. 39. yo これだけで概ねの環境ができてしまう!
  40. 40. yo テンプレートを作成する $ $ $ $ yo yo yo yo backbone:view view名 --coffee backbone:model model名 --coffee backbone:collection collection名 --coffee backbone:router router名 --coffee
  41. 41. bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/
  42. 42. bower bower.jsonとは? 依存関係およびライブラリの情報を管理するためのファイル
  43. 43. bower backbonejsを作るときに必要なコンポーネント { "name": "backbone-app", "version": "0.0.0", "dependencies": { "sass-bootstrap": " 3.0.0", "jquery": " 1.9.0", "underscore": " 1.4.3", "backbone": " 1.0.0", "requirejs": " 2.1.5", "requirejs-text": " 2.0.5", "modernizr": " 2.6.2", "backbone.localStorage": " 1.1.7" }, "devDependencies": {} }
  44. 44. bower 使い方 $ bower install ! このコマンドでbower.jsonに定義しているコンポーネントをダ ウンロードします
  45. 45. bower 使い方 $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情 報を書き込みます
  46. 46. grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins
  47. 47. grunt タスクランナー gruntにはpackage.jsonとGruntfile.jsが必要
  48. 48. grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル
  49. 49. { "name": "backbone-app", "version": "0.0.0", "dependencies": {}, "devDependencies": { "grunt": " 0.4.1", "grunt-contrib-copy": " 0.4.0", "grunt-contrib-concat": " 0.3.0", "grunt-contrib-coffee": " 0.7.0", "grunt-contrib-jst": " 0.5.0", "grunt-contrib-uglify": " 0.2.0", "grunt-contrib-compass": " 0.5.0", "grunt-contrib-jshint": " 0.6.3", "grunt-contrib-cssmin": " 0.6.0", "grunt-contrib-connect": " 0.3.0", "grunt-contrib-clean": " 0.5.0", "grunt-contrib-htmlmin": " 0.1.3", "grunt-contrib-imagemin": " 0.2.0", "grunt-contrib-watch": " 0.5.2", "grunt-mocha": " 0.4.1", "grunt-usemin": " 0.1.10", "grunt-bower-requirejs": " 0.7.0", "grunt-requirejs": " 0.4.0", "grunt-rev": " 0.1.0", "grunt-open": " 0.2.0", "load-grunt-tasks": " 0.1.0", "connect-livereload": " 0.2.0", "time-grunt": " 0.2.1", "jshint-stylish": " 0.1.3" }, grunt package.jsonとは? "engines": { "node": ">=0.8.0" } }
  50. 50. grunt 使い方は $ npm install --save-dev [プラグイン名] ! 新しいプラグインをダウンロードしpackage.jsonにその情報 を書き込みます
  51. 51. grunt Gruntfile.jsとは? タスクを定義したファイルです
  52. 52. grunt Gruntfile.jsとは? コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock
  53. 53. モック開発で効率よく http://albatrosary.hateblo.jp/entry/2014/02/06/155004
  54. 54. 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 }],
  55. 55. 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' ] }, }, }, },
  56. 56. grunt-easymockの構築 ここで「easymock」の次の「mockapi」キーワードが重要 これとproxyで定義したcontextを一致させる ! 期待するURLは /mockapi/users/1 です。
  57. 57. grunt-easymockの構築 easymockをタスクに登録 grunt.task.run([ 'clean:server', 'coffee:dist', 'createDefaultTemplate', 'handlebars', 'compass:server', 'configureProxies', 'connect:livereload', 'open', 'easymock', 'watch' ]);
  58. 58. grunt-easymockの構築 モックサーバを構築するとめんどうなAPIサーバを構築しなくていい
  59. 59. 簡単Single-page Application開発!
  60. 60. なるべく簡単Single-page Application開発!
  61. 61. Yeomanを使って効率良くHTML5を作ろう 結構大変だけどね。。
  62. 62. 続きはWebで!
  63. 63. 続きはWeb306教室で!
  64. 64. ご清聴ありがとうございました

×