あなたの生活をちょっと豊かにするLIFE STYLEマガジン【WEBLEDGE(ウェブレッジ)】

全てのブラウザで動作確認。BrowserStackがWEB開発に便利。

   

browserstack-main1

本日も”Webledge“をご覧いただきありがとうございます。管理人のけーすけ(@webledge_blog)です。

WEB開発者もブロガーも、サイトをいじる時に絶対しなくてなならないのがブラウザチェック。「やったサイトが完成した!」と思ってもGoogle Chrome以外では表示ができませんじゃあ意味がない。

だからと言ってiPhoneやAndroidのブラウザ全部を手元でチェックできる訳ではないですからね。笑

そんな時に便利なのがBrowserStack(ブラウザスタック)というサービス。このソフトだけでいろんなブラウザでの表示をチェックできます。もはや必須ソフト。

スポンサーリンク

まずは無料から!BrowserStackの使い方

まずは使い方からご紹介しましょう。BrowserStackの機能は主に2種類。

  • 仮想環境を構築する(Automateで自動化できる機能もある)
  • スクリーンショットをとる

の2種類なのですが、完全に仮想環境のみの方しか僕は使っていません。スクリーンショットなんてほとんど使わないですしね。ということで仮想環境を動作させる方法を見ていきましょう。(ちなみに僕はAutomateという自動化は使ったことがありません・・・)

browserstack-2

まずはBrowserStackの公式サイトにアクセスして、登録するところから開始します。はじめはFreeトライアルがあるので、そこからで十分だと思います。

そこから登録するとメールが飛んできます。

browserstack-6

ここからアカウントを確認できればもう登録は完了です。あとは使うだけ。

browserstack-3

iOSだとiPhone6S,5とiPad Airの動作確認ができますね。

browserstack-5

Windows 10の表示ブラウザもこの通り。オペラなどのブラウザでも表示の確認が必要な場合は別途有料プランに移行する必要があります。

ここから確認したいブラウザをクリックすると、そのままGoogleでサイト検索などがその環境内でできるようになります。少し動作は重いですが、開発者ツールなどもそのまま利用できるので非常に便利。

browserstack-4

有料会員の価格は画像のような感じ。基本はLiveで十分かな。月額29ドルなので、普段からよく使う方は登録をおすすめします。フリープランだと時間的にも制約があるようなので。

スマートフォンの表示でも「検証」が使える!

もうブラウザの開発者ツールとしては王道というか、使っていない人はいないというレベルでよく使うのが「検証」というGoogle Chromeの開発者ツールです。

もうこれがないと僕はサイトの作成なんてとてもじゃないけどできないのですが、どうも「検証」だけでは確認できないものがあるみたいなんです。

例えばこの画像。

browserstack-1

スマートフォンではこのSNSの部分が少しずれているはずなのですが、PCで検証を使っても同じ事象が出ないのです!!!しかもスマートフォン上で検証なんてできるはずがない。

ということでBrowserStackで確認してみると

browserstack-7

なんとスマートフォンの画面で検証が実行できるのです!ほら、やっぱりずれてるじゃないですか。

Google Chromeの機能はあくまでデザインの確認であって、仮想環境を構築する訳じゃないんですね。なのでどうしてもデバイス由来の表示崩れが出てしまう場合がある。

そんな時にBrowserStackがあればすぐに確認ができますね!マジで助かりました。

まとめ:見つからないバグもこれならグッと見つけやすくなりました。

今まで名前は聞いたことがあったのですが、あまり使ってこなかったサービスがこのBrowser Stack。実際に自分のサイトもいろんな環境で見るとちょっとバグが出ていたりしますので、たまにでもいいので確認してみることをおすすめします。

実際にWEBサイト開発社の方は必須のサービスですね!

次回記事の予告!

こりゃいい!moshiのMacBook Pro用キーボードカバーを購入しました!

↓↓気になる方は登録を!

 - 便利サービス , ,

PAGE TOP