blog.hakozu.me

モバイルデバイス用のウェブページ確認ツール Adobe Shadow Labs Release 1 を試す

Adobe Shadow Labs Release 1

モバイルデバイス用のウェブページ確認ツール Adobe Shadow Labs Release 1 が公開されましたので、試しました。

このソフトウエアはデバイスをシミュレートするものでは無く、Mac または Windows の Google Chrome とペアリング済みの iOS、Android 端末に Mac、PC 側の操作のみで同じページを表示させるものです。ページの移動やタブの切り替えをするとモバイルデバイス側の表示も自動的に変わります。
常時、表示中のページが同期されていると考えると分かりやすいと思います。
当ブログの様にプラグイン (WPtouch Pro) にて制御をしている場合はあまり必要は無いと思いますが、レスポンシブデザインの場合は威力を発揮します。

※ Labs Release 1 のため、予期せぬ不具合が発生する可能性がありますので、ご注意ください

動作させるためには Google Chrome が必要となりますので、あらかじめダウンロードをします。
次に以下より Adobe Shadow 関連のファイルのダウンロードをしますが、1 つは Google Chrome 機能拡張ですので、Google Chrome にてご覧になると早いですね。

Download Adobe Shadow – Adobe Labs

すべてのインストールが完了後、まず iPhone アプリの Adobe Shadow を起動します (ここでは Mac と iPhone を使用します)
以下の説明は Adobe TV の解説映像にて紹介されていますので、参考にされると良いでしょう。
次に同一ネットワーク内にある Google Chrome を起動している Mac が表示されますのでタップをします。

Adobe Shadow | Adobe Technology Sneaks 2012 | Adobe TV

上記の様なパスコードが表示されますので、Google Chrome 右上にある Adobe Shadow のアイコンをクリックし入力します。

Google Chrome スクリーンショット

以上で設定は終了になり、同一 URL のウェブページが表示されます。

モバイルデバイス名の右側にある[< >] をクリックすると weiner をいう名称の画面が表示され、ページの Elements 等の確認が行え、CSS の値を変更し、確認をすることも可能です。
再現性に関しては分かりませんが、表示されない場面がありました。
また、選択をした箇所がモバイルデバイスのレンダリング画面上に表示されますので、非常に分かりやすいものとなっています。

weinre スクリーンショット

Adobe Shadow を起動中のモバイルデバイスはスリープ状態にはなりませんので、特に設定の変更なく、編集時は Mac のみに集中をしていれば良いので効率的です。
今回は 3 つのモバイルデバイスを使用しましたが、1 つの操作にてすべてが切り替わる様は気持ちが良いですね。

関連しそうな商品

関連しそうな記事

コメント