position: absolute;

選択されているタグ : html5

タグを絞り込む : book javascript video

動作確認!検証環境を考える


この記事は(HTML5 Advent Calendar 2013)[http://www.adventar.org/calendars/125]の13日目になります。

「HTML5やJavaScript APIに関する話題であれば、Web標準からかけ離れた話題でなければ、なんでもOKです!」というテーマで、かけ離れてはいないけど微妙に離れているかもしれない感じになってしまいました。すいません!でも、必要かなあということで。

このAdvent Calendarを見てもわかるように、近年HTML5まわりは実装や新規格など激しい動きを見せています。そういった中で制作したものがちゃんと動くのか?動かないものに対しての代替手段はちゃんと機能しているのか?といったことが課題になるのはみなさんも実感しているでしょう。というわけで今回はIEとスマーフォンなどに関しての検証環境について書いてみたいと思います!

Internet Explorerの検証

Windows8.1に伴いIE11が誕生し、Internet Explorerが「増えました」。さらにIE11のF12開発者ツールでは旧バージョンのエミュレーションを行うにはmetaタグにてX-UA-Compatibleの指定がいるなどちょっと使いにくくなるということになってしまいました。「んなこと製作段階でいちいちやるのかよ!」って声が聞こえてきそうというか言ったことありますが、それに対する答えをMicrosoftさんが用意しています。

modern.IE



まずはコード検証機能。赤丸をつけたフォームにURLを打ち込むとソースを検証して結果を教えてくれます。IEの問題だけでなく一般的なソースコード診断もしてくれます。「オープン環境かよっ」ってツッコミ入りそうですが、GitHubでソースコードが公開されているので、独自に検証環境を構築することが可能です。また、各デバイスでのスクリーンショットを見せてくれたり、Compat Inspectorというテストツールを用いた検証結果も提供してくれます。

また、BrowserStackが3ヶ月間無料で利用できるというキャンペーンもあります(重いけど…)。


ただ、modern.IEの真骨頂はそれではありません。なんと仮想マシン向けのIEを搭載したOSイメージを配布しているのです。Macユーザーであれば最新のIEのF12ツールすら利用できませんが、VirtualBox、VMWare Fusion、Parallels向けのIE6からIE11(現在はプレビュー版)、OSのもXPから8.1まで取り揃えています。少々マシンに余裕が必要ですが、基本的に実機と同等の環境で検証ができるということで、とても良い話だと思います。



スマートフォンの検証

HTML5ゴリゴリの制作を行った場合、スマートフォン(特にAndroid)の検証は物量勝負になってしまう面があります。それなりのシェアの端末と言ったってGalaxyとXperia全部揃えるのもなかなか骨です。端末レンタルもそこそこかかりますし、検証センターだって東京だけの話です(せめて100万人都市には揃えろと言いたい。もとい。政令指定都市には揃えろと言いたい。これで岡山も入ります)。つーことで有料ではありますが極めて実機に近い検証ができるサービスがRemote TestKitです。検証1時間945円で、一台を最低30分から借りられます。うまくやると945円で2台検証が可能です。さらにはまとめ買いや定額制などがありますのでそちらを利用するともうちょっとお安くなるはずです(なかなか個人では手が出せない額ですが…)。

リモートで実機を操作してその結果を送ってくれるので多少タイムラグはありますが、高水準の精度での実機検証になります。また、スクリーンショットも撮れますし、Android Chromeであればリモートデバッグも可能です。

最近プロモーションに力を入れられているようですので、NTTレゾナントさんが協賛するWeb制作系のセミナー・イベントなどに参加すると5時間の無料チケットを頂けたりすることがあるようです。チェックチェック!

ということで微妙にどころじゃないぐらい離れている気がしてきましたが、(HTML5 Advent Calendar 2013)[http://www.adventar.org/calendars/125]の13日目のエントリーは以上です。