話題の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が起動してるウインドウ
このアプリ単体では動作しませんが、こいつを立ち上げておかないとChromeのExtensionも動作しません。こいつ自体は、裏でポートを見張ってるとかなんかでしょう。
ここからの作業は、インストール完了後に(おそらく)自動で開かれるAdobe Forums: Adobe® Shadow Installation Guideに従っています。
2. Chrome Extensionをインストール
Web StoreからExtensionをインストールします。ChromeのバージョンはStable Channel (安定版 17.0.963.66)で大丈夫でした。
3. iOS, Andoridのアプリをインストール
iOSとAndroidのそれぞれのクライアントアプリをインストールします。iOSのほうは、ちゃんと日本のストアでも配布されているので安心してください。(英語ストアだけとかいうオチをおそれてた)
Macとモバイルデバイスが、同じネットワーク内にいるようにしてください。同じ無線LNAスポットにつなげば大抵OKでしょう。自動で検出されますが、手動でIPやホスト名を叩くこともできます。(右上の+印)
4. ペアリングのためパスコードを入力
デバイスが検出されないときは、ネットワークはもちろん、Mac側のアプリが立ち上がっているかも確認してください。
これで、Adobe Shadowを使う準備は終わりました。実際に使ってみます。
使ってみよう
ペアリングが済んだら、Chromeで適当なページを開きましょう。すると、モバイルデバイス側にも同じページが表示されるはずです!
まずは普通にWebサイトを表示してみる
自分は同時にAndroid(Xperia Ray)にもインストールしていましたが、こちらも中々良好で、ブラウザでページ変えたらiPadとAndroidの両方が同時に切り替わるのは中々爽快です。
ひとつ注意が必要なのは、見ているページについては単にURLを共有しているだけなので、アクセスに制限があるな場合(たとえば要ログインとか)は、各デバイスがそれらを満たさないといけません。
超便利なリモートインスペクタを使ってみる
weinreを内蔵しているようで、エクステンションから<>なボタンを押すと、リモートインスペクタを開くことができます。
参考@スマホの開発が超絶楽に! weinreでスマートフォンをPCでリモートデバッグ! | CSS-EBLOG
すごい!すごいよ!
なにも考えずにweinreを使わせてくれるのは便利でいいですね。
けど、Androidのほうは問題なく動きましたが、iOSのほうはweinre開いてしばらくするとフリーズ → クラッシュというコンボをキメてくれたので、まだまだ動作には不安定なところがあるようです。まあ、テスト版ですから当たり前ですわね。(自分のだけかもしれませんが)
現状でも結構つかえるツール?
早速業務で使ってみてますが、結構便利です。インスペクタがちゃんと機能してくれればなぁと思うのですが、Androidのほうでは動いてくれてるので、iOSのほうは下記のソレをつかってSimulatorでごまかしています。
Adobeさん良い仕事してますね! CSシリーズは何だか冴えない話ばかりなのに、もしかしてモバイル方面に強くなってるんじゃ・・・。