![開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
http://yeoman.io/](https://image.slidesharecdn.com/osctokyo-140228200843-phpapp02/75/Web-HTML5-33-2048.jpg)
![bower
使い方
$ bower install --save-dev [パッケージ名]
!
新しいコンポーネントをダウンロードしbower.jsonにその情
報を書き込みます](https://image.slidesharecdn.com/osctokyo-140228200843-phpapp02/75/Web-HTML5-46-2048.jpg)
![grunt
使い方は
$ npm install --save-dev [プラグイン名]
!
新しいプラグインをダウンロードしpackage.jsonにその情報
を書き込みます](https://image.slidesharecdn.com/osctokyo-140228200843-phpapp02/75/Web-HTML5-51-2048.jpg)
![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
}],](https://image.slidesharecdn.com/osctokyo-140228200843-phpapp02/75/Web-HTML5-55-2048.jpg)
![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'
]
},
},
},
},](https://image.slidesharecdn.com/osctokyo-140228200843-phpapp02/75/Web-HTML5-56-2048.jpg)
![grunt-easymockの構築
easymockをタスクに登録
grunt.task.run([
'clean:server',
'coffee:dist',
'createDefaultTemplate',
'handlebars',
'compass:server',
'configureProxies',
'connect:livereload',
'open',
'easymock',
'watch'
]);](https://image.slidesharecdn.com/osctokyo-140228200843-phpapp02/75/Web-HTML5-58-2048.jpg)
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの？
- 2. Profile: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
- 4. はい！その通り！
- 6. はい！その通り！
- 7. 簡単です！
- 8. ほんと？
- 17. 想像以上に技術要素ないですか？
- 18. どこがCSSでしょうか？
- 19. どこがCSSでしょうか？ この色
- 27. 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; }
- 30. ちょっと大変じゃない。。。
- 32. Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ)
- 33. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド http://yeoman.io/
- 35. 使ってみる インストールは簡単 $ npm install -g yo
- 37. HTML カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! View ! ejs Collection Model サーバサイドのアプリケーションと連動するため の RESTful JSON など
- 41. yo テンプレートを作成する $ $ $ $ yo yo yo yo backbone:view view名 --coffee backbone:model model名 --coffee backbone:collection collection名 --coffee backbone:router router名 --coffee
- 44. 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": {} }
- 46. bower 使い方 $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情 報を書き込みます
- 50. { "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" } }
- 51. grunt 使い方は $ npm install --save-dev [プラグイン名] ! 新しいプラグインをダウンロードしpackage.jsonにその情報 を書き込みます
- 53. grunt Gruntfile.jsとは？ コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock
- 55. 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 }],
- 56. 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' ] }, }, }, },
- 63. 続きはWebで！
- 64. 続きはWeb306教室で！
- 65. ご清聴ありがとうございました