先週の記事で紹介した Adobe Shadow の設定方法と使用時の注意点について、改めてご紹介します。
まず、必要な環境です。
- Mac OS X v10.6, 10.7 または Windows 7 の搭載された PC
- iOS または Andoroid の搭載されたデバイス
- WiFi
デスクトップ環境には、Shadow と、Chrome と、Chrome 用 Shadow プラグインをインストールします。デバイスには Shadow クライアント (iOS, Android) をインストールします。
Windows 7 のみ、Shadow と一緒にインストールされる BonjourPSSetup.exe を使って Bonjour の設定も行います。
ここまでできたら、PC とデバイスを接続します。以下はその具体的な手順です。
- デスクトップ側
- デスクトップ上で Shadow を起動
- ウインドウが表示されたら最小化
- Chrome を起動し拡張機能がオンになっていることを確認
- クライアント側
- クライアント側で Shadow を起動
- 表示されるリストから、接続したいコンピュータを選択
- 表示されるパスコードを記録
- デスクトップ側
- Chrome 機能拡張を開く
- 接続したいデバイスを確認し、テキストフィールドにパスコードを入力する
- Chrome に表示されるコンテンツがデバイスに同期されていることを確認する
次は、リモートインスペクションの手順です。
- デスクトップ側
- Chrome 機能拡張を開く
- 目的のデバイスの行の、右端のアイコン "<>" をクリックする (左側のアイコンは接続の解除用)
- 新しく開いたウインドウ内に接続成功のメッセージを確認したら、Elements タブをクリックする
- 表示された DOM 内の要素を選択して、デバイス上の領域が選択されることを確認する
- DOM 要素を、削除、変更して、デバイス上のコンテンツに反映されることを確認する
利用上の注意点
ついでに、Shadow を利用する際の注意点をいくつかご紹介します。
1.自動再接続
デバイス側の Shadow アプリは、接続が切れると自動的に再接続を行います。そのため、デスクトップ側の Shadow だけが終了した状態だと、デバイス側は再接続を継続して繰り返します。その結果、デバイスはずっとアクティブな状態になり、バッテリーも消費します。Shdow を利用しないときは、デバイスの Shadow を停止するか非表示の状態にするのが良いようです。電源を接続しておくとなお良いでしょう。
2.ネットワークの遅延
ネットワークの信号が弱いなどの理由により、画面の同期が遅れることがあります。また、再接続が発生した場合も、画面の同期が遅延します。
3.AJAX, CSS による動的な表示操作
現バージョンの Shadow は、ページの読み込みをデバイスに伝えることで、表示を同期しています。そのため、それ以外の理由による表示変更、例えば JavaScript や CSS により画面操作が行われても、デバイスの画面は更新されません。この点については、今後のバージョンでの改良が検討されています。
4.weinre の使用
Shadow はリモートインスペクション用に weinre を使用しています。リモートインスペクションが要求されると、デバイス上の Shadow アプリは、必要な JavaScript をページに読み込むよう設定し、それを weinre サーバが処理すると、デスクトップ上の Shadow がインスペクション用のウインドウを表示します。
その際、weinre サーバには、アドビがホストしているサーバが使用されます。そのため、現時点では、インターネットに接続されていないと、リモートインスペクションは利用できません。将来のバージョンでは、weinre サーバを指定できる機能が追加される予定です。
5.localhost のサポート
現時点では、localhost や 120.0.0.1 を IP アドレスとして使用することはできません。外部ネットワークインターフェースに割り当てられた IP アドレスを指定する必要があります。この件も将来のバージョンでは改善が予定されています。
トラブルシューティング
その他、うまく接続できないとき等に役に立ちそうな情報です。
1.サブネットをまたぐ接続
Bonjour は異なるサブネットに存在する相手を見つけることができません。その場合は、明示的に相手を指定してデバイスとデスクトップを接続する必要があります。
2.デスクトップのログインユーザ
デスクトップ上の Shadow は、サービスではなくて、ログインユーザのアプリとして実行されます。そのため、Shadow でデバイスに接続した後、別ユーザでログインした場合、前回接続したデバイスの情報は利用できません。デバイスとも別途接続しなおす必要があります。
3.コンテキストメニュー
weinre の中で右クリックして表示されるコンテキストメニューは Chrome のもので、weinre のものではありません。そのため、右クリックから要素のインスペクトを行うと、Shadow ではなく、Chrome の weinre によるインスペクトが行われます。
4.VPN
VPN 使用時は、一般的にローカルネットワークからの接続は利用できなくなります。この状態では Shadow は動作しません。VPN 使用中でも、ローカルアドレスにアクセスできるような設定にするか、そもそも VPN とは併用しないようにします。
また、Shadow は 7682 のポートを必要とするため、他のアプリに使用されていたり、使用が許可されていないと Shadow は利用できません。
5.位置情報 (iOS)
Shadow はユーザの位置情報を必要とします。そのため、位置情報を使用するサイトを Shadow 出表示すると、位置情報へのアクセスを要求するポップアップが 2 回表示されます。
6.メディアクエリ
現在は、メディアクエリが個別のファイルに書かれ、@media 等のブロックを CSS ファイル内に持たないという条件でのみ、リモートインスペクションが動作します。将来、この制限は修正される予定ですが、とりあえずテスト時には分けておく必要があるようです。
7.キャッシュ
Shadow は表示したページをキャッシュします。キャッシュをクリアするには、Andoroid の場合、アプリの管理画面から、Shadow を強制停止して、キャッシュをクリアします。iOS の場合は、Shadow のアンインストールとインストールを行います。将来、キャッシュをクリアする機能は追加される予定です。
8.ビデオ (Android)
Shadow 内に HTML5 ビデオも Flash ビデオも表示されません。これは、将来のバージョンで修正される予定です。
コメントする