前回の連載に引き続き、「モバイル端末でWebを見た様子」を再現してくれる拡張機能について紹介していこう。今回は「U-Eyes: Mobile Device Simulator」という拡張機能の使い方を紹介する。Web画面だけでなく、モバイル端末のフレームも再現してくれるため、モックアップの作成などにも活用できる。

「U-Eyes」の追加手順

前回の連載では、「モバイルシミュレーター - レスポンシブテストツール」という拡張期の使い方を紹介した。今回は、同じような機能を持つ「U-Eyes: Mobile Device Simulator」の使い方を紹介していこう。

  • 「モバイルシミュレーター」vs「U-Eyes」

「U-Eyes: Mobile Device Simulator」は、執筆時においてユーザー数が約8,000しかない、かなりマイナーな拡張機能といえる。前回の連載で紹介した「モバイルシミュレーター - レスポンシブテストツール」が約100万ユーザーになっていることを考えると、ユーザー数においては「圧倒的な差がある」といえる。

とはいえ、ユーザー数はひとつの目安でしかなく、もしかしたら「使える拡張機能」なのかもしれない。Googleウェブストアの「おすすめ」も獲得しているようなので、その使い勝手を本記事で検証してみよう。

まずは、拡張機能の追加方法だ。この手順に特に変わった点は見当たらない。「U-Eyes: Mobile Device Simulator」の紹介ページを開き、右上にある「Chromに追加」をクリックする。続いて、「拡張機能を追加」ボタンをクリックするとインストールが完了する。

  • 「U-Eyes: Mobile Device Simulator」の紹介ページ

「U-Eyes: Mobile Device Simulator」という名称は少し長すぎるので、以降は「U-Eyes」と省略して解説を続けていこう。拡張機能を追加できたら、ツールバーにアイコンを固定する。「拡張機能」のアイコンをクリックし、「U-Eyes」のピンをクリックしてONにする。

  • 「U-Eyes」をツールバーに固定する操作

以上で準備作業は完了。さっそく、「U-Eyes」の具体的な使い方を紹介していこう。

Webのモバイル表示と各種操作

まずは、Web表示を「モバイル用」に切り替えるときの操作手順から紹介していこう。適当なWebページを開き、「U-Eyes」のアイコンをクリックする。

  • モバイル表示への切り替え

すると、以下の図に示したような画面に切り替わり、現在のWebページを「モバイル端末で閲覧した様子」を確認できるようになる。

  • モバイル表示でWebを閲覧した様子（1）

もちろん、この状態のまま操作を続けていくことも可能だ。ページを上下にスクロールさせるときは、マウスホイールを回転させればよい。前回の連載で紹介した「モバイルシミュレーター」と同じく、操作位置を可視化するための「グレーの丸印」も表示されている。この丸印をリンクなどに合わせてからマウスをクリックすると、リンク先へ移動できる。つまり、「タップ」と同じ操作になる訳だ。

  • モバイル表示でWebを閲覧した様子（2）

念のため、通常の「PC用」のWeb表示に戻す手順も紹介していこう。「U-Eyes」を終了するときは、「拡張機能」のアイコンを再クリックするか、もしくは「Exit U-Eyes」をクリックすればよい。

  • 通常のWeb表示に戻す操作

続いては、モバイル端末の「機種」を変更するときの操作手順を解説していこう。機種を変更するときは、右上に表示されている「機種名」をクリックすればよい。

  • デバイスの変更（1）

すると、機種の一覧が表示されるので、この中から好きな機種を選択する。

  • デバイスの変更（2）

以下の図は、機種に「Pixel 7」を選択した例だ。筐体（フレーム）のデザインと画面サイズが変更されているのを確認できるだろう。

  • デバイスの変更（3）

このように機種の変更も手軽に行えるようになっているが、「少し古い機種しか用意されていない……」という感は拭えない。

前回の連載で紹介した「モバイルシミュレーター」には、もっと新しい機種もラインナップされていた。ただし、これらの多くは有料版を契約しないと選択できない仕様になっており、単純には比較できない。iPhoneを例に「無料で使える範囲」を比べてみると、どちらも「iPhone 14まで選択可能」という結果になった。Androidを含めると、選択可能な機種に多少の差があるものの、「どちらも最新機種には対応していない……」という評価になるだろう。

もちろん、端末の回転には問題なく対応している。端末を「横向き」にしたいときは、「Portrait」をクリックすればよい。同じ位置に表示される「Landscape」をクリックすると「縦向き」に戻る、という動作になっている。

  • 端末を「横向き」に回転させた様子

このようにモバイル端末のシミュレーターとしては十分に使えそうな拡張機能に見えるが、その動作には少し懸念が残るようだ。たとえば、モバイル表示のままリンク先へ移動していくと、「PC用」のレイアウトでWebが表示されてしまうケースが稀に見受けられた。

  • PC用のレイアウトで表示されたWebページ

上図に示したWebページは、本来なら以下の図のように表示されなければならない。こちらも「U-Eyes」で表示した画面となるが、モバイル表示のままリンク先へ移動したのではなく、PC用のWeb表示でリンク先へ移動してから「U-Eyes」をONにした例となる。

  • リンク先へ移動してから「U-Eyes」をONにした場合

つまり、「U-Eyes」をONにしたまま操作を続けると、正しく動作してくれない場合があるようだ。そのほか、スマホ用のWebサイトが正しく表示されない場合もあり、前回の連載で紹介した「モバイルシミュレーター」と比べると、「安定性に欠ける……」と言わざるを得ない。

「U-Eyes」に用意されている機能

Webの閲覧以外の関連機能についても見ていこう。「U-Eyes」には、現在のページ（URL）の「QRコード」を表示してくれる機能が装備されている。この機能は、右側のメニューにある「QR Code」をクリックすると実行できる。

  • QRコードの表示

現在のWebページを、実機のスマートフォンで確認したい場合などに活用できるだろう。

スクリーンショットの撮影にも対応している。撮影方法は以下の図に示した3種類。フレーム（筐体イメージ）を含めた形で撮影したいときは、「Device Shot」をクリックすればよい。

  • スクリーンショット用のコマンド

すると、以下の図のようなプレビューが表示される。ここで「Original」をクリックすると、スクリーンショットをPNG形式の画像ファイルとして保存できる（「ダウンロード」フォルダーに保存される）。

  • スクリーンショットの保存

ただし、フレームの周囲が「白色」の画像になっているため、背景のある文書に貼り付けると、周囲に余白が表示されてしまう。

  • 保存したスクリーンショットをWordに挿入した様子

前回の連載で紹介した「モバイルシミュレーター」では、フレームの周囲を「透明」にした画像になっていたため、スクリーンショット機能についても「モバイルシミュレーター」の方が優れている、という評価になる。

なお、「モバイルシミュレーター」と同様に「スマートフォンでWebを操作している様子」をWEBM形式の動画ファイルとして保存する機能も用意されている。こちらは「U-Eyes」の右側にあるメニューで「Screencast」をクリックすると実行できる。

そのほか、テーマを変更してダークモードに切り替える機能も用意されているが、こういった機能は個人の趣味的なものなので、あって困る機能ではないが、評価の対象にはしていない。

  • テーマの変更

ちなみに、右側にあるメニューにある「Setting」の項目は、「U-Eyes」の設定画面を開くものではなく、スクリーンショットの撮影タイミングを指定する項目となる。「U-Eyes」そのものの設定画面は特に用意されていないようだ。

  • 「Setting」をクリックした様子

ということで、2回にわたって「Webのモバイル表示」を実現してくれる拡張機能を紹介してきた。簡易的なシミュレーターとしては、どちらも十分に役割を果たしてくれると思われる。ただし、安定性の面では「モバイルシミュレーター」に分があるようだ。スクリーンショットの周囲が「透明」という点でも、「モバイルシミュレーター」の方が高評価になる。

「Webのモバイル表示」は万人向けの機能ではないものの、試してみる価値は十分にある拡張機能といえる。画面が小さくても「モバイル版の方が操作しやすい」というケースがないとは限らない。そういう意味では、Web開発者でなくても追加しておく価値のある拡張機能といえるだろう。

全体的に見た執筆時の印象としては、「U-Eyes」よりも「モバイルシミュレーター」の方が使い勝手がよい、と感じられた。やはり、ユーザー数100万というのは伊達ではないのかもしれない。「U-Eyes」は、「今後の改善に期待したい」というのが正直な感想だ。