progressive enhancement - クロスブラウザー対応に必要なこと - microsoft ie10...

有限会社 f u t o m i 代表取締役

羽田野 太巳（はたの ふとみ）

http://www.html5.jp/ @futomi futomi.hatano

株式会社ニューフォリア 最高技術責任者

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

マークアップ解説本 API解説本 APIチュートリアル本

ウェブとは

≠ウェブ

あらゆる対象に

同じUXを提供する

あらゆる対象に

確実に情報を伝える 同じUXを提供する

開発アプローチ

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

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

写真： http://clubt.jp/product/106622_4679549.html

高 低 UAの機能実装度

低

高

Regressive Enhancement

ＵＸのレベル

Regressive Enhancement

http://html5please.com/

<meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter>

<script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script>

http://www.html5.jp/library/meter.html

http://raphaeljs.com/

Graceful Degradation

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

新しいUA 古いUA

JS/ON

JS/OFF

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

Progressive Enhancement

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

新しいUA 古いUA

JS/ON

JS/OFF

HTMLのみで必要最小限を

CSSでビジュアルを追加

JSで操作性を追加

Multi-device/Multi-screen

Smart phones 54%

Pads 7% Netbooks

3%

Notebooks 23%

Desktop 13%

http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011

Microsoft Surface http://www.microsoft.com/surface/en/us/default.aspx

写真： http://itpro.nikkeibp.co.jp/article/NEWS/20120424/393163/ /

too Big...

SHARP BIG PAD http://www.sharp.co.jp/bigpad/

ビデオ： http://youtu.be/Io5ylFD9saA

extremely big... (digital Signage)

まとめ

Internet Explorer 9

ビデオ： http://channel9.msdn.com/Events/MIX/MIX10/KEY02

”We love HTML5 so match.”

ビデオ： http://channel9.msdn.com/Events/MIX/MIX11/KEY01 写真： http://blogs.msdn.com/b/iefrance/archive/2011/04/12/internet-explorer-10-platform-preview-1-pr-233-sent-233-224-mix-2011.aspx

Internet Explorer 10

”Native HTML5 support”

有限会社 f u t o m i 代表取締役

羽田野 太巳（はたの ふとみ）

http://www.html5.jp/ @futomi futomi.hatano

株式会社ニューフォリア 最高技術責任者