scripty公開資料_マイナーブラウザ編

マイナーブラウザとの

付き合い方

ヤフー株式会社 FEエンジニア（デザイナー）

あなたのサービスのブラウザシェア

ちゃんと見ていますか？

WorldWide Japan StatCounter GlobalStatus http://gs.statcounter.com/ 参考：StatCounter GlobalStatusによる    日本と世界全体のブラウザシェア比較 IE 6/7 Opera Others IE 10 IE 9 Safari IE 8 IE 11 Firefox Chrome IE 6/7 Opera Others IE 10 IE 8 IE 9 Safari Firefox IE 11 Chrome

おかためサービス やわらめサービス Yahoo! JAPANのとあるサービスのブラウザシェア比較 Opera Others IE 6/7 Safari Firefox IE 10 IE 9 Chrome IE 8 IE 11 Opera Others IE 6/7 Safari IE 10 IE 9 IE 8 Firefox Chrome IE 11 →サービスによって傾向に違いが出てくる

統計情報に頼るのではなく

実際のログを見て、

ユーザーの特色を見極めて

この世に存在するすべてのブラウザに

完全に対応するのは不可能です。

!

そのページの特色をふまえて、

Agenda 1. 自己紹介 2. Yahoo!ニュースでのブラウザシェア動向 3. マイナーブラウザとの付き合い方  3-1. 古いブラウザ  3-2. これからのブラウザ 4. 多くのブラウザと仲良くするために

1.自己紹介

・Yoshizawa Shunsuke

・HTML/CSS寄りのこと話します。

・テキストエディタはVim派

1.自己紹介

・2010年度 新卒入社

・配属後1∼2年は

 Yahoo!トップページのHTML/CSSなどをお手伝い。

・現在はYahoo!ニュース（トピックス）ブラウザ版の

 フロントエンド周りの開発などを担当しています。

1.自己紹介

1.自己紹介

・200社近い提供社からのニュース配信 ・編集の手でニュースを選び、13文字に要約して  配信するトピックスが好評 ! ・1996年サービス開始  （20年近く前！） →古い資産とのお付き合い Yahoo!ニュースについて ニュース トピックス

意識調査（2006年開始） ニュース個人（2012年開始） といったサービスも。 ! ニュース個人はレスポンシブデザイン。 Yahoo!ニュースサービス紹介

Others Safari IE 10 IE 9 Firefox IE 8 Chrome IE 11 Yahoo!ニュースの主要PCブラウザシェア ※ スマホ・タブレットからのアクセスは除く

Others Opera IE 6 IE 7 Yahoo!ニュースのPCブラウザシェア（Othersの内訳） Others Safari IE 10 IE 9 Firefox IE 8 _Chrome IE 11

IE6・7 XPサポート終了でだいぶ減ったけど それでもまだまだ完全無視はできない感じ （割合で見ると少ないけど、実際のアクセス数を見ると…） Others Opera IE 6 IE 7 シェア少なめのブラウザ紹介

Opera マイナーブラウザの中の メジャーブラウザ。 熱狂的信者がいるらしいけど 最近はChromeにおされている模様。 Others Opera IE 6 IE 7 シェア少なめのブラウザ紹介

普段意識しているブラウザはここまで。 しかし、Yahoo!ニュースには他にも様々な ブラウザからアクセスがあります。 ! 参考までにそれらのブラウザの一部を ご紹介しましょう。

Others Opera IE 6 IE 7 更にマイナーなブラウザたち • 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 • … ゲーム機などなど 様々なデバイスからのアクセス

• PS3,PSP • BlackBerry • Windows Mobile • Chrome OS • Firefox OS • IE5以下 • Mac IE • Netscape • SeaMonkey • Iceweasel • Waterfox • Chromium • Iron • Maxthon • Lunascape • Sleipnir • … 更にマイナーなブラウザたち もう忘れたいくらい古いIEとか。 Windows95からもまだ アクセスがありました……

• PS3,PSP • BlackBerry • Windows Mobile • Chrome OS • Firefox OS • IE5以下 • Mac IE • 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 • … 更にマイナーなブラウザたち 日本製のブラウザも。 レンダリングエンジンを 切り替えられるらしい。

更にマイナーなブラウザたち

他にもスマートフォン、タブレット

開発バージョンのブラウザからもアクセスがあります。

対応させたいブラウザだけを

対応すればいい、というわけにはいかない。

!

緊急時には

どんな環境でも情報を得られるようにすべき。 ! JavaScriptがオフになっている場合。 CSSや画像の配信サーバーがダウンして HTMLしか読み込めない場合…… ! 考えうるパターンは山ほどある。

理想を言えば、どんなブラウザでも アクセスいただいたすべての環境で 最適な表示ができるようにしたい。 ! ただし、現実的に無理。 マイナーブラウザへの対応に割けられる工数は 限られている。

サポートが終わってるブラウザに対応させるべきか と言った論議もできそうですが……。 ! そもそも確認する環境を用意するのがもはや不可能なものも多い。 稼働するWindows95とか用意できません。 あと、セキュリティ対策とか考えると古いOSは……。 ! 因みに、機種の買い替えが激しいスマートフォンは 比較的古いブラウザのシェアが減るのが早いです。

そこはやっぱり、

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

＆

・プログレッシブ エンハンスメント まず古いブラウザ向けに必要な機能を作り、そこから 新しいブラウザ向けに機能拡充するアプローチ ・グレースフル デグレデーション まず新しいブラウザ向けにリッチに作り、そこから 古いブラウザでは対応しきれない機能を削っていく ・ポリフィル 新しいブラウザも古いブラウザも 対応すると決めたからには無理にでもがんばって 同じ体験を提供できるようにする。 かっこいいマークアップ横文字の意味おさらい

そもそも Twitter、Facebookといった 埋め込みモジュールが既に IE6、7（、8）のサポートを切ってる。 →非表示にせざるを得ない。 Yahoo!ニュース 意識調査 右カラムでの崩れ（IE7）

・IE6、7 →CSSのみで対応可能（スターハック） 古いIEでモジュールを非表示にする方法 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を見せる というアプローチも。

存在しない適当なUserAgentを指定してアクセスすると・・・

新しすぎるブラウザへの対応は？ （Android Firefoxなど）

Web標準の流れを

ちゃんと追いかけることにより 表示崩れリスク軽減。

display:box

そんなプロパティ

display:-webkit-boxは

display:flex

CSSは定期的にメンテナンス。 標準化の波にあわせることが、

2014年8月

それ以前の 古いCompassのmixin → display:boxしか対応してない ! mixinやライブラリを 盲目的に信用していませんか？

（特に長く運用管理していくサイトでは） ライブラリなどに頼り切らずに

どんなCSSが書き出されているのか、 しっかりと把握しておくべき。

HTML5、CSS3の登場で Webの世界が複雑になった？

フラットデザイン・レスポンシブWebは Webページの原点回帰。 ! そもそも幅が固定されている ページのほうが不自然だったのでは。 ! 紙媒体に近い表現が求められる時代が終わり 「Webらしい見せ方」に立ち返っている途上。

むしろ 最近のフラットなデザイントレンドのほうが レガシーブラウザに対応しやすくなっている ような気すらもしません？ ! ※ アルファ、角丸、グラデ、影などの細かい装飾は除く。 そこはプロエン・グレデグでいきましょう。

常に

「もっとシンプルに実装することはできないかな？」 と問いかけることが、