（2017/8/17更新）
こんばんは～。しろくまです。
皆さんは自分のブログって複数のブラウザでの表示確認はされていますか？
私は少し前にこのブログのテーマを変更したのですが、どうやらSafariで正常に表示できていなかったようなんです。
読者の方からの指摘で気付いてすぐに元に戻して事なきを得ましたが、今後のやり方はちゃんと考えないといけません。
色々調べてみると複数のブラウザでの表示チェックが可能なサービスやツールがあることが分かりましたので今日はその紹介をしたいと思います。
表示が崩れている
夜寝る前に布団の中でTwitterを確認していたところ、こんなメッセージがきていました。
～～～～
～～～～
ところでしろくまさんのブログテンプレ、safariで見ると左に一列になっちゃってます。いらぬお世話ですがご報告まで。
いつもブログを拝見させてもらっているザブロー(id:zabro_tan)さんからのありがたいご指摘でした。
な、なんだってーー！！！
これはまずいと急いでPCにsafariをインストールして確認してみました。
まずはIEやChromeなどの正しい表示がこちら。
そして、Windows版safariで見た時の表示がこちら
うえーー、左に一列に寄ってる・・・。しかも本来あるべきサイドバーまで表示されてないし。
スクロールしてみると、サイドバーは一番下にいました。
一応iphoneのsafariでは確認はしていたのですが、デスクトップ版のSafariはさすがにノーマークでした。おそらくMAC版のsafariでも同じ表示だったのではないかと思います。
とりあえずこれではまずいとテーマを元に戻しました。新しいテーマ気に入ってたんだけどなぁ・・・(´；ω；`)
根本的な対策
テーマを戻してひとまずは大丈夫になりました。ただ、これからさらにテーマを変えたり、CSSを導入もする時に毎回複数のブラウザでチェックするのはなかなか面倒です。
何か方法があるはずだと調べてみると、複数のブラウザでの表示を確認するサービスや便利な機能があることが分かりました。
PCでの表示とスマホの表示チェックがそれぞれ違うサービスや機能なので分けて紹介します。
PCの表示確認
SAUCELABS
こちらはWEBサイトの表示をチェックしてくれるサービスです。
会員登録が必要ですが、数あるチェックサイトの中でも使いやすい部類に入ると思います。
実際に使ってみた感じがこちら
macOSのsafariで表示してみました。ブラウザの中でsafariをエミュレートしている感じですね。
対応ブラウザはmacの他にも、FireDoxやOperaもあります。
ただ難点もいくつかあります。
まずは重いことです。スクロールさせようとしても重すぎてうまく動きません。時間帯なのか無料版だからなのか分かりませんが、とりえず表示が問題ないかをチェックするくらいであれば使えそうです。
そして無料で使うには制限があること。おそらく月に30分だと思います。
ただブログのチェックくらいであれば1回で数分ですし、毎日確認するようなものでもないので月に30分で十分だと思います。
2017/8/17追記
無料で使えるのは最初の30日間だけに変更になったようです。私のアカウントではすでに使用できない状態でした。
browserling
会員登録なんか面倒くさい！という方には完全フリーなサービスもあります。それがこちらのbrowserling。
サイトにアクセスするといきなりURLを打ち込む画面が出てきます。
自分のブログのURLを打ち込んで、表示するブラウザを選びます。選べるブラウザはIE、Safari、Chrome、Operaと主要どころを抑えています。
実際に使ってみた画面です。こちらも先ほどのSOURCELABSと同様にエミュレートしてるようです。
ただこちらは左上にも時間が出ているように、1回3分以内です。
また、説明を読むとブラウザもIE9オンリーで、OSもWindowsVistaのみと書いています。が、FireFoxとかで表示できるんですよね・・・まぁ使えるのであれば遠慮なく使わせてもらいますが（；^ω^）
無料で会員登録もいらないので気軽に使いたい場合はこちらがオススメです。
スマホの表示確認
Chromeのデベロッパーツール
chromeを使っている方はデベロッパーツールという機能が便利です。
chrome→右上のメニュー→その他のツール→デベロッパーツール
するとこの画面になりますので、赤枠のスマホマークを押します。
するとスマホ画面になります！
しかも画面上部の「Responsive」を押せば、複数のモバイル端末を選ぶことができます。
これはなかなか便利です。chromeを使っている場合はすぐに表示できるのでチェック作業もぐっと楽になります。
Blisk
こちらはWEB制作者向けのブラウザです。
Windows版とMAC版があり、間もなくLinux版も対応するようです。
特徴
- １画面で、PCとスマホの両方の画面が一度に見れる
- PCとスマホの画面が同期してスクロースする
- なんといっても動作が軽い！
- インストールするだけで使える
- 無料で使える
こちらが使ってみた画面です。
見てもらうと分かる通りスマホの画面とPCの画面が１画面に表示されます。
しかもスクロールするとスマホとPCどちらの画面も同期して動きます。
これは初めて使うと感動ものですね、同時に確認できるのでチェックの作業効率が上がります。
また、画面の左側を見てもらえばわかる通り、スマホ表示は複数のバージョンから選ぶことができます。
- iphone4,5,6,6plus,7
- Nokia N9
- Sumsung Galaxy S3,S4,S5,S6,S6Edge,Note5
- LG G3
- Google Nexus4
- Google Nexus6
- ipad mini
- ipad Air Retina
- Google Nesus7,10
など
Bliskを分かりやすく説明する動画もありました。
www.youtube.com本来はWEB制作用のブラウザなのでもっと色々なことができるようです。
ググるともっと詳細なことを説明しているサイトは見つかりますので、知りたい方は調べてみてください。
もちろんブログの表示チェックのためだけに使っても問題ないです。
まとめ
・PCの表示をチェックできるサービス『SAUCELABS』『browserling』を紹介した
・スマホの表示をチェックできるツールとして、『Chromeのデベロッパーツール』と『Blisk』を紹介した
PC表示チェックであれば気軽に見れるbrowserlingがオススメです。やはり会員登録なしはうれしいですね。
スマホ表示チェックであれば個人的にはBliskがオススメです。BliskだとAdsenseのレスポンシブルユニットがスマホで見る通りのサイズで表示されます。chromeだとPC用のサイズなんですよね。まぁhtmlやCSS表示は確認できるのでサクッと見たいならchromeのデベロッパーツールでもよいかもしれません。
どれがよいかは実際に使ってみて判断してみるとよいと思います。
それにしても今回はいい勉強になりました。転んでもただでは起きない精神で記事にもできましたし（；^ω^）
ブラウザ表示チェックサービスは他にも色々あるらしいので時間が出来たらまた調べてみます。今回紹介したもの以上にオススメがあれば追記したいと思います。
以上しろくまでした。
