Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

マルチデバイス対応のウェブ開発を効率化する「Adobe Edge Inspect」の使い方

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本記事は、フローが煩雑になりがちなマルチデバイス対応のWebページ制作を効率化するツール「Adobe Edge Inspect」の概要、導入手順、使い方を紹介します。Edge Inspectは現在Adobe Creative Cloudから入手でき、無償メンバーでも利用できます。

目次

スマートフォン開発事情

 スマートフォン向けウェブサイトの開発というと、どのような現場を想像するでしょうか。PCでコーディングして、ファイルを更新するごとにスマートデバイス端末(以下、端末)を操作してウェブページにアクセス、表示確認をして、またPCにもどってコーディング、端末でリロード、といったフローではないかと思います。あるいは、問題を報告するために端末ごとに画面キャプチャを撮ってメール送信…という場面もあるかもしれません。いずれにせよ、ずらりと並んだマルチデバイス環境と格闘しているのではないでしょうか。

 Adobe Edge Inspect(以下、Edge Inspect)は、この煩雑なフローを効率化する支援ツールでもあり、同時に強力な開発ツールでもあります。

 検査対象のページを端末に表示し、リロードからキャッシュ破棄までの操作に加えて、撮影したスクリーンショットをPCに転送するといったことが、すべて開発環境である手元のPCから手を離すことなく行えます。これだけでも大幅な効率化が図れると思いますが、さらに、Edge Inspectは端末に表示されているページ要素を動的に書き換えたり、CSSルールを編集する開発ツールも内蔵しています。いわゆるリモートデバッグと呼ばれるものですが、IPやツールの読み込みなどを気にすることなく、Edge Inspectをインストールするだけで使用することができます。

Edge Inspectで複数端末でのテストを一元管理
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に端末を接続する方法もあります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 中農 稔(面白法人カヤック)(ナカノ ミノル)

    株式会社カヤック HTMLファイ部所属。フロントエンドエンジニア。HTML5を駆使してアニメーションやミニゲーム実装を中心に、広告キャンペーンを手がける。これまでの実績に「Domino's App feat.初音ミク」「RAIZIN」など。好きな言語はJavaScript、好きな動物は鳩、好...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5