【裏技】PCでスマホサイトを閲覧、フリックやスワイプもできる

* 2018/12/20 全面的に加筆・修正。

PC版とスマホ版、どちらもあるサイトというのは、今や当たり前になりました。
ポイントサイトも事情は同じで、スマホ版限定のコンテンツがあるケースも珍しくはありません。

とはいえ、スマホをお持ちでない方もいらっしゃいます。
また、スマホは持っているけど、1つのサイトを閲覧するのに、PCとスマホの両方をわざわざ使わなければならないのはめんどくさいという方もいらっしゃるでしょう。

そんな方に、PCでスマホサイトを閲覧する方法があります。
誰でも簡単に使えるので、もうご存じの方も多いことでしょう。
「User Agent Switcher」などのブラウザ拡張機能をインストールすれば、PCサイトとスマホサイトの切りかえは、クリック1つでOKです。

でも、すでにこの方法をご利用の方で、不便に感じることがあるという方はいらっしゃいませんか?
それはズバリ、フリックやスワイプといったタッチパネルに特有の操作が、PCで再現できないこと。
これらの操作ができないと、まともに利用できないページもありますよね。

この記事では、PCでスマホサイトを閲覧、フリックやスワイプもできる方法についてご紹介します。

スマホ

[特集]
GetMoney!

[PR]

「ユーザーエージェント」という言葉をお聞きになったことはあるでしょうか。
ユーザーエージェントは、サイトを訪問する際に使用されるプログラムで、利用しているブラウザの種類やバージョンをサイト側に申告することにより、スムーズな処理が行われるようにする役割を果たしています。

PCでスマホサイトを閲覧する方法というのは、冒頭で触れたようなブラウザ拡張機能も、この記事で紹介するテクニックも、ユーザーエージェントを書きかえることで実現しています。
PCを使ってサイトにアクセスしていながら、スマホでアクセスしていると申告することで、PCをでもスマホサイトを閲覧できるようにしているわけです。

念のためにお伝えしておきますが、これは違法・不正な方法ではありません。
スマホ向けのサイトやコンテンツを構築する際には、動作確認のためによく使用される方法です。

このテクニックには、Chromeに標準搭載されている開発者向けの機能「デベロッパーツール」を使用します。
具体的な手順は下記の通りです。
画像をクリックすると、別タブで拡大表示されます。

1. デベロッパーツールを開く

F12キーを押す、もしくは、Chromeの右上にある3つの点のアイコンをクリックして「Google Chromeの設定」を開き、「その他のツール」から「デベロッパーツール」を選ぶと、Chrome下部にデベロッパーツールが開きます。

デベロッパーツール

2. デバイスを切りかえる

デベロッパーツールの左上にある「Toggle device toolbar」をクリックして下さい。

Toggle device toolbar

3. ページを再読込する

F5キーを押す、もしくは、ツールバーの再読み込みボタンをクリックして、ページを再読み込みすると、表示がスマホサイトに切りかわります。
Toggle device toolbarを再度クリックした後、ページを再読み込みすると、PCサイト表示へ戻ります。

再読込

手順は以上となります、簡単ですよね。
使用する機会は滅多にないと思いますが、Shiftキーを押しながらドラッグすると、ピンチもできます。

続いて、ちょっとした応用と、注意点にも触れておきましょう。

デベロッパーツールの表示を調整する

デベロッパーツールは、画像左のように表示を狭めることができる他、画像右のように右側 / 左側 / 別ウィンドウで表示することもできます。

デベロッパーツール 表示変更

表示を狭めるのは、ウィンドウのサイズなどを変更する要領と同じです。
配置を変更したい場合は、デベロッパーツールの右上にある3つのアイコンをクリックして「Customize and control DevTools」を開き、「Dock Side」の項目から配置を選びます。

Dock Side

タッチパネル操作を無効化する

フリックやスワイプができるということは、逆に言うと、ドラッグができないということです。
スマホサイトのテキストを選択してコピーする、といった操作ができません。
でも、ご安心を、フリックやスワイプといったタッチパネル操作を有効にするか、それとも、無効にするか、簡単に切りかえることができます。

スマホサイト表示に切りかえている最中は、Chromeの右上付近に3つの点のアイコンが2つあります。
そのうちの下側のアイコンをクリックして「More options」を開き、「Add device type」を選んで下さい。
サイト表示の上部に「Device type」の項目が追加されるので、タッチパネル操作を有効にしたい時は「Mobile」を、無効にしたい時は「Mobile (no touch)」選びます。

Add device type

デベロッパーツールの表示変更やタッチパネル操作の切りかえは、Chromeを終了後、次に起動した時にも引き継がれますので、毎回設定し直す必要はありません。

注意点

ブラウザ拡張機能を使ってユーザーエージェントを変更した場合、影響は全てのタブに及びますが、デベロッパーツールを使って変更した場合は、それが有効なのはデベロッパーツールを開いているタブだけです。
スマホサイトへ切りかえた後にデベロッパーツールを閉じたり、デベロッパーツールを開いた状態であっても他のタブでは効果がありません。
一括して変更できた方が手間が省けるというケースもあるでしょうし、逆に、タブごとに切りかえができた方がいいケースもあると思うので、どちらが優れているとは一概には言えませんね。

デベロッパーツールを用いる場合で、問題となるのがクリックすると新しくタブが開かれるパターンです。
新しく開かれたタブではユーザーエージェントの変更が有効ではないため、PCからスマホサイトへアクセスしていると見なされ、正常ではないアクセスと判定されて、サイトトップページヘ飛ばされてしまったりすることがあります。

解決方法は2通りあります。

解決方法A:リンクのアドレスをコピー

対象リンクの上でマウスを右クリックして、「リンクのアドレスをコピー」を選んで下さい。
コピーしたURLをロケーションバー(URLバー)に貼り付けて移動すれば、新しくタブを開いてページを表示するのではなく、デベロッパーツールを開いているタブに表示させることができます。
定期的に閲覧するとわかっているページでは、この時にブックマークしておけば、次回からこの手順を省略することもできますね。

GoogleChrome リンクアドレスをコピー



解決方法B:ブラウザ拡張機能を併用

ブラウザ拡張機能を使ってユーザーエージェントを変更した上で、なおかつ、デベロッパーツールでデバイスを切りかえるというやり方です。

ブラウザ拡張機能による変更は全てのタブに及びますから、新しく開かれるタブも、PCサイトではなくスマホサイトとして開かれることになりますよね。
新しく開かれたタブは、そのままではフリックやスワイプができませんが、デベロッパーツールを開けばタッチパネル操作が有効になります。

Chrome向けの同種の拡張機能はいくつもありますが、特にこだわりがない方は、Google提供の「User-Agent Switcher for Chrome」を選んでおけばよいと思います。
こだわりのある方は、色々と試してみるのもよいかもしれませんね。

User-Agent Switcher for Chrome(以下、UAS)の使い方は、次の通りです。

まず、上記のURLへアクセス、「Chromeに追加」をクリックして、UASをインストールして下さい。
インストールが完了すると、Chromeの右上付近にUASのアイコンが追加されます。
UASのアイコンをクリックして「Chrome UA Spoofer」を開き、「iOS」から「iPhone」や「iPad」もしくは「Android」から「Android KitKat」を選ぶと、自動的に再読み込みされて、表示がスマホサイトに切りかわります。
PCサイト表示へ戻したい時は、「Chrome」から「Default」を選べばOKです。

User-Agent Switcher for Chrome



PCでスマホサイトを閲覧、フリックやスワイプもできる方法のご紹介は以上となります。
是非ご活用下さい。

なお、掲載されている情報は執筆当時におけるものであり、最新の状況とは異なる可能性がありますので、ご注意下さい。


[オススメ]
すぐたま

[オススメ]
ポイントインカム

関連キーワード

■雑記の最新記事

コメント

  1. こんにちは~。

    コメントありがとうございました。

    ブルースクリーンは本当にまいりました。
    初期化してもダメなら、もうお釈迦だなと覚悟しての初期化作業でしたから。
    結果的には初期化、大成功でしたので、このパソコンにもさらに5年はがんばってもらえそうだと♪

    パソコンのスマホ利用についても詳しくありがとうございました。
    さしあたり、昨日アップした内容でも「そんな方法があったんですね!」と早速取り入れてくださった方がいらっしゃってくださり、自分ではとっくに実践していたことなのでいまさら記事にするのは面倒…という気持ちもありましたが、役に立てたようでよかったと思っています。

    こういう”裏技”てきな便利な方法は、知っているのと知らないのとでは作業効率、モチベーション維持に大きくかかわりますから、やはり大事ですよね。
    この分野は「ハタラキバチさん」という思いが強く私にはあります。今後もいろいろお世話になると思いますので、どうぞよろしくお願いいたします♪

    2015/09/06 15:09

    まみー

コメントを書く

*「コメント」以外は空欄のままでもご投稿いただけます
GetMoney!
[PR]
ポイントインカム
すぐたま