プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

実機と同じ画面幅で確認可能!ユーザーエージェント切り替え用Chrome拡張「MobileLayouter」

2014.08.04 月曜日 08:05:05

N695_ipadwosousasurute_02

スマートフォンやタブレット等、デバイスの多様化が進んでいる今日、
その全てに対応させることが出来ればベストなのですが、
現実的に、そのデバイスを手元に揃えようと思っただけでも、
非常に難しいことだと思います。

そこでユーザーエージェントを偽装して、シミュレータ等でチェックを行うことで、
実際の表示に近い状態で確認を行うことが出来ます。

今回ご紹介するChrome拡張「MobileLayouter」は
タブ毎にユーザーエージェント切り替えを行うことが出来るうえ
実際の画面幅と同じ状態で確認もできる、
非常に優れた機能を持っています。

MobileLayouterの使い方

スクリーンショット 2014-08-04 7.27.15

まず、MobileLayouterをChromeウェブストアからインストールします。

アイコンが追加されたらクリック。
するとデバイスの選択が出来るので、任意のものを選択します。

スクリーンショット 2014-08-04 7.35.26 width=

こんな感じで表示されました!

スクリーンショット 2014-08-04 7.34.44

右上の縦長アイコン、横長アイコンを切り替えることで
デバイスを横に向けた場合の表示に切り替えることも可能です。

スクリーンショット 2014-08-04 7.49.48

Optionから、デバイスの追加、背景色、センタリング表示等、
各種設定を行うことができます。

スクリーンショット 2014-08-04 7.35.58

更に、このツールの素晴らしいのは選択出来るデバイスの数です。
左上の「+」アイコンを押すことで、下の画面が表示され、
デバイスの検索を行うことも出来るようです。
公式サイトによると、現在の対応機種はなんと1414種にもなるそうです。
これだけあればUA切り替えに困ることはないかもしれませんね。

スクリーンショット 2014-08-04 7.36.51

実際の表示はやはり実機でのチェックが一番でしょうが、
UAの分岐チェックや、手元に実機が無い場合のチェックでは重宝しそうですね!

Category:Chrome拡張 , Tools     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project