モバイルデバイスの開発用に Adobe Shadow を導入する

スマートフォンやタブレット等のモバイルデバイス向けの開発時のわずらわしさの1つは、デバイスごとに URL を入力する手間です。

Adobe Labs で公開されている Adobe Shadow を使えば、PC で見ているページがモバイルデバイス側で同期されるので、複数のデバイスで同時に検証することが可能になり、デバッグ時のパフォーマンスが飛躍的に向上します。

今回は、Adobe Shadow のインストール手順を紹介します。

前提

Adobe Shadow を使うには、対象デバイスを同じネットワーク環境下につないでおく必要があります。

また、事前に以下のツール（アプリ）と拡張機能をインストールしておく必要があります。

Adobe Labs のサイトから Adobe Shadow をインストールします。Windows、Mac 共に対応しています（Windows XP は非サポート）。

次に PC の Google Chrome に Adobe Shadow の拡張機能を追加します。

モバイルデバイスは、iOS、Android、Amazone Kindle Fire に対応しています。対象となるデバイスにアプリをインストールします。

モバイルデバイスにインストールしたアプリを起動するとネットワークが自動検出されます。表示された6ケタのパスコードを取得します。

デバイスの検出がうまくいかないときには、PC側の Adobe Shadow のアプリが起動しているか、または、同一のネットワーク環境に接続されているかを確認してみてください。

PC側の Google Chrome を起動し、先ほど取得したパスコードを入力し、導入は完了です。

同様の手順で、他のデバイスを追加登録することで、PC、iPhone、iPad、Android で同時に検証するなんてことも可能です。

各デバイスでページにアクセスする手間が省けるので、モバイルデバイス向けの開発では必須ツールになりそうですが、重いページなど、処理に時間がかかる場合、JavaScript の挙動が実際のブラウザと違ったりするようです。

そのときはメニューの「Open In Browser」からブラウザを開いてますが、それだとこのツールのメリットが半減してしまうので、今後のアップデートで改善されることを期待しています。

また、リモートでデバッグができる weinre が同梱されているのが素晴らしいですね。「< >」アイコンをクリックすることで起動できます。