たかなblog

のんびりと色んな情報を発信していきます。

Wordpress ブラウザ

Stinger3を使用したサイトのスマホでの表示を確認する。

2015/03/08

こんにちは、たかなです。

Stinger3というWordpressのテーマを使用するにあたり、ひとつ困ったことがあります。
それは、タブレットやスマホ、ガラケーからの表示確認ができないこと。

Stinger3はレスポンシブデザインではない。

Stinger3はスマートフォンやタブレットに対応したサイト構築方法を導入していますが、その方法はGoogleが推奨している設定方法ではありません。
Googleでサポートしている「スマートフォンに最適化されたサイト」は、以下のように定義されています。

簡単に要約しますと、スマートフォンに最適化されたサイトを構築する際に、Googleは、次の 3 つの構成をサポートしています。

  1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
  2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
  3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

Stinger3は2.の、すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供する方法をとっています。そのためWordpressのキャッシュ系プラグインなんかで、「スマホからアクセスしているのにPC用のデザインで表示されてしまう!」なんてことが起こるわけです。

 

PCからスマホの表示を確認したい。

さて本題。

キャッシュ系プラグインを導入してみたけど、スマホできちんとスマホ表示になっているか確認したい。
設定方法がよくわからないので、公式サイトで配布していたレスポンシブデザインのCSSを適用してみたけど、ちゃんと表示されているか確認したい。
Stinger3を自分なりにカスタマイズしてみたけど、PC以外の端末でどのように表示されているのか確認したい。

そんな方は非常に多いはず。

CSSでデザインを変更するレスポンシブデザインであれば、ブラウザの表示サイズを変えるだけで小さい画面での表示を確認することが可能です。
また、レスポンシブデザインのサイトを運営する人向けに、様々なブラウザチェックツールも出ています。

レスポンシブWebデザイン制作時必見のブラウザチェックツール10選

また、各種ブラウザに付属している開発ツールにも備わっていたりするのですが、、

crome_view

手持ちのスマホではスマホ用の表示がきちんとされているのに、ツールではPCの表示になってしまう。。

そこで、「FireMobileSimulator for Google Chromなるものを試してみることにしました。ちなみに使っているブラウザは、ツール名にもあるように「GoogleChrom」です。

ダウンロードと使用方法

ダウンロード

まずここにアクセスし、「+無料」をクリック。

FireMobileSimulator for Google Chrom

ポップアップが表示されるので、「追加」をクリック。

FireMobileSimulator for Google Chrom2

しばらくするとダウンロードが完了し、勝手にGoogle Chromeに追加されます。
ブラウザのアドレスバーの右横に表示されているのが、「FireMobileSimulator for Google Chrom」です。

FireMobileSimulator for Google Chrom3

 

 

 

使い方

ツールをクリックするとメニューがたちあがります。表示を確認したい端末をクリックしてください。

FireMobileSimulator for Google Chrom4

ツールが黄緑色になったら、表示を確認したいページを表示(すでに表示している場合は再読込み)してください。
対象の端末での表示が確認できます。

FireMobileSimulator for Google Chrom5

 

端末が表示されていない場合、メニューの「最新端末リストから端末を追加」で追加ができます。
追加したい端末を選択し、「選択した端末を追加」をクリックしてください。

FireMobileSimulator for Google Chrom6

 

選択した端末がFireMobileSimulatorに追加されました、と表示され、次回から選択できるようになります。

FireMobileSimulator for Google Chrom7

iPhoneやXperia、ARROWSなどの各種Androidを追加可能ですので、細かい調整も可能。

メニューのオプション設定から、追加した端末情報の管理ができます。

FireMobileSimulator for Google Chrom8

ガラケー、iPhone、Android、iPad、その他タブレットタイプなど、いくつかの種類を追加したらいらない端末情報を削除し、メニューをスッキリさせることも可能です。
また、「編集する」ボタンで機種の名前部分を変更できるので、「SBガラケー」、「Android」、「タブレット」など、分かりやすい名前に変更して活用してください。

 

まとめ

FireMobileSimulatorは、Stinger3以外でも様々な端末の動きをエミュレートできるので、かなり重宝しそうです。

Googleの公式サイトでも、先日レスポンシブ ウェブ デザインに再構築後、ユーザー数が 5 倍にという事例が紹介されましたね。
わたしも作成したまま放置で全然スマホに対応していないサイトがあるんですが、早いとこ対応しないとなぁ。

既存の機種から選ぶだけでなく、自分でカスタマイズした仮想端末を登録することもできるので、是非使い倒してそれぞれの端末に適合したサイトを作成してください!

 

-Wordpress, ブラウザ
-,

おすすめ記事

1
12月目前!クリスマスグッズ、どんなものに関心が集まっているの?

今回気になってまとめてみたのは、「クリスマスの人々の関心」について。 昨年(20 ...

2
年賀状印刷、業者に委託してでオシャレに?自宅で徹底的にこだわる?

年賀状作成は、プロにお願いする時代!? 年賀状のテンプレートが簡単に手に入るよう ...

3
ハロウィン、クリスマスに!とにかく可愛いコスプレ子供服【最新版】

ハロウィンも終わり、クリスマスが楽しみな季節になりました! これからクリスマスパ ...