狠狠撸

贵尝础厂贬じゃなくて
HTML5で
ビュンビュン動くサイトを
作ってと言われたら

13年2月9日土曜日

自己紹介
おおくぼ?ひろあき
インタラクティブ?デザイナー

@taikiken


自己紹介：今やってること

Flash / ActionScript
HTML, CSS, JavaScript
Perl, PHP
MySQL, PostgreSQL
iOS / Objective-C
Unity


自己紹介：続き

Flash / ActionScript は趣味
Flash / ActionScript で知ったこと

?Script（コード）を書く面白さ
?インタラクティブなコンテンツ制作の奥深さ
?UI設計の楽しさと難しさ


あらためて

FlashじゃなくてHTML5で
ビュンビュン動くサイトを
作ってと言われたら


お断りしましょう


でもその変わり

CSSとかJavaScriptを
使えばできますよ


と提案してみましょう


ビュンビュン動く！？


アニメーションとか...


エフェクトとか...


派手な効果


贬罢惭尝5は

文書構造のための規格


贬罢惭尝5は

文書構造のための規格

モーション、エフェクト
とか無理


余談ですが...

HTML5で追加されたタグは目的に合わせて
作られているな～と感心しています

HTML4, XHTMLのCSS クラス名に
section, article, aside, navとかつけたりしてます


しかも贬罢惭尝5周辺には

魅力的な技術が色々


SVG
動的に図形を追加可能（ベクター）

Canvas
動的に図形を追加可能（ビットマップ）

WebGL
3D, Open GL対応

Video, Audio
動画?音声ファイルへの対応

Geo-Location
位置情報

Form
form機能の強化

WebStorage
(localStorage, sessionStorage)
クライアント側にデータを保存

Web Workers
JavaScriptの並列処理


で、本題
Flashなどのプラグインを使わない
モーション系
コンテンツ制作の
選択肢


Web

DOM


Web

DOM

Canvas


Web

DOM

Canvas { 2D

3D(WebGL)

顿翱惭利用の利点

DOM

従来技術の踏襲：学習コストが低い


贬罢惭尝5に対応しているブラウザは
CSS3に対応している

+ CSS3

CSS Selectors
豊富なSelector, 従来のclass, id 以外に用意

CSS Transforms
拡大、縮小、回転、移動などの指定が可能なプロパティ

CSS3
追加されたプロパティ。シャドウ、グラデーション、角丸など

Media Queries
端末に応じてCSSを切替える


CSS Transformsを使えば

JavaScriptなしで
アニメーションが可能


CSS Filterを使えば
photoshop無しで
画像にエフェクトを設定できます

出典?MDN: ?lter https://developer.mozilla.org/ja/docs/CSS/?lter

Demo: inazumatv.com 「Chrome限定、CSS(-webkit-?lter)でエフェクト」 http://www.inazumatv.com/contents/archives/7336


顿翱惭利用の问题

DOM

?JavaScriptを使う
?DOMのアニメーションはブラウザのレイアウ
ト（フロー）、描画（ペイント）への配慮が
必要（後述）

SVG
動的に図形を追加可能（ベクター）

Video, Audio
動画?音声ファイルへの対応

Geo-Location
位置情報

Form
form機能の強化

WebStorage
(localStorage, sessionStorage)
クライアント側にデータを保存

Web Workers
JavaScriptの並列処理

ほぼJavaScript APIが提供されているだけ
video, audioタグはあるけれど...

颁补苍惫补蝉利用の利点

Canvas { 2D

3D(WebGL)

2D, 3D描画、モーション、エフェクトなどを
ほぼ自由にできる

颁补苍惫补蝉利用の问题

Canvas { 2D

3D(WebGL)
JavaScriptを使う
いやぁレイヤーの無いPhotoshopみたいで大変す
by 福岡市男性Web開発者談
参考: inazumatv.com 「Canvas始めました – Canvas APIで遊んで（遊ばれて）わかったことをだらだらと」 http://www.inazumatv.com/contents/archives/7281


DOM

DOM のアニメーション
DOM をごにょごにょするために...
JavaScript を使うなら

HTML規格は
HTML4, XHTML, HTML5どれでも構わない
＊DOCTYPE で動作が異なります


DOM


文字コードはできれば UTF-8
無用のトラブルを避けるためにも


DOM


HTML, CSSが重要


ちょっとブラウザのお話


ブラウザの仕組み
レンダリングエンジン

出典?HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/


大雑把な描画の仕組み

HTML解析

レイアウトフロー

描画


レイアウト

DOMツリーレンダーツリー


レイアウト

DOMツリーフロート絶対


レイアウト

相対的にレイアウトされる

親要素は子要素に影響する

DOMツリー

DOMのアニメーション

リフロー

再描画（リペイント）
] 描画コスト

高速に何回も発生する


DOMのアニメーション

リフローの発生をなるべく少なくする


DOM DOMのアニメーション

なるべくリフローしないようにするために

リフロー

再描画（リペイント）



なるべくリフローしないようにするために
アニメーション対象のDOMへ

position: ?xed, absolute を指定する
＊リペイントは発生します


DOM ちなみに

CSS position

static
relative DOMツリー
?xed
absolute
絶対


DOM ちなみに

position ?xed, absolute を
使ったレイアウトって難しい
オレ調べ


DOM 例えば

position: absolute 指定のDOMを画面中央へ配置

CSSだけでもできるけど...
width が % 以外の指定だと、難しい
window 幅が固定だったら...


DOM 例えば

position: absolute 指定のDOMを画面中央へ配置

JavaScript を使うと
window resizeイベント発生時にwindow 幅と
DOM 幅を計算し中央へ配置


DOM 例えば

DOMを画面中央へ配置

position: static, relative だったら
width を指定して
margin: 0 auto; ですむのに



HTMLのレイアウトや表示状態を
CSSのプロパティや設定値を
JavaScriptを使って
あるタイミング（イベント）や
時間軸で変更する
+CSS3


DOM Demo

JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html


DOM Demo

XHTML, CSS, JavaScript
9~6

JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html



対応デバイスとブラウザで
使える技術が決まる

8~6 HTML5が使いにくい
＊タグだけなら簡単なJavaScript+CSSで対応可能だけど




8~6 HTML5が使いにくい
＊タグだけなら簡単なJavaScript+CSSで対応可能だけど

8~6 CSS3が使えない
＊Poly?llなライブラリはあるけれど



Poly?ll 「古い環境を新しい環境に近づけて差をなくす」
出典?Adobe: 「HTML5&CSS3入門第6回 Graceful DegradationとPoly?ll」
http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html

8~6 32bit PNG
min-width, max-width
position: ?xed
background: gradient
box-shadow
text-shadow
border-radius
... etc



Poly?ll

8~6 32bit PNG
position: ?xed
box-shadow
text-shadow
border-radius
... etc 「簡単に対応できるよ」
というブログも多いですが


Poly?ll ハマることが多い

8~6 32bit PNG
position: ?xed
box-shadow
text-shadow
border-radius
... etc



Poly?llってScriptで実現していることが多い

8~6 JavaScript
CSS expression



Poly?llってScriptで実現している

8~6 JavaScript
CSS expression

リフローが起きるたびに実行される
アニメーション用のJavaScriptに干渉することも

microsoftはCSS expressionのサポートを終了しています
「CSS Expressions のサポート終了について」 http://msdn.microsoft.com/ja-jp/ie/dd253083.aspx



JavaScript は魔法ではない

HTML, CSSを使って
レイアウトや
表現できないことは
JavaScriptを使ってもできない



アニメーションの起点と終点を
静的なHTML, CSSで作成

JavaScript で2点間のアニメーションを作る



ということで JavaScript の話を少しだけ



JavaScript で困ってること
【時間経過管理】

手頃なTween Engineが無い



JavaScript で困ってること
【イベント処理】

イベントハンドラで ”this” 参照が変わる
カスタムイベントが作りにくい


DOM ちなみに

JavaScriptで時間管理に使える関数

setInterval,setTimeout,requestAnimationFrame

Date.getTime




スマホだとHTML5, CSS3が使い放題

http://developer.android.com/design/index.html http://www.apple.com/jp




スマホだとECMAScript 5だって




と思ったら...




案外ハマる！
iOS, Android 両方
CSS, JavaScript




アニメーション?エフェクト
以前の問題




チェック中！
＊個人所有


贵濒补蝉丑を使いたく无い

気持ちは良くわかります

iOS対応していない
ですものね
Android...


プロジェクト成功への道

?HTML, CSS が



プロジェクト成功への道

?HTML, CSS が
?+ JavaScript


【おまけ】パフォーマンスチェック
Chrome Developer Tool

Timeline


HTML5, CSS3 ブラウザ対応状況を調べるのに
caniuse.com が便利です

http://caniuse.com/


Canvas, WebGLは
こちらでお話しします

2013-03-09 FxUG 第178回勉強会@福岡
福岡県Ruby?コンテンツ産業振興センター

https://www.facebook.com/events/436538453082352/

http://atnd.org/events/35874


参考资料

狠狠撸share: http://www.slideshare.net/clockmaker_jp/fsite?ashhtml5
「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda 氏

狠狠撸share: http://www.slideshare.net/taikiken/javascript-14882630
「JavaScriptをまじめに考えました+」オレ

http://slides.html5rocks.com/
HTML5* Web Development to the next lebel

http://www.html5rocks.com/ja/slides
HTML5 Rocks スライド、プレゼンテーション、動画


質問


お仕事の相談お待ちしています


ありがとうございました


狠狠撸

Flashじゃなくて HTML5でビュンビュン動くサイトを作ってと言われたら

More Related Content

Flashじゃなくて HTML5でビュンビュン動くサイトを作ってと言われたら

狠狠撸

Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら

More Related Content

Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら

Flashじゃなくて HTML5でビュンビュン動くサイトを作ってと言われたら

Flashじゃなくて HTML5でビュンビュン動くサイトを作ってと言われたら