SlideShare una empresa de Scribd logo
1 de 57
Descargar para leer sin conexión
株式会社ニューフォリア            最高技術責任者

有限会社 f    utomi        代表取締役

羽田野 太巳(はたの ふとみ)
     @futomi        futomi.hatano
http://www.html5.jp/
<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
高
          Regressive Enhancement


U
X
の
レ
ベ
ル




低
    低   UAの機能実装度                   高
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
Progressive Enhancement




                          図: http://www.flickr.com/photos/melkorcete/180238980/
図: http://www.31ice.co.jp/contents/product/sundae/su046.html/
新しいUA   古いUA
JS/ON




JS/OFF
HTMLのみで必要最小限を


 CSSでビジュアルを追加


   JSで操作性を追加
Multi-device/Multi-screen
Desktop
                     13%




        Notebooks
          23%                            Smart phones
                                             54%


                      Pads
 Netbooks              7%
    3%


http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
Microsoft Surface
http://www.microsoft.com/surface/en/us/default.aspx
too Big...




SHARP BIG PAD
http://www.sharp.co.jp/bigpad/
                                 写真: http://itpro.nikkeibp.co.jp/article/NEWS/20120424/393163/ /
extremely big... (digital Signage)




                                     ビデオ: http://youtu.be/Io5ylFD9saA
まとめ
Internet Explorer 9



”We love HTML5 so match.”




                            ビデオ: http://channel9.msdn.com/Events/MIX/MIX10/KEY02
Internet Explorer 10



”Native HTML5 support”




                ビデオ: 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
株式会社ニューフォリア            最高技術責任者

有限会社 f    utomi        代表取締役

羽田野 太巳(はたの ふとみ)
     @futomi        futomi.hatano
http://www.html5.jp/

Más contenido relacionado

Similar a Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー

HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...SwapSkills
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力ThinReports
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Masakazu Muraoka
 
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・Yoshie Kaneno
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development Shotaro Suzuki
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5dynamis
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキングTakashi Okamoto
 
Libido driven development Shibuya.pm tech talk #8
Libido driven development Shibuya.pm tech talk #8Libido driven development Shibuya.pm tech talk #8
Libido driven development Shibuya.pm tech talk #8Yusuke Wada
 
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会Takayuki Shimizukawa
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium MobileNaoya Ito
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向yoshikawa_t
 
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4thHTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4thMicrosoft
 
スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発Masakuni Kato
 
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションC# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションYoshito Tabuchi
 
2012_07_06_gxeb_05
2012_07_06_gxeb_052012_07_06_gxeb_05
2012_07_06_gxeb_05ryo katsuma
 
Dotnetlab 20110827
Dotnetlab 20110827Dotnetlab 20110827
Dotnetlab 20110827hirookun
 

Similar a Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー (20)

HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満
 
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
 
180729 jtf open-audit
180729 jtf open-audit180729 jtf open-audit
180729 jtf open-audit
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
Libido driven development Shibuya.pm tech talk #8
Libido driven development Shibuya.pm tech talk #8Libido driven development Shibuya.pm tech talk #8
Libido driven development Shibuya.pm tech talk #8
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
 
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4thHTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
 
スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発
 
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションC# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
 
2012_07_06_gxeb_05
2012_07_06_gxeb_052012_07_06_gxeb_05
2012_07_06_gxeb_05
 
Dotnetlab 20110827
Dotnetlab 20110827Dotnetlab 20110827
Dotnetlab 20110827
 

Más de Futomi Hatano

続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~Futomi Hatano
 
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみるWeb エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみるFutomi Hatano
 
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~Futomi Hatano
 
Embedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsFutomi Hatano
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Futomi Hatano
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014Futomi Hatano
 
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日Futomi Hatano
 
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012Futomi Hatano
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法Futomi Hatano
 

Más de Futomi Hatano (9)

続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
 
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみるWeb エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
 
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
 
Embedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of Things
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
 
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
 
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 

Último

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 

Último (7)

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 

Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー