0シェアする9191039LINE!4902565この記事で紹介していたChrome拡張は、現在配布が終了しているようです。websiteというサービスになっています。Chromeで、modern.IEというWEB検証サービスが利用できる拡張を知りました。testing(Chrome拡張:配布終了)僕はこれまで、modern.IEというサービスは、利用した事がなかったんですが、これを機に利用してみたら、思っていた以上に便利だったので紹介です。複数環境のページスクリーンショット最近のIEでサポートされなくなったコードテスト用の仮想環境もダウンロード可能まとめmodern.IEとはmodern.IEとは、マイクロソフトが提供する、無償で使える(一部除く)WEB検証サービスです。modern.IEでは、いろいろなデバイス、OS、ブラウザでサイトをチェックすることができます。あと、IEを中心にユーザビリティーを上げるための、様々な改善点も提案してくれます。現在は、いろいろなデバイスとOS、多数のブラウザが存在しています。以下のような組み合わせはよくあり得ます。S3とAndroidブラウザーこういった、最近のメインストリームの組み合わせを手軽に表示テストすることができます。以下は、当サイトを表示テストしてみた例です。(テストページの画像などをクリックすると実物大で確認することもできます。)サイトの、表示テストをしようと思ったら、いろいろな環境でテストするに越したことはありません。個人の場合、実際の環境をそろえるわけにもいきませんし、仮想環境でそろえるにしても、大変面倒くさい作業です。それが、たとえ画像での表示確認だったとしても、これだけの環境ができるのはありがたいです。その他にもmodern.IEには、以下のような機能があります。利用したいOS、IEのバージョン、仮想マシンソフトを指定して環境をダウンロードスポンサーリンクレクタングル(大)広告modern.IEの使い方modern.IEの使い方はとても簡単です。modern.IEにアクセスして、「サイトスキャン」にURLを入力し、「今すぐスキャン」ボタンを押すだけです。Chrome拡張(配布終了)の場合は、もっと手軽でスキャンしたいページ上でツールボタンを押して、「Scan」ボタンを押すだけです。すると、以下のような結果が表示されます。一般的なコーディング問題の検出まず、スキャンが終了した状態で、以下のような結果が表示されます。当サイトは、以前のバージョンのIEとの問題はないようですが、複数環境のブラウザで利用する場合の注意点はいくつかあるようです。注意マークが出ている「HTML5入力」の「お勧めの改善案」を見てみると、以下わかりやすく解説されています。いった改善点が見つかったのかなぜその改善点が重要なのか修正方法その他の、改善案などは、さらに丁寧に書いてあります。複数環境のページスクリーンショット「複数にわたるブラウザとデバイスでもウェブサイトのスクリーンショットを取得します。」タブを選択して、「スキャンを開始します。」をクリックすると、いろいろな環境での表示テストが行えます。冒頭画像で紹介したやつです。ブラウザスクリーンショットから、URLを入力することでも行えます。この記事を書いた時点では、以下のような環境の表示テストを一発で行うことができます。S3とAndroidブラウザーこの表示テストの良いところは、画像などをクリックすると、スクロールバーが表示され、ページの最後まで表示テストを行えることです。Windows8.1とIE11もちろん、モバイル環境でも、ページの最後まで表示を確認することができます。iPhone6とモバイルSafariこれまでいくつか、この手のスクリーンショットテストツールを使ってきたのですが、ページ上部しか表示されないものもあったので、すべてをチェックできるのはありがたいです。最近のIEでサポートされなくなったコード「最近のIEでサポートされなくなったコードをスキャンします。」タブをクリックして「スキャンを開始します」をクリックすると、古いIEでしかサポートされていないコードを、検出してくれます。問題がなかった場合は、以下のように表示されます。10」まで、あとは「好きな仮想マシンソフト」のテスト環境を入手することもできます。僕は、仮想マシンソフトは、VMwareを使っているので、VMware環境などを選択してダウンロードすることができます。IE6、XP、VMwareの仮想テスト環境を入手したらこんな感じ。仮想環境は30日間利用できます。まとめmodern.IE、初めて利用してみたのですけど、とても便利でした。ブラウザスクリーンショット機能は、ちょっといろいろなブラウザで、簡単な表示確認をしたい場合には、重宝するのではないかと思います。ブラウザスクリーンショットを見ることができるサイトは、他にもありますが、重くてなかなか表示されなかったりします。modern.IEも、表示するまでは多少時間がかかりますが、マイクロソフトが運営しているだけあって、ちゃんと表示されます。少なくとも、ローカルにインストールした各種ブラウザを一つ一つ立ち上げて確認するよりは早いと思います。自分のGoogle検索履歴を検索する方法(各ブラウザの検索ボックスにも対応させる)過去の検索結果を検索したいなんてややこしいことをしたいときは、Google履歴が便利です。似たようなCC写真を探せる機能も。Engine」という写真検索エンジンの紹介です。検索結果は、機械学習により分析された画像をもとに出力されています。海外商品を手軽に安く購入することができる「eBay公認通販サイトのセカイモン」の紹介です。トラブルの肩代わりをしてくれるのは心強いです。記事を読むfeedlyのフィードデータを別のfeedlyアカウントに移行する方法feedlyのOPMLデータをインポート/エクスポートする方法です。同じIPのサーバーで運営されているサイトを探す方法です。サーバーの同居人が、あまりにも負荷の高いサービスなどをしている場合は、サーバーの変更などを考えても良いかも。記事を読むSimilarWebの訪問者データは、いったいどこから取得しているのか?他人のサイトのアクセス解析情報を見れるSimilarWebのデータ元が気になったので調べてみました。画像や写真から使われているフォントを解析してくれるサービスです。記事を読む登録不要でプログラムコードを誰とでも手軽に共有できるサービス「Climbi」Climbiというサービスを使って、簡単にソースコードを共有する方法です。記事を読む豪雨による自主避難の良い判断材料になりそう、気象庁の「高解像度降水ナウキャスト」で住んでる地域の3時間前から1時間後まで雨の降り具合が250メートル間隔でわかる集中豪雨や、ゲリラ豪雨が降ったとき、今後の自分の行動に対する良い判断材料となりそうな気象庁のWEBサービスです。色の配色に悩んだ時に、ヒントとなりそうなウェブサイトをいくつか紹介。良い色使いの写真があったら、Pictaculousでカラーパレットをジェネレートしてみるというのも一つの手かも。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。使える会計ソフト「MFクラウド」は零細個人事業主には神ツールなのではないかコスパ無双サーバー「カラフルボックス」レビュー。CocoonSimplicityの後継テーマを作りました。Cocoonにて無料配布しています。Simplicityシンプルな無料Wordpressテーマを自作してみました。簡素好きな人におすすめ。Simplicityにて無料配布しています。楽天ポイント運用で投資体験をする方法をやさしく解説。長期的に増やす方針なら楽天ポイント運用で選べるコース「アクティブ」と「バランス」ってどんな運用?豊富なデザインの無料ロゴメーカー「DesignEvo」。著作権ごと買い取ることも可能。方はサイトの始め方参照。