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

79
FLASHじゃなくて HTML5ビュンビュン動くサイトを 作ってと言われたら 1329日土曜日

description

2013-02-09 HTML5 Carnival Fukuoka(HTML5カーニバル福岡) 講演資料

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

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

FLASHじゃなくてHTML5で

ビュンビュン動くサイトを作ってと言われたら

13年2月9日土曜日

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

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

@taikiken

13年2月9日土曜日

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

Flash / ActionScriptHTML, CSS, JavaScriptPerl, PHPMySQL, PostgreSQLiOS / Objective-CUnity

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

13年2月9日土曜日

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

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

自己紹介:続き

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

13年2月9日土曜日

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

あらためて

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

13年2月9日土曜日

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

お断りしましょう

13年2月9日土曜日

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

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

でもその変わり

13年2月9日土曜日

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

と提案してみましょう

13年2月9日土曜日

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

ビュンビュン動く!?

13年2月9日土曜日

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

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

13年2月9日土曜日

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

エフェクトとか...

13年2月9日土曜日

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

派手な効果

13年2月9日土曜日

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

文書構造のための規格

HTML5は

13年2月9日土曜日

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

文書構造のための規格

HTML5は

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

13年2月9日土曜日

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

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

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

余談ですが...

13年2月9日土曜日

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

魅力的な技術が色々

しかもHTML5周辺には

13年2月9日土曜日

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

SVG動的に図形を追加可能(ベクター)

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

WebGL3D, Open GL対応

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

Geo-Location位置情報

Formform機能の強化

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

Web WorkersJavaScriptの並列処理

13年2月9日土曜日

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

Flashなどのプラグインを使わないモーション系コンテンツ制作の

選択肢

で、本題

13年2月9日土曜日

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

Web

DOM

13年2月9日土曜日

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

Web

DOM

Canvas

13年2月9日土曜日

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

Web

DOM

Canvas2D

3D(WebGL){13年2月9日土曜日

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

DOM利用の利点

DOM

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

13年2月9日土曜日

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

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

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

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

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

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

+ CSS3

13年2月9日土曜日

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

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

CSS Transformsを使えば

13年2月9日土曜日

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

photoshop無しで画像にエフェクトを設定できます

CSS Filterを使えば

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

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

13年2月9日土曜日

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

DOM利用の問題

DOM

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

13年2月9日土曜日

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

SVG動的に図形を追加可能(ベクター)

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

Geo-Location位置情報

Formform機能の強化

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

Web WorkersJavaScriptの並列処理

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

13年2月9日土曜日

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

Canvas2D

3D(WebGL){Canvas利用の利点

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

13年2月9日土曜日

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

Canvas2D

3D(WebGL){Canvas利用の問題

JavaScriptを使ういやぁ レイヤーの無いPhotoshopみたいで大変す

by 福岡市男性Web開発者談

参考: inazumatv.com 「Canvas始めました – Canvas APIで遊んで(遊ばれて)わかったことをだらだらと」 http://www.inazumatv.com/contents/archives/7281

13年2月9日土曜日

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

DOM

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

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

13年2月9日土曜日

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

DOM

DOM のアニメーションDOM をごにょごにょするために...

文字コードはできれば UTF-8

無用のトラブルを避けるためにも

13年2月9日土曜日

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

DOM

DOM のアニメーションDOM をごにょごにょするために...

HTML, CSSが重要

13年2月9日土曜日

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

ちょっとブラウザのお話

13年2月9日土曜日

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

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

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

13年2月9日土曜日

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

ブラウザの仕組み大雑把な描画の仕組み

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

HTML解析

レイアウト

描画

フロー

13年2月9日土曜日

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

ブラウザの仕組みレイアウト

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

DOMツリー レンダーツリー13年2月9日土曜日

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

ブラウザの仕組みレイアウト

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

フロート 絶対DOMツリー13年2月9日土曜日

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

ブラウザの仕組みレイアウト

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

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

DOMツリー13年2月9日土曜日

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

ブラウザの仕組みDOMのアニメーション

リフロー

再描画(リペイント)

]描画コスト

高速に何回も発生する

13年2月9日土曜日

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

ブラウザの仕組みDOMのアニメーション

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

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

リフロー

再描画(リペイント)

13年2月9日土曜日

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

DOM

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

position: fixed, absolute を指定する*リペイントは発生します

DOMのアニメーション

13年2月9日土曜日

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

DOM

CSS position

staticrelative

fixedabsolute

ちなみに

DOMツリー

絶対

13年2月9日土曜日

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

DOM

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

ちなみに

13年2月9日土曜日

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

DOM

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

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

例えば

13年2月9日土曜日

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

DOM

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

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

例えば

13年2月9日土曜日

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

DOM

DOMを画面中央へ配置

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

例えば

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

13年2月9日土曜日

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

DOM Demo

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

13年2月9日土曜日

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

DOM Demo

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

XHTML, CSS, JavaScript

9 ~ 6

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

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

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

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

8 ~ 6 CSS3が使えない*Polyfillなライブラリはあるけれど

13年2月9日土曜日

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

DOM

Polyfill

DOMのアニメーション

8 ~ 6 32bit PNGmin-width, max-widthposition: fixedbackground: gradientbox-shadowtext-shadowborder-radius... etc

「古い環境を新しい環境に近づけて差をなくす」出典 Adobe: 「HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill」

http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html

13年2月9日土曜日

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

DOM

Polyfill

DOMのアニメーション

8 ~ 6 32bit PNGmin-width, max-widthposition: fixedbackground: gradientbox-shadowtext-shadowborder-radius... etc 「簡単に対応できるよ」

というブログも多いですが13年2月9日土曜日

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

DOM

Polyfill

DOMのアニメーション

8 ~ 6 32bit PNGmin-width, max-widthposition: fixedbackground: gradientbox-shadowtext-shadowborder-radius... etc

ハマることが多い

13年2月9日土曜日

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

DOM

PolyfillってScriptで実現していることが多い

DOMのアニメーション

8 ~ 6 JavaScriptCSS expression

13年2月9日土曜日

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

DOM

PolyfillってScriptで実現している

DOMのアニメーション

8 ~ 6 JavaScriptCSS expression

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

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

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

JavaScript は魔法ではない

13年2月9日土曜日

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

DOM

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

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

DOMのアニメーション

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

手頃なTween Engineが無い

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

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

13年2月9日土曜日

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

DOM

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

setInterval,setTimeout,requestAnimationFrame

Date.getTime

ちなみに

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

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

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

13年2月9日土曜日

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

DOM

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

DOMのアニメーション

スマホだとECMAScript 5だって

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

13年2月9日土曜日

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

DOM DOMのアニメーション

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

と思ったら...

13年2月9日土曜日

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

DOM DOMのアニメーション

案外ハマる!iOS, Android 両方

CSS, JavaScript

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

13年2月9日土曜日

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

DOM DOMのアニメーション

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

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

13年2月9日土曜日

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

DOM DOMのアニメーション

チェック中!*個人所有

13年2月9日土曜日

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

Flashを使いたく無い

気持ちは良くわかります

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

13年2月9日土曜日

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

DOM DOMのアニメーション

プロジェクト成功への道

•HTML, CSS が鍵

13年2月9日土曜日

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

DOM DOMのアニメーション

プロジェクト成功への道

•HTML, CSS が鍵•+ JavaScript

13年2月9日土曜日

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

DOM DOMのアニメーション【おまけ】パフォーマンスチェック

Chrome Developer Tool

Timeline

13年2月9日土曜日

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

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

http://caniuse.com/

13年2月9日土曜日

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

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

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

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

http://atnd.org/events/35874

13年2月9日土曜日

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

参考資料

Slideshare: http://www.slideshare.net/clockmaker_jp/fsiteflashhtml5「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/slidesHTML5 Rocks スライド、プレゼンテーション、動画

13年2月9日土曜日

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

質問

13年2月9日土曜日

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

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

13年2月9日土曜日

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

ありがとうございました

13年2月9日土曜日