今年の夏は涼しくて助かってる管理人Tomoです。（もう夏終わりそうですけどね。東北の夏は短い。）
さて、雑記とは言え、季節の話題だけをやるわけにはいかないところ。
前回、レスポンシブ方面でのリニューアルを行なっていると書きましたが、察しのいいデザイナーの方はおそらくああ、あれのことだな…と思っているかと思います。
はい、遅ればせながら当方もCSS3のflexを使い始めました。
というより、ブラウザが対応しているのかどうかを悩んで新しい技術の導入に二の足を踏んでいるデザイナーは数多くいるかとおもいます。そんな理由で、ここでflex使うのはどうなのかと二の足を踏んでいたわけです。
たとえ自分は最新の環境でも、ホームページを閲覧しているお客様側が思いがけない環境で「レイアウト崩れてるぞ！」なんて指摘を受けることはWEBデザイナーなら一度はあると思います。
そこでflexを投入するにあたって管理人が実行した新技術投入判断の基準をちょっと書いてみようかと思います。
まず用意するのは「Googleアナリティクス」と「Can I use」という2つのサービスです。
前者は聞いたことがある人は、デザイナー以外にも営業の方など、WEBに関わる人間であればアクセス解析として利用している方はかなり多いと思いますが、後者は意外と？という人も多いでしょう。
Can I use 〜〜？（ほにゃららは使える？）
このサイトのことです。うわぁ…英語だ…とそっとじしそうな人はいそうですが、そこまで難しい英語ではないです。というより使い方はいたってシンプルなので、そっとじはもったいないです。
Can I use ＿ ？の空白の部分に、使いたいプロパティの名前やキーワードを入れれば即時にどのブラウザで使えるのか、という検索結果が表示されます。（jQueryのonイベント「input」でしょうか？すぐ反映されるのはなんかいいですよね。）
試しにモバイル対応の要の一つ「ビューポート」を、「vie」までいれたらもう出てきました。（念のためwも入れとく。）
デフォルトではシェアはグローバル（世界全体）、ブラウザは近年の主要なものしかでてきていません。
まず、このブログを見ている方はおそらく日本国内が大半だと思いますので、気にしなければいけないシェアは日本国内ですよね。そんなときは検索の下にある
「Detected your country as “Japan”. Would you like to import usage data for that country?」（君は日本からアクセスしてるみたいだけど、日本のシェアデータを検索結果に追加してみる？）の「import」を押すと
このように結果に日本国内のシェアが反映されます。プレフィックスなしでも動くものとプレフィックスありでかろうじて動くものを合わせるとこのくらいのシェアになりますよ、という意味になります。
各ブラウザにマウスオーバーすると、各ブラウザのシェアも表示されます。上記のインポートが完了していれば各ブラウザのシェアにもGlobalとJapanの2つが表示されます。
デフォルトで表示されるのは最近のものです。あれ？もっと前のは？という場合「show all」を押すと…
全部出る！というか長い！おもにFirefox、Chrome、Operaというソフトウェア更新がマメなクロスプラットフォームなモダンブラウザ御三家のおかげなのですが。
見てわかる通り、緑がフルサポート、黄色が一部非対応あり、赤は非対応という意味になります。一部非対応の注意点、およびプレフィックスについてはマウスオーバーした時に出ます。（当然英語です…Google先生に翻訳してもらうと思いの外まとをえた翻訳をしてくれるのでおすすめ。マウスオーバーしたのをコピペしようとすると引っ込んでしまいますが、実は左下に表示されますので、そこからコピペしてくださいね。）
このビューポート＋IE11の場合、「vmax」というプロパティに対応してないよ、という意味だそうです。黄色になっていても、要注意になってるこのプロパティはつかわないけど他の部分は使いたいなあ、という感じなら思い切って導入してしまうのはありでしょう。
Can I useは「これから使用されるであろうユーザー」の対応割合の判断材料になりますので、サイトリニューアルだけではなく、新規サイト作成時の判断材料としても優秀です。
アクセス解析の雄、Googleアナリティクス
そしておなじみ「Googleアナリティクス」
こちらは「過去一定期間にアクセスしてきたユーザー」を判断するための材料となります。主にリニューアルの方面で活躍してくれることでしょう。
例として、昨年12月から今年7月までの当ブログのアクセスを使用して見ましょう。
まず、半年以上放置した結果…
日本地図がすべて染まっていました。全国からのアクセスありがとうございます！
都道府県別では東京が最多、続いて大阪、神奈川、愛知と続きます。厳密に人口順ではないですが、わかりやすい数値がでました。1件ずつという都道府県も多かったですが、47都道府県全てからのアクセスがありました。
次にどのページを見ている人が多いのか、を確認したらDreamweaver CC2017のコードカラーリングについての記事を見ている人が多かったようです。検索クエリもそこ関連。みんなそれなりに悩んでたんですね…。正直自分も未だ依頼のあるCGIの修正の時はデフォルトで色がつかなかったりと、実はまだまだ使いこなし切れてはいません。難しいですね…紹介しておいてこんな体たらくです…すみません…orz
話がそれてしまいましたが、Googleアナリティクスで技術的な判断をするために確認する項目は、ユーザー→ブラウザとOS→ブラウザです。
最初に表示されるのはこのように各ブラウザの全バージョンを含めた表示ですが、リンクをクリックすると
このように詳細なバージョンまで表示されます。
このデータと先ほどのCan I useの情報を照合して判断するわけですが、それこそ半年のうちに1000人中1人以下（0.1％以下）という割合なら非対応でも無視できるレベルじゃないかな？という私感です。
それどころかリニューアル案件でIE9まで非対応、IE10まで独自のプレフィックスが必要なflexプロパディを使った時、IE10までのユーザーが20人に1人(5%)以下と言うレベルのサイトだったのですが、まあ、こんくらいなら大丈夫だろと言う感じである程度まで低いIEのバージョンでもflexレイアウトを再現するflexibility.jsでカバーしました。柔軟に対応できるならなるべく多数にわたっているユーザーに合わせるべきだなあと感じました。
ちなみにこのブログの場合、上の表でもわかるとおりChrome一強でFirefox、Safariと続いています。みんなモダンブラウザを使いこなせるフレンズたちでよかったですよ。
そんでもって、詳細にアクセス情報を記録するGoogleアナリティクスは時々珍しいものまでひろってきます。
ここ半年で1件ずつだった珍しいものとして3つ。
Android Browser…割と前のAndroidに搭載されていた標準ブラウザのことでした。Androidはバージョン5以降、Chromeがデフォルトのブラウザになったため、バージョン4.4以前でしか見ることのできないブラウザです。管理人も前の携帯は同じぐらいのバージョンでしたが、早々とChromeに切り替えていたので、すっかり存在を忘れていました。ちなみにレンダリングエンジンはwebkitですので、ほぼ同世代のiOSのSafariやChromeに近い存在でしょうか。（プレフィックスのつき方も同じ時期のものにくっついてることが多いですね。）
国内ではiOSユーザーがAndroidユーザーを圧倒しているためか、なかなか見ることのできないものなのかもしれませんね…。
Iron…？聞いたことないブラウザだな…と思ってWikipediaで調べたら、ドイツ製のブラウザで、Chromiumをベースに、広告ブロック機能を搭載、FlashやPDFの閲覧は非搭載で、自動アップデートされない等の部分以外はほぼChromeとのこと。当然元がChromeですのでレンダリングエンジンはwebkitです。自動アップデートされないとはいえ、なかなか玄人志向なブラウザですので、アップデートを忘れる人とか少なそうで安心しました。
そしてきわめつけは「Nintendo 3DS Browser」
ん、3DS！？
これ！？
管理人も上の写真の通り持っている携帯ゲーム機ですが付属のブラウザは開いたことないです…ネットに繋ぐ用途自体が、e-shopでソフトや追加コンテンツをダウンロードするときぐらいです。（ネット対戦とかしませんので…）
なかなかの猛者がいたもんだ…どういう風に見えるもんなんだろ…
任天堂の携帯ゲーム機付属ブラウザについては、DS時代はOpera（Miniかな？）でしたが、3DSは組み込み機器のブラウザとしての採用が多いNetFront Browser NXが採用されているそうです。これもレンダリングエンジンはwebkitなので、ChromeやSafariの親戚みたいなものなのでしょうか。どこらへんのバージョンと合致しているのかはわかりませんがとりあえずプレフィックスにwebkitってつけときゃなんとかなるのかな…？
ちなみに携帯ゲーム機の競合機であるソニーのPlaystation Vitaのブラウザもwebkit（Safari）がベースらしいです。
うん、どっちみち全部webkitじゃないですか…何も気にする必要はなかった。
この2つのサイトのデータを有効に使えば、二の足を踏んでいたHTML5やCSS3の新技術を惜しげも無く投入できると思います！あと、古いブラウザを使っているクライアント様がいたら、説得して新しいブラウザ使ってもらいましょう。（サポート切れのWindows XP、VistaでもFirefoxやChromeは少しだけ古いバージョンですがそこそこ新しい技術も使えるようですので…でもサポート切れのOSやブラウザでインターネットにつなぐことはセキュリティ面からいっても非推奨です。）