HTML5を使うための

有限会社 futomi代表取締役羽田野 太巳

http://www.html5.jp/http://www.futomi.com/

http://twitter.com/futomi/

Swap Skills@アップルストア銀座2011年7月13日

プログレッシブ・エンハンスメント

<ruby>羽田野<rp>（</rp><rt>はたの</rt><rp>）</rp>太巳<rp>（</rp><rt>ふとみ</rt><rp>）</rp>

</ruby>

http://www.futomi.com/

http://www.html5.jp/

HTML5 =Markup API+

アジェンダ

ウェブとは

開発アプローチ

Regressive Enhancement

Graceful Degradation

Progressive Enhancement

まとめ

ウェブとは

http://www.flickr.com/photos/notionscapital/5045320233/

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

ちらし

あらゆる対象に同じUX

あらゆる対象に同じUX

≠ウェブ

クロスブラウザー対策あらゆる対象に

同じUXを提供する

クロスブラウザー対策

確実に情報を伝える

あらゆる対象に同じUXを提供する

本来のウェブとは• 非メディア依存

– ビジュアル・ブラウザー– 支援技術（Assistive Technology）

• スクリーンリーダーなど– 検索エンジンのロボット

• リフローが前提– スクリーン・サイズに応じて変形自在– デメリットではなく、大きなメリット

• マルチデバイス– PC、スマートフォン、テレビなど

同じUXは美徳？違いは悪徳？

同じUXは美徳？違いは悪徳？

“私は、かしましい美徳よりは、静かな悪徳を好む”

Albert Einstein

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

開発アプローチ

http://www.flickr.com/photos/15216811@N06/5254696771/

http://www.flickr.com/photos/horiavarlan/4273913228/

Fallback

RegressiveEnhancement

ProgressiveEnhancement

GracefulDegradation

UnobtrusiveScripting

さまざまな用語

用語の整理開発アプローチ

– Regressive Enhancement– Graceful Degradation– Progressive Enhancement

手段– Fallback

特性表現– Unobtrusive Scripting

Unobtrusive Scripting• JSは控えめにつつましく• JSが機能することを前提としない

– JSをオフにしたUA– JSの実装が貧弱なUA

http://clubt.jp/product/106622_4679549.html

良くない例1

<a href="javascript:window.history.back()">前項へ戻る</a>

改良版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>

良くない例2<ul><li>ニュース</li><li>天気予報</li><li>マネー</li>...

</ul>

li.onclick = function() {// サブメニューを動的生成

};

改良版2<ul>

...<li>マネー<ul><li>株式</li><li>投資信託</li>

</ul></li>...

</ul>

li.onclick = function() {// 表示・非表示の切り替え

};

3つの開発アプローチ• 三者択一ではない

1. Regressive Enhancement2. Graceful Degradation3. Progressive Enhancement

• いずれも目的は同じ– すべての対象に必要な情報を確実に提供

• どこまで対応するか– 対象ユーザーとコストとの兼ね合い

アプローチの違い

高低 UAの機能実装度

低

高

Regressive Enhancement

ＵＸのレベル

REGRESSIVE ENHANCEMENT

http://www.amazon.co.jp/dp/4278049056/

Regressive Enhancement• 古いブラウザーには、同等の機能をあらゆる手段を使って気合いでエミュレート

• JSライブラリーが有効

• 非常に高コストゆえに自作は厳しい

VideoJS

http://videojs.com/

<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

GRACEFUL DEGRADATION

http://www.flickr.com/photos/melkorcete/180238980/

Graceful Degradation• Fail Safe/Fault Tolerant

– 必要な機能がないUAを救済

• デグレードして代替え機能を提供– 少なくとも最低限の機能を提供– HTMLのフォールバック機能が有効– 手っ取り早いが、万能ではない

マークアップ

<figure><canvas>

<table><!-- グラフの元となる表 --></table></canvas><figcaption>会員数の推移</figcaption>

</figure>

結果新しいUA 古いUA

JS/ON

JS/OFF

要素フォールバックのポイント• JavaScriptがOFFのUAに注意

• 該当の要素をサポートしたUAでは、JSがOFFの場合を救済できない場合がある

• <canvas>, <video>, <audio>, etc

PROGRESSIVE ENHANCEMENT

http://www.flickr.com/photos/melkorcete/180238980/

Progressive Enhancement• 必要最小限の機能を用意

– まずはマークアップから– あらゆるUAで利用可能

• UAの能力に応じて機能を拡張– CSSやJSによるUXをアドオン– 最新のUAなら最高のUXを

http://www.31ice.co.jp/contents/product/sundae/su046.html

マークアップ

<figure><table><!-- グラフの元となる表 --></table><figcaption>会員数の推移</figcaption>

</figure>

スクリプト

// canvas要素のノード・オブジェクトvar canvas = document.createElement('canvas');// table要素のノード・オブジェクトvar tbl = document.getElementById('tbl');// table要素をcanvas要素に置き換えるtbl.parentNode.replaceChild(canvas, tbl);// グラフを描画...

結果新しいUA 古いUA

JS/ON

JS/OFF

ファイルのアップロード

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

http://www.futomi.com/library/zip/index.html

ファイルのアップロード

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

http://www.futomi.com/library/zip/index.html

三層を完全に分離

JS

CSS

HTMLHTMLにCSSとJSをインラインで混在させない

HTMLだけでも最低限の機能を提供

開発の順序

HTMLのみで必要最小限を

CSSでビジュアルを追加

JSで操作性を追加

まとめ

http://www.morguefile.com/archive/display/693087

優先順位を間違えない• アクセシビリティーが最優先

– あらゆる対象に確実に情報を届ける– マークアップでできることを優先– CSSやJSに頼らない

• ユーザービリティーをアドオン– CSSで見やすさをアドオン– JSで使いやすさをアドオン– 最新UAでは最高のUX– CSSとJSはUnobtrusive（控えめ）であるべき

“望んでいたものを手に入れたと思い込んでいるときほど、願望から遠く離れていることはない”

ゲーテ「親和力」

“1オンスの思慮分別は、1ポンドの英知に値する”

イギリスのことわざ

Regressive Enhancementを求めるあまり、大事なユーザーを逃していませんか？

ちょっとした工夫と配慮で、多くのユーザーに手をさしのべることができます。

参考図書

DOM Scripting 第二版http://www.amazon.co.jp/dp/1430233893/ http://www.amazon.co.jp/dp/0321658884/

progressive enhancementdesigning with

ご清聴ありがとうございました

有限会社 futomi代表取締役羽田野 太巳

http://www.html5.jp/http://www.futomi.com/

http://twitter.com/futomi/

主催：allWebクリエイター塾

羽田野太巳から学ぶ

「HTML5マークアップ講座」http://all-web.org/curriculums/html5/index.html

羽田野太巳から学ぶ

「0から学ぶ JavaScript 講座」http://all-web.org/curriculums/javascript/index.html