パソコンでスマホサイトを確認する

あっという間に5月半ばですが、みなさんはどう過ごされましたか?
私は、ここ何年かはゴールデンウィーク前後は忙しく、今年も知らないうちに終わってしまいました。ということで、ブログの更新も空いてしまってました…。

さて、 最近ではスマートフォン用のサイトを作ることもたびたびありますが、表示の確認はなかなか難しいです。端末のバリエーションはすべて追うのは難しいのですが、加えて縦向きの表示と横向きの表示など。

もちろん、手持ちのiPhoneやiPadは確認できますが、作成中のサイトなどはパソコン上で確認したい。また、スマートフォンを持っていないクライアントに確認してもらうときなども考えるとパソコンで確認できると良いですよね。

Android SDKや、開発者登録をしてiPhoneSDKを使ってシミュレーターで確認する方法もありますが、もっと簡単に確認するには、例えば、パソコン版のSafariで開発メニューを使う方法があります。

パソコン版のSafariを起動し、「環境設定」を開いて、「詳細」のタブから、「メニューバーに”開発”メニューを表示」にチェックを入れます。

すると、メニューに「開発」が表示されるので、その中の「ユーザーエージェント」からiPhone版SafariやiPad版Safariを選ぶことができます。(画像はMacですが、Windowsでも同様に)

そして、スマートフォンに対応したサイトを見ると、スマートフォン用サイトが確認できます。横幅が広いので、ブラウザの幅を狭くするとそれらしくなります。

一般的に、.htaccessファイルなどでスマートフォンかどうかを振り分けている場合、iPhoneだと認識されてスマートフォン用サイトが表示されるわけです。

パソコン用とiPhone用の違いはありますが、同じSafariですので大きな表示の違いはないはずです。

ただし、これではiPhoneやiPadしか確認できません。

もう1つの方法として、Firefoxを使います。(じつは、こっちがおすすめ)

まず、Firefoxを起動し、アドオンの「FireMobileSimulator」を探します。

黄色の「Add to Firefox」をクリックすると、ダウンロードが始まり、インストール画面になるので「今すぐインストール」をクリックします。インストール後、Firefoxを再起動すると、アドオンが使えるようになります。

メニューの「ツール」から「FireMobileSimulator」を選ぶと、端末を選択することができます。

なんと、iPhoneは、au版とSoftbank版が。Android端末もあり、いわゆるガラケーもあります。端末を選択し、ブラウザをリロードすると、横幅も自動で狭くなって表示されます。メニューから端末を追加することもできるので重宝します。

こちらも.htaccessなどで端末を振り分けている場合には有効ですが、携帯サイトなどでIPアドレスなどで端末を振り分けている場合には確認できません。

iPhoneを選ぶと、若干、印象は違いますが、内容確認などはしやすくなると思いますし、スマートフォンを持ってない場合や、逆に携帯電話を持っていないときに携帯サイトを作っている場合に便利です。

実は、私はこのアドオンとEPUBReaderというアドオンのためだけにFirefoxを使っています。

  1. moopmpiaiarkw-webからリブログしました
  2. nakakzsyasubkkからリブログしました
  3. fodexarkw-webからリブログしました
  4. yasubkkarkw-webからリブログしました
  5. arkw-webの投稿です