[Google Chrome]拡張編(20)スマートフォン・シュミレーター「User-Agent Switcher」でiPhone/iPad表示

スポンサーリンク

「iPhoneなどのスマートフォンやiPadのタブレット端末で、このブログはどのように見えるのだろう?」と思ったことありませんか?ブログ運営者は気になるところです。そこでGgoogle Chorme拡張機能「User-Agent Switcher」なら、iPhoneやiPadだけでなく様々なモバイル端末で、様々なブログやサイトがどのように表示されているかをPC上で確認できます。その使い方とは?image

User-Agent Switcher

サイトやブログ運営には欠かせないスマートフォン最適化などのモバイル表示対策ですが、我がブログ「Webと人のアマモ場」でも、

などの記事に紹介している通り、モバイルサイト最適化に取り組んできました。

その際PCで、iPhoneやiPadなどのアップル端末、さらにはAndroidスマートフォンやケータイでどのように見えるかを確認する手段として、Firefoxのアドオン、Android SDK Emulatorなどのツールも試してきました。(携帯やスマートフォン用サイトのシュミレーターでPCで見え方を確認して見た!一押しのモバイルシュミレーターとは?を参照。)

最近もっぱら利用しているPCブラウザGoogle Chomeでも、拡張機能(エクステンション)の「User-Agent Switcher」で、iPhoneやタブレット端末でブログがどのように表示されているのかを確認できることが判明。早速使ってみました。

インストール

インストールはブラウザGoogle ChromeでChrome ウェブストア – User-Agent Switcherにアクセスして、右上の「+CHROME に追加」をクリック。

image

「追加」の確認をします。

image

ツールバーに気味悪い「マスク」が登場すればインストール終了です。

image

使い方

使い方ですが、ほとんど一発でiPhoneやiPadでの表示に切り替えられます。ルールバーに表示されている「User-Agent Switcher」の気味悪いマスクの形をしたアイコンをクリック。Chromeで表示させたいユーザーエージェントを選択します。ここではiPadやiPhoneなどをクリック。

image

ページのリロード(再読み込み)をします。

image

iPhoneで表示してみると、確かにiPhone用のテーマで表示されています。このブログはスマートフォン最適化プラグイン「WPtouch Pro」を利用しているからです。しかし幅の設定がなされていず、横長になってしまっています。そこでブラウザの幅を無理やり短くしてみます。

image

なんとなくiPhoneらしくなりました。とはいっても、実際にiPhoneのシュミレーターとして利用でき、Webサイトデザインの編集の際に便利なツールとなります。

image

iPadでの表示は、通常のPCのテーマを利用中ですので、変わり映えしません。いずれiPad表示にも最適化をする予定です。(WPプラグイン「WPtouch Pro」でiPad最適化機能あり。)

ちなみにこの拡張機能は、上記ではスマートフォン・シュミレーターとして紹介しましたが、さまざなスマートフォンだけでなく、各バージョンのIE、Safari、Firefox、Operaなどのブラウザや、ギャラクシー・タブなどのAndroidタブレットなどのシュミレーターとして利用可能です。

image

また、一覧表にないブラウザや端末情報を下の「Click here for a comprehensive list of user agents to choose from」からダウンロード可能です。

以上がPCでブラウザGoogle Chrome拡張機能「User-Agent Switcher」を利用した、モバイル・ブラウザシュミレーター機能の紹介でした。

スポンサーリンク

シェアする

フォローする

関連記事