スマホサイトの確認に便利！PC（safari）でできるスマートフォンサイトの検証方法のやり方

スマートフォンサイトを制作する際に、iPhoneやAndroid両方の機種での検証や、もう発売されていないようなOSのバージョンの対応も必要になる機会があるかもしれません。

本来ならば一通りの機種を用意して実機で検証できる環境が必要ですが、個人での制作や、ちょっとしたサイトのスマートフォンサイトの対応の場合もう少し手軽な検証方法が必要になります。

また、PCでコーディングなどのサイト制作時のちょっとした確認は、やはりPCブラウザで見た方が楽です。

今回はPC版safariのユーザーエージェント指定を使用したスマートフォンサイトの検証方法を紹介します。

なぜPC版safariなのか？

現状のスマートフォンのブラウザは主に、iPhone向けのsafariとAndroid向けブラウザの二つに分かれます。

また、BlackBerryなどのその他のスマートフォン機種もWebkit系ブラウザを使用するようになってきています。

このことから、スマートフォンサイト制作をする際には、Webkit系ブラウザに対応させることが必須です。

PC版のsafariは同じwebkitブラウザなので、CSS3の記述もほぼスマートフォンサイトと同様に反映されます。

また、ユーザーエージェントの変更が拡張などなしに手軽にできるので、スマートフォンサイトを制作する際に即席のスマホシュミレーターになります。

PC版Chromeの場合は、ユーザーエージェントの指定がターミナルの使用やプロパティ設定が必要になったり、まだしっかりとしたアドオンが見られないので、今回はPC版Safariでの検証方法を紹介します。
※Chrome17以降のデベロッパーツールでは手軽にユーザーエージェントが変更できるようです。

注意事項

あくまで今回紹介するものはPCブラウザでのスマートフォンサイトの手軽な検証方法であって、確実にスマートフォンサイトを検証する方法ではありまん。

例えば、タップなどのスマートフォン特有の操作イベントの検証はできません。

解像度も違ってくるので、画面表示はウインドウサイズを変えるだけでは実際には不十分です。

また、Android向けのブラウザでは日本語のBoldが効かないなど、表示にもクセがありますので、最終確認などは必ずテストアップしたものを実機でみることをお勧めします。

PC版Safariで検証する際の注意事項

• タップやフリックなどの動作確認ができない
• 横幅の最小サイズが320pxにならない
• Android版用に解像度が倍（640px等）でつくられたサイトはそのまま表示される
• 日本語のデバイスフォントにboldが効かないなどAndroid特有のバグ確認ができない（※下記サイト参照）

[css, css3, html] スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ

http://tenderfeel.xsrv.jp/css/1177/

主にアニメーションイベントの不具合や、日本語のデバイスフォントにfont-weight:boldが効かないなどのクセがありますので、注意しましょう。

PC版safariのユーザーエージェントを変更してみよう

メニューバーに「開発」メニューを表示させる

safariを起動してメニューバーの「編集」から「設定」を開きます。
（※Mac版では「safari」から「環境設定」を開きます。）

すると設定画面が表示されるので、歯車のアイコンの「詳細」をクリックして、一番下の「メニューバーに[開発]メニューを表示」というチェックボックスにチェックを入れます。

するとメニューバーに「開発」メニューが新しく追加されます。

ユーザーエージェントを指定する

「開発」メニューの「ユーザーエージェント」を選択すると、主なブラウザ一覧が表示されます。

今回はスマートフォンサイトのユーザーエージェントなので一番下にある「その他」をクリックします。

するとブラウザ上部にユーザーエージェントを入力するテキストボックスが表示されます。

ここに検証したいスマートフォンサイトのユーザーエージェントを入力します。

■iPhone iOS4の場合

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7

■Android OS 2.1の場合

Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; SonyEricssonSO-01B Build/2.0.2.B.0.29) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.

※その他のユーザーエージェント一覧は下記のサイトを参考にしてください。

userAgent（ユーザーエージェント一覧）

http://www.openspc2.org/userAgent/

iPhone用のiOS～iOS5やAndroid OS 1.5～Android OS 4.xなどのユーザーエージェント一覧がまとめられています。

Androidのユーザーエージェントを入力して「OK」を押すと、先ほどまでPC版だったブラウザ表示がAndroid仕様に変化しました。

新しいタブやウインドウを開くとそちらはデフォルトの表示で開かれるので、AndroidとiPhoneなどいくつかのユーザーエージェントを変更したタブを開いておけるのも便利です。

ユーザーエージェントを変更していろいろなサイトを見てみよう

ユーザーエージェントをAndroidに変更するとさまざまなサイトがAndroid版のサイトとして見ることができます。

例としていくつかのサイトをユーザーエージェントを変更して見た場合の画面を紹介いたします。

Yahoo! JAPAN

http://www.yahoo.co.jp/

Twitter

http://www.twitter.com/

Facebook

http://www.facebook.com/

YouTube

http://www.youtube.com/

このように、PC環境でもさまざまなスマートフォンサイトの閲覧ができます。

参考サイトがどのように作られているのか、デザインや解像度、スクリプトを見たい際にも役立ちます。

ただし、ユーザーエージェントはこのように簡単に詐称されてしまう場合があるため、スマートフォンサイトの振り分けにユーザーエージェントを使用していない場合もあります。

手軽にできる検証方法としてsafariの活用の紹介でした。他にもこういった方法で検証しているなど便利な方法がありましたら教えてください。