Webサイト保持者必見!これは使える超便利!Adobe Shadow

2012 年 3 月 15 日 木曜日 by Koh(2,180 views)

Adobe Shadow

 

パソコン、モバイル端末等、デバイス毎のWebサイト表示確認を煩わしく感じたことはありませんか?今回はそんな悩みを軽減してくれる話題のAdobe Shadowを試してみました。Adobe Shadowは、Web開発者やWebデザイナーに留まらず、ブロガーや個人ホームページ運営者等、Webサイト制作に関わる全ての人の作業効率上、有益なツールになると思われます。

 

Adobe Shadowとは?

 

Adobe Shadowとは、MacやWindowsのブラウザーに表示されているWebサイトが、スマートフォン等のモバイル端末ではどのように表示されるのかを、リアルタイムに確認することができる、リモートプレビューツールです。

 

このAdobe Shadowを使えば、上の写真の様に、iPhoneやAndroid端末等複数デバイスを実際に操作することなく、パソコンでWebサイトを修正しプレビューするだけで、各デバイスに同じサイトを一度にリモート表示させることができるのです。

 

興味を持たれた方は、以下に使用手順を記載しておきますので、一度試してみてください!きっと「おっ!これ使える」っとなりますよ。

 

 

Adobe Shadowを使うための前準備

 

Adobe Shadowを使用するには、各デバイス端末毎にアプリをインストールする必要があります。また、パソコンのブラウザーとしてGoogle Chromeがインストールされている必要があります。今回はWindows7、iOS5.1(iPhone,iPad)の環境で試してみます。

 

1.パソコン(Windows7)へ専用アプリをインストール

 

Adobeのダウンロードサイトを開き、以下に該当するアプリをダウンロードしインストールします。WindowsXPはサポート外ですので注意してください。

Shadow Labs Release

 

 

2.Google Chromeへ専用アドオンツールをインストール

 

Adobeのダウンロードサイトを開き、以下をクリックすると、Chrome Web Storeの「Adobe Shadow」のアドオンが表示されますので、「ADDED TO CHROME」ボタンを押下してください。Chromeブラウザーに専用アドオンツールがインストールされます。※事前にGoogle Chromeのインストールが必要です。

Shadow Browser Extensions

 

 

3.iPhone、iPadへ専用アプリをインストール

 

以下よりダウンロードできますので、インストールしてください。

Adobe Shadow - Adobe Systems Incorporated radiko

 

以上でAdobe Shadowを使うための前準備は終了です。

 

 

実際にAdobe Shadowを使ってみる

 

1.パソコンにインストールした「Adobe Shadow」を起動する

 

事前にパソコンにインストールした「Adobe Shadow」を起動します。以下の画面が表示されていることを確認してください。

 

Adobe Shadow

 

 

2.Google Chromeを起動する。

 

ブラウザーGoogle Chromeを起動します。起動すると、右上に「Sd」というアイコンが青色になっていることを確認してください。青色は、「Adobe Shadow」が使える状態を意味しています。

 

Google Chrome

 

 

3.iPhoneにインストールした「Adobe Shadow 」を起動し、パソコンと接続する。

 

iPhoneやiPad等のデバイスにインストールしたAdobe Shadowを起動します。そうすると、左下の画像のように同一ネットワーク環境に接続されているコンピューター名一覧が表示されますので、該当するコンピュータ名をタップしてください。そうすると、右下の画像のようにPasscodeが表示されますのでコードを控えておいてください。

 

Adobe ShadowAdobe Shadow

 

次に、パソコンのGoogle Chromeを表示させ、右上の「Sd」ボタンをクリックしてください。そうすると、以下のように接続しようとしているデバイス名が表示された吹き出しが現れますので、該当するデバイス名のPasscode入力欄に上記で控えておいたコード(この例では134845)を入力して接続を行なってください。

 

Adobe Shadow

 

 

4.パソコンのGoogle Chromeでブラウジングしてください。

 

パソコンとiPhone等のモバイル端末の接続が完了したら、パソコンのGoogle ChromeでWebサイトをブラウジングしてください。そうすると、パソコンの操作と連動して、モバイル端末側にも同一のWebサイトが表示されていると思います。

 

あと、私が操作していて気づいたことは、ログインが必要なサイトは各モバイル端末側で個別にログイン操作をしてあげないといけません。端末間でURLアドレス連動しているだけだと思うので、当然の動きだとは思います。

 

Google Chromeと連動して表示が切り替わる

 

本ブログのアクセス数の30%強はモバイル端末ですので、モバイル端末でどのように表示されるのかの確認は必須事項です。このツールの登場は作業効率上とてもありがたいです。皆様も一度お試しください。

 

 

 







コメントは受け付けていません。


Mobile Site Link