先日、Googleが「モバイルフレンドリー」なサイトかどうかを検索順位に反映することを発表しました。
“we will be expanding our use of mobile-friendliness as a ranking signal”: http://t.co/EOOPI12OgW #mobilerising
— Matt Cutts (@mattcutts) 2015, 2月 26
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。
このアルゴリズム変更で、モバイル対応していないサイトは、モバイルの検索結果で順位を下げる可能性が高いです。
そうしないためには、モバイル フレンドリー テストでサイトをチェックして、「問題ありません。 このページはモバイル フレンドリーです。」と出るようなサイトにするのが望ましいです。
ただ、そのようなサイトを作るには、スマホでどのように表示されるかを確認しながら作る必要があります。
そういった場合には、実機で確認するよりも、ブラウザの表示のエミュレーション（仮想実行）機能を利用して確認するのが作業効率が高いです。
幸い、Chrome、Firefox、IE11、Safari、Operaのような各種ブラウザには仮想的にスマホ表示させるための機能があらかじめついています。
今回は、各種ブラウザのデフォルトの機能で、スマホやタブレット表示をエミュレートする方法を紹介します。
今回は、古い狭い端末の表示確認用にiPhone（3か4）を例にしたエミュレート方法を紹介したいと思います。
目次
目次
Google Chromeで動作確認
スマホ表示をエミュレートするなら、Chromeが最も簡単かもしれません。
まずは、Chromeを起動して動作確認をしたいページを表示させます。
ページ表示後、F12キーを押します。もしくは、ページのどこでも良いので右クリックボタンを押して、「要素を検証」を選択します。
すると、以下のような画面が表示されるので、デバイスモードボタン（
）をクリックします。
すると、以下のような画面になります。
あとは、デバイス選択用のドロップダウンメニューから目的のデバイス（今回の場合はiPhone4）を選択します。
デバイスを選択すると、そのデバイスの解像度でエミュレートされます。
うまく表示されない場合は、リロードをしてみてください。
Firefoxで動作確認
Firefoxでスマホ表示をエミュレートするには、アドオンをインストールする必要があります。
アドオンの設定
今回は、User Agent Switcherというアドオンを利用した方法を紹介したいと思います。
まずは、User Agent SwitcherからアドオンをインストールしてFirefoxを再起動してください。
インストール後、メニューボタン（
）を押して「カスタマイズ」をクリックします。
すると以下のような、「User Agent Switcher」のアイコンがあるので、アイコンをドラッグしてツールバーにドロップします。
以下のように、アイコンが設置されたらカスタマイズを終了します。
次に先程設置したアイコンをクリックして、「ユーザーエージェントの設定（Edit User Agents）」をクリックします。
以下のようなダイアログが表示されるのでOKボタンを押してください。
すると、以下のようなメニューが表示されるようになるので「iPhone3」を選択します。
その他の端末の登録
その他のユーザーエージェントを登録するには、「New→New User Agent」から登録してください。
ユーザーエージェント情報などは、以下などを参考にしてください。
開発ツールから表示
次に、動作確認をしたいページを表示させます。
ページ表示後、F12キーを押します。もしくは、ページのどこでも良いので右クリックボタンを押して、「要素を調査」を選択します。
すると以下のような画面が表示されるので、レスポンシブデザインモード（
）ボタンをクリックします。
すると以下のように「レスポンシブデザインモード」で表示されます。
画面の大きさを変更するには、プリセットを変更するか、枠をドラッグ＆ドロップで調節してください。
Firefoxは、アドオンの設定が少し面倒くさいです。
IE11で動作確認
IE11は、デフォルトの機能だけでスマホ表示をエミュレートできます。
開発ツールの起動
まずは、IE11を起動して動作確認をしたいページを表示させます。
ページ表示後、F12キーを押します。もしくは、ページのどこでも良いので右クリックボタンを押して、「要素を検証」を選択します。
すると、以下のように開発ツールが表示されるので、「エミュレーション」タブを選択してください。
ユーザーエージェントの設定
エミュレーションタブ内の、「ユーザーエージェント文字列」を「カスタム」に選択します。
すると、以下のように「カスタム文字列」入力フォームが表示されます。
その入力フォームに、端末のユーザーエージェントを入力してエンターキーを押します。
今回は、iPhone4表示をエミュレートするので以下のユーザーエージェントを入力しました。
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7
ディスプレイ設定
あとは、「ディスプレイ」項目から画面の大きさを設定します。
「向き」を「縦」に選択した後、「解像度」のドロップダウンメニューから「カスタム」を選択します。
あとは以下のように幅と高さを設定します。
- 幅：320
- 高さ：480
すると、以下のようにエミュレート表示されます。
設定したユーザーエージェントは、次からはサジェストする形で表示されるので再入力は不要になります。ただ、ディスプレイの大きさを変更するのはちょっと面倒くさいですね。
Safariで動作確認
Safariはまず、「開発ツール」を有効にする必要があります。
当方は、Windowsしか持っていないので、Windows版での説明になります。もしかしたら、iOSのものと違うかも。
開発ツールの有効化
まずは、Safariの「設定ボタン」から「設定」メニューを選択します。
ダイアログが表示されるので「詳細」タブを選択し、「メニューバーに”開発”メニューを表示」にチェックをつけて閉じます。
その後、設定ボタンから、「メニューバーを表示」を選択してメニューバーを表示させておきます。
ユーザーエージェントの選択
あとは、メインメニューから「開発→ユーザーエージェント→Safari iOS 4.3.3 – iPhone」を選択します。
画面をリロードして、画面幅を変更するとスマホのように表示されます。
画面幅はマウスのドラッグ&ドロップで変更するしかないようです。
Operaで動作確認
オペラは、Chromeと同じコンポーネントを利用しているので、多少操作方法は違いますが基本的な使い方はChromeと同じです。
デベロッパーツールの起動
動作確認したいページを表示して、ページのどこでも良いので右クリックして「要素を検証」をクリックします。（オペラデフォルトでは、F12でデベロッパーツールは表示されない。）
オペラデフォルトの設定だと、デベロッパーツールは右側に表示されるので、「デバイスモード」ボタンをクリックします。
デバイスのドロップダウンリストから「iPhone4」を選択します。
選択後、ブラウザをリロードすると、以下のようにエミュレート表示されます。
多少の違いを除けば、操作はほとんどChromeと同じです。
まとめ
このように、ブラウザの機能を使って、スマホや、タブレットなどの表示をエミュレート（仮想実行）することができます。
個人的には、Chrome（Operaも）のエミュレート機能が群を抜いて使いやすいと思います。
サイトの作成中や、Wordpressテーマの編集中などは、こういったブラウザの機能で動作確認をして、公開時に持っている実機などで動作確認をすると、作業効率は良いです。
ただ、実機すべてでは、動作確認できないので、以下のGenymotionを利用して仮想端末環境を作成し、動作を検証する方法などもあります。
これだと、実機に近い形で動作確認することができます。
Android Chromeとかをインストールする場合は以下の設定をする必要があります。
