Tag Archives: Chrome

Adobe Shadow:全ウェブ制作者必見!これがAdobeの本気!

0
Filed under 仕事ツール
Tagged as , , , , ,

ちょっと書きそびれているうちに遅くなってしまったネタです。。
最初に書こうと思っていたのは3月頭。
そう、new iPad発表の頃の話です。RetinaになったiPad、日本語にも対応したSiriを入れたiOS 5.1、予想を超えたものではないだけに、順当な感じがしてそれほど興奮はしなかったのですが、その頃、シレッと出てきたのがAdobe Shadow
Flashの状況とか、その他のアプリの話とか、「もうAdobeって時代じゃないよなー」なんて思いながら、そのShadowをチェックしてみたら、、
え!すげーーー!!何これ!そうそう!こういうのが欲しかったんだよ!と、悶絶!
そう、そこにはAdobeの本気が詰まっていたのです。
最後にone more thingがあるので、ちょっと長いエントリですが、是非最後までお付き合いください。

Adobe Shadowとは

Adobe Shadowについては、まず、ここの記事を読むといいと思います。

簡単に言ってしまえば、Adobe Shadowとは、複数のデバイスでのWEBプレビューを超簡単に行えるツールなのです!
PC/MacのChromeと、他のデバイスを関連付けて、あとはChromeで操作するだけで、各デバイスが自動的に同じページを表示してくれる、というものです。
それを踏まえて次のADOBE TVの動画を見てみるとよく分かります。

ただのビューアーでは終わらなくて、HTMLソースでエレメントを選択したら端末上でパーツがハイライト出来たりもします!

インストール!

必要なソフトは全て無料ですのでサクサクインストールしていきましょう。
まず、↓ここからMacのアプリをダウンロードし、pkgファイルをダブルクリックしてインストールします。ちなみに、Windows用はWindows 7のみ対応のようです。

次に、iOSアプリをダウンロードしてインストール。

AndroidアプリのAdobe Shadowもインストール。

最後に、Chromeエクステンションをインストールします。Mac側のブラウザとしては現状Chromeのみです。

これで準備は完了!

試してみた!

まず、ChromeのShadowエクステンションを起動します。

これで接続を待っている状態です。
次に、デバイス側のアプリ側を起動し表示されるパスコードをChromeの方に入力すると接続されます。
準備これで終わりです。簡単!
あとは、Chromeでタブを切り替えたりすると、表示されているページがShadowで繋がったデバイスにも表示されます。
ちなみにこの接続はBonjour機能でつながっているようです。
で、試してみたテストの動画をまとめてアップしました。

同期していますねー。

さらに編集も出来る!

FirefoxならFirebug、Chromeならデベロッパーツールがあり、表示している要素のCSSとかHTML構造をリアルタイムに変更して表示を確認することが出来ます。
なんと、このShadowにはそれが備わっていて、つまり、「iPadで表示がちょっとくずれるなー。ここのCSSを修正してみようかな?」なんてことがその場で出来るのですよ!!!
デバイスにつながっている時にChromeのShadowエクステンションを開き、デバイス名の右側にある <> 部分をクリックすると開きます。

ここで気づいたのですが、このリモートウェブ解析ツールはweinreというオープンソースライブラリのようです。

つまり、デバイスを簡単に繋げられる機能:Bonjour、リモートウェブ解析機能:weinre、ブラウザのプラグイン機能を提供しているChrome、それらをうまく組み合わせて綺麗にまとめあげたのがAdobe Shadowということになりますね。
しかし、すごすぎる!さすがAdobe!!見直しました!

One More Thing:Release 2の神対応

という記事を書いてアップしようとして確認の調査をしていたら、4月12日にRelease 2が出ていたことに気づきました。
※つまり、ここまでの記事はRelease1を元に書いています。
スルーしてもいいかな、と思ったのですが、新機能の中に一つ気になる機能が。

“Local Host URL Support”
ェ、、マジ!?
と、小さく叫びつつ、バージョンアップ。
そして、試してみました…。

ろ、ろ、ローカルホストだぁぁ!!!!

これもやっぱりいじれるーー!!
他にもlocalhostにある制作中のウェブサイトとかも、普通に動きましたよ!
そして、今のところこれが無料という…。
マジ神アプリですよ。

localhostにうまくつながらない場合

(2012/05/25 追記)
「設定はちゃんとしているはずなのにlocalhostにうまくつながらない」という場合、IPアドレス指定でうまくいく可能性があります!

http://localhost/mywebsite/index.html
-> http://192.168.0.10/mywebsite/index.html

参考情報:

私もうまくいかない時に、これでうまくいきました!

にほんブログ村 IT技術ブログ IT技術メモへ

[AD]

↓ネ申すぎるAdobeさんに敬意を評してCS5.5を紹介。マスターコレクション!

Adobe Creative Suite 5.5 Master Collection Macintosh版 (旧製品)

Adobe Creative Suite 5.5 Master Collection Macintosh版 (旧製品)

定価:¥ 409,320

カテゴリ:DVD-ROM

発売日:2011-05-20


↓Windows版のほうが安くなっている!

Adobe Creative Suite 5.5 Master Collection Windows版 (旧製品)

Adobe Creative Suite 5.5 Master Collection Windows版 (旧製品)

定価:¥ 409,320

カテゴリ:DVD-ROM

発売日:2011-05-20