スマートフォン開発事情
スマートフォン向けウェブサイトの開発というと、どのような現場を想像するでしょうか。PCでコーディングして、ファイルを更新するごとにスマートデバイス端末（以下、端末）を操作してウェブページにアクセス、表示確認をして、またPCにもどってコーディング、端末でリロード、といったフローではないかと思います。あるいは、問題を報告するために端末ごとに画面キャプチャを撮ってメール送信…という場面もあるかもしれません。いずれにせよ、ずらりと並んだマルチデバイス環境と格闘しているのではないでしょうか。
Adobe Edge Inspect（以下、Edge Inspect）は、この煩雑なフローを効率化する支援ツールでもあり、同時に強力な開発ツールでもあります。
検査対象のページを端末に表示し、リロードからキャッシュ破棄までの操作に加えて、撮影したスクリーンショットをPCに転送するといったことが、すべて開発環境である手元のPCから手を離すことなく行えます。これだけでも大幅な効率化が図れると思いますが、さらに、Edge Inspectは端末に表示されているページ要素を動的に書き換えたり、CSSルールを編集する開発ツールも内蔵しています。いわゆるリモートデバッグと呼ばれるものですが、IPやツールの読み込みなどを気にすることなく、Edge Inspectをインストールするだけで使用することができます。
対象読者
PC/端末、またはその両対応の開発を行うウェブデザイナー、ウェブアプリエンジニア。
必須環境
Google Chrome。
PCブラウザと端末ブラウザをリンクさせるEdge Inspect
Edge Inspectの特徴として、同期ブラウジング、リモートデバッグ、スクリーンショットの3つの機能があります。
「同期ブラウジング」とは、PC版Google Chromeで表示しているURLを端末でもリアルタイムに遷移・表示する機能です。PCブラウザをいつもの通り操作して、ページ遷移を行うと、端末側でも同じようにページ遷移します。これはPCの画面を転送しているわけではなく、実際に端末側のWebViewを使って表示していますので、PCの画面を転送しているわけではなく、実際に端末側でレンダリングして表示しています。標準ブラウザではなくWebViewということに注意は必要ですが、エミュレーターやシミュレーターとは違う、ネイティブに限りなく近い環境といえます。
また、開発ツールやスクリーンショットなどのほとんどの操作を、Google Chromeにインストールした拡張機能を通して行います（このためGoogle Chromeが必須環境となります）。端末にいっさい触れることなく、開発や調査に専念できることが最大の魅力です。
インストール手順
Edge Inspectを使うにはAdobe IDが必要です。お持ちでない場合は、Adobe Creative Cloudのページから無料で登録できます。なお、無料アカウントで利用できる機能には一部制限があります（詳細は後述）。
インストールするものは、PC版Edge Inspect、Google Chrome拡張機能、端末版Edge Inspectの3つです。ここではMac OS X環境でのインストール手順を紹介します。Windowsでの手順も同様ですので、適宜読み替えてください。
1. PC版 Edge Inspectのインストール
まずは、Edge InspectアプリケーションをPCにインストールします。サイトからインストーラーをダウンロードし、実行してください。
2. Google Chrome拡張機能のインストール
つぎにEdge Inspect専用の拡張機能を、Google Chromeへ追加します。
3. 端末版 Edge Inspectのインストール
最後に端末版 Edge Inspectアプリケーションを、各デバイスのストアからインストールします。
ここでは、端末にiPhoneを想定して解説を進めますが、その他のデバイスでも同様の手順で実行できますので、こちらも適宜読みかえてください。
以上でインストールは完了です。アプリを起動する前に接続環境を確認します。
ネットワークの確認
Edge Inspectの特徴である同期ブラウジングや、リモートデバッグを行うには同じネットワーク上に、各デバイスが存在している必要があります。無線環境があれば、PCと端末を同一のWi-Fiネットワークに接続することで簡単に実現できます。
なお、自動検出にはBonjourというサービスを介して行いますが、OS Xはインストール済み、Windowsの場合は、PC用アプリケーションのインストール時に同時に行われているので特に意識する必要はありません。
有線接続しているMacであれば、インターネット共有を使ってアクセスポイント化したMacに端末を接続する方法もあります。
