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

関連記事

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 その上「サイトの状況が赤点です」とGoogle様にも怒られました(/_;) アイキャッチ画像 IconDesign by くつきちよこ

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み

    Upload出来ない(/_;) ファイルの

記事を読む

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

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

CC on Orange by Yamashita Yohei, on Flickr

記事を読む

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

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

A calm owl by Tambako The Jaguar, on Flickr Some

記事を読む

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

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

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

記事を読む

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

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

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

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

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

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

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

記事を読む

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 Magnified Eye_5364c by hoyasmeg, on Flickr

「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪

本日は、『くつキッチュ/SCRAPス!』でもお世話になっておりますWordPressテーマ『

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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