0
HTML5を使うためのプログレッシブ・エンハンスメント       Swap Skills@アップルストア銀座                     2011年7月13日                      有限会社 futomi   ...
<ruby> 羽田野<rp>(</rp><rt>はたの</rt><rp>)</rp> 太巳<rp>(</rp><rt>ふとみ</rt><rp>)</rp></ruby>
http://www.futomi.com/
http://www.html5.jp/
HTML5 = Markup +   API
アジェンダ       ウェブとは     開発アプローチRegressive Enhancement  Graceful DegradationProgressive Enhancement         まとめ
ウェブとはhttp://www.flickr.com/photos/notionscapital/5045320233/
あらゆる対象に情報を伝える
ちらし
あらゆる対象に同じUX
あらゆる対象に同じUX   ≠ウェブ
クロスブラウザー対策あらゆる対象に   同じUXを提供する
クロスブラウザー対策あらゆる対象に   同じUXを提供する   確実に情報を伝える
本来のウェブとは• 非メディア依存 – ビジュアル・ブラウザー – 支援技術(Assistive Technology)   • スクリーンリーダーなど – 検索エンジンのロボット• リフローが前提 – スクリーン・サイズに応じて変形自在 – ...
同じUXは美徳? 違いは悪徳?
同じUXは美徳?  違いは悪徳?“私は、かしましい美徳よりは、        静かな悪徳を好む”           Albert Einstein
Progressive Enhancementそれは違いを受け入れること
開発アプローチhttp://www.flickr.com/photos/15216811@N06/5254696771/
さまざまな用語         Graceful      Degradation  Fallback  RegressiveEnhancement                                      Progressiv...
用語の整理開発アプローチ – Regressive Enhancement – Graceful Degradation – Progressive Enhancement手段 – Fallback特性表現 – Unobtrusive Scri...
Unobtrusive Scripting• JSは控えめにつつましく• JSが機能することを前提としない – JSをオフにしたUA – JSの実装が貧弱なUA                 http://clubt.jp/product/1...
良くない例1<a href="javascript:window.history.back()">              前項へ戻る</a>
改良版1<a href="/index.html" id="bk">トップへ</a><script>(function () { if( ! window.addEventListener ) { return; } var bk = docu...
良くない例2  <ul>   <li>ニュース</li>   <li>天気予報</li>   <li>マネー</li>   ...  </ul>  li.onclick = function() {    // サブメニューを動的生成  };
改良版2 <ul>   ...  <li>マネー    <ul>      <li>株式</li>      <li>投資信託</li>    </ul>  </li>  ... </ul> li.onclick = function() { ...
3つの開発アプローチ• 三者択一ではない 1. Regressive Enhancement 2. Graceful Degradation 3. Progressive Enhancement• いずれも目的は同じ – すべての対象に必要な情...
アプローチの違い高            Regressive EnhancementUXのレベル低    低     UAの機能実装度               高
REGRESSIVEENHANCEMENT  http://www.amazon.co.jp/dp/4278049056/
Regressive Enhancement• 古いブラウザーには、  同等の機能を  あらゆる手段を使って  気合いでエミュレート• JSライブラリーが有効• 非常に高コストゆえに  自作は厳しい
VideoJShttp://videojs.com/
<link rel="stylesheet" href="video-js.css"><script src="video.js"></script>                  第1段階<script>                 ...
GRACEFUL DEGRADATION     http://www.flickr.com/photos/melkorcete/180238980/
Graceful Degradation• Fail Safe/Fault Tolerant  – 必要な機能がないUAを救済• デグレードして代替え機能を提供  – 少なくとも最低限の機能を提供  – HTMLのフォールバック機能が有効  –...
マークアップ<figure> <canvas>   <table><!-- グラフの元となる表 --></table> </canvas> <figcaption>会員数の推移</figcaption></figure>
結果         新しいUA        古いUAJS/ONJS/OFF
要素フォールバックのポイント• JavaScriptがOFFのUAに注意• 該当の要素をサポートしたUAでは、JSが  OFFの場合を救済できない場合がある• <canvas>, <video>, <audio>, etc
PROGRESSIVEENHANCEMENThttp://www.flickr.com/photos/melkorcete/180238980/
Progressive Enhancement• 必要最小限の機能を用意 – まずはマークアップから – あらゆるUAで利用可能• UAの能力に応じて機能を拡張 – CSSやJSによるUXをアドオン – 最新のUAなら最高のUXを       ...
マークアップ<figure> <table><!-- グラフの元となる表 --></table> <figcaption>会員数の推移</figcaption></figure>
スクリプト// canvas要素のノード・オブジェクトvar canvas = document.createElement(canvas);// table要素のノード・オブジェクトvar tbl = document.getElementB...
結果         新しいUA        古いUAJS/ONJS/OFF
ファイルのアップロード必要なAPIが実装されていないブラウザーをサポート• ファイル選択コントロールによるファイル指定• 通常のフォーム・サブミットによるアップロード• ファイルアップロード中の進捗はわからない                 ...
ファイルのアップロードProgressive Enhancementを使うと• ドラッグ&ドロップによるファイル指定• XHR2 FormDataによるPOST• アップロード中の進捗表示                          ht...
三層を完全に分離           JS          CSS        HTMLHTMLにCSSとJSをインラインで混在させない    HTMLだけでも最低限の機能を提供
開発の順序HTMLのみで必要最小限を CSSでビジュアルを追加   JSで操作性を追加
まとめ      http://www.morguefile.com/archive/display/693087
優先順位を間違えない• アクセシビリティーが最優先 – あらゆる対象に確実に情報を届ける – マークアップでできることを優先 – CSSやJSに頼らない• ユーザービリティーをアドオン –   CSSで見やすさをアドオン –   JSで使いやす...
“望んでいたものを手に入れたと        思い込んでいるときほど、        願望から遠く離れていることはない”                         ゲーテ「親和力」 Regressive Enhancementを求めるあま...
参考図書                                         designing with DOM Scripting 第二版                       progressive enhancemen...
ご清聴ありがとうございました              有限会社 futomi        代表取締役     羽田野 太巳            http://www.html5.jp/        http://www.futomi.c...
主催:allWebクリエイター塾羽田野太巳から学ぶ「HTML5マークアップ講座」http://all-web.org/curriculums/html5/index.html羽田野太巳から学ぶ「0から学ぶ JavaScript 講座」http:...
Upcoming SlideShare
Loading in...5
×

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

3,673

Published on

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,673
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×