Shadowが便利そうなので使ってみたこの記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。Shadowがデバック作業で便利そうなので実際に使ってみました。使ってみたので、ざっくりとツールに関する紹介と使用感を書いてみようと思います。http://labs.adobe.com/technologies/shadow/WEB制作におけるフロントエンドの開発を素早く合理的に行うことができるコードプレビューツール。ソースを表示してどのコードかを調べたり、変更できたり...要はFireBugやChromeのデベロッパーツール、webkitのWEBインスペクタみたいなものです。Releaseという項目のなかにリンクがあるのでMacならdmgを、Windowsならmsiをダウンロード。Englishと書いてあるので、今後マルチランゲージ化するか、それぞれの言語版が出るのでしょうか。日本語早くリリースされるといいね。Shadow.pkgを実行。インストール中は選択肢があるわけでもないので、通常どうりインストールしてください。minimized.」と書いてある画面が起動します。このHelperアプリケーションを立ち上げておかないと、iOS側で連結先として認識しないし、Chromeのエクステンションも動作しません。隠したり最小化したらいいよと書いてあるので、とりあえず隠しておきます。起動するのが面倒で常時使いたい人は、ログイン時に開くオプションとか設定してあげたらいいんじゃないかな。裏で動いてるだけならメニューバーとかタスクバーとかに常駐させてアプリケーションアイコンを隠させて欲しい。これできるんだろうか?できるひと教えて!あと、ブラウザで勝手にForumsが開くけれど、今は一旦閉じる。Extensionをインストール次にChromeのエクステンションを入れます。StoreにアクセスしてChromeに追加ボタンをポチり。「sd」ってアイコンが出てヘルパーアプリケーションを起動している状態なら青くなります。起動してなければ灰色なのでヘルパーアプリケーションを起動しましょう。Guide」というページが表示されます。英語とかそんなにわかんないので、とりあえずGoogle先生に翻訳していただいて、適当に整形してみました。Shadowは、モバイルブラウザをターゲットにしたWebデザイナーや開発者のためのツールです。Shadowをインストールしたら、デバイスと同時に使用することできるようになります。JavaScriptの変更を見ることができます。同じネットワーク上にデバイスがあることを確認してくださいShadowは、同じネットワーク上にコンピュータとデバイスが存在する必要があります。自動検出するためにはコンピュータとデバイスが同じサブネット上にある必要があります。コンピュータに表示されない場合、マニュアル接続を試してください。自動検出Shadowを実行するデバイスはShadowを実行しているコンピュータを探します。あなたが接続をしたいコンピュータ名をタップしてください。Chromeエクステンションへのパスコードを入力します。これでコンピュータとデバイス間の無線接続が完了します。接続するコンピュータが見つからない場合は、マニュアル接続を実行するために、”+”ボタンをタップします。お使いのコンピュータに関連付けられているIPアドレスのリストは、Chromeのエクステンションの下部にあります。デバイス上でテキストフィールドにIPアドレスを入力します。デバイスが接続されている場合、Shadowは、ディスプレイ照度の自動調節またはスリープ状態になるのを防ぐことができます。“<>“ボタンをクリックすると、1デバイスにつきひとつの開発ツールウィンドウが開き、調査またはデバッグをすることができます。]iOSアプリケーションのインストール続いてはiOSアプリのインストールです。Android版もあるのですが、Android端末を持っていないのでここでは割愛します。ダウンロード今回は僕のiPhoneと(嫁の)iPadにインストールします。]デバイスを接続してみるMacのヘルパーアプリケーションの起動・Chromeにエクステンションを入れ、対象デバイスにアプリケーションをインストールしたら、いよいよデバイスとコンピュータの接続です。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欲しくなってきたよ。]コメントは受け付けていません。