太陽がまぶしかったから

C'etait a cause du soleil.

Chromeの標準機能でPC上からやスマートフォン表示を確かめる

f:id:bulldra:20140324070700p:plain

PC上からブログのiPhone表示を確かめる

 先日のブロガーミーティングでイケダハヤトさんに教えて頂いたのですが、現在のChromeでは標準機能でPC上からiPhoneなどのスマートフォン表示を確かめることができるようになっています。内部的にはユーザーエージェントと表示サイズをスマートフォンに合わせて変更しているようです。ちょっとわかりづらい所にあるので手順をシェア。

右クリックをして「要素を検証」を選択

f:id:bulldra:20140324065413p:plain

「コンソール表示」ボタンをクリック

f:id:bulldra:20140324065423p:plain

「Emulation」タブを選択

f:id:bulldra:20140324065743p:plain

デバイスを選択して「Emulate」をクリック

f:id:bulldra:20140324065756p:plain

リンクを飛べばスマートフォン表示になります

f:id:bulldra:20140324065807p:plain

JavaScriptも動作

f:id:bulldra:20140324070700p:plain

まとめ

 『はてなブログで表示エントリのカテゴリに関係するエントリを「あわせて読みたい」として表示するウィジェット - 太陽がまぶしかったから』みたいな形でスマートフォン用のウィジェットなどを作ることがあるのですが、そちらのデバッグをするのにも捗ります。スマートフォンでJavaScriptのデバッグウィンドウが出るのは非常にありがたいです。

 いまやブログはスマートフォンで読まれる機会のが多いぐらいになっているため、スマートフォン表示を気にするのは非常に重要となってきます。特にPC用サイトに凝っている時ほどスマートフォンで問題がないかを確かめる必要があるのですが、いちいち実機確認をするのは煩雑でした。もちろん完全なエミュレーションができるわけではありませんが、大枠の表示を確かめてから実機確認に入れば楽ですし、例えばiPadを持っていなくてもタブレットからの表示を確かめる事ができますので、活用してはいかがでしょうか。

スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック

スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック