アドビの新しい Web 制作支援ツールとして Shadow の Labs リリース 1 が Adobe Labs に公開されました。 （Shadow@Adobe Labs）
今回公開された Shadow の主な機能は、以下の 2 つです。
- デバイス上の表示の同期
デスクトップ上でコンテンツを表示すると、ネットワーク経由で iOS や Android デバイス上の表示が同期される - コンテンツのリモートデバッグ
デスクトップから、デバイスで表示中の HTML, CSS, JavaScript を修正。結果は直ぐにデバイス上の表示に反映される
サイトの表示確認および修正作業中に、デバイス （閲覧環境） とデスクトップ （開発環境） を行ったり来たりする必要がなくなるため、スマホサイトの開発が効率的になりそうです。
Shadow を使うには、デスクトップ環境とテストのターゲットとなるデバイス、それぞれにアプリのインストールが必要です。
デスクトップ環境には、バッググラウンドで動作する Shadow 本体と、Chrome 用のプラグインをインストールします。
ちなみに、現在サポートされている OS は、
- Windows 7
- Mac OS X v10.6, 10.7
です。
iOS 版と Andoroid 版は、それぞれ iTune Store か Android Market から無償で入手できます。 （公開まで少し時間がかかるかもしれません）
- iOS: Shadow client for iOS
- Android: Shadow client for Android
Shadow はデバイスを見つけるために Bonjour を利用します。そのため、Windows 環境では Bonjour の設定も行います。インストーラは Shadow のディレクトリ内にあります。
- Win32: \Program Files\Adobe Shadow\BonjourPSSetup.exe
- Win64: \Program Files (x86)\Adobe Shadow\BonjourPSSetup.exe
Bonjour をインストールしたら、Shadow を再起動するのが良い様です。
下のビデオに、デバイスとの接続方法と、リモートでバッグの手順が紹介されています。
簡単に説明すると、以下のような感じです。
- デバイスとの接続
- デスクトップの Shadow を起動
- デバイスの Shadow を起動、パスコードが表示されるのを確認
- デスクトップに接続要求が表示されたらパスコードを入力
- リモートデバッグ
- Chrome の機能拡張から接続したいデバイスを選択
- 接続されたら、メニューバーの Elements をクリック
- 目的の要素を選択し、修正や削除を行う
コメントする