REVIEW（12/03/16）

モバイル端末向けWebページのデバッグを支援する画期的なツール「Adobe Shadow」

デスクトップの「Google Chrome」が複数端末と同期。リモートインスペクタも搭載

「Adobe Shadow for Windows」v1.0（Windows向けのサーバーソフト）

「Adobe Shadow」v1.0.151.2（「Google Chrome」用の拡張機能）

　「Adobe Shadow」は、モバイル端末向けWebページのデバッグを支援するソフト。同社のラボサイト“Adobe Labs”からダウンロードできる。

　タブレット端末の登場やスマートフォンのラインナップ拡大により、Webページのデザインにかかるコストは増加の一途をたどっている。デスクトップで表示したWebページを、複数のモバイル端末で一度にプレビューし、効率よくテストや修正を施すことができる「Adobe Shadow」は、そんなWebデザイナーの悩みを解決するソフトと言えるだろう。

　本ソフトは、WindowsおよびMac OS X用のサーバーソフト、「Google Chrome」用の拡張機能、iOS/Android用のクライアントソフトの3つで1セットになっている。利用するには、まずデスクトップにサーバー、「Google Chrome」、「Google Chrome」用の拡張機能の3つをインストールしよう。モバイル端末にはクライアントをセットアップしておく。

　次に、サーバーをインストールしたデスクトップとクライアントをインストールしたモバイル端末を同じネットワークに接続し、サーバーを起動する。続いてデスクトップで「Google Chrome」を起動し、拡張機能からモバイル端末の登録（ペアリング）を行う。モバイル端末のペアリングは簡単で、クライアントからサーバーを登録し、その際発行されるコードを拡張機能に入力すればよい。この際、デスクトップに「Bonjour」がインストールされていれば、クライアントでサーバーを登録する際に、サーバーをIPアドレスではなくPC名で指定できるので便利とのこと。

クライアントからサーバーを登録

サーバーを登録する際に発行されるコードを拡張機能に入力

　設定が完了するとURLの同期が開始され、デスクトップの「Google Chrome」で表示しているURLがモバイル端末側にも送信される。クライアントとなるモバイル端末は複数登録が可能で、デスクトップの「Google Chrome」側でWebページを遷移させると、モバイル端末側も一斉にWebページが切り替わるのがわかる。

「Adobe Shadow」（iOS用のクライアントソフト。Android用もあり）

デスクトップの「Google Chrome」側でWebページを遷移させると、モバイル端末側もWebページが切り替わる

　さらに、“Remote Inspection”機能を利用して、モバイル端末のWebページをデスクトップ側でデバッグすることも可能。“Remote Inspection”のユーザーインターフェイスは、デスクトップの「Google Chrome」に搭載されている“Developer Tools”とほぼ同じ。デスクトップ側の“Remote Inspection”で指定したタグをモバイル端末側でハイライトさせたり、その場でスタイルを追加・編集し、モバイル端末側でリアルタイムプレビューすることも可能だ。

“Remote Inspection”機能