ウェブ、ショウジン

Webブラウザで表示している内容をそのまま実機でも表示するAdobe Shadowのインストールと使い方

2012-6-23
Category
Web技術

スマホ(スマートフォン)向けのWebページを実機で確認するときに、いちいち実機でURLを入れて、開いてとやっているのはけっこう面倒。

Adobeが開発したAdobe Shadowと、WebブラウザのGoogle Chrome(およびShadowエクステンション)、デバイス(iPhone,iPad,Android)向けのShadowアプリケーションをインストールして連携させると、Google Chromeで表示しているWebページがそのままiPhoneやiPad、Androidにも表示されるので大変便利。

とりあえずMac OS X Lionにインストールする。

まずAdobe Shadowをインストールする。

Adobe Shadowをインストール

http://labs.adobe.com/downloads/shadow.html

ここで
Download Shadow for Mac
を選択してダウンロード。

ダウンロードしたディスクイメージのdmgファイルをダブルクリックして展開。

パッケージアイコンをダブルクリックしてインストール。

インストールが完了するとそのままShadowが起動するので、これはそのままにしておく。

Google ChromeにShadowエクステンションをインストール

ChromeのWeb StoreからGoogle Chromeのエクステンション(機能拡張)をGoogle Chromeにインストールする。

https://chrome.google.com/webstore/detail/ijoeapleklopieoejahbpdnhkjjgddem

デバイス向けのShadowアプリケーションをインストール

iOS、Androidデバイス向けに用意されているアプリケーションをインストールする。Androidは持っていないのでとりあえずiPhone、iPad向けのものをインストール。

http://itunes.apple.com/jp/app/adobe-shadow/id498621426

このURLから「iTunesで見る」をクリックしてダウンロード画面へ。

*Android向けはGoogle playから。
https://play.google.com/store/apps/details?id=com.adobe.shadow.android

iOS向けのShadowのアプリケーションをダウンロードしたら、iPhoneにインストール。

実際にShadowを使ってみる

Google Chromeに戻ってURLバーの右端にあるShadowのアイコン「Sd」をクリック。

続いてiPhoneにインストールしたShadowを起動させて、表示される自分のマシンの名前をタップ。

するとPasscodeという数字が表示されるので

それをGoogle ChromeのShadowウィンドウの「Passcode」部分に入力して、そのとなりにあるチェックマークアイコンをクリックしてAuthorize(認証)。

これで完了。

Google Chromeで見ている画面がiPhoneのShadow上で表示される。画面(タブやウィンドウ)を切り替えたり、別のページを表示すると、それに合わせてiPhoneのShadow上にもそれが反映される。もしも切り替わらない場合は画面に触れて、下の方にグイッとやれば画面が更新されて、そのときGoogle Chrome側でアクティブになっているページが表示される。

これは便利。

あと、iPhoneのShadowからは、開いているページをSafariで開く、URLをコピーする、スクリーンショットを撮るといったことも出来る。(やってみるとわかるけど、スクリーンショットは意味ない気がする)

以下の記事のとおりにやったら簡単にできました。ありがとうございます。

【スマートフォン】Google Chromeで表示したページをiOS,Androidで表示する方法【Adobe Shadow】

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿