【Chrome】スマホとPCの表示を並べて確認する方法【拡張機能】

どうも、くじらいどです。

ブログやホームページを作っていると、「これ、スマホで見たらどうなってるんやろ」と気になることがあると思います。スマホを取り出して確かめてもいいんですが、PCと行ったり来たりするのは地味に面倒なんですよね。

そこで、今見ているページを、スマホ・タブレット・PCの大きさで同時に並べて表示するChrome拡張機能「SyncView」を作りました。

並んでいるのは縮小した画像ではなく、1台1台が本物のページです。スクロールもできますし、リンクもクリックできます。

F12のデバイスモードとの違い

Chromeには最初から開発者ツールが入っていて、F12を押して「デバイスモード」にすると、スマホの大きさでページを見られます。タダで、最初から入っています。

なので、わざわざ拡張機能を入れるなら、F12にないものが要ると思っていて、SyncViewは「何台も同時に並べる」「一緒に動く」「並べたまま画像にする」の3つを作りました。

	F12のデバイスモード	SyncView
一度に見られる端末	1台ずつ切り替える	何台でも並べられる
スクロール・ページ移動	1台ぶん	全部の端末が一緒に動く
画像で保存	1台ずつ	並べたまま1枚に
開き方	F12 → デバイスモード	アイコンか右クリック

1台をじっくり調べるならF12、PCとスマホを見比べながら直すなら並んでいるほうが楽、という使い分けだと思います。

SyncViewでスマホとPCの表示を並べる方法

上のボタンからChromeウェブストアを開いて、［Chrome に追加］をクリックすると入れられます。入れたあと、ツールバーのパズルの形の［拡張機能］ボタンからピン留めしておくと、アイコンがすぐ押せて便利です。

SyncViewでできること

スクロールとページ移動が一緒に動く

1台をスクロールすると、ほかの端末も一緒に動きます。ページの長さは端末ごとに違うので、同じ距離ではなく同じ割合の位置まで動きます。PCでページの半分まで来たら、スマホもページの半分です。

リンクをクリックしたときも同じで、1台でクリックすると、全部の端末がそのページに移ります。

画面を足す・横向きにする

上の帯の［＋ 画面を追加］で、並べる端末を増やせます。

端末ごとの欄の縦横のボタンで、横向きにもできます。

並べたまま画像にする

［画像で保存］を押すと、並べた画面をそのまま1枚の画像にできます。PCとスマホの見え方を、人に見せたいときに使えると思います。

使えないページと、注意すること

chrome:// で始まる画面や、Chromeの設定、ウェブストアのページでは使えません。Chromeが、拡張機能がこれらのページに入ることを許していないためです。アイコンを押すと、並べる代わりに案内が出ます。

また、同じサイトを台数ぶん同時に開くので、ロボットの確認が出たり、アクセスの回数の制限に引っかかったりするサイトがあります。

SyncViewは、どのサイトでも並べられるように「すべてのサイト」へのアクセスの権限を使っています。そのため、入れるときに確認の表示が出ます。見ているページや閲覧履歴を外へ送ったり保存したりはしていなくて、保存しているのは選んだ端末の並びだけです。詳しくはプライバシーポリシーに書いています。

まとめ

• SyncViewは、今見ているページをスマホ・タブレット・PCの大きさで同時に並べるChrome拡張機能
• アイコンをクリックするか、右クリックの［SyncViewで並べて表示］で開く。閉じるのはEscキー
• スクロールとページ移動は、全部の端末で一緒に動く
• 端末は23台から選べて、横向き・画面の追加・画像で保存もできる
• chrome:// の画面や設定・ウェブストアでは使えない

「スマホで見たらどうなってるんやろ」と思ったときに、使ってみてもらえたらうれしいです。

以上、くじらいどでした！