2013/3/21のHTML5とか勉強会のセッション資料です。

1. Adobe Edge Inspectを
利用してデバッグ
- Adobe Edge ツール & サービス -
第37回HTML5とか勉強会

2. Who?
- 轟 啓介（とどろき けいすけ）
- アドビのデベロッパーマーケティング
- 担当はFlashからHTML5まで多岐
- 前職は開発者
- Java/J2EE（7年）、AS3/Flex/AIR（2年）
- HTML/JS/PHPなどは必要な範囲で
@keisuke322
- USTREAM番組「ADC OnAir」MC
【緩募】都内で流しソー
- http://onair.adobe-adc.jp/ メンを食べられる店情報
を夏までにください。

3. Adobe & HTML
アドビのWebに対する取り組みや
Edge ツール & サービスの最新情報を掲載。
http://html.adobe.com/jp

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

5. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate Edge Reflow Edge Code Edge Inspect
preview preview
Edge Web Fonts Typekit PhoneGap Build
Sep 26, 2012 - Debut

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

7. Edge Inspect - 3つの特徴
- リモートでブラウジング
- 母艦PCの画面遷移が接続されたデバイス上でも追従
- リモートでデバッグ
- 母艦PCからデバイス上のHTML画面に対して、Webイン
スペクトが可能（Developer Tools）
- リモートでスクリーンショット
- 母艦PCからボタン一発で全デバイスのHTML画面のスク
リーンショットを撮影し、母艦PCに保存

8. Setup

9. インストール
PCに PCのChromeに デバイスに
インストール インストール インストール
Win / Mac Chrome 14+ iOS / Android

10. 入手先
- 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

11. PC / デバイスの接続
1. 接続デバイスがPCと同じネットワ
ーク上にあることを確認
- 自動検出するには同サブネットに
- IPアドレス指定による手動接続も可
2. デバイスをPCのChromeに接続
A.自動検出
B. 手動接続
3. パスコードの入力
- デバイスのアプリがパスコード生成
- ChromeのInspectに入力

12. Features

13. ブラウジング機能
- PCのChomeブラウザーでブラウジング
- 接続されている全デバイスで同じURLが表示
- Edge Inspect起動中はスリープモードが解除
- localhostもブラウズ可能
- バーチャルホストにも対応
http://blogs.adobe.com/edgeinspect/tag/virtual-hosts/
- ベーシック認証サイトもOK
- http://ID:パスワード@mydebugsite.com
- 「file:///」経由でのアクセスは無理

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

15. スクリーンショット機能
同じ名前のPNG
ファイルとTXTフ
ァイルが保存さ
れる。
TXTファイルには
デバイスや画面
情報が記載。

16. Let s Inspect Now!

17. E W
! Edge Reflow プレビュー版公開中
N
レスポンシブWebデザイン専用ツール

18. Edge Code プレビュー版公開中
まったく新しい超軽量コードエディター

19. Edge Animate 正式版無償提供中
直感的なHTML5アニメーション制作ツール

20. 無償ビルドの機能制限
無償ビルドは Creative Cloud の無償メンバーシップから入手
リリースビルド 機能制限
Edge Animate 1.5 なし
HTML5アニメーションツール
Animate 1.x は完全無償提供
Edge Code preview 3 なし
HTML / CSS / JS コードエディタ
Edge Inspect 同時接続
モバイルサイトのリモート検証
1.2 デバイス1台
Edge Reflow preview なし
レスポンシブWebデザインツール
* 2013年2月15日現在

21. 無償サービスの機能制限
サービス 機能制限
Edge Web Fonts 正式 なし
無償のWebフォントサービス
現在は英文フォントのみ
PhoneGap Build privateアプリ1つ
クラウドでモバイルアプリを作成
正式 publicアプリ無制限
* 2013年2月15日現在

22. Web情報番組「ADC OnAir」
4.3 WED. 20:30 ONAIR
Vol. 04
PHPを知ればもっとWordPressが面白い!
今日から入門DreamweaverでPHP
GUEST 谷口 充（H2O Space）
http://onair.adobe-adc.jp

23. Adobe & HTML
アドビのWebに対する取り組みや
Edge ツール & サービスの最新情報を掲載。
http://html.adobe.com/jp

24. Edge Inspect 解説記事
セットアップから使い方までを解説。
http://bit.ly/adcjp_inspect