🔊 Play

現代のWebサイトは、PCだけでなくスマートフォンやタブレットなど、様々なデバイスでの表示に対応する必要があります。
Google ChromeのDevToolsに搭載されている「Device Mode」を使えば、こうしたマルチデバイスでの表示検証が容易に行えます。

この章では、実機に頼らずモバイル表示の問題を見つける方法や、回線速度・入力操作のシミュレーションについて解説します。

---

10.1 モバイルデバイスのエミュレーション

Device Modeとは？

• ツールバーのスマホアイコンをクリックすることで有効になる「画面エミュレーションモード」
• ウィンドウがモバイル端末のような外観に切り替わり、レスポンシブデザインの挙動が再現される

主な機能：

• 代表的なスマートフォン（Pixel、iPhone、Galaxyなど）を選択し、画面サイズ・解像度をエミュレート
• 任意の幅・高さで画面サイズを自由に変更可能（ピクセル精度の確認に有用）
• 画面の向きを縦／横で切り替えることでレスポンシブ対応の検証が可能

💡ユースケース：

• ヘッダーがスマホ表示時に崩れる現象を再現
• 特定の端末（例：iPhone SE）で「ボタンが押せない」バグを特定
• 縦画面で正常だったUIが、横画面でははみ出してしまう問題を調査

---

10.2 タッチイベント、回線速度のシミュレーション

タッチイベントのエミュレーション：

• Device Modeではマウス操作が擬似的なタッチイベントとして処理される
• :hover が効かないモバイル特有の挙動や、ドラッグ操作の反応などを確認できる

センサ・入力系のシミュレーション：

• Sensors パネル（DevToolsの Command + Shift + P →「Show Sensors」）を使うと、位置情報やジャイロなどもエミュレート可能

回線速度のシミュレーション：

• Networkパネル、またはDevice Mode上部の「Throttling」ドロップダウンから選択
  • No throttling（通常）
  • Fast 3G
  • Slow 3G
  • Offline
• 回線速度を意図的に遅くして、画像やJSファイルの読み込みタイミングの遅延やタイムアウトを再現可能

💡ユースケース：

• ローディングスピナーが「3G環境で長く表示されたまま」になる問題を再現・調査
• タッチによるアコーディオンメニューが動かない → タッチイベントの伝播ミスを発見
• 「読み込み完了後にボタンが反応しない」 → 回線速度シミュレーションで遅延読み込みの影響を特定

---

🧪 実践課題

課題：スマホ表示でのレイアウト崩れと読み込み遅延を調査せよ

1. Chrome DevToolsを開き、Device Modeに切り替え
2. 表示デバイスを「iPhone 12 Pro」に設定し、画面の縦横を切り替えて崩れがないか確認
3. Network設定で「Slow 3G」を選択し、画像やJSの読み込み順や遅延があるかを確認
4. ボタンのタップイベントが意図通りに動作しているかを検証

---

📝 まとめ

• Device Modeはマルチデバイス対応のフロントエンド検証に不可欠
• 実機に頼らず、画面サイズ・向き・タッチイベント・回線速度を再現可能
• レスポンシブのバグや、モバイル特有のUI問題を早期に発見できる