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 Degradation
Progressive 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
Regressive
Enhancement
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 Enhancement
Ｕ
Ｘ
の
レ
ベ
ル
低
低 UAの機能実装度 高

28. REGRESSIVE
ENHANCEMENT
http://www.amazon.co.jp/dp/4278049056/

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

30. VideoJS
http://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 古いUA
JS/ON
JS/OFF

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

37. PROGRESSIVE
ENHANCEMENT
http://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 古いUA
JS/ON
JS/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
HTML
HTMLに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 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/

51. 主催：allWebクリエイター塾
羽田野太巳から学ぶ
「HTML5マークアップ講座」
http://all-web.org/curriculums/html5/index.html
羽田野太巳から学ぶ
「0から学ぶ JavaScript 講座」
http://all-web.org/curriculums/javascript/index.html