Emulated Devicesにデバイスを追加する

モバイル用途のPWAや一昔前はハイブリッドアプリと言われ現在はガワネイティブと呼ばれているソフトウェア開発の表示検証時に、XcodeやAndroid Studioに付属するエミュレータを使用することが過去10年ほど主流だった(それしか方法がなかった)のですが、動作の遅さや手数の多さに加え、レスポンシブ対応のウェブページ設計の主流と共にSafariブラウザに追加された「開発→レスポンシブ・デザイン・モードにする」コマンドではプリセットがアップル製品の端末しか用意されていない不自由さから少し頭を悩ませていたところ、いつの間にかGoogle Chromeブラウザの検証コマンドにEmulated Devicesというあらゆる端末の表示が可能な機能が搭載されたので使うようになりました。もちろんプリセットはいくつか用意されているのですが、ここで大変有益なのはカスタムデバイスの追加機能で、その追加方法に若干戸惑う箇所があったので備忘録とします。主に対象となるのはAndroid実機が手元に存在せず、端末の販売元が公称する画面縦横のピクセル数とインチサイズが判明している状態の開発者です。

https://hkitago.tumblr.com/post/190656047891

端末の登録に必要な値は、”Device Name”, “Width”, “Height” の3つになりますが、オプション扱いになっている “Device pixel ratio” を最終的には求める必要があり「単位をピクセルからポイントに変換する方法」というのが実は記事題名として正しいのかもしれません。
android – How to calculate device pixel ratio – Stack Overflow

上記を参考にまず、縦横ピクセル数とインチサイズからppi値を算出します。ごく稀にppiを公称するメーカーもあるので感動を覚えますが、ジェネレータや計算ツールを使うと簡単です。
ppi、dpi 画素密度計算 – 液晶ディスプレイ
PPI (Pixels Per Inch) Calculator – Good Calculators

次にそのppiを150で割ってDevice pixel ratioを算出し入力要素に入れます(任意なので入れなくてもおk)。どうして150なのかは回答のコメント内にリンクがあるので参照してください。
High DPI Images for Variable Pixel Densities – HTML5 Rocks

最後に縦横それぞれのピクセル数をDevice pixel ratioで割算しポイント数を入力します。端末名称を入力し “Add” ボタンで追加し終了です。具体的に依頼のあった”ドコモ タブレット ARROWS Tab F-02F” でやってみると、

解像度 画素数: WQXGA(2560×1600ピクセル)
サイズ 10.1インチ

とあるので、ppi 画素密度計算で次のようになり、

画素密度: 299ppi
画素ピッチ: 0.085mm
総画素数: 4,096,000ピクセル
スペック: 10.1インチ(1600×2560)

Device pixel ratio = 299 / 150 = 1.993333333333333 となって、大凡2で縦横のピクセル数を割ると入力値が判明します。

任意入力とは言え、なぜGoogleがAppleの提唱したデバイス・ピクセル比を扱おうとしたのか疑問は残るところで、今後の更新で変わるのかもしれませんし、Safariブラウザにも(AppleのPWA対応を見る限り望み薄)もっと簡易な方法が搭載されるのかもしれませんが、Safariで調べてChromeで検証するという開発時のブラウザの利用方法が暫く続きそうです。

余談まで、手元に端末がある場合は検証用のJavaScriptを書くか測定ツールを使うと良いです。
mydevice.io : web devices capabilities

言うまでもなくiPhoneは実機が手元になくても計算の必要がありません。
The Ultimate Guide To iPhone Resolutions

またモバイル端末のみならず、デスクトップ機種のフルスクリーンで表示をするアプリの開発時にも、今までは検証パネルを左右、あるいは下部へ移動しながらという手間がなくなり大変便利です。

投稿者: hkitago

個人事業主でウェブと iOS, Android アプリの開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし、Bind, Postfix, Apache を MacOS で使い、エディタは Vi, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio といった IDE と CotEditor を重用しています。