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

FLASHじゃなくて
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を
使えばできますよ


と提案してみましょう


ビュンビュン動く！？


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


エフェクトとか...


派手な効果


HTML5は

文書構造のための規格


HTML5は

文書構造のための規格

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


余談ですが...

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

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


しかもHTML5周辺には

魅力的な技術が色々


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利用の利点

DOM

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


HTML5に対応しているブラウザは
CSS3に対応している

+ CSS3

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

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

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

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


CSS Transformsを使えば

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


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

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

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


DOM利用の問題

DOM

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

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

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

Geo-Location
位置情報

Form
form機能の強化

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

Web Workers
JavaScriptの並列処理

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

Canvas利用の利点

Canvas { 2D

3D(WebGL)

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

Canvas利用の問題

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なライブラリはあるけれど



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

8~6 32bit PNG
min-width, max-width
position: fixed
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




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




チェック中！
＊個人所有


Flashを使いたく無い

気持ちは良くわかります

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


参考資料

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

Slideshare: 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でビュンビュン動くサイトを作ってと言われたら

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from Hiroaki Okubo

More from Hiroaki Okubo (7)

Recently uploaded

Recently uploaded (9)