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

Proﬁle: ! 佐川夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部副部長 Angularユーザ会スタッフ Sencha UG CO-ORGANIZER

HTML5はただのテキストファイル

はい！その通り！

エディターがあれば何でもできる！

はい！その通り！

簡単です！

ほんと？

HTML5は簡単？ HTML CSS JavaScript image

HTML5は簡単？ HTML CSS Sass JavaScript image Compass

HTML5は簡単？ HTML CSS Sass JavaScript CoﬀeeScript image Compass

HTML5は簡単？ HTML CSS Sass JavaScript CoﬀeeScript image backbone underscore jQuery require Compass

HTML5は簡単？ HTML CSS Sass JavaScript CoﬀeeScript image Yuidoc backbone underscore jQuery require Compass

HTML5は簡単？ cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoﬀeeScript backbone underscore jQuery require

HTML5は簡単？ cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoﬀeeScript backbone underscore jQuery require テスト mocha chai

HTML5は簡単？ cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoﬀeeScript backbone underscore easymock jQuery require テスト mocha chai

想像以上に技術要素ないですか？

どこがCSSでしょうか？

どこがCSSでしょうか？この色

どこがCSSでしょうか？フォントサイズこの色

どこがCSSでしょうか？フォントサイズフォントの色この色

どこがCSSでしょうか？フォントサイズフォントの色丸まってるところこの色

どこがCSSでしょうか？丸まってるところフォントの色フォントサイズ丸まってるところこの色

どこがCSSでしょうか？丸まってるところフォントの色フォントサイズ丸まってるところこのメニューこの色

こんな風にもなるなにこれ・・縮めてみた

こんな風にもなるなにこれ・・縮めてみたメニューだったりします

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; }

CSSの中身を覗いてみる -webkit -moz -ms -o ! って何？？？

CSSの中身を覗いてみる -webkit -moz -ms -o ! って何？？？ベンダープレフィックスっす！

ちょっと大変じゃない。。。

開発環境のおはなし多くのアーキテクチャをどうやって開発するか http://yeoman.io/

Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ)

開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド http://yeoman.io/

これはですね。。 Javaのmavenみたいなもんですもうちょっと高機能かも

使ってみるインストールは簡単 $ npm install -g yo

yo 雛形作成ツール generator はどのくらいある？ http://yeoman.io/community-generators.html

HTML カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! View ! ejs Collection Model サーバサイドのアプリケーションと連動するための RESTful JSON など

Single-page Application(SPA) 単一ページによるWebアプリケーションページはDOMの操作により切り替えるサーバとのやりとりはAjaxやWebSocket等を利用 change DOM events render View Template get set Model Ajax Storage

yo 雛形作成ツール $ yo backbone

yo これだけで概ねの環境ができてしまう！

yo テンプレートを作成する $ $ $ $ yo yo yo yo backbone:view view名 --coffee backbone:model model名 --coffee backbone:collection collection名 --coffee backbone:router router名 --coffee

bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか？ http://bower.io/search/

bower bower.jsonとは？依存関係およびライブラリの情報を管理するためのファイル

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": {} }

bower 使い方 $ bower install ! このコマンドでbower.jsonに定義しているコンポーネントをダウンロードします

bower 使い方 $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます

grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins

grunt タスクランナー gruntにはpackage.jsonとGruntﬁle.jsが必要

grunt package.jsonとは？必要なタスクプラグインを管理するためのファイル

{ "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-coﬀee": " 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" } }

grunt 使い方は $ npm install --save-dev [プラグイン名] ! 新しいプラグインをダウンロードしpackage.jsonにその情報を書き込みます

grunt Gruntﬁle.jsとは？タスクを定義したファイルです

grunt Gruntﬁle.jsとは？コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock

モック開発で効率よく http://albatrosary.hateblo.jp/entry/2014/02/06/155004

grunt-connect-proxyの構築 $ npm install grunt-connect-proxy --save-dev Gruntﬁle.js connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }],

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' ] }, }, }, },

grunt-easymockの構築ここで「easymock」の次の「mockapi」キーワードが重要これとproxyで定義したcontextを一致させる ! 期待するURLは /mockapi/users/1 です。

grunt-easymockの構築 easymockをタスクに登録 grunt.task.run([ 'clean:server', 'coﬀee:dist', 'createDefaultTemplate', 'handlebars', 'compass:server', 'conﬁgureProxies', 'connect:livereload', 'open', 'easymock', 'watch' ]);

grunt-easymockの構築モックサーバを構築するとめんどうなAPIサーバを構築しなくていい

簡単Single-page Application開発！

なるべく簡単Single-page Application開発！

Yeomanを使って効率良くHTML5を作ろう結構大変だけどね。。

続きはWebで！

続きはWeb306教室で！

ご清聴ありがとうございました

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

by Fumio SAGAWA on Mar 01, 2014

Statistics

Views

Actions

1 Embed 26

Accessibility

Categories

Upload Details

Usage Rights

Report content

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