ブラウザ表示チェック3大サービスを無料範囲内で試してみたよ♪

公開日: : 最終更新日:2014/03/12 ブログ, ブログツール, ワードプレス , ,

くつキッチュ!アイコン wordpress

 各ブラウザによっての見え方を改めてテストしてみた

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた "Select your web browser(s) by zipckr, on FlickrSelect your web browser(s) by zipckr, on Flickr

昨日のh2問題でたまたま発見した別問題。

「ヘッダー画像CSSのシャドウがFirefoxで表示されてない!!」

Firefox用の記述(-moz-box-shadow:)してるのになんで?( ;∀;)

各ブラウザでに見え方はこれまで、こちら⇒BrowserLabを使わせてもらっていたのですが、現在はサービスが終了しております。

 BrowserLab サービス終了について(2013 年 3 月 13 日)

というわけで、BrowserLab 代替の下記3大サービスをお試してみました。

 browserling

まずはURL欄にアドレスを入れてブラウザのバージョンを選択するだけで簡単に表示テストが出来るbrowserling。

無料使用には制限アリ。

無料なので制限がかかるのは致し方ないのですが、その条件がわかりづらいんですよね。

制限エラー画面

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた browserlingも制限あり3分?
原文:You’ve used the free version of Browserling 3 times. You’ll need to get a paid plan to use it more!

3 times.三回?

TOPの注意書き

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた browserlingも制限あり3分?

原文:

free plan
Great for students, casual cross-browser testing, and product evaluation.
3-minute sessions

”3-minute sessions.” 3分?3回一体どっちなんでしょう?

注意書きに相違があるとは思いませんでしたので記憶が定かではないのですが、多分三回くらいテストした後エラーが出たような気がしますので3回じゃないかと思います。

いづれにせよ、制限かかるのが早過ぎるような気がします。

加えて、ブラウザのバージョン(しかも一番気になるInternet Explorerのバージョン)に結構制限がかかっているのが難点ですね。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた browserlingも制限あり

 Browsershots

ブラウザの種類の豊富さとそれを一度に確認できる便利さはスゴイ。
風博士、Rekonqなど、BrowserSchottで初めて知ったブラウザもあります。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた BrowserSchottで大量チェック

しかし大量にテスト出来る分、ぺージ下部が表示されないなど、ひとつひとつの詳細結果がわかりづらいです。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた browserSchott スクロール付加

ヘッダーのシャドウチェックは出来るのですが、スクロール出来ないので、シャドウのついでにチェックしようと思っていた下部の角丸が見られませんでした。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた  シャドウと角丸両方チェック
別のサービスで確認したFirefox4.0での見え方。

このあたり、ちょっと微妙かも;

なお、BrowserSchottも制限があります。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた BrowserSchottはアカウント取得しても基本1日1回?

メッセージでは「アカウトを取得して下さい」とありますが、アカウントを取得しても同じエラーメッセージが出ました。

同じアドレスでは連続でテストは出来ないようです。

 SOURCELABS

最後にAdobeもBrowserLaboの代替サービスとしてオススメしていた(BrowserLab is shutting down on March 13, 2013)、SOURCELABOSというものを使ってみました。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた SOURCELABS アカウント作成

3つのサービスの中でこのSOURCELABSのアカウント作成が一番面倒だったのですが、その代わり精度も一番でした。

OSとブラウザの組み合わせをテストできるのは素晴らしい!

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた SOURCELABOSはOSとブラウザを組み合わせてチェックできるから便利!

もちろん、テスト上の画面でのスクロールも出来ますのでヘッダーのシャドウと共にページトップへの角丸チェックも出来ます。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた SOURCELABSでoperaの表示がヤバイことが判明

SOURCELABSのおかげで、operaの表示がシャドウ、角丸どちらもヤバイことに気づきました。

SOURCELABSの制限

ちなみにSOURCELABSも上2つのサービスと同等制限があり、こちらは無料で使えるのは月に30分です。

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた SOURCELABOSは月30分無料

それ以上は月に12.00ドルからの有料サービスとなります。

 まとめ

昨日のh2不具合調査中に判明したシャドウの不具合きっかけで、今回ブラウザ表示テスト3大サービスを試させていただきました。

比較

browserling

◯ URL欄にアドレスを入れてテストしたいブラウザとバージョンを選択するだけ。

× 使用制限がわかりづらい。(たぶん1日3回)

× 無料の場合、確認できるブラウザのバージョンにも制限がかかる。(無料で確認できるIEはバージョン9.0のみ)

Browsershots

◯ URL欄にアドレスを入れるだけで、一度に大量のブラウザ表示テストが出来る。

× 確認画面がスクロールできないので、ファーストビュー以外の詳細(ページ下部など)が確認できない。

× ログイン中にも関わらず「アカウントを取得しないと優先的に使用できません」とのエラーメッセージが出る。

× ひとつのアドレスの連続テスト不可。(別のアドレスなら可能)

SOURCELABS

◯ OSとブラウザの各バージョンを組み合わせてテストできる。

× アカウント取得する際の入力情報が細かくて面倒。(電話番号など)

△ 無料で使えるのは月/30分まで。

結論

アカウント登録が面倒ではありますが、制限が時間のみ(ブラウザのバージョンに制限がない)で、OSとブラウザバージョンの組み合わせでテストでき、詳細まで確認できるSOURCELABSが一番のオススメ!

ウェブ屋さんでは不足かもしれませんが普通のブロガーさんでしたら、30分/月程度のテストができれば十分じゃないかと。

SafariやFirefox向けに記述していたハズの箇所が反映されていなかったり、一番問題多そうなIEで意外と角丸が大丈夫だったり(最新版の場合ですが…)と、色々発見があったブラウザテストサービスですが、今回はテストのみで結構時間がかかってしまったので対策にまで手が回りませんでした。

対策回はまた今度ということで…

なお、Page TOPへのを丸く目立たせる方法も記事にしたいのですが、ブロック要素のテキストのボジションが曖昧だったり、角丸のブラウザごとの表示もまだ不明な点が多いので保留となっております。

こちらも、ソースを丸々お持ち帰るいただけるくらいに確実なものとなってから記事にしたいと思います。

でっは~(*´∀`*)ノシ

追記:

海外からの流入が激増しててビックリ((((;゚Д゚))))ガクガクブルブル

ブラウザ表示テストの度、アナリティクスが閲覧カウントしちゃうみたいです。

そーいやBrowserLaboでもカウントしちゃってました。

ご注意!

記事がお気に召しましたら投票していただけると嬉しいです♪
ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

Don't Panic Badge by Jim Linwood, on Flickr いきなり来た!「データベース接続確率エラー」

いきなり来た!「データベース接続確率エラー」∑(゚Д゚)ガーン

  Don't Panic Badge by Jim Linwood, on

記事を読む

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪ 忍者ツールズが機能満載過ぎてよくわからないので図にしてみた図

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪

  忍者ツールズイメージ図 くつきちよこ   登場人物:くつきちよこ ※管理

記事を読む

創作支援屋靴キッチュスクラップス!くつきちよこアイコン木の実モザイクVer  Illust by 佐藤利音 ベジェ化 by くつきちよこ

ランボー 怒りの新規ファイルのアップロードが出来ないWordPressトラブル※未解決 と、電子書籍出版お手伝い裏舞台

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像

動くファビコン、今ならアリ?

最近とんと見かけなくなった気がする動くファビコン… 今ならすごく目立つ気もしますが…実

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

Google Mapsが表示されなくなったら困るので、APIの設定をしてみましたよ(*´・▽・`*) アイキャッチ画像 design by くつき 素材 by ClipStudio セルシスさん

Google Mapsが表示されなくなったら困るので、APIの設定をしてみましたよ(*´・▽・`*)

  赤い使徒?design by くつき ⇒  3Dオブジェクト 地球 by セルシス

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune