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