第1回HTML5とか勉強 for ビギナーの資料です。

1. 最近のブラウザ状況
2013/06/21
第1回 HTML5とか勉強会 for ビギナー
Toru Yoshikawa (@yoshikawa_̲t)

2. Who?
Google Developer Experts (Chrome)
html5j／HTML5とか勉強会スタッフ
html5j ビギナー部 副部⻑⾧長
Web先端技術味⾒見見部 顧問
⽇日本jQuery Mobileユーザー会 管理理⼈人
Sublime Text 2 Japan Users Group 管理理⼈人
allWebクリエイター塾/jQuery Mobile担当講師
Blog: http://d.hatena.ne.jp/pikotea/
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t

3. ちょっと宣伝
「開発者のためのChromeガイドブック」が7/5に発売！
http://amzn.to/15oOVYI

4. Agenda
主要なモダンブラウザ
ブラウザシェア
各ブラウザの特徴
モバイルブラウザ
まとめ

5. 主要なモダンブラウザ

6. ブラウザシェア
※ 統計によって差がでるので参考程度度に
StatCounter
Net Applications

7. ブラウザシェア（デスクトップ）
2013年年6⽉月
Opera
0.87%
Safari
9.44%
Firefox
13.25%
Chrome
23.93%
IE
50.23%
Opera
1.04%
Safari
8.38%
Firefox
19.95%
Chrome
42.66%
IE
25.56%
World Wide Japan
http://gs.statcounter.com/

8. IEバージョン別シェア
2013年年6⽉月
その他
50.11%
IE7
0.67%
IE8
12.34%
IE10
14.33%
IE9
22.55%
Japan
http://gs.statcounter.com/

9. ブラウザシェア（モバイル）
2013年年6⽉月
その他
4%
Net Front
2%
BlackBerry
3%
Chrome
3.15%
Nokia
7.35%
UC Browser
9.82%
Opera
16.03%
Safari
25.04%
Android Browser
29.24%
World Wide Japan
http://gs.statcounter.com/
その他
1.31%
Safari
58.40%
Android Browser
40.29%

10. 各ブラウザの特徴

11. Chrome

12. Chrome
Googleが開発しているブラウザ（最新バージョンは27）
リリースサイクルが早く、6週間に1回のメジャーバージョンアップを⾏行行なっている
モバイル向けのChrome for AndroidとChrome for iOSもある（ただし、iOS版のみレンダリングエンジ
ンが異異なる）
Android 4.0以降降はデフォルトブラウザとなった（まだ機種によってデフォルトかどうかは異異なる）
多くの拡張機能や、Chrome⽤用のアプリがChrome Web Storeで提供されている（HTML/CSS/
JavaScriptで開発できる）
レンダリングエンジンにオープンソースのWebkitを利利⽤用していたが、Webkitをフォークして新たにBlink
というレンダリングエンジンを開発して利利⽤用している（Blinkは、まだWebkitとの明確な機能差は少な
い）
Chromeプロジェクト⾃自体もオープンソース化されており、オープンソース版は、Chromiumという名称
で開発されている
開発者向けのビルドとして、Chrome Beta(v+1)、Chrome Dev(v+1)、Chrome Canary(v+2)，
Chromiumがある

13. Safari

14. Safari
Appleが開発しているMac OS及びiOSのデフォルトブラウザ（最新バージョ
ンは6）
SafariのレンダリングエンジンであるWebkitはオープンソース化され、多く
のブラウザで利利⽤用されている
Webkitがオープンソースであるため活発に開発され、かつ広く利利⽤用されて
いる
Safari 6からWindows版は提供されなくなった
開発者向けのビルドとしてWebkit Nightlyがある

15. Firefox

16. Firefox
Mozillaが開発しているブラウザ（最新バージョンは、22）
Chromeと同じ6週間に1回のリリースサイクルを⽬目指している
モバイル版に、Firefox Mobileがある
元々は、Netscapeというブラウザであったがオープンソース化され、のちに改名された
ブラウザの黎黎明期から存在し、多くのWebの基盤を築いた
多様なアドオンがあり、ブラウザを⾃自由カスタマイズできる（Chromeよりも⾃自由度度が
⾼高い）
開発者向けのビルドとして、Firefox beta、Firefox Aurora、Firefox Nightlyがある

17. Opera

18. Opera
Opera Softwareが開発しているブラウザ（最新バージョンは、）
モバイル版にOpera Mobile、Opera Mini（サーバー側でサイトを
圧縮処理理するため軽快）がある
携帯機器やデジタル家電などの、組み込み系に強い
もともとは⾃自社製のブラウザエンジンを利利⽤用していたが、バージョ
ン15よりBlinkを搭載したOperaをリリースする予定
開発者向けビルドには、Opera Next、Opera Developerがある

19. Internet Explorer

20. Internet Explorer
Microsoftが開発しているブラウザ（最新バージョンは10）
Windowsのデフォルトブラウザであるため、⽇日本では、最もシ
ェアが⾼高い
反⾯面、いくつかのバージョンが混在しており、最新のバージョン
以外にもサイト側で対応する必要がある
エンタープライズ系に強いため、仕様が安定している機能を優先
的に実装する傾向がある

21. ブラウザエンジン
ブラウザ レンダリング JavaScript
Chrome
Blink V8
Safari
Webkit JavaScriptCore
Firefox
Gekko
IonMonkey
(OdinMonkey)
Opera
Presto
(Blink)
Carakan
(V8)
IE
Trident Chakra

22. HTML5の対応状況（スコア⽐比較）
ブラウザ HTML5 CSS3
Chrome
463 65%
Safari
378 55%
Firefox
410 63%
Opera
419 51%
IE
320 54%
http://html5test.com/ http://css3test.com/

23. HTML5の対応状況（詳細）
http://caniuse.com/

24. モバイルブラウザ

25. ⽇日本のモバイルブラウザのシェア
＋ ＝ 98.69%

26. モバイルブラウザへの対応と今後
現状は、モバイルブラウザは実質Webkitへの対応を第
⼀一に考えれば良良い（将来的にはBlinkも含まれる）
Android 2.xは、互換性が端末によってマチマチなの
で、Androidブラウザ爆発しろ 必ずテストすること
Android 4.0よりデフォルトブラウザがChrome for
Androidに以降降し、AndroidのHTML5対応と互換性は
劇的に改善する⾒見見込み
また、Firefox OSやTizenなどのHTML5をベースとし
たOSも出てきている

27. まとめ

28. まとめ
デスクトップブラウザは、まだIE8などの対応があり、まだまだクロスブラ
ウザを考慮する必要がある
IE8は、Windows XPのサポート終了了（2014年年4⽉月9⽇日）によって⼀一気
に最新のIEへ移⾏行行する可能性がある
モバイルブラウザは、ほぼWebkit系（Blink含む）のブラウザに対応すれば
良良く、現時点でも積極的にHTML5を利利⽤用できる
Android 4.0以降降の普及とChrome for Androidによって互換性が劇的
に改善する可能性がある

29. 今からHTML5を始めよう！

30. Thank you!!
( @yoshikawa_̲t )