話題のAdobe Shadowを早速試すよー(Mac OS X)

話題のAdobe Shadow

Adobe Shadowは、モバイルデバイス向けブラウズのリモートテストをサポートしてくれるツールです。アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール - Publickeyで紹介されていました。

どんなツールなのかっていう紹介は上の動画とか記事に譲って、以下では淡々と導入の記録を載せています。Mac OS Xですが、Windowsでもきっと大差ないんじゃないかと。

レッツトライ

昼休みの予定がなくなってしまったので、実際にインストールして動かしてみます!

  1. Mac OS Xアプリのインストール
  2. Chrome Extensionのインストール
  3. iOS, Androidのアプリのインストール
  4. デバイスとMacのペアリング

以上の順で行います。

1. まずはMacのアプリをインストール

Download Adobe Shadow - Adobe Labsから、Download Shadow for Macをクリックして、dmgをダウンロードしてマウントします。

マウントすると、インストーラーのAdobe Shadow.pkgがあるので起動します。


インストーラー

インストーラー


インストールに特別な項目はありません。普通のアプリと同じようにインストールします。順当にインストールを完了すると、Adobe Shadowが立ち上がるようになります。

1-1. Adobe Shadowが起動してるウインドウ


Adobe Shadow起動画面

Adobe Shadow起動画面


このアプリ単体では動作しませんが、こいつを立ち上げておかないとChromeのExtensionも動作しません。こいつ自体は、裏でポートを見張ってるとかなんかでしょう。

ここからの作業は、インストール完了後に(おそらく)自動で開かれるAdobe Forums: Adobe® Shadow Installation Guideに従っています。

2. Chrome Extensionをインストール

Web StoreからExtensionをインストールします。ChromeのバージョンはStable Channel (安定版 17.0.963.66)で大丈夫でした。


Chrome Extension

Chrome Extension


3. iOS, Andoridのアプリをインストール

iOSとAndroidのそれぞれのクライアントアプリをインストールします。iOSのほうは、ちゃんと日本のストアでも配布されているので安心してください。(英語ストアだけとかいうオチをおそれてた)


iPad クライアントアプリ

iPadでクライアントアプリを表示


Macとモバイルデバイスが、同じネットワーク内にいるようにしてください。同じ無線LNAスポットにつなげば大抵OKでしょう。自動で検出されますが、手動でIPやホスト名を叩くこともできます。(右上の+印)

4. ペアリングのためパスコードを入力

デバイスが検出されないときは、ネットワークはもちろん、Mac側のアプリが立ち上がっているかも確認してください。


パスコードの表示

パスコードが表示されるので、これをMac側に入力


Chrome Extension側のパスコード入力画面

Chrome Extension側にパスコードを入力して確定


これで、Adobe Shadowを使う準備は終わりました。実際に使ってみます。

使ってみよう

ペアリングが済んだら、Chromeで適当なページを開きましょう。すると、モバイルデバイス側にも同じページが表示されるはずです!

まずは普通にWebサイトを表示してみる


URL同期

ハブろぐがiPadにも表示された!


自分は同時にAndroid(Xperia Ray)にもインストールしていましたが、こちらも中々良好で、ブラウザでページ変えたらiPadとAndroidの両方が同時に切り替わるのは中々爽快です。

ひとつ注意が必要なのは、見ているページについては単にURLを共有しているだけなので、アクセスに制限があるな場合(たとえば要ログインとか)は、各デバイスがそれらを満たさないといけません。

超便利なリモートインスペクタを使ってみる

weinreを内蔵しているようで、エクステンションから<>なボタンを押すと、リモートインスペクタを開くことができます。

参考@スマホの開発が超絶楽に! weinreでスマートフォンをPCでリモートデバッグ! | CSS-EBLOG


インスペクタの起動

<>ってなんのマークなんでしょうか


weinre

weinreが起動して自動的に接続される


Elements

モバイルデバイス側で表示されている状態をみれる


すごい!すごいよ!

なにも考えずにweinreを使わせてくれるのは便利でいいですね。

けど、Androidのほうは問題なく動きましたが、iOSのほうはweinre開いてしばらくするとフリーズ → クラッシュというコンボをキメてくれたので、まだまだ動作には不安定なところがあるようです。まあ、テスト版ですから当たり前ですわね。(自分のだけかもしれませんが)

現状でも結構つかえるツール?

早速業務で使ってみてますが、結構便利です。インスペクタがちゃんと機能してくれればなぁと思うのですが、Androidのほうでは動いてくれてるので、iOSのほうは下記のソレをつかってSimulatorでごまかしています。

Adobeさん良い仕事してますね! CSシリーズは何だか冴えない話ばかりなのに、もしかしてモバイル方面に強くなってるんじゃ・・・。