Post on 13-Dec-2014
description
FLASHじゃなくてHTML5で
ビュンビュン動くサイトを作ってと言われたら
13年2月9日土曜日
自己紹介おおくぼ ひろあきインタラクティブ・デザイナー
@taikiken
13年2月9日土曜日
Flash / ActionScriptHTML, CSS, JavaScriptPerl, PHPMySQL, PostgreSQLiOS / Objective-CUnity
自己紹介：今やってること
13年2月9日土曜日
Flash / ActionScript は趣味Flash / ActionScript で知ったこと
自己紹介：続き
•Script（コード）を書く面白さ•インタラクティブなコンテンツ制作の奥深さ•UI設計の楽しさと難しさ
13年2月9日土曜日
あらためて
FlashじゃなくてHTML5でビュンビュン動くサイトを作ってと言われたら
13年2月9日土曜日
お断りしましょう
13年2月9日土曜日
CSSとかJavaScriptを使えばできますよ
でもその変わり
13年2月9日土曜日
と提案してみましょう
13年2月9日土曜日
ビュンビュン動く！？
13年2月9日土曜日
アニメーションとか...
13年2月9日土曜日
エフェクトとか...
13年2月9日土曜日
派手な効果
13年2月9日土曜日
文書構造のための規格
HTML5は
13年2月9日土曜日
文書構造のための規格
HTML5は
モーション、エフェクトとか無理
13年2月9日土曜日
HTML5で追加されたタグは目的に合わせて作られているな～と感心しています
HTML4, XHTMLのCSS クラス名にsection, article, aside, navとかつけたりしてます
余談ですが...
13年2月9日土曜日
魅力的な技術が色々
しかもHTML5周辺には
13年2月9日土曜日
SVG動的に図形を追加可能（ベクター）
Canvas動的に図形を追加可能（ビットマップ）
WebGL3D, Open GL対応
Video, Audio動画・音声ファイルへの対応
Geo-Location位置情報
Formform機能の強化
WebStorage(localStorage, sessionStorage)クライアント側にデータを保存
Web WorkersJavaScriptの並列処理
13年2月9日土曜日
Flashなどのプラグインを使わないモーション系コンテンツ制作の
選択肢
で、本題
13年2月9日土曜日
Web
DOM
13年2月9日土曜日
Web
DOM
Canvas
13年2月9日土曜日
Web
DOM
Canvas2D
3D(WebGL){13年2月9日土曜日
DOM利用の利点
DOM
従来技術の踏襲：学習コストが低い
13年2月9日土曜日
CSS Selectors豊富なSelector, 従来のclass, id 以外に用意
CSS Transforms拡大、縮小、回転、移動などの指定が可能なプロパティ
CSS3追加されたプロパティ。シャドウ、グラデーション、角丸など
Media Queries端末に応じてCSSを切替える
HTML5に対応しているブラウザはCSS3に対応している
+ CSS3
13年2月9日土曜日
JavaScriptなしでアニメーションが可能
CSS Transformsを使えば
13年2月9日土曜日
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日土曜日
DOM利用の問題
DOM
•JavaScriptを使う•DOMのアニメーションはブラウザのレイアウト（フロー）、描画（ペイント）への配慮が必要（後述）
13年2月9日土曜日
SVG動的に図形を追加可能（ベクター）
Video, Audio動画・音声ファイルへの対応
Geo-Location位置情報
Formform機能の強化
WebStorage(localStorage, sessionStorage)クライアント側にデータを保存
Web WorkersJavaScriptの並列処理
ほぼJavaScript APIが提供されているだけvideo, audioタグはあるけれど...
13年2月9日土曜日
Canvas2D
3D(WebGL){Canvas利用の利点
2D, 3D描画、モーション、エフェクトなどをほぼ自由にできる
13年2月9日土曜日
Canvas2D
3D(WebGL){Canvas利用の問題
JavaScriptを使ういやぁ レイヤーの無いPhotoshopみたいで大変す
by 福岡市男性Web開発者談
参考: inazumatv.com 「Canvas始めました – Canvas APIで遊んで（遊ばれて）わかったことをだらだらと」 http://www.inazumatv.com/contents/archives/7281
13年2月9日土曜日
DOM
DOM のアニメーションDOM をごにょごにょするために...JavaScript を使うなら
HTML規格はHTML4, XHTML, HTML5どれでも構わない＊DOCTYPE で動作が異なります
13年2月9日土曜日
DOM
DOM のアニメーションDOM をごにょごにょするために...
文字コードはできれば UTF-8
無用のトラブルを避けるためにも
13年2月9日土曜日
DOM
DOM のアニメーションDOM をごにょごにょするために...
HTML, CSSが重要
13年2月9日土曜日
ちょっとブラウザのお話
13年2月9日土曜日
ブラウザの仕組みレンダリングエンジン
出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
13年2月9日土曜日
ブラウザの仕組み大雑把な描画の仕組み
出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
HTML解析
レイアウト
描画
フロー
13年2月9日土曜日
ブラウザの仕組みレイアウト
出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
DOMツリー レンダーツリー13年2月9日土曜日
ブラウザの仕組みレイアウト
出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
フロート 絶対DOMツリー13年2月9日土曜日
ブラウザの仕組みレイアウト
相対的にレイアウトされる
親要素は子要素に影響する
DOMツリー13年2月9日土曜日
ブラウザの仕組みDOMのアニメーション
リフロー
再描画（リペイント）
]描画コスト
高速に何回も発生する
13年2月9日土曜日
ブラウザの仕組みDOMのアニメーション
リフローの発生をなるべく少なくする
13年2月9日土曜日
DOM
なるべくリフローしないようにするために
DOMのアニメーション
リフロー
再描画（リペイント）
13年2月9日土曜日
DOM
なるべくリフローしないようにするためにアニメーション対象のDOMへ
position: fixed, absolute を指定する＊リペイントは発生します
DOMのアニメーション
13年2月9日土曜日
DOM
CSS position
staticrelative
fixedabsolute
ちなみに
DOMツリー
絶対
13年2月9日土曜日
DOM
position fixed, absolute を使ったレイアウトって難しいオレ調べ
ちなみに
13年2月9日土曜日
DOM
position: absolute 指定のDOMを画面中央へ配置
CSSだけでもできるけど...width が % 以外の指定だと、難しいwindow 幅が固定だったら...
例えば
13年2月9日土曜日
DOM
position: absolute 指定のDOMを画面中央へ配置
JavaScript を使うとwindow resizeイベント発生時にwindow 幅とDOM 幅を計算し中央へ配置
例えば
13年2月9日土曜日
DOM
DOMを画面中央へ配置
position: static, relative だったらwidth を指定してmargin: 0 auto; ですむのに
例えば
13年2月9日土曜日
DOM
HTMLのレイアウトや表示状態をCSSのプロパティや設定値をJavaScriptを使ってあるタイミング（イベント）や時間軸で変更する+CSS3
DOMのアニメーション
13年2月9日土曜日
DOM Demo
JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html
13年2月9日土曜日
DOM Demo
JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html
XHTML, CSS, JavaScript
9 ~ 6
13年2月9日土曜日
DOM
対応デバイスとブラウザで使える技術が決まる
DOMのアニメーション
8 ~ 6 HTML5が使いにくい＊タグだけなら簡単なJavaScript+CSSで対応可能だけど
13年2月9日土曜日
DOM
対応デバイスとブラウザで使える技術が決まる
DOMのアニメーション
8 ~ 6 HTML5が使いにくい＊タグだけなら簡単なJavaScript+CSSで対応可能だけど
8 ~ 6 CSS3が使えない＊Polyfillなライブラリはあるけれど
13年2月9日土曜日
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日土曜日
DOM
Polyfill
DOMのアニメーション
8 ~ 6 32bit PNGmin-width, max-widthposition: fixedbackground: gradientbox-shadowtext-shadowborder-radius... etc 「簡単に対応できるよ」
というブログも多いですが13年2月9日土曜日
DOM
Polyfill
DOMのアニメーション
8 ~ 6 32bit PNGmin-width, max-widthposition: fixedbackground: gradientbox-shadowtext-shadowborder-radius... etc
ハマることが多い
13年2月9日土曜日
DOM
PolyfillってScriptで実現していることが多い
DOMのアニメーション
8 ~ 6 JavaScriptCSS expression
13年2月9日土曜日
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日土曜日
DOM
HTML, CSSを使ってレイアウトや表現できないことはJavaScriptを使ってもできない
DOMのアニメーション
JavaScript は魔法ではない
13年2月9日土曜日
DOM
アニメーションの起点と終点を静的なHTML, CSSで作成
JavaScript で2点間のアニメーションを作る
DOMのアニメーション
13年2月9日土曜日
DOM
ということで JavaScript の話を少しだけ
DOMのアニメーション
13年2月9日土曜日
DOM
JavaScript で困ってること【時間経過管理】
DOMのアニメーション
手頃なTween Engineが無い
13年2月9日土曜日
DOM
JavaScript で困ってること【イベント処理】
DOMのアニメーション
イベントハンドラで ”this” 参照が変わるカスタムイベントが作りにくい
13年2月9日土曜日
DOM
JavaScriptで時間管理に使える関数
setInterval,setTimeout,requestAnimationFrame
Date.getTime
ちなみに
13年2月9日土曜日
DOM
対応デバイスとブラウザで使える技術が決まる
DOMのアニメーション
スマホだとHTML5, CSS3が使い放題
http://developer.android.com/design/index.html http://www.apple.com/jp
13年2月9日土曜日
DOM
対応デバイスとブラウザで使える技術が決まる
DOMのアニメーション
スマホだとECMAScript 5だって
http://developer.android.com/design/index.html http://www.apple.com/jp
13年2月9日土曜日
DOM DOMのアニメーション
http://developer.android.com/design/index.html http://www.apple.com/jp
と思ったら...
13年2月9日土曜日
DOM DOMのアニメーション
案外ハマる！iOS, Android 両方
CSS, JavaScript
http://developer.android.com/design/index.html http://www.apple.com/jp
13年2月9日土曜日
DOM DOMのアニメーション
アニメーション・エフェクト以前の問題
http://developer.android.com/design/index.html http://www.apple.com/jp
13年2月9日土曜日
DOM DOMのアニメーション
チェック中！＊個人所有
13年2月9日土曜日
Flashを使いたく無い
気持ちは良くわかります
iOS対応していないですものねAndroid...
13年2月9日土曜日
DOM DOMのアニメーション
プロジェクト成功への道
•HTML, CSS が鍵
13年2月9日土曜日
DOM DOMのアニメーション
プロジェクト成功への道
•HTML, CSS が鍵•+ JavaScript
13年2月9日土曜日
DOM DOMのアニメーション【おまけ】パフォーマンスチェック
Chrome Developer Tool
Timeline
13年2月9日土曜日
HTML5, CSS3 ブラウザ対応状況を調べるのにcaniuse.com が便利です
http://caniuse.com/
13年2月9日土曜日
Canvas, WebGLはこちらでお話しします
2013-03-09 FxUG 第178回 勉強会@福岡福岡県Ruby・コンテンツ産業振興センター
https://www.facebook.com/events/436538453082352/
http://atnd.org/events/35874
13年2月9日土曜日
参考資料
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日土曜日
質問
13年2月9日土曜日
お仕事の相談お待ちしています
13年2月9日土曜日
ありがとうございました
13年2月9日土曜日