スマートフォンサイトの開発環境としてEdge Inspectを利用する

Adobe Edge Inspectは、PCに表示しているWebページを、LANに接続しているスマートフォンに同期して表示するツールです。スマートフォンの操作なしでWebページの表示確認が行えるため、効率的にデバッグできる開発環境が構築できます。

Edge Inspectを利用するための準備には、以下の3つのインストールを行います。
またその際、Adobe IDの取得が必要になります。

  • 開発用PC用のEdge Inspect
  • 開発用PC用のGoogle Chrome拡張機能
  • スマートフォン用のEdge Inspectクライアントアプリ

【コンテンツ】

  1. 開発用PCにEdge Inspectをインストールする
  2. 開発用PCのGoogle Chromeに拡張機能をインストールする
  3. スマートフォンにクライアントアプリをインストールする
  4. 開発用PCとデバイスを同期させる
  5. Edge Inspectのさまざまな使い方

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Android 4.0.4/4.4.2
Adobe Edge Inspect CC(PC版) 1.5.486
Adobe Edge Inspect CC(Chrome拡張機能) 1.0.424.2
Adobe Edge Inspect CC(Androidアプリ) 1.0.451

開発用PCにEdge Inspectをインストールする

インストールするためには、Adobe IDを持っていなければなりません。
Adobe IDを持っている場合は、Creative Cloudを起動し、Apps画面からインストールします。

Adobe IDを新規に取得する場合や、Creative CloudをインストールしていないPCの場合は、下記ページにアクセスし、[ダウンロード]をクリックします。
https://creative.adobe.com/ja/products/inspect

Edge Inspect ダウンロードページ

[サインイン]をクリックします。Adobe IDを取得していない場合は、[Adobe IDを取得]をクリックします。

Adobe ID サインイン画面

下記画面で[サインイン]をクリックすると、セットアップファイルのダウンロードが開始されます。

Edge Inspect ダウンロード画面

ダウンロードされたセットアップファイルを実行し、Creative CloudとEdge Inspectをインストールします。
インストールが完了したら、[インストール済み製品]にEdge Inspectが追加されます。

Creative Cloud Apps 画面

インストールが完了したら、Edge Inspectを起動します。
最初の起動時には下記のダイアログが表示されますので、[はい]をクリックします。

Edge Inspect 初回起動ダイアログ

なお、Edge Inspectは起動してもウィンドウは表示されません。
タスクトレイをみると起動しているのが確認できます。

開発用PCのGoogle Chromeに拡張機能をインストールする

下記ページにChromeでアクセスし、[拡張機能をダウンロード]をクリックします。
https://creative.adobe.com/ja/products/inspect

Edge Inspect ダウンロードページ

Chromeウェブストアに移動しますので、
[+ 無料]をクリックして、[Adobe Edge Inspect CC]をインストールします。

Chrome拡張機能インストール画面

スマートフォンにクライアントアプリをインストールする

iPhoneの場合はApp Storeに、Androidの場合はPlayストアにアクセスして、
「Adobe Edge Inspect」をインストールします。

Edge InspectのAndroidアプリ

開発用PCとデバイスを同期させる

すべてのインストールが完了したら、デバイスを接続して画面を同期させ、Edge Inspectを実際に使ってみましょう。
なお、無償版では同時接続できるデバイス数は1台だけです。

開発用PCのIPアドレス確認

同期させるにあたって、開発用PCに割り振られたIPアドレス情報が必要ですので、あらかじめ確認しておきます。

開発用PCのEdge Inspect起動

スタートボタンから、[Adobe Edge Inspect CC]を選択して起動します。
デスクトップにショートカットが必要なら作成しておいてください。

クライアントアプリのEdge Inspect起動

スマートフォン側でアプリを起動したら、新しい接続を追加するため、[+]をクリックします。

接続追加画面

開発用PCのIPアドレスを入力し、[接続]をクリックします。

IPアドレス入力画面

開発用PCが正しく認識されると、6桁のパスコードが表示されます。

パスコード表示画面

Chromeの拡張機能にパスコード入力

開発用PCに戻り、ChromeのEdge Inspect拡張機能アイコンをクリックします。

Chrome拡張機能アイコン

パスコードを入力してEnterキーを押すと、画面の同期が開始されます。
一度同期設定がされると、次回からはパスコードの入力は必要ありません。

パスコード入力画面

Edge Inspectのさまざまな使い方

操作は、Chromeの拡張機能アイコンをクリックして行います。

デバイスの切断

接続したデバイスを切断するには、切断アイコンをクリックします。

切断アイコン

スクリーンショットの撮影

スマートフォンのスクリーンショットを撮影するには、カメラアイコンをクリックします。

カメラアイコン

撮影したスクリーンショットの確認

撮影したスクリーンショット画像を確認するには、フォルダアイコンをクリックします。

フォルダアイコン

開いたフォルダには、スクリーンショットのPNGファイルと一緒に、撮影時のデバイスやOS情報を記述したTXTファイルが保存されています。

保存先のフォルダを変更する場合は、Chrome拡張機能アイコンを右クリックしてオプションを選択します。

リモートでのデバッグ

デバイス名の右横にあるリモート検査アイコンをクリックすると、Chromeデベロッパーツールのようなデバッグウィンドウが開き、スマートフォンに表示されているページのHTMLやCSSを確認しながらリモートでデバッグすることが可能になります。

デバッグウィンドウ

スポンサーリンク

ページの先頭へ