[Tool] スマホ端末のWebページ表示テスト／デバッグがすんごく楽になるAdobe Shadowがすごい！！
こんにちは、@yoheiMuneです。
今日は、Adobe Shadowという無料なのに、スマホ向けWebページの表示テストやデバッグですんごく重宝する ツールを紹介させて頂きたいと思います。なんすかこれ！？Adobeすごいと思ったツールです。
機能としては、スマートフォンでWebページを表示してレイアウトとかJSの動きとかを確認するようなテストにおいて、 同時に複数台のスマホでページを表示することが可能になるというツールです。
紹介動画が以下で公開されています。
http://adobe.ly/y8TyJG
また、後ほど詳しく書きますが、スマホで表示している内容（HTML,CSS）を動的に書き換えたり、JavaScriptを追加実行できるなど、デバッグ機能も大変充実しています。
インストールするURLは、以下にまとめられていますので、ご参照ください。
http://labs.adobe.com/downloads/shadow.html
なお、WindowsXPやMacOS10.5以下はサポートされていないようです。
上記の仕組みを実現するために、PC、Chrome、スマホにそれぞれアプリやプログラムをインストールする必要があります。
*1 同一LAN上にPCとスマホが存在する必要があります。
*2 大きいLANの場合には、スマホアプリの「+」ボタンで、PCのIPアドレスを指定できます。（Macの場合は、システム環境設定->ネットワーク->詳細->TCP/IPなどでPCのIPアドレスが表示されます。
*3 e-mobileポケットWifiのLANで行う場合には、デフォルトでは、LAN内の機器同士の通信が禁止されているため、e-mobileの設定画面からその設定を解除する必要があります（ここ自分ははまりましたw）。
PCとスマホがリンクされれば後はお手のもの。PCで表示した画面が、スマホでも表示されるはずです。
各種トラブルシューティングは、以下のAdobeサイトにて確認できます。
http://forums.adobe.com/community/labs/shadow
撮った写真は、カメラアイコン横のフォルダーっぽいアイコンから、見ることができます。
ここで、変えながら見た目の調整をできるなんて、神憑っています（驚。。
あとそのウインドウで、Chrome開発者ツールと同じく、JavaScriptの実行もできちゃいます。
Chromeで開発、デバッグしている感覚を、スマホ上でも持てるのですんごく便利です。
- http://www.adobe.com/jp/devnet/html5/articles/browser-testing-across-devices-with-shadow.html（Adobeの日本語ページ）
- http://www.publickey1.jp/blog/12/shadowweb.html（Publickeyさんのページ）
- http://cuaoar.jp/2012/03/adobe-shadow.html（akihiro kamijoさんのページ）
セットアップでつまづいてしまいました（スマホからPCが見つからない）が、それを超えるとさくさく使えていい感じでした。
Adobe Shadowを導入してからは、ページのマークアップ後に、すぐに手元のiPhoneやAndroidで画面表示確認ができるので、 大変便利になりました。
これからはAndroid10機種くらいの表示確認をするので、すごく重宝しそうです。
以上、便利ツールのご紹介でした。
長文にも関わらず最後までご覧頂きましてありがとうございました！
今日は、Adobe Shadowという無料なのに、スマホ向けWebページの表示テストやデバッグですんごく重宝する ツールを紹介させて頂きたいと思います。なんすかこれ！？Adobeすごいと思ったツールです。
Adobe Shadowとは
Adobe Shadowは、Adobe Labから出ている無償ツール（記事執筆時）です。機能としては、スマートフォンでWebページを表示してレイアウトとかJSの動きとかを確認するようなテストにおいて、 同時に複数台のスマホでページを表示することが可能になるというツールです。
紹介動画が以下で公開されています。
http://adobe.ly/y8TyJG
また、後ほど詳しく書きますが、スマホで表示している内容（HTML,CSS）を動的に書き換えたり、JavaScriptを追加実行できるなど、デバッグ機能も大変充実しています。
Adobe Shadowのセットアップ
Adobe Shadowのセットアップは以下の内容を行います。- Adobe ShadowプログラムをPCにインストールする
- Goggle Chrome エクステンションをChromeにインストールする
- 接続するiPhone, Android, Kindleにアプリをインストールする
インストールするURLは、以下にまとめられていますので、ご参照ください。
http://labs.adobe.com/downloads/shadow.html
なお、WindowsXPやMacOS10.5以下はサポートされていないようです。
Adobe Shadowの動く仕組み
使う前に、ちょっとだけ仕組みのお話を。仕組みとしては以下のようです。- PC上でAdobe Shadowを動かすプログラムを起動させる（サーバー的なもの？）。
- PC上のGoogle Chrome（Adobe Shadow用のエクステンションを入れる）と、表示制御したいスマホ（Adobe Shadow用のアプリを入れて起動しておく）をリンクさせる。
- Chromeで新規ページ表示やリページ遷移をすることで、その情報がスマホにわたって、スマホも情報が表示される。 動きとしては、Chromeから各種スマホにPUSH通知をしているという感覚です。
上記の仕組みを実現するために、PC、Chrome、スマホにそれぞれアプリやプログラムをインストールする必要があります。
Adobe Shadowを実際に使ってみる
実際に使うための、手順は以下となります。- Adobe Shadowのプログラムを起動する
- PCのChromeブラウザを立ち上げて、Adobe Shadowのエクステンションをクリック（つなぐアプリ募集中てきな表示がでるはず）。
- リンクしたいスマホでアプリを立ち上げる。
- スマホの画面で、リンクしたいPCが表示される（*1 *2 *3）ので、それをタップして、６桁の数値をみる。
- ６桁の数値を、Chrome Extensionの入力欄に入力する。そーするとつながります。
*1 同一LAN上にPCとスマホが存在する必要があります。
*2 大きいLANの場合には、スマホアプリの「+」ボタンで、PCのIPアドレスを指定できます。（Macの場合は、システム環境設定->ネットワーク->詳細->TCP/IPなどでPCのIPアドレスが表示されます。
*3 e-mobileポケットWifiのLANで行う場合には、デフォルトでは、LAN内の機器同士の通信が禁止されているため、e-mobileの設定画面からその設定を解除する必要があります（ここ自分ははまりましたw）。
PCとスマホがリンクされれば後はお手のもの。PCで表示した画面が、スマホでも表示されるはずです。
各種トラブルシューティングは、以下のAdobeサイトにて確認できます。
http://forums.adobe.com/community/labs/shadow
Adobe Shadowの便利な機能を紹介
Adobe Shadowは、複数のスマホで同時に同じページを表示できる機能がすごいのはもちろん、以下の機能もすごいと感じました。スマホ画面のスクリーンショットが一括で撮れる
Chrome Extensionのカメラアイコンを押すと、リンクしているスマホすべてのスクリーンショットが撮れます。撮った写真は、カメラアイコン横のフォルダーっぽいアイコンから、見ることができます。
スマホ画面に表示しているHTML, CSSを修正、JSも実行できる
Chrome Extensionの接続している各スマホ行の「＜＞」をクリックすると、そのスマホに表示されている Chrome開発者ツールと同じUIのウインドウが出現し、HTML, CSSを閲覧、編集できるようになります。ここで、変えながら見た目の調整をできるなんて、神憑っています（驚。。
あとそのウインドウで、Chrome開発者ツールと同じく、JavaScriptの実行もできちゃいます。
Chromeで開発、デバッグしている感覚を、スマホ上でも持てるのですんごく便利です。
参考ページ
Adobe Shadowについて、他にも解説したブログがありましたので、ご紹介させて頂きます。- http://www.adobe.com/jp/devnet/html5/articles/browser-testing-across-devices-with-shadow.html（Adobeの日本語ページ）
- http://www.publickey1.jp/blog/12/shadowweb.html（Publickeyさんのページ）
- http://cuaoar.jp/2012/03/adobe-shadow.html（akihiro kamijoさんのページ）
最後に
このツールを知ったときには、本当にびっくりしました。セットアップでつまづいてしまいました（スマホからPCが見つからない）が、それを超えるとさくさく使えていい感じでした。
Adobe Shadowを導入してからは、ページのマークアップ後に、すぐに手元のiPhoneやAndroidで画面表示確認ができるので、 大変便利になりました。
これからはAndroid10機種くらいの表示確認をするので、すごく重宝しそうです。
以上、便利ツールのご紹介でした。
長文にも関わらず最後までご覧頂きましてありがとうございました！
