こちらのブログで紹介されていました。早速使ってみたいと思います。
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール - Publickey
実際に使ってみてびっくり!これは作業環境が大幅に変わるかも!
サイトのレイアウトチェックだけでなく、いろんな可能性がありそうです。
このページの概要
Adobe Shadow(アドビ シャドー) って?
ざっくりというと、PCのブラウザで見ているwebページがダイレクトにiPhoneやiPadに表示されるアプリケーション(アプリケーションという表記が正しいかはちょっと疑問)です。
Google Chromeの機能拡張と、iOSアプリ、そしてMac用アプリの組み合わせで、今見ているwebページが別のデバイスで自動的に表示されます。これによって、表示のされ方やカラー、文字の大きさなど、各デバイスで意図した状態になっているのかどうかのチェックが、かなり楽になるのではないでしょうか。
必要なプリケーションの準備
追記:Shadowから「Adobe Edge Inspect CC」に変わりました。
カテゴリ: ユーティリティ
価格: 無料
必要なものは、次の3つですね。
各アプリケーションは、米Adobeからダウンロード、またはリンクがあります。
Adobe Shadow | preview mobile web – Adobe Labs
- PC用のアプリケーション
- Adobe Shadow | preview mobile web – Adobe Labs
- iOSまたはAndroid 用のアプリケーション
- itunesで「Adobe Edge Inspect CC」をみる
- Google Chrome の機能拡張
- Chrome ウェブストア – Adobe Shadow
僕は、Androidデバイスを所有していませんので、iOSアプリをダウンロードしました。
iOSアプリは、iPhone・iPadのどちらでも利用できるユニバーサルアプリになっている模様。
インストール
Mac用アプリケーション
Mac用のアプリケーションはダウンロードしたパッケージをダブルクリックすればいいだけです。大きなファイルではないようなので1分くらいでインストールは終了
iOS用アプリケーション
こちらも、iTunes Store経由でダウンロード>インストールするだけです。簡単。
Chrome用機能拡張
Chromeストアから機能拡張を追加するだけですね。Mac版の機能拡張はココ
これでひとまずAdobe Shadow(アドビ シャドー)を使うためのアプリケーションの準備は終了です。
使い方
使い方については、米アドビで公開しているビデオを見れば一目瞭然。英語の説明ですが、無音で再生しても使うまでの手順は理解できると思います。
Adobe Shadow | Adobe Technology Sneaks 2012 | Adobe TV
Mac用の「Shadow」を起動する
起動する順番が違うと、接続できないので、まずはMac(PC)用のアプリケーションを起動します。
これは始めからバックグラウンドで動いてくれても言い気がするのですが、邪魔なのでドックにしまってもいいかと。
iOSアプリを、iPhone、iPadで起動する
起動すると、自分のMacの名前が一覧に表示されるので、タップします。そうすると、青文字で6桁の「Passcode」が表示されます。
Chromeの機能拡張に「Passcode」を入力
機能拡張がインストールされていると、「Shadow」のアイコンが追加されているはずです。クリックしてiOSアプリで表示されている「Passcode」を入力します。
これで準備が整いました。
パスコードの入力が完了した時点で、その時表示されているwebページがiPhone(iPad)にも表示されているはずです!!
使い道
基本的には、デバイス間での表示チェックが主な用とかと思います。開発者さんやwebデザインなどをされている方には重宝するでしょうね。また、FIrebugっぽいツールが搭載されていて、該当するコード部分を選択すると、どの部分なのかが、iOSデバイス上にハイライトされます。これは、修正したりするのがすごく便利そう。
個人的にはまだまだiOSデバイスでのサイトデザインに不慣れなので、今後はこれを使って確認してみたいと思います。
表示のされ方を動画にしてみました。
よかったらどうぞご覧ください。
暗い動画になってしまいました・・・。見にくい部分もあるかと思いますが、ご了承くださいませ。
なんにせよ、僕にとっては、とっても面白く便利なアプリケーションだと思います。
動画では、奥側の画面でMacのChromeを操作しています。手前に立てかけているiPadには触っていません。
-タブの切り替え(Google検索結果>Yahooジャパン>アドビ)
-リンククリックでのページ表示(Google検索結果>アドビWikipedia)
このような操作が、そのまま反映されるのは素敵ですね。