More Related Content Similar to Adobe Edge Inspectを利用してデバッグ
Similar to Adobe Edge Inspectを利用してデバッグ (20) More from Keisuke Todoroki
More from Keisuke Todoroki (15) Adobe Edge Inspectを利用してデバッグ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
7. Edge Inspect - 3つの特徴
- リモートでブラウジング
- 母艦PCの画面遷移が接続されたデバイス上でも追従
- リモートでデバッグ
- 母艦PCからデバイス上のHTML画面に対して、Webイン
スペクトが可能(Developer Tools)
- リモートでスクリーンショット
- 母艦PCからボタン一発で全デバイスのHTML画面のスク
リーンショットを撮影し、母艦PCに保存
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に入力
13. ブラウジング機能
- PCのChomeブラウザーでブラウジング
- 接続されている全デバイスで同じURLが表示
- Edge Inspect起動中はスリープモードが解除
- localhostもブラウズ可能
- バーチャルホストにも対応
http://blogs.adobe.com/edgeinspect/tag/virtual-hosts/
- ベーシック認証サイトもOK
- http://ID:パスワード@mydebugsite.com
- 「file:///」経由でのアクセスは無理
15. スクリーンショット機能
同じ名前のPNG
ファイルとTXTフ
ァイルが保存さ
れる。
TXTファイルには
デバイスや画面
情報が記載。
17. E W
! Edge Reflow プレビュー版公開中
N
レスポンシブWebデザイン専用ツール
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