【UA】PCからスマホサイトを見る１番簡単な方法【偽装】
スマホ用サイトをパソコンで見たい時ってありますよね。お小遣いサイトでもスマホ専用のコンテンツがあったりしますが、ネットを主にパソコンで見てる方からしたら、できることなら全部パソコンで済ませたいと思いますよね。
そんな方への覚えておくと便利な、PCからスマホサイトを見る簡単な方法をご紹介します。
PCからスマホサイトを見る１番簡単な方法
PCからスマホサイトを見る方法は色々あるのですが、１番簡単な方法はUA（ユーザーエージェント）を偽装してサイトにアクセスするという方法です。
PCで使っているブラウザから、スマートフォンのUAに切り替える事で、「これはスマホからのアクセスです」と偽り、スマホサイトを表示させる事ができます。IPアドレスでアクセスを判別しているサイトを除き、だいたいのサイトはこの方法で見ることができます。
PCからスマホサイトを見る方法 目次
Google Chromeからスマホサイトを見る方法
Google Chromeの場合、拡張機能を使ってUAを切り替えます。UAを切り替えるための拡張機能は沢山あるのですが、わたしは FireMobileSimulator for Google Chrome という拡張機能を愛用しています。
FireMobileSimulator for Google Chromeの使い方
拡張機能をイントールすると、ブラウザの右上に丸い緑のアイコンが出現します。スマホページが見たいサイト上で、そのアイコンをクリックして偽装したい端末を選びます。
とりあえずスマホサイトが見たい時は SB iPhone 3G を選択すればいいと思います。
選択した後、ブラウザを更新することでPCサイトがスマホ表示に切り替わります。
元のPC表示に戻したい時は、端末選択解除を選択した後、ブラウザを更新することで元の表示に戻ります。
使用したい端末のUAが無い場合、最新端末リストから端末を追加のメニューを選び端末を追加することができます。
その他、オプション設定から端末設定で端末ごとに表示する横幅、高さを変更できたりと機能が豊富です。
Safariからスマホサイトを見る方法
Safariの場合、拡張機能をインストールしなくても元からUAを変更できる機能が備わっています。
SafariでUAを変更する方法
まず、メニューバーに開発というメニューが無い場合には、開発メニュの表示をオンにします。開発メニューを表示させるには、まず「command（Win：Ctrl）＋ , 」キーで環境設定を開きます。
歯車のアイコンの詳細メニューを選び、１番下の「メニューバーに"開発"メニューを表示」チェックボックスをオンにします。これでメニューバーに開発メニューが加わりました。
スマホページが見たいサイト上で、開発メニューから「ユーザーエージェント」を選択して、偽装したい端末を選ぶと自動的にブラウザが更新されてスマホ表示に切り替わります。元の表示に戻したい時は、デフォルトを選択することで通常の表示に戻ります。
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>
Firefoxからスマホサイトを見る方法
Firefoxからスマホサイトを見る場合、Chrome同様アドオン（拡張機能）を使ってUAを切り替えます。色々なUA切り替えのアドオンがある中、もわたしはFireMobileSimulatorというアドオンを愛用しています。（Chromeでも愛用中）
FireMobileSimulatorの使い方
アドオンをインストールしたら、メニューバーの「ツール」の中の「FireMobileSimulator」メニューを選び、切り替えたい端末を選択した後にブラウザを更新することでスマホサイトを表示することができます。
Chromeと同様、最新端末リストから端末を追加からUAを追加することができ、オプション設定から表示する大きさなどを変更するができます。
ユーザーエージェント一覧
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)
UA切り替えで作業効率化
UAを切り替えることで、スマホからしかできなかったECナビの珍獣コレクションがPCからもできるようになりました。
その他、自分のサイトやブログをスマホ表示で確認できたり、スマホサイトのソースをPCから確認できたりできるのでかなり便利です。是非活用してみてください。