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

関連記事

326/365 - plug in. by Bryan Rosengrant, on Flickr Some rights reserved

Q:ワードプレスの記事内にSoundCloudの音楽を埋め込むには? A:【WPプラグイン】は不要です!

タイトル通りです。今はURLだけで埋め込み完了です。  326/365 - pl

記事を読む

Title:Peeking Diet Bos on Flickr Some rights reserved

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

  Title:Peeking Diet Bos on Flickr Some right

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

もくじ Laser engraved RSS icon by Book Wor

記事を読む

IMG_20130519_144632 by smc_90, on Flickr blog表記ルール

毎日の更新でグダグダになりがちな『ブログの表記ルール』を再考してみました♪

本日は、『ブログ表記ルール』を考えたいと思います。 IMG_20130519_144632 b

記事を読む

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

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

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

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

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その1『忍者レコメンド』

  rss by TEIA MG, on Flickr もくじ 《くつキッチュ/スクラ

記事を読む

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

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

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

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場