HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。
このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。
実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。
※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに反映するとのことです。
2014年7月5日現在のデザインでは、以下のキャプチャのように、右上にある「Import」というタブから設定が行えます。ちょっとわかりづらいですよね？
Googleアナリティクス・データのインポート方法
Googleアナリティクスのデータとの連携（データのインポート）は、検索ボックス横の「Settings」から簡単に行えます。
1. Settingsをクリック
2. 左カラムの「Import」ボタンをクリック
「Import」ボタンをクリックすると、ポップアップでウィンドウが開くので、そこでGoogleアナリティクスにログインして承認を行い使いたいデータのプロフィールを選択します。この際、ブラウザのポップアップ・ブロッカーの設定にご注意を！
3. 選択したサイトのサポート状況が表示される
下のキャプチャのように、右上にインポートしたGoogleアナリティクスのデータをもとに、サポート状況が表示されます。
「flexbox」の例
たとえば「flexbox」と検索をすると、このサイト（parashuto.com/rriver）では、ベンダープレフィックスを使った場合は、88.62%のサポートと6.95%の部分サポートがあり、訪れるユーザの合計95.57%のブラウザで「flexbox」がサポートされていることがわかります。
flexbox使ってみようかな…笑
まとめ
HTML5やCSS3の機能のなかでも最新のものは特に、最新のブラウザサポート状況を参考にしながら使うべきだと思います。また、自分のサイトを訪れるユーザのブラウザの使用状況にあわせて、サポートの対応を考えて実装するのがベストです。こういったツールをフルに活用して、ユーザにとってより一層フレンドリーなサイト制作をしたいですね。
そのうち、Googleウェブマスターツールにこういう機能が実装されないかな？実際にページで使用されているHTML5やCSS3やGoogleアナリティクスのデータを連携させて、「このページを閲覧するユーザの○○%の人のブラウザで問題が発生している可能性があります」みたいなアラートを出してくれたら便利そう。
データに関する注意点
過去30日間のデータしかインポートできないですし、しばらく時間がたったら自分で最新のものに更新する必要があるようです。昨今では、数ヶ月もたてば、特にモバイル・ブラウザの使用状況が大きく変わる可能性もあります。定期的に最新のデータに更新して使うのが良さそうです。
最後に…
さて、今回は約5ヶ月ぶりの投稿になってしまいました。
今回はちょっとリハビリ的な感じで書いています。これからは、少しテイストを変えて、短い内容のものでもより頻繁に更新できたら良いなぁと思ったりしています。。。
では、2014年の下半期もRriverをよろしくお願いします！
追記
[2014/07/20]
7月19日にベータ版が終了し、正式版に公開されたようです → caniuse.com
2014年7月5日に公開され、2014年9月2日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。
[…] […]