ブラウザ表示チェック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

関連記事

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に! 素材サイトの構成

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に!

図:くつきちよこ   登場人物:くつきちよこ ※管理人   佐藤 ※ゲ

記事を読む

I'm Don Shelby! by Coco Mault, on Flickr

さとうささらの秘密の部屋

こちらのページは、あの言葉を無駄にクールに発音する/テキスト読上げソフト読み比べのオマケ記事です

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

『くつキッチュ/スクラップス!』アイコン凡例 アイキャッチ画像

『くつキッチュ/スクラップス!』アイコン凡例

    当ブログでは『NetVibes』のRSSなど

記事を読む

Advertising and Rain by Jakob Montrasio, on Flickr ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

Flickrの上ヤコブMontrasioによる広告や雨   ネットオウルか

記事を読む

User Error by docbaty, on Flickr

現在、お客様からのリクエストを処理することができません。Google のエンジニアが問題解決に取り組んでおりますので、しばらくお待ちください。

User Error by docbaty, on Flickr Adse

記事を読む

livedoorブログの縦書きテンプレート『縦書き(β)』を、お試してみました♪ livedoorブログ縦書き用テンプレート『縦書き(β)』の使ってみたサンプル。最後の行に、強制両端揃えの不具合がみられる。

livedoorブログの縦書きテンプレート『縦書き(β)』を、お試してみました♪

  livedoorブログ『縦書(β)』サンプルブログ くつきちよこ 登場人物:くつき

記事を読む

A calm owl by Tambako The Jaguar, on Flickr 【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;) くつキッチュアイキャッチ画像

【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;)

A calm owl by Tambako The Jaguar, on Flickr Some

記事を読む

Title:Peeking Diet Bos on Flickr Some rights reserved

今さらだけど、大事な事!「写真をブログにアップする時の注意点」

  Title:Peeking Diet Bos on Flickr Some right

記事を読む

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

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

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

記事を読む

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

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

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