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

Date:
2012.07.06
Tags:
| |
モバイルデバイスの開発用に Adobe Shadow を導入する

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

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

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

前提

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

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

  • Adobe Shadow 本体(Windows / Mac)
  • Google Chrome 拡張機能
  • Adobe Shadow アプリ(iOS / Android / Amazon Kindle Fire)

インストール手順

  1. Adobe Shadow を PC にインストール
  2. Google Chrome に Adobe Shadow(拡張機能)を追加
  3. モバイルデバイスに Adobe Shadow のアプリをインストール
  4. モバイル側のアプリを起動し、パスコードを取得
  5. PC側の Google Chrome のエクステンションに、パスコードを入力

1. Adobe Shadow を PC にインストール

Download Adobe Shadow

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

URI
Download Adobe Shadow

2. Google Chrome に Adobe Shadow(拡張機能)を追加

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

URI
Chrome ウェブストア

3. モバイルデバイスに Adobe Shadow のアプリをインストール

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

URI
iOS (App Store)
URI
Android (Google Play)
URI
Amazon Kindle Fire (Amazon.com)

4. モバイル側のアプリを起動し、パスコードを取得

パスコードを取得

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

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

5. PC側の Google Chrome のエクステンションに、パスコードを入力

パスコードを入力

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

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

使用感

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

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

「< >」アイコンから weinre を起動

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