GoogleChromeのDevToolsの機能でMobile emulationなるものが出来ていたのでちらっと確認したのでそのメモ。
以下に出来る事の抜粋を記載します。もっと出来る事がありそうですが、詳細はMobile emulationを確認下さい。
- 各種スマホのエミュレーション
- ピンチイン、ピンチアウト、スワイプ操作が出来る
- 画面サイズ及びピクセル比の変更が可能
- メディアタイプの切り替えが可能
- User-Agentの変更も可能
- 現在地の変更が可能
参考サイト
GoogleDevelopersのChromeDevToolsのページ
HTML5Rocksでの紹介ページ
Chrome DevTools for Mobile: Screencast and Emulation
目次
- 準備
- エミュレーターを起動させる
- 操作
- 画面サイズ及び縦横サイズを変える
- ピクセル比を変える
- メディアタイプの切り替え
- UserAgentの変更
- 現在地(緯度経度)の変更
- その他
1.準備
2014年1月14日現在では通常のMacのGoogleChrome(v31)では確認できなかったのでGoogle Chrome Canaryをインストールします。
インストール後、Chromeを起動し、右上の3本線のボタンを押下後、Tools→DeveloperToolsを起動させます。
DeveloperToolsを起動後、DeveloperToolsの右上の歯車のアイコンを押下します。
GeneralのShow ‘Emulation’ view in console drawer.の欄のチェックを有効化させます。
その後、画面下部にEmulationタブが出現しているのが確認できます。 もし、画面下部のタブが表示されない場合にはEscキーを押下して表示させてください。
2.エミュレーターを起動させる
Emulatorタブの画面左にある
- Device
- Screen
- User Agent
- Sensors
をクリックする事でミュレーターの詳細を設定する事が出来ます。
とりあえずGoogle Nexus4のエミュレーションを起動します。
- EmulatorタブのDeviceを選択し、セレクトボックスからGoogle Nexus4を選択します。
- Emulateボタンを押下します。
上記２ステップでChromeの画面が選択したスマホのエミュレーションを行う画面となります。
3.操作
PCのスクロールでスクロールできますが、タッチイベントのエミュレートも出来るのでクリックしながらスクロールする事でスワイプも可能です。
また、Shiftキーを押下しながらスクロールさせる事でピンチイン、ピンチアウトの操作も可能です。
なお、以下でタッチ操作のエミュレーションを無効化出来ます。
- EmulatorタブのSensorsを選択し、Emulate touch screenのチェックを外します
3.画面サイズ及び縦横サイズを変える
- EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
- Resolutionの値を変更する事で画面サイズを変更できます。
縦と横の画面サイズを設定する真ん中にあるボタンを押下する事で縦横のサイズを逆にする事が出来ます。
4.ピクセル比を変える
ピクセル比を変更できます。 これでMediaQueryでratioに関する記述を行った場合の確認も簡単に出来ます。
- EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
- Device pixel ratioの値を変更します。
例えば以下のようなコードを書きます。(dataURIは略)
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#image {
background-repeat:no-repeat;background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
}
}
上記の場合、ratioが2の場合にはid属性がimageの箇所に表示されますが、1に変更すると表示されなくなる事が確認出来ます。
5.メディアタイプの切り替え
- EmulatorタブのScreenを選択し、CSS mediaにチェックを入れます
- セレクトボックスから任意のmediaタイプを選択します。
こちらについては実際動作は未確認となっております。。。
6.UserAgentの変更
- EmulatorタブのUser Agentを選択し、Spoof user agentにチェックを入れます。
- セレクトボックスから任意の端末名を設定するかテキストボックスの値を直接書き換えます。
User Agent String.Comにアクセスすると適当に設定した値が表示されているのが確認出来ます。
7.現在地(緯度経度)の変更
現在地(緯度経度)のが変更が出来ます。
- EmulatorタブのSensorsを選択し、Emulate geolocation coordinatesにチェックを入れます。
- Lat、Lonにそれぞれ値を入れます。
上記の状態でGPSを取得するようなページに遷移します。 Geolocation Demoに遷移するとブラウザから現在地取得して良いかの確認が表示されるので許可すると東京タワーの場所に移動した事が確認できます。
また、測位に失敗した(navigator.geolocation.getCurrentPositionでエラー)とさせたい場合にはEmulate position unavailableにチェックを入れます。
8.その他
加速度の設定だったり、ViewPortの設定?などその他色々出来るようですが、今日はとりあえずここまで。 時間があったら調べよう。。
