実機と同じ画面幅で表示確認できるUA偽装ツール、できました。
公開日：
こんにちは。x-fitチーム・エバンジェリストの渡辺です。弊社では、モバイルデバイスに特化した事業を行っていますので、Webサイトを様々な端末で確認する機会がたくさんあります。実機での確認だけでなく、いわゆるPCブラウザでUAを偽装して表示を確認することも多くあります。弊社は国内キャリアから発売されているすべてのフィーチャフォン・スマートフォン・タブレットを保有していますので、そのすべての機種のUAを再現し、その端末の画面幅で表示確認できるオリジナルのUA偽装ツールを開発し、業務で利用しています。
今回、スマートデバイス向けWebサイトの制作に関わる皆さんの助けになればと、そのUA偽装ツール「Mobile Layouter」をChrome Extensionとして公開することにしました。使い方をご紹介しますので、是非ご利用ください！
Mobile Layouter概要
UA偽装機種数
2013/04/22時点で、弊社が保有する下記の機種数のUAを再現します。
| スマートフォン | 291機種 |
| タブレット | 37機種 |
| フィーチャーフォン | 1086機種 |
| 計 | 1414機種 |
2014/05/22 追記：
UA偽装できる機種数は端末の発売後、自動的に更新されるので、随時増えています。追加された機種は@xfit_jpでつぶやいていますので、ぜひフォローしてみてください。
userAgent偽装
一覧から端末を選択するとその端末のUserAgentに偽装しWebページを表示します。タブ毎に異なる端末のUA偽装が可能です。
サイズ調整
一覧から選択した端末の画面サイズ通りにコンテンツの幅を調整します。実際にどのように表示されるかレイアウトを確認するのに便利です。
端末の縦・横切り替え
縦横切り替えアイコンをクリックすると画面を縦状態/横状態に切り替えることができます。
インストール
ChromeWebStoreのMobileLayouterのページからインストールします。
使い方
UAを偽装する
- MoblieLayouterのアイコン
をクリックします。
- リストにある端末から偽装したい端末を選びます。
iPhone4Sを選択した状態
- アクセスしたいURLをアドレスに入れてアクセスします。
UA偽装でアクセスした結果が表示される。コンテンツは端末の画面幅で調整されている。
ページ幅のサイズを調整する
端末を選択すると、その端末の実機の画面幅にサイズが調整されて表示されます。サイズ切換ボタンをON/OFFすることで、サイズ調整ありの表示、サイズ調整なしの表示と切り替えることができます。
サイズ調整でおこなっているのは、ページのbodyサイズの調整です。その際のサイズは、viewportに
- width=device-width
- maximum-scale=1.0
- minimum-scale=1.0
が設定された時の$(window).width()の値となります。
端末の画面幅にサイズ調整された表示結果
サイズ調整なしの表示結果
端末の縦持ち・横持ちを再現する
ページ幅のサイズ調整をONにした状態にすると、縦横切り替えのボタンが押せるようになります。
縦方向指定の状態。
通常は縦状態ですので、必要に応じて横切り替えのボタンを押すことで横表示をすることが可能です。切り替え時には、表示しているページのwindowオブジェクトにorientaionchangeイベントをバインドしています。それぞれ、orientationプロパティに設定する値は、
- 縦状態： window.orientation==0
- 横状態： window.orientation==90
となります。この値については、実端末の値と異なる場合がありますのでご注意ください。詳しくはWebサイトでスマホ・タブレットの傾きの判断をwindow.orientationだけに頼るのは危険を参照して下さい。
リストに表示する端末を追加する・削除する
初期表示されている端末のリスト以外の端末で偽装したい場合は、以下のようにします。
- 機種追加ボタンを押します。
- 端末フィルタで、追加したい端末の種類（左から、スマートフォン・タブレット・フィーチャーフォン）を選びます。複数選択できます。
スマートフォンとタブレットを選択した状態。
- 機種検索テキストボックスに、機種名を入れます。部分一致検索できますので、機種名の一部を入れるだけでも検索できます。
"Galaxy"で検索した結果。スマートフォンとタブレットがリストされている。
もともとリストにあったGALAXY NEXUSは選択状態で見える。
- 追加したい端末をクリックして、グレーに選択された状態にします。もう一度クリックすると、選択を外すことができます。
4機種を新たに選択した状態。
- 左上のbackをクリックして戻ると、選択した機種が追加されています。
追加されたものは下に並んで表示される。
- リストから機種を削除するには、機種名の右側にある「×」をクリックしてください。
注意点
MobileLayouterは、UA偽装のツールです。ブラウザ上に表示されるレンダリングの結果はChromeのものです。表示結果や、スクリプトの実行結果は、実機での表示・実行結果と異なる場合があります。
是非フィードバックをください！
MobileLayouterを使ってお気づきの点があればExtentionのレビューか、@xit_jpにメンションでお寄せください。今後は、新発売の端末情報を加えてアップデートしていく予定です。よろしくお願いします。
タグ:
Tweet
