おっと、NestHubがChrome開発者ツールに現れた！

なにが起きた？

• Chromeの開発者ツールの、デバイスのデフォルト一覧が変更されています。
• レスポンスデザインのレイアウト確認をするときの対象を見直す必要が出てくるかも？

なんだこれは

ChromeのDevエディションでモバイルレイアウトの確認をしていたところ、Pixel・iPhoneなどを選ぶところが大幅に入れ替えられている！

なにこれ、めっちゃ変わっている…。

いつから？

[Chrome 94](https://developer.chrome.com/ja/blog/new-in-devtools-94/# いつから？

試しに使ってみる。

意図を想像してみる

iPadなどを外してもPCと同じで十分、iPhoneやPixelの古いバージョンが無くても最新バージョンで十分、などの理由で一覧が刷新されたと推察することができます。すると、それぞれ独特な製品が並んでいることに気が付きます。

• 2つ折り
• 縦長
• 画面付きAIスピーカー
• 各社フラッグシップスマートフォン
• タブレット端末

user agent はどう？

device	user agent
iPhone SE	Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
iPhone XR	Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
iPhone 12 Pro	Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
Pixel 5	Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36
Samsung Galaxy S8+	Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36
Samsung Galaxy S20 Ultra	Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36
iPad Air	Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1
iPad Mini	Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1
Surface Pro 7	Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1
Surface Duo	Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4710.4 Mobile Safari/537.36
Galaxy Fold	Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4710.4 Mobile Safari/537.36
Samsung Galaxy A51/71	Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36
Nest Hub	Mozilla/5.0 (Linux; Android) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.109 Safari/537.36 CrKey/1.54.248666
Nest Hub Max	Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.188 Safari/537.36 CrKey/1.54.250320

ブラウザのコンソールでconsole.log(navigator.userAgent);すると最新の user agent 文字列が分かります。

新しい時代なのか

いままで、レスポンシブと言えば、いろんな対応の仕方が登場してきた。

CSSのメディアクエリ

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

isMobile

import {isMobile} from 'react-device-detect';

• 横幅だけで判別していていいのか？
  • 画質が向上すればpxで判別できなくなるかも
• モバイルかどうかの判別だけでいいのか？
  • モバイルでPCサイズも有り得る
  • Portrait・Landscapeは？
  • スマホにモバイルディスプレイを繋いだ場合は？

もはや単純な判別は難しいようだ。

はやこれくらいの粒度が必須かも

JS の useragent 判別用ライブラリ、isMobile/README.md を見てみると、ある程度の粒度の判別が出来る。

Apple devices

• isMobile.apple.phone
• isMobile.apple.ipod
• isMobile.apple.tablet
• isMobile.apple.universal
• isMobile.apple.device

Android devices

• isMobile.android.phone
• isMobile.android.tablet
• isMobile.android.device

特にCtoCやBtoCの開発においては、これくらいの粒度で最適化していくべきかもしれない。

他の言語はこちら

まとめ

単なる２分岐では足りなくなっている。スマホかPCかの２択の後、微調整する。そんなスタイリングでいい。もはや、そんな時代ではないかもしれない。持ち運ぶのか？画素数ではなく実際の横幅は？縦横比は？一般に普及しているデバイスの多様化がレスポンシブの意味を変え始めている。そう感じずにはいられない。

Excelsior!