Adobe Edge Inspectを利用してデバッグ

- Adobe Edge ツール & サービス -

第37回HTML5とか勉強会

Who?- 轟 啓介（とどろき けいすけ）

- アドビのデベロッパーマーケティング

- 担当はFlashからHTML5まで多岐

- 前職は開発者

- Java/J2EE（7年）、AS3/Flex/AIR（2年）

- HTML/JS/PHPなどは必要な範囲で

- USTREAM番組「ADC OnAir」MC

- http://onair.adobe-adc.jp/

@keisuke322

【緩募】都内で流しソーメンを食べられる店情報を夏までにください。

Adobe & HTMLアドビのWebに対する取り組みや

Edge ツール & サービスの最新情報を掲載。

http://html.adobe.com/jp

Modern Web NeedsModern Tools

HTML5とその関連技術で制作する「Modern Web」、それに対して必要なものは「Modern Tools」である

Adobe Edge ツール & サービス

Edge Animate Edge Reflowpreview

Edge Codepreview

Edge Inspect

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス

Sep 26, 2012 - Debut

Edge Inspectモバイルサイトのリモート検証ツール

Edge Inspect - 3つの特徴- リモートでブラウジング

- 母艦PCの画面遷移が接続されたデバイス上でも追従

- リモートでデバッグ- 母艦PCからデバイス上のHTML画面に対して、Webイン

スペクトが可能（Developer Tools）

- リモートでスクリーンショット- 母艦PCからボタン一発で全デバイスのHTML画面のスク

リーンショットを撮影し、母艦PCに保存

Setup

インストール

PCにインストール

PCのChromeにインストール

デバイスにインストール

Win / Mac Chrome 14+ iOS / Android

入手先- PC用のEdge Inspect（Win / Mac）

- Adobe Creative Cloud から入手（※無償メンバーシップでも入手可能）http://creative.adobe.com/

- PCのChromeブラウザ拡張機能（Chrome 14+）- Chrome ウェブストア（無償）

https://chrome.google.com/webstore/detail/adobe-edge-inspect/ijoeapleklopieoejahbpdnhkjjgddem

- デバイス用のEdge Inspectアプリ（iOS / Android）- iOS（無償）

https://itunes.apple.com/jp/app/adobe-edge-inspect/id498621426

- Android（無償）https://play.google.com/store/apps/details?id=com.adobe.shadow.android&hl=ja

➡ 必要システム構成： http://html.adobe.com/jp/edge/inspect/tech-specs.html

PC / デバイスの接続1.接続デバイスがPCと同じネットワ

ーク上にあることを確認- 自動検出するには同サブネットに

- IPアドレス指定による手動接続も可

2.デバイスをPCのChromeに接続A.自動検出

B.手動接続

3.パスコードの入力

- デバイスのアプリがパスコード生成

- ChromeのInspectに入力

Features

ブラウジング機能- PCのChomeブラウザーでブラウジング

- 接続されている全デバイスで同じURLが表示

- Edge Inspect起動中はスリープモードが解除

- localhostもブラウズ可能- バーチャルホストにも対応

http://blogs.adobe.com/edgeinspect/tag/virtual-hosts/

- ベーシック認証サイトもOK- http://ID:パスワード@mydebugsite.com

- 「file:///」経由でのアクセスは無理

デバッグ機能

各デバイス毎にリモートデバッグを開始する

スクリーンショット機能

同じ名前のPNGファイルとTXTファイルが保存される。TXTファイルにはデバイスや画面情報が記載。

Let’s Inspect Now!

Edge ReflowレスポンシブWebデザイン専用ツール

プレビュー版公開中

NEW!

Edge Codeまったく新しい超軽量コードエディター

プレビュー版公開中

Edge Animate直感的なHTML5アニメーション制作ツール

正式版無償提供中

無償ビルドの機能制限

* 2013年2月15日現在

無償ビルドは Creative Cloud の無償メンバーシップから入手

リリースビルド 機能制限

Edge AnimateHTML5アニメーションツール

1.5 なしAnimate 1.x は完全無償提供

Edge CodeHTML / CSS / JS コードエディタ

preview 3 なし

Edge Inspectモバイルサイトのリモート検証

1.2 同時接続デバイス1台

Edge ReflowレスポンシブWebデザインツール

preview なし

無償サービスの機能制限

サービス 機能制限

Edge Web Fonts無償のWebフォントサービス

正式現在は英文フォントのみ

なし

PhoneGap Buildクラウドでモバイルアプリを作成

正式 privateアプリ1つpublicアプリ無制限

* 2013年2月15日現在

http://onair.adobe-adc.jp

PHPを知ればもっとWordPressが面白い!今日から入門DreamweaverでPHP

Vol. 04

Web情報番組「ADC OnAir」

4.3 WED. 20:30 ONAIR

GUEST　谷口 充（H2O Space）

Adobe & HTMLアドビのWebに対する取り組みや

Edge ツール & サービスの最新情報を掲載。

http://html.adobe.com/jp

Edge Inspect 解説記事セットアップから使い方までを解説。

http://bit.ly/adcjp_inspect