1. No category

マイナーブラウザとの
付き合い方
ヤフー株式会社 FEエンジニア（デザイナー）
吉澤 俊介
あなたのサービスのブラウザシェア
ちゃんと見ていますか？
参考：StatCounter GlobalStatusによる
日本と世界全体のブラウザシェア比較
IE 10
IE 10
IE 9
Others
Safari
IE 8
Opera
IE 9
Opera
IE 6/7
IE 6/7
IE 8
Others
Chrome
Safari
Chrome
IE 11
Firefox
Firefox
WorldWide
IE 11
Japan
StatCounter GlobalStatus
http://gs.statcounter.com/
Yahoo! JAPANのとあるサービスのブラウザシェア比較
Safari
Firefox
Safari
IE 6/7
IE 6/7
Others
IE 10
IE 10
Others
Opera
Opera
IE 9
IE 9
IE 11
IE 11
IE 8
Chrome
Firefox
IE 8
おかためサービス
Chrome
やわらめサービス
→サービスによって傾向に違いが出てくる
統計情報に頼るのではなく
実際のログを見て、
ユーザーの特色を見極めて
対応させるブラウザを決めましょう
この世に存在するすべてのブラウザに
完全に対応するのは不可能です。
!
そのページの特色をふまえて、
対応させるブラウザを絞ることも戦略です。
以上。
具体的には？
Agenda
1. 自己紹介
2. Yahoo!ニュースでのブラウザシェア動向
3. マイナーブラウザとの付き合い方
3-1. 古いブラウザ
3-2. これからのブラウザ
4. 多くのブラウザと仲良くするために
1.自己紹介
・Yoshizawa Shunsuke
・HTML/CSS寄りのこと話します。
・テキストエディタはVim派
・Flashはタイムライン派
1.自己紹介
・2010年度 新卒入社
・配属後1∼2年は
Yahoo!トップページのHTML/CSSなどをお手伝い。
→1px単位で調整する世界。
ちょっとの表示崩れが数字に大きく響くなどと脅されながら育つ。
・現在はYahoo!ニュース（トピックス）ブラウザ版の
フロントエンド周りの開発などを担当しています。
1.自己紹介
・最近のお仕事（Before）
1.自己紹介
・最近のお仕事（After）
2. Yahoo!ニュースでのブラウザシェア動向
Yahoo!ニュースについて
・200社近い提供社からのニュース配信
・編集の手でニュースを選び、13文字に要約して
配信するトピックスが好評
!
・1996年サービス開始
（20年近く前！）
→古い資産とのお付き合い
ニュース
トピックス
Yahoo!ニュースサービス紹介
意識調査（2006年開始）
ニュース個人（2012年開始）
といったサービスも。
!
ニュース個人はレスポンシブデザイン。
Yahoo!ニュースの主要PCブラウザシェア
Others
Safari
IE 10
IE 9
IE 11
Firefox
IE 8
Chrome
※ スマホ・タブレットからのアクセスは除く
Yahoo!ニュースのPCブラウザシェア（Othersの内訳）
Others
Opera
IE 7
IE 6
Safari
IE 10
IE 9
Others
IE 11
Firefox
IE 8
Chrome
シェア少なめのブラウザ紹介
Others
Opera
IE 6
IE 7
IE6・7
XPサポート終了でだいぶ減ったけど
それでもまだまだ完全無視はできない感じ
（割合で見ると少ないけど、実際のアクセス数を見ると…）
シェア少なめのブラウザ紹介
Others
Opera
IE 7
IE 6
Opera
マイナーブラウザの中の
メジャーブラウザ。
熱狂的信者がいるらしいけど
最近はChromeにおされている模様。
普段意識しているブラウザはここまで。
しかし、Yahoo!ニュースには他にも様々な
ブラウザからアクセスがあります。
!
参考までにそれらのブラウザの一部を
ご紹介しましょう。
更にマイナーなブラウザたち
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
PS3,PSP
BlackBerry
Windows Mobile
Chrome OS
Firefox OS
IE5以下
Mac IE
Netscape
SeaMonkey
Iceweasel
Waterfox
Chromium
Iron
Maxthon
Lunascape
Sleipnir
…
Others
Opera
IE 7
IE 6
更にマイナーなブラウザたち
PS3,PSP
• BlackBerry
• Windows Mobile
• Chrome OS
• Firefox OS
•
ゲーム機などなど
様々なデバイスからのアクセス
•
•
•
•
•
•
•
•
•
•
•
•
IE5以下
Mac IE
Netscape
SeaMonkey
Iceweasel
Waterfox
Chromium
Iron
Maxthon
Lunascape
Sleipnir
…
更にマイナーなブラウザたち
•
•
•
•
•
PS3,PSP
BlackBerry
Windows Mobile
Chrome OS
Firefox OS
IE5以下
• Mac IE
•
もう忘れたいくらい古いIEとか。
Windows95からもまだ
アクセスがありました……
•
•
•
•
•
•
•
•
•
•
Netscape
SeaMonkey
Iceweasel
Waterfox
Chromium
Iron
Maxthon
Lunascape
Sleipnir
…
更にマイナーなブラウザたち
•
•
•
•
•
•
•
オープンソースのMozilla系ブラウザ
Netscapeからもまだそこそこ
アクセスがありました……
PS3,PSP
BlackBerry
Windows Mobile
Chrome OS
Firefox OS
IE5以下
Mac IE
Netscape
• SeaMonkey
• Iceweasel
• Waterfox
•
•
•
•
•
•
•
Chromium
Iron
Maxthon
Lunascape
Sleipnir
…
更にマイナーなブラウザたち
•
•
•
•
•
•
•
オープンソース版のChromeなどなど
その他のブラウザ
•
•
•
•
PS3,PSP
BlackBerry
Windows Mobile
Chrome OS
Firefox OS
IE5以下
Mac IE
Netscape
SeaMonkey
Iceweasel
Waterfox
Chromium
• Iron
• Maxthon
•
•
•
•
Lunascape
Sleipnir
…
更にマイナーなブラウザたち
•
•
•
•
•
•
日本製のブラウザも。
レンダリングエンジンを
切り替えられるらしい。
•
•
•
•
•
•
•
•
PS3,PSP
BlackBerry
Windows Mobile
Chrome OS
Firefox OS
IE5以下
Mac IE
Netscape
SeaMonkey
Iceweasel
Waterfox
Chromium
Iron
Maxthon
Lunascape
• Sleipnir
•
•
…
更にマイナーなブラウザたち
他にもスマートフォン、タブレット
開発バージョンのブラウザからもアクセスがあります。
（UA偽装の可能性もありますが）
3. マイナーブラウザとの付き合い方
http://www.yahoo-help.jp/app/answers/detail/p/533/a_id/43864
公共性
対応させたいブラウザだけを
対応すればいい、というわけにはいかない。
!
緊急時には
情報を得られない＝死につながる可能性すらある。
どんな環境でも情報を得られるようにすべき。
!
JavaScriptがオフになっている場合。
CSSや画像の配信サーバーがダウンして
HTMLしか読み込めない場合……
!
考えうるパターンは山ほどある。
理想を言えば、どんなブラウザでも
アクセスいただいたすべての環境で
最適な表示ができるようにしたい。
!
ただし、現実的に無理。
マイナーブラウザへの対応に割けられる工数は
限られている。
サポートが終わってるブラウザに対応させるべきか
と言った論議もできそうですが……。
!
そもそも確認する環境を用意するのがもはや不可能なものも多い。
稼働するWindows95とか用意できません。
あと、セキュリティ対策とか考えると古いOSは……。
!
因みに、機種の買い替えが激しいスマートフォンは
比較的古いブラウザのシェアが減るのが早いです。
そこはやっぱり、
プログレッシブ・エンハンスメント
＆
グレースフル・デグレデーション
かっこいいマークアップ横文字の意味おさらい
・プログレッシブ エンハンスメント
まず古いブラウザ向けに必要な機能を作り、そこから
新しいブラウザ向けに機能拡充するアプローチ
・グレースフル デグレデーション
まず新しいブラウザ向けにリッチに作り、そこから
古いブラウザでは対応しきれない機能を削っていく
・ポリフィル
新しいブラウザも古いブラウザも
対応すると決めたからには無理にでもがんばって
同じ体験を提供できるようにする。
そもそも
Twitter、Facebookといった
埋め込みモジュールが既に
IE6、7（、8）のサポートを切ってる。
→非表示にせざるを得ない。
Yahoo!ニュース 意識調査 右カラムでの崩れ（IE7）
古いIEでモジュールを非表示にする方法
・IE6、7 →CSSのみで対応可能（スターハック）
1 .hoge{!
2
*display: none;!
3 }
・IE8、9 →IEの条件付きコメント
1 <!--[IF IE lte 9]>!
2 <style>.hoge{display:none}</style>!
3 <[ENDIF]-->
※ lt -> less-than（∼未満） lte -> less-than equal（∼とそれ以下）
※ IE10以上からは条件付きコメントは未対応となったので注意
（普通のコメントとして解釈される）
あまりにも古いブラウザには
さすがに対応しきれない。
!
最悪なくてもいいモジュールは
ばっさり切って非表示にする勇気。
!
「このページが提供すべきコアな情報はなにか」
を常に意識しておく。
そしてそれは死守する。
JavaScriptを使う箇所にも気を使う。
!
JSが動かないと必要な情報が表示できない、
必要な情報へアクセスできない
ということが極力ないように。
JSオン…タブ切替
JSオフ…リンク
もう既に、PCとスマホで
違うHTMLのページを見せてたりしますよね？
!
それと同じように
レガシーブラウザは別のHTMLを見せる
というアプローチも。
ex).Yahoo!トップページ
存在しない適当なUserAgentを指定してアクセスすると・・・
新しすぎるブラウザへの対応は？
（Android Firefoxなど）
Web標準の流れを
ちゃんと追いかけることにより
表示崩れリスク軽減。
display:box
display:box
そんなプロパティ
過去も未来も存在しません！
display:-webkit-boxは
display:flexとして標準化。
!
display:boxのままだと
いつまで経っても
Firefoxでは崩れたまま。
（2014.9.15現在ニューストップ崩れてます……）
CSSは定期的にメンテナンス。
標準化の波にあわせることが、
将来に繋がる。
2014年8月
Compassが1.0にバージョンアップ
それ以前の
古いCompassのmixin
→ display:boxしか対応してない
!
mixinやライブラリを
盲目的に信用していませんか？
（特に長く運用管理していくサイトでは）
ライブラリなどに頼り切らずに
どんなCSSが書き出されているのか、
しっかりと把握しておくべき。
4. 多くのブラウザと仲良くするために
HTML5、CSS3の登場で
Webの世界が複雑になった？
本当に？
フラットデザイン・レスポンシブWebは
Webページの原点回帰。
!
そもそも幅が固定されている
ページのほうが不自然だったのでは。
!
紙媒体に近い表現が求められる時代が終わり
「Webらしい見せ方」に立ち返っている途上。
むしろ
最近のフラットなデザイントレンドのほうが
レガシーブラウザに対応しやすくなっている
ような気すらもしません？
!
※ アルファ、角丸、グラデ、影などの細かい装飾は除く。
そこはプロエン・グレデグでいきましょう。
常に
「もっとシンプルに実装することはできないかな？」
と問いかけることが、
過去にも未来にも繋がるはず。
シンプルで深いHTML・CSSライフを！