必要条件

この記事に必要な予備知識

HTML/CSS/JavaScriptに関する基礎知識や、WebサイトやWebアプリのテストの経験。

 

必要なアドビ製品

他に必要な製品

 

ユーザーレベル

すべて

原文 作成日: 2012/9/24
Browser testing across devices with Adobe Edge Inspect

モバイルサイトを構築した経験をお持ちであれば、様々なデバイスでのテストやデバッグ作業がいかに面倒で、時には苦痛だということをご存じでしょう。こうした状況を改善するのために役立つのが、「Adobe Edge Inspect」です。Edge Inspectを使えば、様々なデバイスでのブラウジングを簡単に制御できるにようになります。また、デバッグや検査用のツールも用意されているので、サイト表示において問題があれば、その原因を的確に見つけることができます。皆さんの開発ワークフローにEdge Inspectを導入し、デバイス間でWebアプリをテストしてみてください。いかにワークフローが改善されるのかが、すぐに実感できると思います。Webアプリをテストするデバイスの数が多くなればなるほど、Edge Inspectによる時間・仕事量の節約効果が大きくなっていくはずです。


この記事では、Edge Inspectのセットアップ方法と機能について解説します。Edge Inspectは、Creative Cloudの無償メンバーシップでも利用することができますが、この場合は利用できる機能が制限され、接続できるデバイスは1台のみとなります。フルバージョンのEdge Inspectを利用するには、Creative Cloudの正規メンバーになるか、Edge Inspectのサブスクリプションを購入する必要があります。フルバージョンでは、同時接続できるデバイスの台数に制限はありません。

セットアップ

個人的にEdge Inspectで感動したことの一つが、セットアップが非常に簡単だということです。以下の3ステップだけでできます。

  1. Edge InspectをPCにインストールします。
  2. Chromeの拡張機能をインストールします。
  3. デバイスにEdge Inspectアプリをインストールします。※デバイス用アプリは、Creative Cloud内にあるEdge Inspect詳細ページから入手できます。

全てのインストールが完了したら、次のステップを行って始めます。

  1. PCでEdge Inspectが起動していることを確認します。
  2. デバイスでEdge Inspectアプリを起動します。※無償版の場合、同時接続できるのは1台のみです。
  3. デバイスがPCと同じネットワーク内にある場合、各デバイスのEdge Inspectの[Connections]にPCの名前がリストアップされます。
  4. そのPC名をタップすると、passcodeが表示されます。
  5. PCのChromeを開くと、Edge Inspect拡張機能のアイコンに「+」マークが付いているはずです(Edge Inspect拡張機能のアイコンは、通常、アドレスバーの右側に表示されています)。アイコンをクリックすると、ネットワーク内にあるデバイスの名前がリストアップされています。そのデバイス名をクリックして、passcodeを入力し、右側のチェックマークをクリックします(図1)。

これでPCとデバイスが同期し始め、PCでブラウジング操作すると、その内容がデバイスのEdge Inspect上に反映されるようになります。

Note: VPNを利用している場合、デバイスのEdge InspectからPCを検出するのが難しいかもしれません。

一度この同期設定を行えば、これ以降再度passcodeを入力する必要はありません。新規で追加する際には必要です。

ブラウジング機能

Edge Inspectでページの表示テストを行うのは、セットアップよりも簡単です。PCのChromeブラウザーで単にブラウジングすれば、接続している全てのデバイスで同じように表示されます。一度に様々なデバイスにおいて、ページの見た目や挙動を確認できるのです。また、デバイスでEdge Inspectを起動中はスリープモードに入らないようになるため、いちいちロックを解除する必要がありません。デバイスのEdge Inspectに表示されるコンテンツは、Chromeで現在表示しているタブのみです。Chromeでタブを切り替えれば、デバイスのEdge Inspectの表示も切り替わります。表示しているタブ内では自由にブラウジングできます。

また、Edge Inspectではフルスクリーンモードでブラウジングできます。フルスクリーンモードでは、Edge Inspectアプリのクローム部分が取り除かれます。フルスクリーンモードにするには、Chrome拡張機能の「show full screen on devices」アイコンをクリックします。すると、接続している全てのデバイスのトップバー部分が非表示となります。再度、そのアイコンをクリックすると、トップバー部分が再表示されます。

Edge Inspectは、サーバーで公開されているライブのWebサイトだけでなく、localhostにあるコンテンツもブラウジングできますアプリを開発しながら、デバイスでテストできるというわけです。なお、バーチャルホスト上でEdge Inspectを使用する方法については、Edge Inspect開発チームのブログ記事「virtual hosts」をご覧ください。

当然ながらEdge Inspectは、「file:///」経由でアクセスしたファイルは読み込めません。デバイスにそのファイルが存在しないためです。また、パスワードで保護されているページに関しては、各デバイスで認証を行う必要があります。なお、テストするサイトでHTTP Basic認証を使用している場合、「http://login:password@my.site.com/」というURLでブラウジングすると、各デバイスで認証作業を省くことができます。

デバイスでページを更新したい、あるいは新規ページを開きたい場合は、右上のアイコンをタップしてください。また、ChromeのEdge Inspect拡張機能ウィンドウの更新アイコンをクリックすると、接続している全てのデバイスが同時に更新されます。この更新作業を行うと、キャッシュがクリアされ、サーバに新たにアセットをリクエストして表示することになります。

デバッグ機能

これまで紹介したEdge Inspectの機能は役立ちますが、最もオススメな機能の1つはデバッグ機能です。ChromeのEdge Inspect拡張機能ウィンドウ上の接続されているデバイス名の横に「< >」マークがあります。これをクリックすると、デバッグウィンドウが開き、リモートによる検査セッションが開始されます。この機能の舞台裏では weinreweb inspector remote)を利用しています。ChromeやSafariの開発者ツールを使ったことがある人にとっては馴染みのある概観でしょう(図2)。

デバッグウィンドウでは、DOMの表示と編集を行えます。DOMを編集すると、デバッグ対象となっているデバイスにおいて、その編集内容が反映されます。また、ページのonLoadイベント中のログが大半になりますが、コンソールログを見ることができます。これらは、HTML/CSS/JavaScriptのデバッグを行う上で非常に強力な機能となるでしょう。

デバッグ機能でいくつかの制限事項があります。[Timeline]タブを表示しても何もデータが表示されませんでした(ページを更新しても表示されませんでした)。[Network]タブでは、XHRのみ検出しました。[Console]タブに情報が表示されるのは、デバイス上でボタンクリックなどのイベントが発生した場合のみです。なお、Consoleが対象としているのはデバイスです。つまり、PCではなく、デバイスでボタンタップなどの操作をしなければなりません。また、HTML/CSS/JavaScriptを編集する際に、新しい行を追加する方法がありません。なお、Chromeの開発ツールにあるような「Edit As Text」「Edit As HTML」といったオプションはありませんでした。

Edge Inspectを「Adobe Shadow」として先行リリースしており、そのShadowでは、このデバッグ機能にadobe.com上のweinreサーバーを使用していました。Edge Inspectでは、Chrome拡張機能で右クリックして表示されるメニューの[options.]を選んで、あなた自身のweinreサーバーを利用することができるようになりました。ローカルのweinreサーバーを利用したい場合は、Josephの記事「Use your own Weinre server with Adobe Shadow – Step by step」をご覧ください。

もう1つ素晴らしい機能があります。それは、JS Binとの統合です。JS Binは、ブラウザー上でリアルタイムにHTML/CSS/JavaScriptのコーディングと検証ができる、非常に人気のあるサイトです。Edge Inspectを使えば、デバイス上にJS Binのoutput(表示結果)部分だけを表示させることができます。つまり、コーディングしながら、その結果をリアルタイムにデバイスで確認できるのです。また、Edge Inspectのデバッグ機能を使うと、output部分だけをデバッグでき、JS Binに記述されたコンソールログを取得することができます。JS Bin統合の様子については、Remy Sharpのデモ映像をご覧ください。

スクリーンショット機能

Edge Inspectにはスクリーンショット機能があります。特定のデバイス上だけでなく、一度に全てのデバイスで撮影することもできます。全てのデバイスでスクリーンショットを撮影するには、ChromeのEdge Inspect拡張機能ウィンドウにあるカメラアイコンをクリックします。すると、各デバイスで撮影されたスクリーンショットがPCへ転送されます。カメラアイコンの横にあるフォルダーアイコンをクリックすると、スクリーンショットが入っているフォルダーが開きます。保存場所を指定する場合は、Chrome拡張機能で右クリックして表示されるメニューの[options.]を選びます。

特定のデバイスだけでスクリーンショットを撮影するには、デバイスのEdge Inspectの上右側にあるアクションメニュー(矢印のついたアイコン)をタップして、画面下に表示されたメニューから[Screenshot]をタップします。図3は、Samsung Nexus S(OSは、Ice Cream Sandwich)で私のブログを表示した際のスクリーンショットです。

ご覧の通り、モバイル対応に取り組まないといけないようですね(私のデザインスキルの乏しさは有名なのですが…)。もう1つ気づいて欲しいこととして、スクリーンショットの内容が現在のviewportになっている点です。ですから、撮影前にスクロールやズームなどを行うと、保存されるスクリーンショットの内容は、その時点でのviewportとなります。

また、スクリーンショットの撮影時に、画像ファイルの他にテキストファイルも保存されます。そのテキストファイルには、撮影したページのURL/ページのサイズ/デバイスのOS/デバイスの種類/ピクセル密度が記録されています。この機能は、テスト時に発生した問題の性質をデベロッパーに伝える際などに非常に役立つと思います。

おわりに

もし、あなたがWebアプリを開発していて、様々なデバイスでテストする必要があるならば(Webアプリを開発していて、デバイスでのテストは不要というケースは極稀でしょう)、Edge Inspectを今すぐ導入しない理由はありません。セットアップは簡単、使うのも簡単、それでいて、おそらくあなたの開発環境にはない機能をたくさん提供してくれるのです。そして、最も重要なこととして、あなたの作業時間を節約してくれて、フラストレーションを軽減してくれるでしょう。


Edge Inspectに関するFAQや既知の問題については、フォーラムをご覧ください。また、Edge Inspect blogでは、最新情報やTipsを紹介しています。