スマートフォンサイトの開発環境として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を確認しながらリモートでデバッグすることが可能になります。

デバッグウィンドウ

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ