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を持っていなくてもタブレットからの表示を確かめる事ができますので、活用してはいかがでしょうか。