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

8,937 views

Published on

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

Published in: Lifestyle
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,937
On SlideShare
0
From Embeds
0
Number of Embeds
2,947
Actions
Shares
0
Downloads
9
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

  1. 1. Adobe Edge Inspectを 利用してデバッグ - Adobe Edge ツール & サービス - 第37回HTML5とか勉強会
  2. 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. 3. Adobe & HTML アドビのWebに対する取り組みや Edge ツール & サービスの最新情報を掲載。http://html.adobe.com/jp
  4. 4. Modern Web Needs Modern ToolsHTML5とその関連技術で制作する「Modern Web」、 それに対して必要なものは「Modern Tools」である
  5. 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. 6. Edge Inspectモバイルサイトのリモート検証ツール
  7. 7. Edge Inspect - 3つの特徴- リモートでブラウジング - 母艦PCの画面遷移が接続されたデバイス上でも追従- リモートでデバッグ - 母艦PCからデバイス上のHTML画面に対して、Webイン スペクトが可能(Developer Tools)- リモートでスクリーンショット - 母艦PCからボタン一発で全デバイスのHTML画面のスク リーンショットを撮影し、母艦PCに保存
  8. 8. Setup
  9. 9. インストール PCに PCのChromeに デバイスにインストール インストール インストールWin / Mac Chrome 14+ iOS / Android
  10. 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. 11. PC / デバイスの接続1. 接続デバイスがPCと同じネットワ ーク上にあることを確認 - 自動検出するには同サブネットに - IPアドレス指定による手動接続も可2. デバイスをPCのChromeに接続 A.自動検出 B. 手動接続3. パスコードの入力 - デバイスのアプリがパスコード生成 - ChromeのInspectに入力
  12. 12. Features
  13. 13. ブラウジング機能- PCのChomeブラウザーでブラウジング - 接続されている全デバイスで同じURLが表示 - Edge Inspect起動中はスリープモードが解除- localhostもブラウズ可能 - バーチャルホストにも対応 http://blogs.adobe.com/edgeinspect/tag/virtual-hosts/- ベーシック認証サイトもOK - http://ID:パスワード@mydebugsite.com- 「file:///」経由でのアクセスは無理
  14. 14. デバッグ機能 各デバイス毎に リモートデバッグを 開始する
  15. 15. スクリーンショット機能 同じ名前のPNG ファイルとTXTフ ァイルが保存さ れる。 TXTファイルには デバイスや画面 情報が記載。
  16. 16. Let s Inspect Now!
  17. 17. E W ! Edge Reflow プレビュー版公開中N レスポンシブWebデザイン専用ツール
  18. 18. Edge Code プレビュー版公開中まったく新しい超軽量コードエディター
  19. 19. Edge Animate 正式版無償提供中直感的なHTML5アニメーション制作ツール
  20. 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. 21. 無償サービスの機能制限 サービス 機能制限Edge Web Fonts 正式 なし無償のWebフォントサービス 現在は英文フォントのみPhoneGap Build privateアプリ1つクラウドでモバイルアプリを作成 正式 publicアプリ無制限 * 2013年2月15日現在
  22. 22. Web情報番組「ADC OnAir」4.3 WED. 20:30 ONAIRVol. 04PHPを知ればもっとWordPressが面白い!今日から入門DreamweaverでPHPGUEST 谷口 充(H2O Space) http://onair.adobe-adc.jp
  23. 23. Adobe & HTML アドビのWebに対する取り組みや Edge ツール & サービスの最新情報を掲載。http://html.adobe.com/jp
  24. 24. Edge Inspect 解説記事 セットアップから使い方までを解説。http://bit.ly/adcjp_inspect

×