Your SlideShare is downloading. ×
0
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
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

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

21,700

Published on

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

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

×