モバイルデバイスのデバッグができるAdobe Shadowが便利そうなので使ってみた

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それを承知のかたはどうぞこの記事をお楽しみください。

スマートフォン/タブレットデバイスの実機でインスペクタ機能が簡単に使えるAdobe Shadowがデバック作業で便利そうなので実際に使ってみました。
早速使ってみたので、ざっくりとツールに関する紹介と使用感を書いてみようと思います。

目次

Adobe Shadowとは

Adobe Shadow – Adobe Labs
URL: http://labs.adobe.com/technologies/shadow/

WEB制作におけるフロントエンドの開発を素早く合理的に行うことができるコードプレビューツール。
ソースを表示してどのコードかを調べたり、変更できたり…要はFireBugやChromeのデベロッパーツール、webkitのWEBインスペクタみたいなものです。

↑こんなかんじ。

[ 目次へ戻る ]

Macにアプリケーションをインストール

まずはAdobe Labs DownloadsのページにあるShadow Labs Releaseという項目のなかにリンクがあるのでMacならdmgを、Windowsならmsiをダウンロード。

Englishと書いてあるので、今後マルチランゲージ化するか、それぞれの言語版が出るのでしょうか。
日本語早くリリースされるといいね。

今回はMac版なので、ダウンロードしたdmgファイルをマウントして中にあるAdobe Shadow.pkgを実行。
インストール中は選択肢があるわけでもないので、通常どうりインストールしてください。

インストールが完了すると「This Helper application must be running for shadow to work. It can be hidden or minimized.」と書いてある画面が起動します。

このHelperアプリケーションを立ち上げておかないと、iOS側で連結先として認識しないし、Chromeのエクステンションも動作しません。

隠したり最小化したらいいよと書いてあるので、とりあえず隠しておきます。
起動するのが面倒で常時使いたい人は、ログイン時に開くオプションとか設定してあげたらいいんじゃないかな。

どうせ裏で動いてるだけならメニューバーとかタスクバーとかに常駐させてアプリケーションアイコンを隠させて欲しい。これできるんだろうか?できるひと教えて!

あと、ブラウザで勝手にForumsが開くけれど、今は一旦閉じる。
わかんなかったらググるから!

[ 目次へ戻る ]

Chrome Extensionをインストール

次にChromeのエクステンションを入れます。

Chrome入れてない人は早く入れて!

Googleの個人情報とか気になる人はSRWare Iron入れて!

上記のアプリケーションと同じくAdobe Labs DownloadsにあるShadow Browser Extensionsにあるリンクから、Chrome Web StoreにアクセスしてChromeに追加ボタンをポチり。

たぶん「sd」ってアイコンが出てヘルパーアプリケーションを起動している状態なら青くなります。
起動してなければ灰色なのでヘルパーアプリケーションを起動しましょう。

エクステンションのインストールが終われば「Adobe® Shadow Getting Started Guide」というページが表示されます。

英語とかそんなにわかんないので、とりあえずGoogle先生に翻訳していただいて、適当に整形してみました。
別に読まなくても使えるから飛ばしてもいいよ

Adobe® Shadow Getting Started Guide
Adobe® Shadow is for web designers and developers targeting mobile browsers. After installing Shadow, you will be able to pair devices, have them browse in sync with your computer, perform remote inspection/debugging and see HTML/CSS/JavaScript changes instantly on your device.

Adobe Shadow 入門ガイド
Adobe Shadowは、モバイルブラウザをターゲットにしたWebデザイナーや開発者のためのツールです。
Shadowをインストールしたら、デバイスと同時に使用することできるようになります。
お使いのコンピュータとブラウザが同期されると、リモート調査/デバッグをすることができ、デバイス上で即座にHTML / CSS / JavaScriptの変更を見ることができます。

1. Ensure Devices are on the Same Network
Shadow requires your computer and devices to be on the same network. Computer and devices must be on the same subnet for auto-discovery. If you cannot see your computer, try a Manual Connection.

1. 同じネットワーク上にデバイスがあることを確認してください
Shadowは、同じネットワーク上にコンピュータとデバイスが存在する必要があります。
自動検出するためにはコンピュータとデバイスが同じサブネット上にある必要があります。
もしコンピュータに表示されない場合、マニュアル接続を試してください。

2. Connecting Devices to computer
A. Auto-Discovery
The device running Shadow will look for computers also running Shadow. Tap the computer you would like to connect to. Enter the passcode into the Chrome Extension. This creates a wireless connection between your computer and device.

B. Manual Connection
If you can’t find the computer you want to connect to, tap the “+” button to perform a Manual Connect. A list of IP Addresses associated with your computer is located at the bottom of the Chrome Extension. Insert the IP Address into the text field on the device.

When a device is connected, Shadow will prevent the screen from dimming or going to sleep.

2.コンピュータにデバイスを接続する
A. 自動検出
Shadowを実行するデバイスはShadowを実行しているコンピュータを探します。
あなたが接続をしたいコンピュータ名をタップしてください。
Chromeエクステンションへのパスコードを入力します。
これでコンピュータとデバイス間の無線接続が完了します。

B. 手動接続
接続するコンピュータが見つからない場合は、マニュアル接続を実行するために、”+”ボタンをタップします。お使いのコンピュータに関連付けられているIPアドレスのリストは、Chromeのエクステンションの下部にあります。
デバイス上でテキストフィールドにIPアドレスを入力します。

デバイスが接続されている場合、Shadowは、ディスプレイ照度の自動調節またはスリープ状態になるのを防ぐことができます。

3. Inspecting & debugging the page on your device
In the Chrome Extension, click on the “< >” button next to the device you’d like to inspect or debug and the Developer Tools window will open; you can use remote inspection on one device at a time.

3. お使いのデバイスでページを調査&デバッグ
Chromeのエクステンション上で、接続したデバイスの名前の横にある “<>“ボタンをクリックすると、1デバイスにつきひとつの開発ツールウィンドウが開き、調査またはデバッグをすることができます。

[ 目次へ戻る ]

iOSアプリケーションのインストール

続いてはiOSアプリのインストールです。
Android版もあるのですが、Android端末を持っていないのでここでは割愛します。

今回は僕のiPhoneと(嫁の)iPadにインストールします。


[ 目次へ戻る ]

デバイスを接続してみる

Macのヘルパーアプリケーションの起動・Chromeにエクステンションを入れ、対象デバイスにアプリケーションをインストールしたら、いよいよデバイスとコンピュータの接続です。

デバイスのAdobe Shadowアプリケーションを起動して、コンピュータ名が検出されているか確認します。

検出されていることを確認したらデバイス側でコンピュータの名前をタップします。
するとパスコードが表示されるるので、Chrome側のエクステンション上でそのパスコードを入力しましょう。

もしコンピュータが検出されない場合は、下記画像のようにデバイスで+ボタンで接続を追加します。
デバイス側の入力フォームにChromeエクステンション上に書かれている自分のコンピュータのiPアドレスを入力します。
するとパスコードが現れるので、Chrome側のエクステンション上でそのパスコードを入力すれば接続することができます。

接続出来ましたら今開いているサイトがデバイス側でも表示されます。
ページやタブを移動・更新するとデバイス側でも更新されます。

注意が必要なこととして、画面をミラーリングしているわけではないので、ログインが必要なサイト等のアクセス制限のあるサイトはChrome、デバイスの両方で操作をしないといけません。
たしかhost指しててもデバイス側では見れなかった気がします。

サイトによってはスマホ版が表示されず、モバイル(ガラケー)版で表示される場合があるようです。

また、デバイス側で画面遷移をしても、Chrome側で反映されるわけではありません。
基本はChromeで操作をしましょう。

[ 目次へ戻る ]

インスペクタ機能の使用感

WEB開発には欠かせないインスペクタ機能を使ってみます。

Chromeエクステンション上でデバイスの名前の右にある「<>」をクリックすると、weunreのインスペクタが起動します。
あ、そうなんだ、weinre使ってるんだ。へー。

というかweinreまんまだなコレ。
わざわざサーバー立てなくていい分、weinreをそのまま使うよりは楽かもしれません。

実際にソースを見ながら扱ってみましたが、使用感はFirebugとかChromeのデベロッパーツール、WebkitのWebインスペクタとなんら変わりは無いです。

スマホサイトの振り分けをしている場合には、なかなかソースは見れないですし、変更のプレビューもダイレクトにできないですが、これがあればFirebugとかデベロッパーツール、Webインスペクタでこれまでやってきたように手軽に確認ができそうです。

Safariのユーザーエージェントで切り替えて確認するのが常套手段な気がしますが、実際の画面見ながらってのはけっこういい気がします。

しかしながらiOS版はまだまだ不安定なようで、使用するタイミングによっては動作しなかったりすることもあります。
もっと安定して正式版が出れば、エミュレータよりもかなり有用なツールになるはずです。
今後の更新に注目したいところです。

関係ない結論:
wi-fiでのデバイス接続は便利。
AdobeはFlash以外頑張れ。超ガンガレ。

これ書いたり実際にいじったり、活用するのを妄想したりしてたら、自分専用iPad欲しくなってきたよ。

[ 目次へ戻る ]