スマートフォンやタブレットでWebを閲覧したときの画面表示をパソコンで再現してくれる拡張機能もある。ここでは、その一例として「モバイルシミュレーター - レスポンシブテストツール」と「U-Eyes: Mobile Device Simulator」の機能や使い方を比較・検証していこう。
「モバイルシミュレーター」の追加手順
最近のWebサイトは、「PC用」と「モバイル用」の2種類のレイアウトが用意されているケースが多い。もちろん、パソコンのブラウザで見たときは「PC用」のレイアウトでWebが表示される。このWeb表示を「モバイル用」に変更してくれる拡張機能もある。
ここでは、その一例として、「モバイルシミュレーター - レスポンシブテストツール」と「U-Eyes: Mobile Device Simulator」を比較・検証していこう。
まずは、この分野のメジャーな拡張機能として知られている「モバイルシミュレーター - レスポンシブテストツール」の使い方から紹介していこう。
拡張機能の追加手順はいつもと同じ。「モバイルシミュレーター - レスポンシブテストツール」の紹介ページを開き、画面右上にある「Chromeに追加」をクリックする。続いて、「拡張機能を追加」ボタンをクリックするとインストールが完了する。
なお、「モバイルシミュレーター - レスポンシブテストツール」という名称は少し長すぎるので、以降は「モバイルシミュレーター」と省略して解説を続けていこう。拡張機能をインストールすると、以下の図のような画面が表示される。
この画面は、ツールバーに拡張機能を固定する手順を示したものだ。指示に従って、拡張機能をツールバーに固定しておこう。「拡張機能」のアイコンをクリックし、「モバイルシミュレーター」のピンをクリックしてONにする。
以上で準備作業は完了。慣れている方なら、ここまでの作業を1~2分程度で完了できるだろう。
Webのモバイル表示と各種操作
それでは、「モバイルシミュレーター」の使い方を解説していこう。ブラウザ(Chrome)に適当なWebサイトを表示し、「モバイルシミュレーター」のアイコンをクリックする。
すると、画面表示が以下の図のように切り替わり、「スマートフォンでWebを見た様子」を確認できるようになる。
もちろん、この状態のまま操作を進めていくことも可能だ。マウスホイールを上下に回転させると、それに応じてWeb画面がスクロールしていくのを確認できる。
ちなみに、Webページ内に表示されている「グレーの丸印」は、操作位置を可視化するポインターの役割を担っている。この丸印を「リンク」や「画像」などに合わせてクリックすると、スマートフォンの「タップ」と同じ操作を実現できる。
念のため、画面を元に戻すときの操作手順も紹介しておこう。モバイル用のWeb表示を終えるときは、「拡張機能」のアイコンを再クリックするか、もしくは以下の図に示した「×」アイコンをクリックすればよい。これで通常のWeb表示に戻すことができる。
続いては、「モバイルシミュレーター」に用意されている各種機能を紹介していこう。モバイル用のWebを表示した際に、スマートフォンの機種を指定することも可能となっている。機種を変更するときは、以下の図に示したアイコンをクリックし、一覧から好きな機種を選択すればよい。
一覧を下へスクロールしていくと、「タブレット」に分類される端末もいくつか用意されているのを確認できる。
たとえば「Galaxy Tab S7」を選択すると、画面表示が以下の図のように変化し、Webサイトをタブレットで閲覧した様子をシミュレートできる。
ただし、右上に「PRO」のアイコンが表示されている機種は、有料版の「モバイルシミュレーター」を契約した方だけが選択できる機種となる。このため、無料版で選択できる端末は少し古めの機種に限定されてしまう。
Webを表示した後の操作についても補足しておこう。別のWebサイトへ移動する際に、キーワード検索を利用することも可能だ。以下の図は、Chromeのアドレスバーに「天気予報」と入力して「Enter」キーを押した様子だ。通常のWeb表示と同様に、アドレスバーを使ったキーワード検索(Google検索)にも対応している。
もちろん、検索結果をクリックしてリンク先のページへ移動してもよい。以下の図は、Google検索の結果から「日本気象協会」のWebサイトへ移動した例だ。
端末を「横向き」にしたときのWeb表示にも対応している。端末の向きは、以下の図に示したアイコンをクリックすると変更できる。
続いては、モバイル用のWeb表示の再現度を検証していこう。以下の図は、東京都立の動物園の紹介する「東京ズーネット」のWebサイトを表示した例だ。現時点では「モバイルシミュレーター」をOFFにして、「PC用」のレイアウトでWebを表示している。
このサイトは「レスポンシブWebデザイン」になっていないため、画面サイズ(ウィンドウサイズ)を変更してもWebのレイアウトは変化しない。このため、ウィンドウの幅を小さくしても「PC用」のレイアウトがそのまま表示される形になる。
今度は「モバイルシミュレーター」をONにした状態で同じWebサイトを見てみよう。すると、「モバイル用」のレイアウトでWebが表示されるのを確認できる。
このように「モバイルシミュレーター」の画面表示は、単に画面サイズを調整する機能ではなく、モバイル端末で見た様子をなるべくリアルにシミュレートするように設計されている。
ただし、各モバイル端末にインストールされている「フォント」まで再現する機能は用意されていないようだ。Webページ内の文字は「PC用のフォント」で表示されるため、実機のモバイル端末と比べると、文字の配置などが少し異なるケースもある。とはいえ、全体的な雰囲気を確認するだけなら「十分に役割を果たしてくれる」といえるだろう。
スクリーンショットの活用
操作手順のマニュアル作成などに使える「スクリーンショット機能」も装備されている。使い方はとっても簡単で、「カメラ」のアイコンをクリックし、フレーム(端末の筐体イメージ)の有無を選択するだけ。
続いて、以下の図のような画面が表示されるので、「ダウンロード」アイコンをクリックする。すると、PNG形式の画像ファイルが「ダウンロード」フォルダーに保存される。
あとは、保存した「画像ファイル」を文書などに貼り付けて利用すればよい。以下の図は、Wordに画像ファイルを挿入した例だ。フレームの周囲は透明になっているため、背景が白色でない状況でも問題なく利用できる。
そのほか、Webを操作している様子を「動画ファイル」として保存する機能も用意されている。こちらは「ビデオカメラ」のアイコンをクリックして録画を開始する。その後、「停止」ボタンをクリックすると、「スマートフォンでWebを操作している様子」をWEBM形式の動画ファイルとして保存できる。なお、有料版の「モバイルシミュレーター」を契約すると、GIFアニメやMP4といったファイル形式も指定できるようになる。
「モバイルシミュレーター」の設定画面
最後に「モバイルシミュレーター」の設定画面を紹介しておこう。設定画面は「歯車」のアイコンをクリックして呼び出す。
ここには、ヘッダー・フッターの表示/非表示、キーボード表示の有効/無効など、画面表示に関する設定項目がいくつか用意されている。ただし、「偽のキーボード」と書いてあるように、このキーボードは見た目を「それっぽく」するだけの機能でしかなく、実際に文字を入力できる訳ではない。
ということで、今回は「モバイルシミュレーター」の機能と使い方を紹介した。こういった拡張機能は、Webの開発者が「モバイル端末で見たときの様子」を確認するために利用するのが一般的であるが、単に「スマホ環境でWebを見るため」に活用しても構わない。
たとえば、スマホでよく見るWebサイトをパソコンで閲覧するときに、「いつも見ているWeb画面の方が操作しやすい」と感じることもあるだろう。このような場合に、クリックひとつでWeb表示を「スマホ用」に切り替えられるのは、意外と大きなメリットになるかもしれない。そのほか、スマホサイトにしか表示されないコンテンツを見るときにも「モバイルシミュレーター」を活用できると思われる。
なお、次回の連載で紹介する拡張機能「U-Eyes: Mobile Device Simulator」にも似たような機能が用意されている。「どちらの方が使い勝手がよいか?」を比較できるように、次回は「U-Eyes: Mobile Device Simulator」の機能と使い方を紹介していこう。