スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【UA】PCからスマホサイトを見る1番簡単な方法【偽装】

スマホサイトをPCで見る方法

スマホ用サイトをパソコンで見たい時ってありますよね。お小遣いサイトでもスマホ専用のコンテンツがあったりしますが、ネットを主にパソコンで見てる方からしたら、できることなら全部パソコンで済ませたいと思いますよね。

そんな方への覚えておくと便利な、PCからスマホサイトを見る簡単な方法をご紹介します。

PCからスマホサイトを見る1番簡単な方法

PCからスマホサイトを見る方法は色々あるのですが、1番簡単な方法はUA(ユーザーエージェント)を偽装してサイトにアクセスするという方法です。

PCで使っているブラウザから、スマートフォンのUAに切り替える事で、「これはスマホからのアクセスです」と偽り、スマホサイトを表示させる事ができます。IPアドレスでアクセスを判別しているサイトを除き、だいたいのサイトはこの方法で見ることができます。

PCからスマホサイトを見る方法 目次

  1. Google Chromeからスマホサイトを見る方法
  2. Safariからスマホサイトを見る方法
  3. Firefoxからスマホサイトを見る方法
  4. ユーザーエージェント一覧

Google Chromeからスマホサイトを見る方法

Google Chromeの場合、拡張機能を使ってUAを切り替えます。UAを切り替えるための拡張機能は沢山あるのですが、わたしは FireMobileSimulator for Google Chrome という拡張機能を愛用しています。

FireMobileSimulator for Google Chrome

FireMobileSimulator for Google Chromeの使い方

FireMobileSimulator for Google Chromeの使い方

拡張機能をイントールすると、ブラウザの右上に丸い緑のアイコンが出現します。スマホページが見たいサイト上で、そのアイコンをクリックして偽装したい端末を選びます。

とりあえずスマホサイトが見たい時は SB iPhone 3G を選択すればいいと思います。

選択した後、ブラウザを更新することでPCサイトがスマホ表示に切り替わります。

元のPC表示に戻したい時は、端末選択解除を選択した後、ブラウザを更新することで元の表示に戻ります。

使用したい端末のUAが無い場合、最新端末リストから端末を追加のメニューを選び端末を追加することができます。

FireMobileSimulator for Google Chromeの端末追加画面

その他、オプション設定から端末設定で端末ごとに表示する横幅、高さを変更できたりと機能が豊富です。

PCからスマホサイトを見る方法 目次へ

Safariからスマホサイトを見る方法

Safariの場合、拡張機能をインストールしなくても元からUAを変更できる機能が備わっています。

SafariでUAを変更する方法

まず、メニューバーに開発というメニューが無い場合には、開発メニュの表示をオンにします。開発メニューを表示させるには、まず「command(Win:Ctrl)+ , 」キーで環境設定を開きます。

Safariの環境設定の詳細

歯車のアイコンの詳細メニューを選び、1番下の「メニューバーに"開発"メニューを表示」チェックボックスをオンにします。これでメニューバーに開発メニューが加わりました。

スマホページが見たいサイト上で、開発メニューから「ユーザーエージェント」を選択して、偽装したい端末を選ぶと自動的にブラウザが更新されてスマホ表示に切り替わります。元の表示に戻したい時は、デフォルトを選択することで通常の表示に戻ります。

ユーザーエージェント切り替え方法

Chromeの拡張機能でUAを切り替えた場合、Chrome上の他のウィンドウのUAも変更されてしまうのですが、Safariの場合はウィンドウごとにUAを変更できるので、他のページに影響がでないので便利です。

SafariのUA追加方法

使用したいUAが無い場合、「その他...」からユーザーエージェント文字列を入力することはできるのですが、毎回入力するのは面倒なので、ユーザーエージェントメニューに表示できるようにします。ただし、この方法はSafariのコアファイルをいじることになるので、バックアップをとってから自己責任で実践してください。

まず、「UserAgents.plist」というファイルをテキストエディタなどで開きます。

Mac

/Applications/Safari.app/Contents/Resources/UserAgents.plist

Windows

C:¥Program Files¥Safari¥Safari.resources¥UserAgents.plist

UserAgents.plistフォルダの場所は上記の通りです。Macは、Finderのメニューバーの移動の「フォルダへ移動(command + shft + G)」で「Applications/Safari.app/Contents/Resources/」と入力することでResourcesフォルダへ移動することができます。

UserAgents.plistファイルはXML形式で書かれています。ブログやサイトなどを作った事がある方ならわかると思うのですが、よくわからない方は</array>の直前に以下のようにUAを追加して下さい。

<dict>
<key>name</key>
<string>ブラウザ名</string>
<key>version</key>
<string>バージョン</string>
<key>platform</key>
<string>プラットフォーム</string>
<key>user-agent</key>
<string>ユーザーエージェント文字列</string>
</dict>

例えばiOS6のiPhoneを追加する場合はこんな風に書いていきます。

<dict>
<key>name</key>
<string>Safari iOS</string>
<key>version</key>
<string>6.0</string>
<key>platform</key>
<string>iPhone</string>
<key>user-agent</key>
<string>Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25</string>
</dict>

PCからスマホサイトを見る方法 目次へ

Firefoxからスマホサイトを見る方法

Firefoxからスマホサイトを見る場合、Chrome同様アドオン(拡張機能)を使ってUAを切り替えます。色々なUA切り替えのアドオンがある中、もわたしはFireMobileSimulatorというアドオンを愛用しています。(Chromeでも愛用中)

FireMobileSimulator

FireMobileSimulatorの使い方

アドオンをインストールしたら、メニューバーの「ツール」の中の「FireMobileSimulator」メニューを選び、切り替えたい端末を選択した後にブラウザを更新することでスマホサイトを表示することができます。

FireMobileSimulator端末選択

Chromeと同様、最新端末リストから端末を追加からUAを追加することができ、オプション設定から表示する大きさなどを変更するができます。

PCからスマホサイトを見る方法 目次へ

ユーザーエージェント一覧

UAの組み合わせは無数にありますので、適当にピックアップしたUAをあげていきます。

iOS6(iPhone)

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

iOS6(iPad)

Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

Android OS 4.0(ISW13F)

Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; ISW13F Build/V51R37G) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Internet Explorer 9(Windows)

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

Internet Explorer 10(Windows)

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

PCからスマホサイトを見る方法 目次へ

UA切り替えで作業効率化

UAを切り替えることで、スマホからしかできなかったECナビの珍獣コレクションがPCからもできるようになりました。

PCブラウザからみた珍獣コレクション

その他、自分のサイトやブログをスマホ表示で確認できたり、スマホサイトのソースをPCから確認できたりできるのでかなり便利です。是非活用してみてください。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。