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.

HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement

4,466 views

Published on

  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement

  1. 1. HTML5を使うためのプログレッシブ・エンハンスメント Swap Skills@アップルストア銀座 2011年7月13日 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
  2. 2. <ruby> 羽田野<rp>(</rp><rt>はたの</rt><rp>)</rp> 太巳<rp>(</rp><rt>ふとみ</rt><rp>)</rp></ruby>
  3. 3. http://www.futomi.com/
  4. 4. http://www.html5.jp/
  5. 5. HTML5 = Markup + API
  6. 6. アジェンダ ウェブとは 開発アプローチRegressive Enhancement Graceful DegradationProgressive Enhancement まとめ
  7. 7. ウェブとはhttp://www.flickr.com/photos/notionscapital/5045320233/
  8. 8. あらゆる対象に情報を伝える
  9. 9. ちらし
  10. 10. あらゆる対象に同じUX
  11. 11. あらゆる対象に同じUX ≠ウェブ
  12. 12. クロスブラウザー対策あらゆる対象に 同じUXを提供する
  13. 13. クロスブラウザー対策あらゆる対象に 同じUXを提供する 確実に情報を伝える
  14. 14. 本来のウェブとは• 非メディア依存 – ビジュアル・ブラウザー – 支援技術(Assistive Technology) • スクリーンリーダーなど – 検索エンジンのロボット• リフローが前提 – スクリーン・サイズに応じて変形自在 – デメリットではなく、大きなメリット• マルチデバイス – PC、スマートフォン、テレビなど
  15. 15. 同じUXは美徳? 違いは悪徳?
  16. 16. 同じUXは美徳? 違いは悪徳?“私は、かしましい美徳よりは、 静かな悪徳を好む” Albert Einstein
  17. 17. Progressive Enhancementそれは違いを受け入れること
  18. 18. 開発アプローチhttp://www.flickr.com/photos/15216811@N06/5254696771/
  19. 19. さまざまな用語 Graceful Degradation Fallback RegressiveEnhancement Progressive Unobtrusive Enhancement Scripting http://www.flickr.com/photos/horiavarlan/4273913228/
  20. 20. 用語の整理開発アプローチ – Regressive Enhancement – Graceful Degradation – Progressive Enhancement手段 – Fallback特性表現 – Unobtrusive Scripting
  21. 21. Unobtrusive Scripting• JSは控えめにつつましく• JSが機能することを前提としない – JSをオフにしたUA – JSの実装が貧弱なUA http://clubt.jp/product/106622_4679549.html
  22. 22. 良くない例1<a href="javascript:window.history.back()"> 前項へ戻る</a>
  23. 23. 改良版1<a href="/index.html" id="bk">トップへ</a><script>(function () { if( ! window.addEventListener ) { return; } var bk = document.getElementById(bk); bk.innerHTML = 前項へ戻る; bk.addEventListener(click, function(e) { e.preventDefault(); window.history.back(); }, false);})();</script>
  24. 24. 良くない例2 <ul> <li>ニュース</li> <li>天気予報</li> <li>マネー</li> ... </ul> li.onclick = function() { // サブメニューを動的生成 };
  25. 25. 改良版2 <ul> ... <li>マネー <ul> <li>株式</li> <li>投資信託</li> </ul> </li> ... </ul> li.onclick = function() { // 表示・非表示の切り替え };
  26. 26. 3つの開発アプローチ• 三者択一ではない 1. Regressive Enhancement 2. Graceful Degradation 3. Progressive Enhancement• いずれも目的は同じ – すべての対象に必要な情報を確実に提供• どこまで対応するか – 対象ユーザーとコストとの兼ね合い
  27. 27. アプローチの違い高 Regressive EnhancementUXのレベル低 低 UAの機能実装度 高
  28. 28. REGRESSIVEENHANCEMENT http://www.amazon.co.jp/dp/4278049056/
  29. 29. Regressive Enhancement• 古いブラウザーには、 同等の機能を あらゆる手段を使って 気合いでエミュレート• JSライブラリーが有効• 非常に高コストゆえに 自作は厳しい
  30. 30. VideoJShttp://videojs.com/
  31. 31. <link rel="stylesheet" href="video-js.css"><script src="video.js"></script> 第1段階<script> 気合い注入 VideoJS.setupAllWhenReady();</script><div class="video-js-box"> <video controls> <source src="v.mp4" type="video/mp4"> 第2段階 <source src="v.webm" type="video/webm"> 第3段階 <object data="....swf"> 第4段階 ... 気合い注入 <p><a href="v.mp4">ダウンロード</a></p> 第5段階 </object> Graceful Degradation </video></div>
  32. 32. GRACEFUL DEGRADATION http://www.flickr.com/photos/melkorcete/180238980/
  33. 33. Graceful Degradation• Fail Safe/Fault Tolerant – 必要な機能がないUAを救済• デグレードして代替え機能を提供 – 少なくとも最低限の機能を提供 – HTMLのフォールバック機能が有効 – 手っ取り早いが、万能ではない
  34. 34. マークアップ<figure> <canvas> <table><!-- グラフの元となる表 --></table> </canvas> <figcaption>会員数の推移</figcaption></figure>
  35. 35. 結果 新しいUA 古いUAJS/ONJS/OFF
  36. 36. 要素フォールバックのポイント• JavaScriptがOFFのUAに注意• 該当の要素をサポートしたUAでは、JSが OFFの場合を救済できない場合がある• <canvas>, <video>, <audio>, etc
  37. 37. PROGRESSIVEENHANCEMENThttp://www.flickr.com/photos/melkorcete/180238980/
  38. 38. Progressive Enhancement• 必要最小限の機能を用意 – まずはマークアップから – あらゆるUAで利用可能• UAの能力に応じて機能を拡張 – CSSやJSによるUXをアドオン – 最新のUAなら最高のUXを http://www.31ice.co.jp/contents/product/sundae/su046.html
  39. 39. マークアップ<figure> <table><!-- グラフの元となる表 --></table> <figcaption>会員数の推移</figcaption></figure>
  40. 40. スクリプト// canvas要素のノード・オブジェクトvar canvas = document.createElement(canvas);// table要素のノード・オブジェクトvar tbl = document.getElementById(tbl);// table要素をcanvas要素に置き換えるtbl.parentNode.replaceChild(canvas, tbl);// グラフを描画...
  41. 41. 結果 新しいUA 古いUAJS/ONJS/OFF
  42. 42. ファイルのアップロード必要なAPIが実装されていないブラウザーをサポート• ファイル選択コントロールによるファイル指定• 通常のフォーム・サブミットによるアップロード• ファイルアップロード中の進捗はわからない http://www.futomi.com/library/zip/index.html
  43. 43. ファイルのアップロードProgressive Enhancementを使うと• ドラッグ&ドロップによるファイル指定• XHR2 FormDataによるPOST• アップロード中の進捗表示 http://www.futomi.com/library/zip/index.html
  44. 44. 三層を完全に分離 JS CSS HTMLHTMLにCSSとJSをインラインで混在させない HTMLだけでも最低限の機能を提供
  45. 45. 開発の順序HTMLのみで必要最小限を CSSでビジュアルを追加 JSで操作性を追加
  46. 46. まとめ http://www.morguefile.com/archive/display/693087
  47. 47. 優先順位を間違えない• アクセシビリティーが最優先 – あらゆる対象に確実に情報を届ける – マークアップでできることを優先 – CSSやJSに頼らない• ユーザービリティーをアドオン – CSSで見やすさをアドオン – JSで使いやすさをアドオン – 最新UAでは最高のUX – CSSとJSはUnobtrusive(控えめ)であるべき
  48. 48. “望んでいたものを手に入れたと 思い込んでいるときほど、 願望から遠く離れていることはない” ゲーテ「親和力」 Regressive Enhancementを求めるあまり、 大事なユーザーを逃していませんか? “1オンスの思慮分別は、 1ポンドの英知に値する” イギリスのことわざ ちょっとした工夫と配慮で、多くのユーザーに手をさしのべることができます。
  49. 49. 参考図書 designing with DOM Scripting 第二版 progressive enhancementhttp://www.amazon.co.jp/dp/1430233893/ http://www.amazon.co.jp/dp/0321658884/
  50. 50. ご清聴ありがとうございました 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
  51. 51. 主催:allWebクリエイター塾羽田野太巳から学ぶ「HTML5マークアップ講座」http://all-web.org/curriculums/html5/index.html羽田野太巳から学ぶ「0から学ぶ JavaScript 講座」http://all-web.org/curriculums/javascript/index.html

×