knotと申します。以後お見知りおきをお願いします。
当社でもモバイル端末を使ったプロダクトや案件を多数抱えていますが、見た目、特に機種の多いAndroid端末でのチェックには大きな手間を要します。
チェック用に多数の機種を揃えて提供する企業もあるようですし、NTT DoCoMoなどはこんな一種豪快なサービスを用意する程です。
実際、手元にある機種であっても、いちいち複数端末で確認する手間は馬鹿になりません。
そこで今回、それらの検証方法の一つとして、2012年9月24日に正式公開（英語版のみ）となった、Adobe Edge Inspect（以下Edge Inspect）というサービスをちょっと試してみました。
概要
PCのブラウザ（Chrome）上で表示しているウェブサイトを、リアルタイムでモバイル機に同期表示させるアプリです。
Edgeとは、Adobe社が新たに展開するWeb開発環境の総称で、html5+JavaScriptによるアニメーション出力ツールである《Edge Animate》が代表的です。
ダウンロード
InspectをはじめとするEdgeファミリーのツールを利用するには、CreativeCloudの登録が必要です（登録は無料です。また、AdobeIDが登録済ならば、そのまま使うことができます）。
AdobeCreativeCloudにログイン後、ページ右カラムから、「Edge ツールおよびサービス」の《In》を選択してください。（Edge Inspectのトップページからダウンロードを選択した場合も、現状、Creative Cloudのトップに遷移するようです）。
インストール
Edge Inspectは、以下３つのアプリケーションから構成されます。
- PCにインストールし、常駐するアプリケーション
- Google Chromeブラウザ用プラグイン
- 各モバイル端末ごとのアプリケーション
いずれも、前述のEdge Inspectのサイトからダウンロードページへの遷移が用意されています。
１：PCへのインストール
ダウンロードしてきたアプリケーションを、インストーラーの指示に従ってインストールしてください。
- 32bit版: \Program Files\Adobe\Adobe Edge Inspect\BonjourPSSetup.exe
- 64bit版: \Program Files (x86)\Adobe\Adobe Edge Inspect\BonjourPSSetup.exe
インストール終了後、一旦アプリケーションを再起動（タスクバーのアイコンを右クリック→《Quit Adobe Edge Inspect》でいったん終了）してください。
２：Chrome拡張
Google Chromeでプラグインの配布ページにアクセスし、プラグインを追加してください。追加が完了すると、Chromeのツールバー上に、《In》の拡張機能アイコンが表示されます。
アイコンの状態は、PCアプリの状態や、新しい端末を検知した時に変化するようだ。
３：モバイルデバイスにアプリをインストール
各端末用アプリのダウンロードページは以下の通りです。
- iOS版 : http://itunes.apple.com/app/id498621426
- Android版：https://play.google.com/store/apps/details?id=com.adobe.shadow.android
個別に見つけたい場合、それぞれのマーケットへアクセスし《Edge Inspect》で検索してください。
起動
１：PCのアプリを起動
アプリを起動します。起動時にはAdobeIDによるログインが必要です。
以降、アプリはタスクバーに常駐しますが、操作はほぼChromeプラグインからなので、起動後はあまり意識する必要はありません。
２：端末側のアプリを起動する
このとき、PCと端末は、（社内なら社内ネットワーク、等）同一のローカルネットワーク内にいる必要があります。
起動画面には、接続可能なPCおよび、過去に接続したことのあるPCが一覧で表示されます。
一覧表示されているのは、接続したことのあるor現在接続できるPC。
どのPCと同期するか選択すると、画面に大きくパスフレーズが表示されます。
（新しい端末の場合、これと同時にPC側の拡張機能アイコンにも「＋」が表示されるようです）
これをPC側に入力することで接続できる。
３：Chromeの《In》アイコンをタップ
アイコンをクリックすると、現在同期可能な端末が表示されます。
端末を選び、先ほど端末側に表示されたパスフレーズを入力すると、同期が開始されます。
なお、一旦接続した端末ならば、《PC側でDisconnect→端末側から接続》という手順で、再度パスフレーズを入力することなく接続が可能です。
遷移・更新
PC側のChromeブラウザでWebページを開くと、端末側も同期して同じWebページを開きます。
このとき注意すべきなのは、PC側から端末側に送られるのは、画面のHTML自体ではなく、あくまでURLらしいという点。
そのため、動作は以下のようになります。
- デバイスの種類ごとに振り分けられているページは、それぞれのデバイスに応じたページに振り分けられます。
- ログインが必要なページでPC側のみログインすると、端末側がログイン画面のまま取り残されてしまうようです。※PCと端末でそれぞれログインすれば回避可能だが、そこで同期が途切れてしまう場合があるようです。
- PCのローカルファイルは同期されません。
- 同様に、ブラウザが独自に表示しているスタートページ等も同期されません（これは当然といえば当然ですが…）。
また、それ以外の点では、以下のような動作をします。
- 端末側のWeb画面でリンクをタップするなどして、独自にページ遷移することも可能ですが、その後PCからの同期がかかると、そちらが優先します。
- PC側から接続を切断しても、端末側ではタイトル部分にDicconnectedと表示されるだけで、Webページの表示はそのまま残ります（ただしそこで、Disconnectedされた端末側でWeb画面を操作すると、Android版ではアプリが強制終了する場合があるようです）。
- 前述のとおり、PCとの同期を無視して端末側独自にページ遷移させることは可能ですが、端末の画面にはナビゲーションボタン（戻る、ホーム等）がない点には注意が必要です。（ちなみに《同じページをブラウザで開く》ことは端末側のメニューから可能）
インターフェース
Edge Inspectはブラウザプラグインを中心にしているためか、シンプルな構成のツールです。
以下のようなメニュー操作があります。
タイトル
- Authorized Devices：認証済の端末一覧です。ただし履歴のようなもので、ここから接続端末を切り替えることはできません。
- Edge inspect for iPad…／Android…： それぞれの端末のマーケットへジャンプします。
- Satisfied with Adobe Edge Inspect?：このツールの評価を送信するフォームへジャンプします。
- Need Help?：ヘルプではなく、フォーラムのレポート投稿画面へジャンプします。遷移には、AdobeIDによるログインが改めて必要です。
切り替えスイッチ
- Turn On/Off Synchronized Browsing:端末との同期のon/offを切り替えるボタンと思われますが、うまく機能していない模様です（2012年10月現在）。
下部のメニュー
- Reflesh:端末の画面を更新
- Show/Exit full screen on devices：端末の画面をフルに使う（端末の画面上部のタイトルおよびメニューを隠す）
- Request screenshot:各端末でスクリーンショットを撮影し、PCのフォルダに送ります。同期されている端末が複数ある場合、一度に撮れます（Shadowで確認）。
また、スクリーンショットだけでなく、画面サイズやOS、URLなどを含んだテキストも同時生成されます。便利。 - Open folder containing screenshots：スクリーンショットのフォルダを開きます。
Windowsの場合 C:\Users\（ユーザ名）\Documents\Edge Inspect
（画像はGalaxy TABのもの）
端末別メニュー
- Disconnect：この端末との接続を切断します。
- Remote Inspection：ソースの確認ツールのようです。
総評
全般としては、シンプルながら便利なツールです。
正式公開とはいえ、メニューの更新や一部機能などで多少不安定な印象はあります。
（特にAndroid版は、URLの転送に失敗しているような動作をする場合がまれにあるようです）。
また、（これはShadowでの経験からですが）やはり同期機能は、複数端末を同時接続すればするほど真価を発揮する、という印象を持ちました。
とはいえ、登録さえすれば無料でもありますし、PCと携帯がリアルタイム同期してページ遷移するのは、ありそうでなかった「オッ」と思う経験です。ご興味のある向きは一度体験してみてはいかがかと思います。