chrome スマートフォンサイト制作で快適にコーディングするために使っているツール

f:id:emj1025:20140521145925j:plain

スマートフォンサイトの制作案件が年々増えてきました。

自分自身もスマートフォンサイトを見るのに慣れてきたので、ネットサーフィンしてる時にスマートフォンサイトがないと「なんだよーPCサイトだけかよー」と思ったりします。

スマートフォンサイト制作でよく使うツール等を少し紹介します。

スマートフォンの表示をする User Agent Switcher

f:id:emj1025:20140425232102j:plain

PCブラウザに、スマートフォンからアクセスしているように思い込ませるChromeのアドオンです。

PCのブラウザから「/sp/」とか「sp.」とかスマートフォンディレクトリやドメインにアクセスしてもPC版にリダイレクトされる時ありますよね。そういう時に便利です。

スマートフォンサイトは作り方によって、横幅を100％表示したり、画面をzoomして引き延ばしているので、Chromeで見た時に見にくくなってしまいます。このアドオンではディスプレイサイズを変更できないので少し不便な部分もあります。

ダウンロードはこちらからです

ChromeのF12で出てくるおなじみツール。FirefoxでいうFirebug的な優秀ツールです。個人的にFirebugより好きです。

これをスマートフォン制作で使うときにとても便利な表示ができるのです。

f:id:emj1025:20140425234457g:plain

開発ツールの右上の四角いアイコンのボタンをクリックしながら選択します。

そうすると、開発ツールが横並びレイアウトになり、画面がちょうどスマートフォン風になってとても作業しやすくなります。

f:id:emj1025:20140425234517g:plain

スマートフォン版Yahooにアクセスして、横並びレイアウトで開発ツールを表示した状態。ページが縦長で表示され、ソースを見るのも快適。上記のUserAgentSwitcherのディスプレイサイズ問題が解消できます。

f:id:emj1025:20140425232744g:plain

現在開いているタブのURLをQRコードに変換してくれるChromeのアドオンです。

これをスマートフォンのバーコードリーダーアプリで読み取ればそのURLにアクセスできます。

やはりPCだけではチェックしきれない部分がありますのでしっかり実機でもチェックしましょう。

片方にスマートフォンサイト、もう片方にPCサイトやデザインpsdを表示しながらコーディングするとチェックが簡単にできて快適です。作業速度が速くなるかはわかりませんが、とにかく快適。最高です、デュアルモニタ。