REVIEW(12/03/16)

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

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

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

「Adobe Shadow」v1.0.151.2(「Google Chrome」用の拡張機能)「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用もあり)「Adobe Shadow」(iOS用のクライアントソフト。Android用もあり)「Adobe Shadow」(iOS用のクライアントソフト。Android用もあり)

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

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

“Remote Inspection”機能“Remote Inspection”機能“Remote Inspection”機能

デスクトップ側の“Remote Inspection”で指定したタグをモバイル端末側でハイライトさせたり、その場でスタイルを追加・編集デスクトップ側の“Remote Inspection”で指定したタグをモバイル端末側でハイライトさせたり、その場でスタイルを追加・編集

「Adobe Shadow for Windows」

【著作権者】
Adobe Systems Incorporated
【対応OS】
Windowsなど(編集部にてWindows 7で動作確認)
【ソフト種別】
フリーソフト
【バージョン】
1.0(12/03/07)

「Adobe Shadow」(「Google Chrome」拡張機能)

【著作権者】
Adobe Systems Incorporated
【対応OS】
Windowsなど(編集部にてWindows 7で動作確認)
【ソフト種別】
フリーソフト
【バージョン】
1.0.151.2(12/03/02)

(柳 英俊)