先日、microsoftがクロスブラウザーについての支援サイト、 modern.IEの日本語訳が公開されました。このサイトではWebページ制作にあたって、 URLを貼るだけで、コーディングの問題を教えてくれたり、 『Web標準に準拠した20のヒント』と題して文章も公開されています。 その中でも、個人的に気になった、Web上で仮想環境をエミュレートするサービス 『BrowserStack』を試してみましたので、それの使い方でも。 サービスの基本 今まで、ブラウザの仮想環境を用意するには、ローカル上が基本でした。 IEだったら、IETesterや、virtualPCとかですね。 このBrowser StackはそれをWeb上でやるサービスです。

サービスは二種類

• 実際に仮想環境を作る
• スクリーンショットを取る。

今回は仮想環境をメインに紹介。

使い方

会員制なので、まずは登録。無料と有料があります。  

ホーム画面（ダッシュボード)

全部英語ですけど、シンプルな画面。わかりやすくて好きです。

基本機能

• 『test a public URL』……web上に上がっているURL
• 『Test an internal URL』 ……ローカル上（接続しているのPC)のローカルをチェック

メニューバー

• Resouce ……各ブラウザで使えるデバッグツール一覧やjavascriptの情報などがあります。

サイドバー

• エミュレート環境選択……詳細は以下で
• フルスクリーンかfitか、速度を画質か速度かで選べます。
• localTestの方法について

Web上で仮想環境をテストしてみた結果(winXP [IE8])

(Mac OS Lion [safari6.0])

ほかにも選択メニューからOSとブラウザを自由に選べますよ。

目玉はこれだけではなく、ちゃんと動的なブラウザとして機能すること!

先のMacOSのエミュレート画像を見ていただくと、文字が入力されて反応していることがわかるかと思います。

なんと、文字入力ができます。

※なぜか自分のMacPCでは日本語入力が出来ませんでした。いくらか環境よるのでしょうか。

ローカル閲覧について

ローカル環境はBrowserStackのメニューからjavaアプレットをダウンロードしての設定が必要となります。

手順が複雑なので今回は説明いたしませんが、基本的な使用感は同じです。

スクリーンショット機能

またこれも、今までとは違うのは撮りたいOSとブラウザを複数選択して、まとめて取得できること。

そして、zipでダウンロードできます。 まずは選んで……

そうしたら『generate screenshots』を選択!! これはすごい!!

これで、一気にダウンロードができますね。

まとめ

今回はBrowserStackの紹介でしたが、modern.IEにはURLを入力すると検証してくれるサービスもあります。

http://www.modern.ie/ja/report

ぜひ、皆様試してみてください。(※BrowserStackの無料試用期間は2014年1月まで)