マイナーブラウザとの 付き合い方 ヤフー株式会社 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ライフを!
© Copyright 2024 ExpyDoc