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

関連記事

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

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

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

記事を読む

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

「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

本日はサイトの名刺『ファビコン』に関しての記事です。 Favicons by Loozrb

記事を読む

2013冬の陣 名古屋・松阪・静岡の旅 その1

送水口最強伝説!素敵ブログ観察記1 『送水口倶楽部様』編

素敵ブロク観察記のこと 送水口倶楽部『2013冬の陣 名古屋・松阪・静岡の旅 その1』

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

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

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

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

記事を読む

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます。 アイキャッチ画像 illust by くつきちよこ

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます(*´▽`*)ノシ~

イラスト:くつきちよこ   登場人物:くつきちよこ ※管理人   佐

記事を読む

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

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

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

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

CC on Orange by Yamashita Yohei, on Flickr 引用の要件(4)出所の明示が、簡単にできるアドオン

キャプチャ画像に引用元の情報を簡単に盛り込めるアドオン『kwout』が超便利!

CC on Orange by Yamashita Yohei, on Flickr

記事を読む

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

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

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

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