Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FLASHじゃなくて               HTML5で       ビュンビュン動くサイトを             作ってと言われたら13年2月9日土曜日
自己紹介  おおくぼ ひろあき  インタラクティブ・デザイナー  @taikiken13年2月9日土曜日
自己紹介:今やってること Flash / ActionScript HTML, CSS, JavaScript Perl, PHP MySQL, PostgreSQL iOS / Objective-C Unity13年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             動的に図形を追加可能(ビットマップ)             WebGL             3D, Open ...
で、本題Flashなどのプラグインを使わない              モーション系             コンテンツ制作の               選択肢13年2月9日土曜日
Web   DOM13年2月9日土曜日
Web   DOM   Canvas13年2月9日土曜日
Web   DOM   Canvas    {   2D                 3D(WebGL)13年2月9日土曜日
DOM利用の利点   DOM  従来技術の踏襲:学習コストが低い13年2月9日土曜日
HTML5に対応しているブラウザは             CSS3に対応している             + CSS3             CSS Selectors             豊富なSelector, 従来のclass, ...
CSS Transformsを使えば              JavaScriptなしで             アニメーションが可能13年2月9日土曜日
CSS Filterを使えば                                     photoshop無しで                                     画像にエフェクトを設定できます 出典 MDN...
DOM利用の問題   DOM  •JavaScriptを使う  •DOMのアニメーションはブラウザのレイアウ    ト(フロー)、描画(ペイント)への配慮が    必要(後述)13年2月9日土曜日
SVG              動的に図形を追加可能(ベクター)              Video, Audio              動画・音声ファイルへの対応              Geo-Location          ...
Canvas利用の利点   Canvas    {   2D                 3D(WebGL)  2D, 3D描画、モーション、エフェクトなどを  ほぼ自由にできる13年2月9日土曜日
Canvas利用の問題    Canvas                                           {               2D                                        ...
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/howbrows...
ブラウザの仕組み  大雑把な描画の仕組み                                     HTML解析                                     レイアウト フロー             ...
ブラウザの仕組み  レイアウト   DOMツリー レンダーツリー  出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/intern...
ブラウザの仕組み  レイアウト   DOMツリー                                                フロート                                 絶対  出典 HTML5 ...
ブラウザの仕組み  レイアウト             相対的にレイアウトされる             親要素は子要素に影響する   DOMツリー13年2月9日土曜日
ブラウザの仕組み  DOMのアニメーション             リフロー             再描画  (リペイント)                            ]   描画コスト             高速に何回も発生す...
ブラウザの仕組み  DOMのアニメーション  リフローの発生をなるべく少なくする13年2月9日土曜日
DOM                 DOMのアニメーション  なるべくリフローしないようにするために    リフロー    再描画      (リペイント)13年2月9日土曜日
DOM               DOMのアニメーション  なるべくリフローしないようにするために  アニメーション対象のDOMへ  position: fixed, absolute を指定する  *リペイントは発生します13年2月9日土曜日
DOM           ちなみに  CSS position  static  relative          DOMツリー  fixed  absolute                        絶対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...
DOM                 例えば  DOMを画面中央へ配置  position: static, relative だったら  width を指定して  margin: 0 auto; ですむのに13年2月9日土曜日
DOM             DOMのアニメーション  HTMLのレイアウトや表示状態を  CSSのプロパティや設定値を  JavaScriptを使って  あるタイミング(イベント)や  時間軸で変更する  +CSS313年2月9日土曜日
DOM                                                               Demo  JTB パブリッシング http://www.jtbpublishing.com/recruit/s...
DOM                                                               Demo  XHTML, CSS, JavaScript                            ...
DOM                           DOMのアニメーション  対応デバイスとブラウザで  使える技術が決まる             8~6   HTML5が使いにくい                   *タグだけなら...
DOM                           DOMのアニメーション  対応デバイスとブラウザで  使える技術が決まる             8~6   HTML5が使いにくい                   *タグだけなら...
DOM                                             DOMのアニメーション  Polyfill          「古い環境を新しい環境に近づけて差をなくす」                    出典...
DOM                       DOMのアニメーション  Polyfill             8~6   32bit PNG                   min-width, max-width         ...
DOM                             DOMのアニメーション  Polyfill                                 ハマることが多い             8~6   32bit PNG ...
DOM                              DOMのアニメーション  PolyfillってScriptで実現していることが多い             8~6   JavaScript                   C...
DOM                                                         DOMのアニメーション  PolyfillってScriptで実現している               8~6         ...
DOM            DOMのアニメーション  JavaScript は魔法ではない  HTML, CSSを使って  レイアウトや  表現できないことは  JavaScriptを使ってもできない13年2月9日土曜日
DOM         DOMのアニメーション  アニメーションの起点と終点を  静的なHTML, CSSで作成  JavaScript で2点間のアニメーションを作る13年2月9日土曜日
DOM         DOMのアニメーション  ということで JavaScript の話を少しだけ13年2月9日土曜日
DOM           DOMのアニメーション  JavaScript で困ってること  【時間経過管理】  手頃なTween Engineが無い13年2月9日土曜日
DOM           DOMのアニメーション  JavaScript で困ってること  【イベント処理】  イベントハンドラで ”this” 参照が変わる  カスタムイベントが作りにくい13年2月9日土曜日
DOM               ちなみに  JavaScriptで時間管理に使える関数 setInterval,setTimeout,requestAnimationFrame Date.getTime13年2月9日土曜日
DOM                                                DOMのアニメーション  対応デバイスとブラウザで  使える技術が決まる  スマホだとHTML5, CSS3が使い放題  http://dev...
DOM                                                DOMのアニメーション  対応デバイスとブラウザで  使える技術が決まる  スマホだとECMAScript 5だって  http://deve...
DOM                                                  DOMのアニメーション                                                   と思ったら.....
DOM                                                                     DOMのアニメーション                                       ...
DOM                                                                     DOMのアニメーション    アニメーション・エフェクト                      ...
DOM       DOMのアニメーション                チェック中!                *個人所有13年2月9日土曜日
Flashを使いたく無い             気持ちは良くわかります               iOS対応していない               ですものね               Android...13年2月9日土曜日
DOM           DOMのアニメーション  プロジェクト成功への道  •HTML, CSS が13年2月9日土曜日
DOM            DOMのアニメーション  プロジェクト成功への道  •HTML, CSS が  •+ JavaScript13年2月9日土曜日
DOM        DOMのアニメーション  【おまけ】パフォーマンスチェック                     Chrome Developer Tool                     Timeline13年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/43653...
参考資料   Slideshare: http://www.slideshare.net/clockmaker_jp/fsiteflashhtml5   「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda 氏   Sl...
質問13年2月9日土曜日
お仕事の相談お待ちしています13年2月9日土曜日
ありがとうございました13年2月9日土曜日
Upcoming SlideShare
Loading in …5
×

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

71,920 views

Published on

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

Published in: Technology

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

  1. 1. FLASHじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら13年2月9日土曜日
  2. 2. 自己紹介 おおくぼ ひろあき インタラクティブ・デザイナー @taikiken13年2月9日土曜日
  3. 3. 自己紹介:今やってること Flash / ActionScript HTML, CSS, JavaScript Perl, PHP MySQL, PostgreSQL iOS / Objective-C Unity13年2月9日土曜日
  4. 4. 自己紹介:続き Flash / ActionScript は趣味 Flash / ActionScript で知ったこと •Script(コード)を書く面白さ •インタラクティブなコンテンツ制作の奥深さ •UI設計の楽しさと難しさ13年2月9日土曜日
  5. 5. あらためて FlashじゃなくてHTML5で ビュンビュン動くサイトを 作ってと言われたら13年2月9日土曜日
  6. 6. お断りしましょう13年2月9日土曜日
  7. 7. でもその変わり CSSとかJavaScriptを 使えばできますよ13年2月9日土曜日
  8. 8. と提案してみましょう13年2月9日土曜日
  9. 9. ビュンビュン動く!?13年2月9日土曜日
  10. 10. アニメーションとか...13年2月9日土曜日
  11. 11. エフェクトとか...13年2月9日土曜日
  12. 12. 派手な効果13年2月9日土曜日
  13. 13. HTML5は 文書構造のための規格13年2月9日土曜日
  14. 14. HTML5は 文書構造のための規格 モーション、エフェクト とか無理13年2月9日土曜日
  15. 15. 余談ですが... HTML5で追加されたタグは目的に合わせて 作られているな∼と感心しています HTML4, XHTMLのCSS クラス名に section, article, aside, navとかつけたりしてます13年2月9日土曜日
  16. 16. しかもHTML5周辺には 魅力的な技術が色々13年2月9日土曜日
  17. 17. SVG 動的に図形を追加可能(ベクター) Canvas 動的に図形を追加可能(ビットマップ) WebGL 3D, Open GL対応 Video, Audio 動画・音声ファイルへの対応 Geo-Location 位置情報 Form form機能の強化 WebStorage (localStorage, sessionStorage) クライアント側にデータを保存 Web Workers JavaScriptの並列処理13年2月9日土曜日
  18. 18. で、本題Flashなどのプラグインを使わない モーション系 コンテンツ制作の 選択肢13年2月9日土曜日
  19. 19. Web DOM13年2月9日土曜日
  20. 20. Web DOM Canvas13年2月9日土曜日
  21. 21. Web DOM Canvas { 2D 3D(WebGL)13年2月9日土曜日
  22. 22. DOM利用の利点 DOM 従来技術の踏襲:学習コストが低い13年2月9日土曜日
  23. 23. HTML5に対応しているブラウザは CSS3に対応している + CSS3 CSS Selectors 豊富なSelector, 従来のclass, id 以外に用意 CSS Transforms 拡大、縮小、回転、移動などの指定が可能なプロパティ CSS3 追加されたプロパティ。シャドウ、グラデーション、角丸など Media Queries 端末に応じてCSSを切替える13年2月9日土曜日
  24. 24. CSS Transformsを使えば JavaScriptなしで アニメーションが可能13年2月9日土曜日
  25. 25. 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/733613年2月9日土曜日
  26. 26. DOM利用の問題 DOM •JavaScriptを使う •DOMのアニメーションはブラウザのレイアウ ト(フロー)、描画(ペイント)への配慮が 必要(後述)13年2月9日土曜日
  27. 27. SVG 動的に図形を追加可能(ベクター) Video, Audio 動画・音声ファイルへの対応 Geo-Location 位置情報 Form form機能の強化 WebStorage (localStorage, sessionStorage) クライアント側にデータを保存 Web Workers JavaScriptの並列処理 ほぼJavaScript APIが提供されているだけ video, audioタグはあるけれど...13年2月9日土曜日
  28. 28. Canvas利用の利点 Canvas { 2D 3D(WebGL) 2D, 3D描画、モーション、エフェクトなどを ほぼ自由にできる13年2月9日土曜日
  29. 29. Canvas利用の問題 Canvas { 2D 3D(WebGL) JavaScriptを使う いやぁ レイヤーの無いPhotoshopみたいで大変す by 福岡市男性Web開発者談 参考: inazumatv.com 「Canvas始めました – Canvas APIで遊んで(遊ばれて)わかったことをだらだらと」 http://www.inazumatv.com/contents/archives/728113年2月9日土曜日
  30. 30. DOM DOM のアニメーション DOM をごにょごにょするために... JavaScript を使うなら HTML規格は HTML4, XHTML, HTML5どれでも構わない *DOCTYPE で動作が異なります13年2月9日土曜日
  31. 31. DOM DOM のアニメーション DOM をごにょごにょするために... 文字コードはできれば UTF-8 無用のトラブルを避けるためにも13年2月9日土曜日
  32. 32. DOM DOM のアニメーション DOM をごにょごにょするために... HTML, CSSが重要13年2月9日土曜日
  33. 33. ちょっとブラウザのお話13年2月9日土曜日
  34. 34. ブラウザの仕組み レンダリングエンジン 出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/13年2月9日土曜日
  35. 35. ブラウザの仕組み 大雑把な描画の仕組み HTML解析 レイアウト フロー 描画 出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/13年2月9日土曜日
  36. 36. ブラウザの仕組み レイアウト DOMツリー レンダーツリー 出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/13年2月9日土曜日
  37. 37. ブラウザの仕組み レイアウト DOMツリー フロート 絶対 出典 HTML5 ROCKS: 「ブラウザの仕組み: 最新ウェブブラウザの内部構造」 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/13年2月9日土曜日
  38. 38. ブラウザの仕組み レイアウト 相対的にレイアウトされる 親要素は子要素に影響する DOMツリー13年2月9日土曜日
  39. 39. ブラウザの仕組み DOMのアニメーション リフロー 再描画 (リペイント) ] 描画コスト 高速に何回も発生する13年2月9日土曜日
  40. 40. ブラウザの仕組み DOMのアニメーション リフローの発生をなるべく少なくする13年2月9日土曜日
  41. 41. DOM DOMのアニメーション なるべくリフローしないようにするために リフロー 再描画 (リペイント)13年2月9日土曜日
  42. 42. DOM DOMのアニメーション なるべくリフローしないようにするために アニメーション対象のDOMへ position: fixed, absolute を指定する *リペイントは発生します13年2月9日土曜日
  43. 43. DOM ちなみに CSS position static relative DOMツリー fixed absolute 絶対13年2月9日土曜日
  44. 44. DOM ちなみに position fixed, absolute を 使ったレイアウトって難しい オレ調べ13年2月9日土曜日
  45. 45. DOM 例えば position: absolute 指定のDOMを画面中央へ配置 CSSだけでもできるけど... width が % 以外の指定だと、難しい window 幅が固定だったら...13年2月9日土曜日
  46. 46. DOM 例えば position: absolute 指定のDOMを画面中央へ配置 JavaScript を使うと window resizeイベント発生時にwindow 幅と DOM 幅を計算し中央へ配置13年2月9日土曜日
  47. 47. DOM 例えば DOMを画面中央へ配置 position: static, relative だったら width を指定して margin: 0 auto; ですむのに13年2月9日土曜日
  48. 48. DOM DOMのアニメーション HTMLのレイアウトや表示状態を CSSのプロパティや設定値を JavaScriptを使って あるタイミング(イベント)や 時間軸で変更する +CSS313年2月9日土曜日
  49. 49. DOM Demo JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html13年2月9日土曜日
  50. 50. DOM Demo XHTML, CSS, JavaScript 9~6 JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html13年2月9日土曜日
  51. 51. DOM DOMのアニメーション 対応デバイスとブラウザで 使える技術が決まる 8~6 HTML5が使いにくい *タグだけなら簡単なJavaScript+CSSで対応可能だけど13年2月9日土曜日
  52. 52. DOM DOMのアニメーション 対応デバイスとブラウザで 使える技術が決まる 8~6 HTML5が使いにくい *タグだけなら簡単なJavaScript+CSSで対応可能だけど 8~6 CSS3が使えない *Polyfillなライブラリはあるけれど13年2月9日土曜日
  53. 53. DOM DOMのアニメーション 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 ... etc13年2月9日土曜日
  54. 54. DOM DOMのアニメーション Polyfill 8~6 32bit PNG min-width, max-width position: fixed background: gradient box-shadow text-shadow border-radius ... etc 「簡単に対応できるよ」 というブログも多いですが13年2月9日土曜日
  55. 55. DOM DOMのアニメーション Polyfill ハマることが多い 8~6 32bit PNG min-width, max-width position: fixed background: gradient box-shadow text-shadow border-radius ... etc13年2月9日土曜日
  56. 56. DOM DOMのアニメーション PolyfillってScriptで実現していることが多い 8~6 JavaScript CSS expression13年2月9日土曜日
  57. 57. DOM DOMのアニメーション PolyfillってScriptで実現している 8~6 JavaScript CSS expression リフローが起きるたびに実行される アニメーション用のJavaScriptに干渉することも microsoftはCSS expressionのサポートを終了しています 「CSS Expressions のサポート終了について」 http://msdn.microsoft.com/ja-jp/ie/dd253083.aspx13年2月9日土曜日
  58. 58. DOM DOMのアニメーション JavaScript は魔法ではない HTML, CSSを使って レイアウトや 表現できないことは JavaScriptを使ってもできない13年2月9日土曜日
  59. 59. DOM DOMのアニメーション アニメーションの起点と終点を 静的なHTML, CSSで作成 JavaScript で2点間のアニメーションを作る13年2月9日土曜日
  60. 60. DOM DOMのアニメーション ということで JavaScript の話を少しだけ13年2月9日土曜日
  61. 61. DOM DOMのアニメーション JavaScript で困ってること 【時間経過管理】 手頃なTween Engineが無い13年2月9日土曜日
  62. 62. DOM DOMのアニメーション JavaScript で困ってること 【イベント処理】 イベントハンドラで ”this” 参照が変わる カスタムイベントが作りにくい13年2月9日土曜日
  63. 63. DOM ちなみに JavaScriptで時間管理に使える関数 setInterval,setTimeout,requestAnimationFrame Date.getTime13年2月9日土曜日
  64. 64. DOM DOMのアニメーション 対応デバイスとブラウザで 使える技術が決まる スマホだとHTML5, CSS3が使い放題 http://developer.android.com/design/index.html http://www.apple.com/jp13年2月9日土曜日
  65. 65. DOM DOMのアニメーション 対応デバイスとブラウザで 使える技術が決まる スマホだとECMAScript 5だって http://developer.android.com/design/index.html http://www.apple.com/jp13年2月9日土曜日
  66. 66. DOM DOMのアニメーション と思ったら... http://developer.android.com/design/index.html http://www.apple.com/jp13年2月9日土曜日
  67. 67. DOM DOMのアニメーション 案外ハマる! iOS, Android 両方 CSS, JavaScript http://developer.android.com/design/index.html http://www.apple.com/jp13年2月9日土曜日
  68. 68. DOM DOMのアニメーション アニメーション・エフェクト 以前の問題 http://developer.android.com/design/index.html http://www.apple.com/jp13年2月9日土曜日
  69. 69. DOM DOMのアニメーション チェック中! *個人所有13年2月9日土曜日
  70. 70. Flashを使いたく無い 気持ちは良くわかります iOS対応していない ですものね Android...13年2月9日土曜日
  71. 71. DOM DOMのアニメーション プロジェクト成功への道 •HTML, CSS が13年2月9日土曜日
  72. 72. DOM DOMのアニメーション プロジェクト成功への道 •HTML, CSS が •+ JavaScript13年2月9日土曜日
  73. 73. DOM DOMのアニメーション 【おまけ】パフォーマンスチェック Chrome Developer Tool Timeline13年2月9日土曜日
  74. 74. HTML5, CSS3 ブラウザ対応状況を調べるのに caniuse.com が便利です http://caniuse.com/13年2月9日土曜日
  75. 75. Canvas, WebGLは こちらでお話しします 2013-03-09 FxUG 第178回 勉強会@福岡 福岡県Ruby・コンテンツ産業振興センター https://www.facebook.com/events/436538453082352/ http://atnd.org/events/3587413年2月9日土曜日
  76. 76. 参考資料 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/slides HTML5 Rocks スライド、プレゼンテーション、動画13年2月9日土曜日
  77. 77. 質問13年2月9日土曜日
  78. 78. お仕事の相談お待ちしています13年2月9日土曜日
  79. 79. ありがとうございました13年2月9日土曜日

×