話題のAdobe Shadowを早速試すよー（Mac OS X）
Posted: Updated:
話題のAdobe Shadow
Adobe Shadowは、モバイルデバイス向けブラウズのリモートテストをサポートしてくれるツールです。アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール － Publickeyで紹介されていました。
どんなツールなのかっていう紹介は上の動画とか記事に譲って、以下では淡々と導入の記録を載せています。Mac OS Xですが、Windowsでもきっと大差ないんじゃないかと。
レッツトライ
昼休みの予定がなくなってしまったので、実際にインストールして動かしてみます！
- Mac OS Xアプリのインストール
- Chrome Extensionのインストール
- iOS, Androidのアプリのインストール
- デバイスとMacのペアリング
以上の順で行います。
1. まずはMacのアプリをインストール
Download Adobe Shadow - Adobe Labsから、Download Shadow for Macをクリックして、dmgをダウンロードしてマウントします。
マウントすると、インストーラーのAdobe Shadow.pkgがあるので起動します。
インストーラー
インストールに特別な項目はありません。普通のアプリと同じようにインストールします。順当にインストールを完了すると、Adobe Shadowが立ち上がるようになります。
1-1. 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
3. iOS, Andoridのアプリをインストール
iOSとAndroidのそれぞれのクライアントアプリをインストールします。iOSのほうは、ちゃんと日本のストアでも配布されているので安心してください。（英語ストアだけとかいうオチをおそれてた）
iPadでクライアントアプリを表示
Macとモバイルデバイスが、同じネットワーク内にいるようにしてください。同じ無線LNAスポットにつなげば大抵OKでしょう。自動で検出されますが、手動でIPやホスト名を叩くこともできます。（右上の＋印）
4. ペアリングのためパスコードを入力
デバイスが検出されないときは、ネットワークはもちろん、Mac側のアプリが立ち上がっているかも確認してください。
パスコードが表示されるので、これをMac側に入力
Chrome Extension側にパスコードを入力して確定
これで、Adobe Shadowを使う準備は終わりました。実際に使ってみます。
使ってみよう
ペアリングが済んだら、Chromeで適当なページを開きましょう。すると、モバイルデバイス側にも同じページが表示されるはずです！
まずは普通にWebサイトを表示してみる
ハブろぐがiPadにも表示された！
自分は同時にAndroid（Xperia Ray）にもインストールしていましたが、こちらも中々良好で、ブラウザでページ変えたらiPadとAndroidの両方が同時に切り替わるのは中々爽快です。
ひとつ注意が必要なのは、見ているページについては単にURLを共有しているだけなので、アクセスに制限があるな場合（たとえば要ログインとか）は、各デバイスがそれらを満たさないといけません。
超便利なリモートインスペクタを使ってみる
weinreを内蔵しているようで、エクステンションから＜＞なボタンを押すと、リモートインスペクタを開くことができます。
参考@スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！ | CSS-EBLOG
＜＞ってなんのマークなんでしょうか
weinreが起動して自動的に接続される
モバイルデバイス側で表示されている状態をみれる
すごい！すごいよ！
なにも考えずにweinreを使わせてくれるのは便利でいいですね。
けど、Androidのほうは問題なく動きましたが、iOSのほうはweinre開いてしばらくするとフリーズ → クラッシュというコンボをキメてくれたので、まだまだ動作には不安定なところがあるようです。まあ、テスト版ですから当たり前ですわね。（自分のだけかもしれませんが）
現状でも結構つかえるツール？
早速業務で使ってみてますが、結構便利です。インスペクタがちゃんと機能してくれればなぁと思うのですが、Androidのほうでは動いてくれてるので、iOSのほうは下記のソレをつかってSimulatorでごまかしています。
Adobeさん良い仕事してますね！ CSシリーズは何だか冴えない話ばかりなのに、もしかしてモバイル方面に強くなってるんじゃ･･･。
