業務アプリケーションにおけるこれからのWeb開発@OSC.名古屋

佐川夫美雄@albatrosary 2014/7/5(土) オープンソースカンファレンス@名古屋

佐川夫美雄 HTML5 Experts.jp コントリビュータ html5jエンタープライズ部（副部長） html5j Web Platform部（メンバー） AngularJS Japan User Group（メンバー） Sencha UG（CO-ORGANIZER） http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ (Fumio SAGAWA)

業務Webアプリケーション http://html5experts.jp/albatrosary/3191/

HTML5が2014年に正式勧告

歴史 SGML(standard Generalized Markup Language) 1986年 HTML(HyperText Markup Language) 1989年 HTML 4.0(HyperText Markup Language) 1997年 XML(eXtensible Markup Language) 1998年 XHTML(eXtensible HyperText Markup Language) 2000年 HTML 5.0(HyperText Markup Language) 2012年 CSS 1 1996年 CSS 2 1998年 CSS 2.1 2004年 CSS 3 2011年 HTTP 1.1 1999年 HTTP 1.0 1996年 HTTP 0.9 1993年 SPDY 2011年 XHTML 2.0(eXtensible HyperText Markup Language) 2010年 HTTP 2(draft) 2012年

空白の時代 Webアプリケーションをリッチにしてきたもの

Rich Internet Application

Rich Internet Application 表現力の高さデスクトップアプケーションと同等なUI ユーザーエクスペリエンス

2010年 Steve JobsがFlashを批判 2011年 Silverlight後退/ モバイルFlash開発中止

プロプライエタリよりオープン性のあるHTML5

Webのプラットフォーム化

HTML5の方向性 Webのプラットフォーム化 Elements Oﬄine Web Application Application Cache Web Strage Indexed Database File API Network WebSocket SPDY Web Workers マルチメディア対応 video audio canvas SVG WebGL

elements HTML4 HTML5

inputタイプの種類カレンダーやデートピッカー月の入力週の入力時刻の入力詳細な日時や時刻の入力自分のいる地域の日付と時刻検索ボックススピンボックススライダカラーピッカー電話番号 Webページのアドレスメールアドレス

マルチメディアプラグイン無し！

audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行 source メディアリソース src リソース type メディア型

SVG Scalable Vector Graphics SVGはHTML５とは独自企画 HTML５普及と共にサポート

D3.js Data Driven Decument http://d3js.org/

Canvas グラフを書く写真を合成するアニメーション

WebGL 3DCGプログラミングを実現

WebGLは難しい WebGLを利用するための手順 3DCGプログラミングの基礎知識行列やベクトルといった知識学習コストが高い

重要な要素シーン作成する3Dの世界カメラシーンの状態を撮影する光源光の当て方物体撮影するもの

シーン

カメラ fov 画角 aspect 撮影結果の縦横比 near ニアークリップ：nearより近い領域は表示されない far ファークリップ：farより遠い領域は表示されない

光源

物体ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成

完成

Three.js WebGLのラッパーライブラリ http://threejs.org/

WebGLプログラミング http://html5experts.jp/yomotsu/5225/

Webなのに Oﬄine Web Application

Application Cache Web Storage Indexed Database API File API

ここまでのまとめ Webを標準化することで難しい技術が扱いやすくなる

業務アプリケーションの開発は？

技術要素 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境通信技術バックエンド

モダンWebアプリケーション Controller Browser HTML JavaScript アプリケーションサーバ RDBMS Business Logic O/R POJO 1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONでサーバへ送信 3. サーバでは受け取った情報（JSON）をPOJOへ変換し登録・更新などの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示

Old Web vs Multi-Deviace Architectures Page Display Page Generation Logic & State Data Integration User Interface Interface Management Logic & State Data Integration APIs Native & HTML5 Browser App Server

Interface Elements Server I/O Logic & Data View System Basic Widgets buttons, bars, test fields… Containers panels, cards, modals… Layout Manager absolute, flexible Templationg iterations, conditionals Compound Widgets trees, grids, gauges… Themes Visualizations charts, infographics Styles Visual Effects animations, filters… Localization RTL, local libraries Accessibility focus manager, ARIA… Interactions gestures, drag & drop Drawing vector, bitmap Theming computed styles State Manager history, undo, routes Data Objects queues, hoshtables Data Models & Stores group, sort, validate Persistent Data cache & sync Mulitimedia 3D, audio, video Data Binding 1-way, 2-way Modularity components, modules Testing IOC, test hooks Server Calls asynch, conversion Server Method Invocation 2-Way Data Server Notifications

Single-page Application 単一ページによるWebアプリケーションページはDOMの操作による切替えサーバとのやりとりはRESTやWebSocket等

HTML CSS JavaScript image

HTML CSS JavaScript Sass Compass image

HTML CSS JavaScript Sass CoﬀeeScript Compass image

HTML CSS JavaScript Sass CoﬀeeScript backbone underscore jQuery require Compass image

HTML CSS JavaScript Sass CoﬀeeScript backbone underscore jQuery require Compass image Yuidoc

HTML CSS JavaScript Sass CoﬀeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin Yuidoc

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

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

http://yeoman.io/

YEOMAN http://yeoman.io/

YEOMANワークフロー

いいところテンプレートがそろってる Web開発に必要なツールがたくさんある lint,hint,ビルド,テストが行える html,css,js,画像をminifyしてくれるまだまだ色々あります

yo 雛形作成ツール bower フロントエンドパッケージマネージャ grunt タスクランナー

つまりYEOMANというのは Web開発のscaﬀolding scaﬀoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料

使い始めるのは簡単！ 1. nodejsをインストール 2. npm install -g yo git/ruby/compassを入れておくといいよ

scaﬀoldingツール多くのgenerator

OFFICIAL GENERATORS 20 COMMUNITY GENERATORS 782

パッケージマネージャ Twitter, opne-source community bower.jsonで設定管理

Bower Packages 13,178

JavaScriptラスクランナー package.jsonで設定管理 Gruntﬁle.jsでタスクを定義

Grunt plugin 2,990

generator bower.json Gruntﬁle.json package.json Node Packager Manager github

これだけ覚える $ npm install -g generator-hoge $ mkdir my-hoge-app && cd $_ $ yo hoge $ grunt serve $ grunt build

イカしてるだろ？

AngularJS https://angularjs.org/

・双方向バインディング・テンプレートとしてのHTML ・再利用可能なコンポーネント・ビューとルーティング・テストとテストのしやすさ

・CRUD系のアプリケーション・管理画面、マイページ・1ページで完結するアプリケーション

・モバイル向けアプリケーション・ゲームなどで使うグラフィック系、エフェクト系

Model View Whatever

Angular UI http://angular-ui.github.io/

Onsen UI http://onsenui.io/

html5jエンタープライズ部 AngularJS+bootstrap+Application Cache http://www.html5biz.org/

と、色々お話しましたが

どうでもいいからとにかく触ってみようぜ！ by Angularな人たち

続きは展示会場で！

Thanks

業務アプリケーションにおけるこれからのWeb開発@OSC.名古屋

by Fumio SAGAWA, 取締役 at Xenophy CO.,LTD

on Jul 07, 2014

Statistics

Views

Actions

1 Embed 1

Accessibility

Categories

Upload Details

Usage Rights

Report content

業務アプリケーションにおけるこれからのWeb開発@OSC.名古屋 Presentation Transcript