emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

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

f:id:emj1025:20140521145925j:plain

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

 

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

 

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

 

 

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

f:id:emj1025:20140425232102j:plain

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

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

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

 

windowsでもスマートフォンの表示を確認したい!chromeのアドオン「User-Agent Switcher」が便利 - emuramemo

 

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

Chrome Web Store - User-Agent Switcher

 

 

Chromeの開発ツールでコーディング画面を見やすくする

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

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

f:id:emj1025:20140425234457g:plain

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

 

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

f:id:emj1025:20140425234517g:plain

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

 

スマートフォン実機で確認する QR-Code Tag Extension

f:id:emj1025:20140425232744g:plain

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

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

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

Chrome ウェブストア - QR-Code Tag Extension

 

あれば便利なもの

デュアルモニタ

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

 

BenQ 24型ワイドディスプレイ(5ms/フルHD/HDMI×1) GL2460HM

BenQ 24型ワイドディスプレイ(5ms/フルHD/HDMI×1) GL2460HM

 

 

 

 

emuramemo(c) All Rights Reserved.