Tech Sketch Bucket of Technical Chips by TIS Inc.

jQuery mobileの動作確認用Bookmarklet for Chrome

Pocket

はじめに

jQuery mobile 使ってますか?

同一ソースでPC用ブラウザからiPhone、Androidまで対応できる便利なフレームワークですが、開発中は基本的にGoogle Chromeを用いて動作確認や画面の確認を行なっています。
スマートフォンの通信・CPUが早くなったとはいえPCには敵いませんし、キーボードから手を離すのも億劫ですから、こうしてGoogle Chromeで確認している人は多いのではないでしょうか。

# 個人的には普段はFirefoxを使っていますが、iPhone/Android向けWebサービスを作る場合には、同じWebkit系ブラウザ(Safari, Chrome, etc.)で動作確認した方が良いように感じます。

画面サイズの問題

さて、Google Chromeで確認する方法は大抵の場合うまくいくのですが、時々「これ、iPhoneの画面サイズで見たらどう見えるの?」と気になることがあります。
もちろんiPhone実機/エミュレータで表示を確認しても良いのですが、手軽にやるのであればChromeのウィンドウサイズを変えてしまうBookmarkletはどうでしょう。
力技ではありますが、それだけに結構有効だったりします。

  • iPhone、標準ブラウザ、上部のアドレスバーが出た状態(320 × 356 px)にChromeのサイズを調整するBookmarklet
  • iPhone、標準ブラウザ、上部のアドレスバーが隠れた状態(320 × 416 px)にChromeのサイズを調整するBookmarklet
  • iPhone、フルスクリーンモード(320 × 460 px)にChromeのサイズを調整するBookmarklet

動的なページを開発している最中はブラウザを更新することが多い為に使いづらいですが、静的ページのレイアウト確認であれば、「Responsive Design Bookmarklet」も便利です。
開発中はこの記事に載せた「Chromeのサイズを調整するBookmarklet」を用い、確認には「Responsive Design Bookmarklet」を使うなど、上手く使い分けていきましょう。

Responsive Design Bookmarklet [http://responsive.victorcoulon.fr/]

使い方

1. Google Chromeで上記のリンクをD&Dしてブックマークバーに登録します
2. サイズを変えたいページでBookmarkletを実行すると、新しいWindowが指定したサイズで立ち上がります

続きには実際に試してみた画像と、iPhoneの各部のサイズを載せておきますので、参考にどうぞ。

実際に使ってみた結果

iPhone、標準ブラウザ、上部のアドレスバーが出た状態(320 × 356 px)

small_with.png

iPhone、標準ブラウザ、上部のアドレスバーが隠れた状態(320 × 416 px)

large_with.png

各部のサイズ

iPhoneのブラウザで使われている各部のサイズを載せておきます。Bookmarkletの数字を変更する場合の参考にして下さい。
なお、jQuery mobileを使っている分には上部アドレスバーは自動的に消去される為、下図を見てもわかるように、60 + 356 = 416pxの縦幅を基本として作ることになりそうです。

indicator.png

注意点

width/heightがフォントサイズに依存する項目について

赤線を見ると分かるように上端、下端ともにそれなりに合ってはいます。
ただし、文字サイズに依存する項目に関してはiPhoneとGoogle Chromeで使用しているフォント、必要な領域が異なるため、紫線の部分では2pxの差が出てしまっています。

この部分にもpx単位でheightが指定されていればピッタリ合わせられたと思いますが、厳密な調整に関しては結局iPhone実機で確認する方が良いのかもしれません。

Google Chromeでのスクロールバーサイズについて

Google Chromeの場合、サイズを指定してWindowを開くと、innerWidth / innerHeightがそのサイズになるようにWindowを作ってくるようになっています。これは良いのですが、スクロールバーが表示された場合にはスクロールバーの描画領域もinnerWidth / innerHeightに含まれるため、17px程度(恐らく環境依存)のズレが生じます。
今回の記事で載せたBookmarkletは「Windows XP」、スクロールバー「あり」を前提に作っていますが、ログイン画面などスクロールバーが存在しない画面では以下のBookmarklet中で337と指定してる場所を320に修正した上で使ってみて下さい。

Android対応

Android端末での見た目を調べるのにも使用できますが、端末の種類や使用ブラウザによって表示領域のサイズが異なるのがややこしい所です。
様々な環境に適用できるような1種類のBookmarkletを提供するのは難しい為、テスト環境のサイズを測った上でBookmarklet中の値を変更してもらえればと思います。

エンジニア採用中!私たちと一緒に働いてみませんか?