Contenu connexe
Similaire à HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
Similaire à HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement (20)
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressive enhancement
- 1. HTML5を使うための
プログレッシブ・エンハンスメント
Swap Skills@アップルストア銀座
2011年7月13日
有限会社 futomi
代表取締役 羽田野 太巳
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/
- 6. アジェンダ
ウェブとは
開発アプローチ
Regressive Enhancement
Graceful Degradation
Progressive Enhancement
まとめ
- 14. 本来のウェブとは
• 非メディア依存
– ビジュアル・ブラウザー
– 支援技術(Assistive Technology)
• スクリーンリーダーなど
– 検索エンジンのロボット
• リフローが前提
– スクリーン・サイズに応じて変形自在
– デメリットではなく、大きなメリット
• マルチデバイス
– PC、スマートフォン、テレビなど
- 19. さまざまな用語
Graceful
Degradation
Fallback
Regressive
Enhancement
Progressive
Unobtrusive Enhancement
Scripting
http://www.flickr.com/photos/horiavarlan/4273913228/
- 20. 用語の整理
開発アプローチ
– Regressive Enhancement
– Graceful Degradation
– Progressive Enhancement
手段
– Fallback
特性表現
– Unobtrusive Scripting
- 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の機能実装度 高
- 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>
- 33. Graceful Degradation
• Fail Safe/Fault Tolerant
– 必要な機能がないUAを救済
• デグレードして代替え機能を提供
– 少なくとも最低限の機能を提供
– HTMLのフォールバック機能が有効
– 手っ取り早いが、万能ではない
- 35. 結果
新しいUA 古いUA
JS/ON
JS/OFF
- 40. スクリプト
// canvas要素のノード・オブジェクト
var canvas = document.createElement('canvas');
// table要素のノード・オブジェクト
var tbl = document.getElementById('tbl');
// table要素をcanvas要素に置き換える
tbl.parentNode.replaceChild(canvas, tbl);
// グラフを描画
...
- 41. 結果
新しいUA 古いUA
JS/ON
JS/OFF
- 44. 三層を完全に分離
JS
CSS
HTML
HTMLにCSSとJSをインラインで混在させない
HTMLだけでも最低限の機能を提供
- 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 enhancement
http://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/