Macでできる!ブラウザチェックのやり方について調べてみた

Posted: 2013.07.01(月)

tag: , ,

BrowserStackサイト画面

企画、デザイン、コーディング、ブログ構築、数々の段階を乗り越えてきたのですが、追い打ちをかけるような作業をまだ残していました。各ブラウザでの表示・動作チェックです。IEのことを考えると、かなり重たい気分になるこの作業を、Macで進めるための方法を調べてみました。

現時点で考えられる方法は、大きく分けて3つ。「MacでWindows(のツール)を使う」ための方法なので、MacでOffice系ソフトを使う方法と同じような方法になります。

結論から言うと、手軽で初期費用も低めなので、ひとまずチェックツール「BrowserStack」を使ってブラウザチェックをすることにしました。
そのうち、ぼちぼちに仮想環境が構築できたらいいなーと思ってます。そのときはまた、記事に追加記述する予定です。

では、興味のあるところからどうぞ。

チェックツールを使ってチェックする

導入しやすく、すぐにでも始められるのがこの方法。無料での使用は制限がありますが、個人使用ならこの方法が手軽なのではないでしょうか。

メリット
手軽、初期費用が抑えられる(個人利用ならば$12〜⁄月くらい)
デメリット
???強いて言えば、実際のWindows環境でのチェックほど確実性が約束されてないかもしれない、というところでしょうか?

チェックツールで気になるのは、「Sauce」と「BrowserStack」の2つ。その他のツールについても少しまとめました。各詳細は下記、「ブラウザチェックツールについて」よりどうぞ。

ブラウザチェックツールについて

Sauce
まずはダウンロード

SauceはMac用アプリなので、App Storeからダウンロードします。「Sauce」で検索してインストール後、アプリを立ち上げると、ドン。こういうのが現れます。

Sauce立ち上げ後画面

URL欄に該当するURLを入力、OS・Browser・Resolutionをクリックで選択してNavigateボタンを押すと・・・

Sauce検証画面

表示されてる!!

「動作が重い」というユーザーの意見を目にしていたのでこわごわの作業でしたが、このブログくらいの規模であれば大きな支障もなく検証可能でした。
JavaScriptの動作も確認できましたし、スクロールも動きました。ただ、やはり少し動作がカクカクしてますが・・・

IEだけではなく、FirefoxやOperaなどを各種OS(Windows・Mac・Linuxなど)と組み合わせてのチェックが可能です。

ユーザー登録

ユーザー登録してサインアップしないと、閲覧できるブラウザには制限があるようです。未登録だと以下の組み合わせしか選択できません。

  • WinXp(閲覧サイズが800×600、1024×768、1280×1024から選べる)+IE6・7・8
  • Win7(閲覧サイズは1024×768のみ)+IE9
  • Win8(閲覧サイズが800×600、1024×768、1280×1024から選べる)+IE10

ユーザー登録してからアプリを立ち上げ直すと、登録前は選択できなかったブラウザが選択できるようになり、多くのブラウザを対象にしてチェックをすることが可能になりました。

余談ですが、WordPressでプラグインMaintenance Modeを使っている場合、停止しないとサイトを見ることができませんのでご注意を。

プラン

個人向け(Individuals)には3つのプラン(Free・Manual・Automated)が用意されています。ユーザー登録すると、自動的にFreeプランでの使用が可能になります。Freeプランの場合は使用制限時間は、一ヶ月30分。Manual・Automatedプランだと、時間無制限で使用できるようです(ただし、両プランとも有料で、Manualプランは2013年7月現在では$12 ⁄ 月)。

詳細はSauce Labsのサイトでどうぞ。Sauce Labs: Pricing

最後に

Sauceについては、こちらを参考にさせていただきました。
MacでIE等の表示を確認できる新しいツール「Sauce」 | WebDesign Memo

BrowserStack

BrowserStackは、ブラウザ上で操作できるツールです。Sauce同様に簡単なユーザー登録の後、サインインして使用できます。

サインイン後の操作

ユーザー登録後、サインインすると

BrowserStackサインイン前画面

以下のような画面が表示されます。

BrowserStackサインイン後画面

各ボタンをクリックして、OS・ブラウザ・モニタサイズなどを選択すると・・・

OS選択画面

ブラウザ選択画面

モニタサイズ選択画面

「Start testing」ボタンをクリックすると・・・

Start testingボタン画面

クルクル回って・・・

ローディング画面

表示されました!

ブラウザ表示画面

左に表示されているオレンジ色のタブボタンをクリックすると

選択ボタン表示画面

このように再度OS・ブラウザ・モニタサイズなどが選択できるので、違う環境でのテストもすぐに始められます。

BrowserStackについてもやはり、WordPressでプラグインMaintenance Modeを使っている場合は、停止しないとサイトを見ることができません。

プラン

プランは大きく分けて月額プラン(Monthly)と年間プラン(Annual)の2つ。さらにその中で5つのプランに分かれています。
一番安いプランはMonthlyのIndividualプランで、2013年7月現在では$19 ⁄ 月となっています。

詳細はBrowserStackのサイトでどうぞ。Live Testing Plans and Pricing

SauceとBrowserStack、どちらを使う?

SauceとBrowserStack、両方少し使ってみたんですが、なんとなく操作がよりスムーズな気がしてBrowserStack使おうかなと思ってます。感覚的な感想なんですが・・・。

ブラウザ上で操作できる、というのも手軽でいいです。

その他のツール(forWindowsだけど)

ブラウザチェックツールを探している中で、Windowsユーザー用ではありますがよく名前が挙がっていたツールがありましたので一応ご紹介。

IETesterとUtilu IE Collectionについては、「前は使ってたけど今はIEの開発者ツール使ってる」という記事もよく見かけたので、IE8もしくはIE9が使える環境にある方は、IEの開発者ツールを使ったほうがいいかもしれません。

仮想環境でIEを起動させてチェックする

仮想化ソフトを使用してMacにWindows環境を構築、その仮想環境でIEの各バージョンをインストールして起動させチェックするという方法です。

仮想化ソフトとWindowsOSライセンスとIEの各バージョンが必要になり、ツールを使った方法に比べると手間がかかります。

メリット
Windows環境でのチェックが可能で確実性が高い?、使用に際して再起動必要なし
デメリット
手間と費用が結構かかる

仮想化ソフトは次の3つ。

それぞれの詳細な使い方は、MacでIEの表示を確認する方法のまとめ | WebDesign Memoの「仮想のWindows環境で確認する方法」内に関連リンクがまとめられています。

BootCampでIEを起動させてチェックする

Mac OSX v10.5Leopard以降の標準機能、BootCampを使ってMacにWindows環境を構築、そこでIEの各バージョンをインストールして起動させチェックするという方法です。

こちらはVMware Fusionのような仮想化ソフトはいらないものの、結局はWindowsOSライセンスとIEの各バージョンが必要になり、やはり手間がかかります。

メリット
Windows環境でのチェックが可能で確実性が高い?、別途ソフト等は必要なし(ただしもちろんWindowsOSライセンスは必要)
デメリット
使用に際して再起動が必要、手間と費用が結構かかる

BootCampについて、詳細は以下から。

また、BootCampの詳細な使い方は、MacでIEの表示を確認する方法のまとめ | WebDesign Memoの「Boot CampによるWindows環境で確認する方法」内に、やはり関連リンクがまとめられています。

MacとWindowsをいったりきたりするのに再起動が必要、というのは結構手間がかかることのような気がします。データのやりとりはクラウドでなんとかするにしても、ブラウザチェック後の修正のため再起動する、となるとなかなかおっくうですしね。修正作業だけはWindowsで行う、とか作業の仕方に工夫がいりますね。

コメントする

© 2013 PLUS PUT

page top