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

  • 3,544 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,544
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
16
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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