Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

More Related Content

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

  1. 1. FLASHじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら 13年2月9日土曜日
  2. 2. 自己紹介 おおくぼ ひろあき インタラクティブ・デザイナー @taikiken 13年2月9日土曜日
  3. 3. 自己紹介:今やってること Flash / ActionScript HTML, CSS, JavaScript Perl, PHP MySQL, PostgreSQL iOS / Objective-C Unity 13年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 DOM 13年2月9日土曜日
  20. 20. Web DOM Canvas 13年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/7336 13年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/7281 13年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を使って あるタイミング(イベント)や 時間軸で変更する +CSS3 13年2月9日土曜日
  49. 49. DOM Demo JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html 13年2月9日土曜日
  50. 50. DOM Demo XHTML, CSS, JavaScript 9~6 JTB パブリッシング http://www.jtbpublishing.com/recruit/saiyo/index.html 13年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 ... etc 13年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 ... etc 13年2月9日土曜日
  56. 56. DOM DOMのアニメーション PolyfillってScriptで実現していることが多い 8~6 JavaScript CSS expression 13年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.aspx 13年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.getTime 13年2月9日土曜日
  64. 64. DOM DOMのアニメーション 対応デバイスとブラウザで 使える技術が決まる スマホだとHTML5, CSS3が使い放題 http://developer.android.com/design/index.html http://www.apple.com/jp 13年2月9日土曜日
  65. 65. DOM DOMのアニメーション 対応デバイスとブラウザで 使える技術が決まる スマホだとECMAScript 5だって http://developer.android.com/design/index.html http://www.apple.com/jp 13年2月9日土曜日
  66. 66. DOM DOMのアニメーション と思ったら... http://developer.android.com/design/index.html http://www.apple.com/jp 13年2月9日土曜日
  67. 67. DOM DOMのアニメーション 案外ハマる! iOS, Android 両方 CSS, JavaScript http://developer.android.com/design/index.html http://www.apple.com/jp 13年2月9日土曜日
  68. 68. DOM DOMのアニメーション アニメーション・エフェクト 以前の問題 http://developer.android.com/design/index.html http://www.apple.com/jp 13年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 が •+ JavaScript 13年2月9日土曜日
  73. 73. DOM DOMのアニメーション 【おまけ】パフォーマンスチェック Chrome Developer Tool Timeline 13年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/35874 13年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日土曜日

×