IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan

Size: px

Start display at page:

Download "IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan"

みがねちとく
7 years ago
Views:

1 Progressive Enhancement ~ すべての人に確実に情報を届けるために ~ 第 16 回 HTML5とか勉強会 2011 年 4 月 21 日有限会社 futomi 代表取締役羽田野太巳

2 <ruby> 羽田野 <rp>(</rp><rt>はたの</rt><rp>)</rp> 太巳 <rp>(</rp><rt>ふとみ</rt><rp>)</rp> </ruby>

5 HTML5 = Markup + API

6 お題ウェブとは開発アプローチ Regressive Enhancement Graceful Degradation Progressive Enhancement まとめ

7 ウェブとは

8 あらゆる対象に情報を伝える

9 ちらし

10 あらゆる対象に同じUX

11 あらゆる対象に同じUX ウェブ

12 クロスブラウザー対策あらゆる対象に同じUXを提供する

13 クロスブラウザー対策あらゆる対象に同じUXを提供する確実に情報を伝える

14 本来のウェブとは非メディア依存ビジュアルブラウザー支援技術 (Assistive Technology) スクリーンリーダーなど検索エンジンのロボットリフローが前提スクリーンサイズに応じて変形自在デメリットではなく大きなメリットマルチデバイス PC スマートフォンテレビなど

15 同じUXは美徳? 違いは悪徳?

16 同じUXは美徳? 違いは悪徳? 私はかしましい美徳よりは静かな悪徳を好む Albert Einstein

17 Progressive Enhancement それは違いを受け入れること

18 開発アプローチ

19 Fallback さまざまな用語 Graceful Degradation Regressive Enhancement Unobtrusive Scripting Progressive Enhancement

20 用語の整理開発アプローチ Regressive Enhancement Graceful Degradation Progressive Enhancement 手段 Fallback 特性表現 Unobtrusive Scripting

21 Unobtrusive Scripting JSは控えめにつつましく JSが機能することを前提としない JSをオフにしたUA JSの実装が貧弱なUA

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 Enhancement U X のレベル低低 UAの機能実装度高

28 REGRESSIVE ENHANCEMENT

29 Regressive Enhancement 古いブラウザーには同等の機能をあらゆる手段を使って気合いでエミュレート JSライブラリーが有効非常に高コストゆえに自作は厳しい

30 VideoJS

31 <link rel="stylesheet" href="video-js.css"> <script src="video.js"></script> <script> VideoJS.setupAllWhenReady(); </script> 気合い注入第 1 段階 <div class="video-js-box"> <video controls> <source src="v.mp4" type="video/mp4"> <source src="v.webm" type="video/webm"> <object data="...swf">... <p><a href="v.mp4">ダウンロード</a></p> </object> </video> </div> 気合い注入第 2 段階第 3 段階第 4 段階第 5 段階 Graceful Degradation

32 GRACEFUL DEGRADATION

33 Graceful Degradation Fail Safe/Fault Tolerant 必要な機能がないUAを救済デグレードして代替え機能を提供少なくとも最低限の機能を提供 HTMLのフォールバック機能が有効手っ取り早いが限界はある

34 マークアップ <figure> <canvas> <table></table> </canvas> <figcaption> 会員数の推移 </figcaption> </figure>

35 結果 JS/ON 新しいUA 古いUA JS/OFF

36 要素フォールバックのポイント JavaScriptがOFFのUAに注意該当の要素をサポートしたUAでは JSが OFFの場合を救済できない場合がある <canvas>, <video>, <audio>, etc

37 PROGRESSIVE ENHANCEMENT

38 Progressive Enhancement 必要最小限の機能を用意まずはマークアップからあらゆるUAで利用可能 UAの能力に応じて機能を拡張 CSSやJSによるUXをアドオン最新のUAなら最高のUXを

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 結果 JS/ON 新しいUA 古いUA JS/OFF

42 ファイルのアップロード必要なAPIが実装されていないブラウザーをサポートファイル選択コントロールによるファイル指定通常のフォームサブミットによるアップロードファイルアップロード中の進捗はわからない

43 ファイルのアップロード Progressive Enhancementを使うとドラッグ&ドロップによるファイル指定 XHR2 FormDataによるPOST アップロード中の進捗表示

44 三層を完全に分離 JS CSS HTML HTMLにCSSとJSをインラインで混在させない HTMLだけでも最低限の機能を提供

45 まとめ

46 優先順位を間違えないアクセシビリティーが最優先あらゆる対象に確実に情報を届けるマークアップでできることを優先 CSSやJSに頼らないユーザービリティーをアドオン CSSで見やすさをアドオン JSで使いやすさをアドオン最新 UAでは最高のUX CSSとJSはUnobtrusive( 控えめ)であるべき

47 アプローチを併用あらゆるUAを救済 Progressive Enhancement Graceful Degradation よりよいUXを目指す Progressive Enhancement さらに余裕があれば Regressive Enhancement JSライブラリーの活用

48 望んでいたものを手に入れたと思い込んでいるときほど願望から遠く離れていることはないゲーテ親和力 Regressive Enhancementを求めるあまり大事なユーザーを逃していませんか? 1オンスの思慮分別は 1ポンドの英知に値するイギリスのことわざちょっとした工夫と配慮で多くのユーザーに手をさしのべることができます

49 参考図書 DOM Scripting 第二版 designing with progressive enhancement

50 ご清聴ありがとうございました有限会社 futomi 代表取締役羽田野太巳

スライド 1

スライド 1 公的年金制度の健全性及び信頼性の確保のための厚生年金保険法等の一部を改正する法律について厚生労働省年金局公的年金制度の健全性及び信頼性の確保のための厚生年金保険法等の一部を改正する法律 ( 平成 25 年法律第 63 号 )の概要

IE9 Beta版のここがいい、ここは直して欲しい ～裏HTML5～ Microsoft 2010 MVP Open Day Japan

IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan