• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
業務アプリケーションにおけるこれからのWeb開発 in 札幌
 

業務アプリケーションにおけるこれからのWeb開発 in 札幌

on

  • 582 views

 

Statistics

Views

Total Views
582
Views on SlideShare
577
Embed Views
5

Actions

Likes
2
Downloads
11
Comments
0

1 Embed 5

https://twitter.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    業務アプリケーションにおけるこれからのWeb開発 in 札幌 業務アプリケーションにおけるこれからのWeb開発 in 札幌 Presentation Transcript

    • 佐川 夫美雄@albatrosary
    • 佐川 夫美雄 HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 html5j Web Platform部 - メンバー knockoutjs Japan User Group Sencha UG CO-ORGANIZER AngularJS Japan User Group - メンバー http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ (Fumio SAGAWA)
    • HTML5が2014年に正式勧告
    • 業務系Web開発のすべて これを読めばモダンな業務系Webアプリケーション開発が解る http://html5experts.jp/albatrosary/3191/
    • Webの歴史 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年
    • HTML5の方向性 Webのプラットフォーム化 Elements Offline Web Application Application Cache Web Strage Indexed Database File API Network WebSocket SPDY マルチメディア対応 video audio canvas SVG WebGL
    • Elements HTML4 HTML5
    • カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻 inputタイプの種類 検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
    • マルチメディアタグ プラグイン無しで再生
    • audio要素 audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行 source メディアリソース src リソース type メディア型
    • video要素 video 動画を再生する controls ビデオコントロールの表示 autoplay 自動再生 loop 繰り返し実行 source メディアリソース src リソース type メディア型
    • SVG SVGはHTML5とは独自企画 HTML5普及と共にサポート
    • D3.js SVGの応用として最近流行ってます Data Driven Decument
    • Canvas グラフを書く 写真を合成する アニメーション
    • WebGL 3DCGプログラミングを実現
    • 重要な要素 シーン 作成する3Dの世界 カメラ シーンの状態を撮影する 光源 光の当て方 物体 撮影するもの
    • シーン
    • カメラ fov 画角 aspect 撮影結果の縦横比 near ニアークリップ:nearより近い領域は表示されない far ファークリップ:farより遠い領域は表示されない
    • 光源
    • 物体 ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、 メッシュ(物体)を作成
    • 完成
    • WebGLは難しい WebGLを利用するための手順 3DCGプログラミングの基礎知識 行列やベクトルといった知識 学習コストが高い
    • Three.js 高度なWebGLをうまく利用するためのJavaScriptライブラリ WebGLのラッパーライブラリ
    • WebGLプログラミング http://html5experts.jp/yomotsu/5225/
    • ブラウザはどうなっているか http://html5test.com/
    • クライアントとサーバが接続し続ける 双方向通信 WebSocket
    • 既存のHTTPを拡張 複数のリクエストを送受信することが可能
    • 通信 - より早く双方向に
    • Geolocation
    • Webなのに Offline Web Application
    • Webを標準化することで 難しい技術が扱いやすくなる
    • 業務系をどう開発するか 業務系Webアプリケーションを構築するのに必要な要素 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 通信技術 バックエンド
    • SPA(Single-page Application) 単一ページによるWebアプリケーション ページはDOMの操作による切替え サーバとのやりとりはRESTやWebSocket等
    • SPAは簡単? HTML CSS JavaScript image
    • SPAは簡単? HTML CSS JavaScript Sass Compass image
    • SPAは簡単? HTML CSS JavaScript Sass CoffeeScript Compass image
    • SPAは簡単? HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image
    • SPAは簡単? HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image Yuidoc
    • SPAは簡単? HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin Yuidoc
    • SPAは簡単? HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin mocha chai テスト Yuidoc
    • SPAは簡単? HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin mocha chai テスト Yuidoc easymock
    • http://yeoman.io/
    • いいところ テンプレートがそろってる Web開発に必要なツールがたくさんある lint,hint,ビルド,テストが行える html,css,js,画像をminifyしてくれる まだまだ色々あります
    • エディターは何でも Sublime Text Vim Emacs
    • YEOMANというのは Web開発のscaffolding scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
    • 使い始めるのは簡単!
    • nodejsをインストール $ npm install -g yo
    • yo 雛形作成ツール bower フロントエンドパッケージマネージャ grunt タスクランナー
    • scaffoldingツール 多くのgenerator
    • OFFICIAL GENERATORS 20 COMMUNITY GENERATORS 782
    • パッケージマネージャ Twitter, opne-source community bower.jsonで設定管理
    • Bower Packages 13,178
    • JavaScriptラスクランナー package.jsonで設定管理 Gruntfile.jsでタスクを定義
    • Grunt plugin 2,990
    • 構成(概要) generator bower.json Gruntfile.json package.json Node Packager Manager github
    • 普通にWeb開発 普通にWeb開発
    • backboneにYEOMAN $ npm install -g generator-backbone $ mkdir backbone && cd $_ $ yo backbone $ grunt serve $ grunt build
    • angularにYEOMAN $ npm install -g generator-angular $ mkdir angular && cd $_ $ yo angular $ grunt serve $ grunt build
    • EmberにYEOMAN $ npm install -g generator-ember $ mkdir ember && cd $_ $ yo embar $ grunt serve $ grunt build
    • Three.jsにYEOMAN $ npm install -g generator-threejs $ mkdir threejs && cd $_ $ yo threejs $ grunt serve $ grunt build
    • PhonGapにYEOMAN $ npm install -g generator-phonegap $ mkdir phonegap && cd $_ $ yo phonegap $ grunt platform-build $ cd phonegap $ cordova emulate ios -d $ cordova emulate android -d
    • CordovaにYEOMAN $ npm install -g generator-cordova $ mkdir corcova && cd $_ $ yo cordova $ grunt cordova-buildemulate
    • FirfoxOSにYEOMAN $ npm install -g generator-firfoxos $ mkdir firfoxos && cd $_ $ yo firfoxos
    • イカしてるだろ?
    • Thanks