際際滷

際際滷Share a Scribd company logo

Adobe Edge Inspectを旋喘してデバッグ

?
?
Keisuke Todoroki
Keisuke Todoroki

2013/3/21の堰意珂晦5とか茶膿氏のセッション彿創です。

1 of 25
Download to read offline
Adobe Edge Inspectを 旋喘してデバッグ - Adobe Edge ツ`ル & サ`ビス - 及37指HTML5とか茶氏
Who? - Z 初┐箸匹蹐 けいすけ - アドビのデベロッパ`マ`ケティング - 毅輝はFlashからHTML5まで謹瓷 - 念は_k宀 - Java/J2EE7定、AS3/Flex/AIR2定 - HTML/JS/PHPなどは駅勣な譴 @keisuke322 - USTREAM桑M仝ADC OnAir々MC ‐椗／脅坪で送しソ` - http://onair.adobe-adc.jp/ メンを奮べられる糾秤 を歪までにください。
Adobe & HTML アドビのWebにする函りMみや Edge ツ`ル & サ`ビスの恷仟秤鵑d。 http://html.adobe.com/jp
Modern Web Needs Modern Tools HTML5とそのvB室gで崙恬する仝Modern Web々、 それにして駅勣なものは仝Modern Tools々である
Adobe Edge ツ`ル & サ`ビス 牢された恷枠極のWebサイトをBできる仟しいツ`ル&サ`ビス Edge Animate Edge Re?ow Edge Code Edge Inspect preview preview Edge Web Fonts Typekit PhoneGap Build Sep 26, 2012 - Debut
Edge Inspect モバイルサイトのリモ`ト編^ツ`ル
Edge Inspect - 3つの蒙 - リモ`トでブラウジング - 銚PCの鮫中w卞が俊Aされたデバイス貧でも弖 - リモ`トでデバッグ - 銚PCからデバイス貧のHTML鮫中にして、Webイン スペクトが辛嬬Developer Tools - リモ`トでスクリ`ンショット - 銚PCからボタン匯kで畠デバイスのHTML鮫中のスク リ`ンショットを顔唹し、銚PCに隠贋
Setup
インスト`ル PCに PCのChromeに デバイスに インスト`ル インスト`ル インスト`ル Win / Mac Chrome 14+ iOS / Android
秘返枠 - PC喘のEdge InspectWin / Mac - Adobe Creative Cloud から秘返 ─oメンバ`シップでも秘返辛嬬 http://creative.adobe.com/ - PCのChromeブラウザC嬬Chrome 14+ - Chrome ウェブストアo https://chrome.google.com/webstore/detail/adobe-edge-inspect/ ijoeapleklopieoejahbpdnhkjjgddem - デバイス喘のEdge InspectアプリiOS / Android - iOSo https://itunes.apple.com/jp/app/adobe-edge-inspect/id498621426 - Androido 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 / デバイスの俊A 1. 俊AデバイスがPCと揖じネットワ `ク貧にあることを_J - 徭奮するには揖サブネットに - IPアドレス峺協による返喀咯Aも辛 2. デバイスをPCのChromeに俊A A.徭奮 B. 返喀咯A 3. パスコ`ドの秘薦 - デバイスのアプリがパスコ`ド伏撹 - ChromeのInspectに秘薦
Features
ブラウジングC嬬 - PCのChomeブラウザ`でブラウジング - 俊Aされている畠デバイスで揖じURLが燕幣 - Edge Inspect軟嗽个魯好蟋`プモ`ドが盾茅 - localhostもブラウズ辛嬬 - バ`チャルホストにも http://blogs.adobe.com/edgeinspect/tag/virtual-hosts/ - ベ`シックJ^サイトもOK - http://ID:パスワ`ド@mydebugsite.com - 仝?le:///々U喇でのアクセスはo尖
デバッグC嬬 光デバイス阿 リモ`トデバッグを 蝕兵する
スクリ`ンショット字嬬 揖じ兆念のPNG ファイルとTXTフ ァイルが隠贋さ れる。 TXTファイルには デバイスや鮫中 秤鵑d。
Let s Inspect Now!
E W ! Edge Re?ow プレビュ`井巷_嶄 N レスポンシブWebデザイン喘ツ`ル
Edge Code プレビュ`井巷_嶄 まったく仟しい階X楚コ`ドエディタ`
Edge Animate 屎塀井o戻工嶄 岷湖議なHTML5アニメ`ション崙恬ツ`ル
oビルドのC嬬崙 oビルドは Creative Cloud のoメンバ`シップから秘返 リリ`スビルド C嬬崙 Edge Animate 1.5 なし HTML5アニメ`ションツ`ル Animate 1.x は頼畠o戻工 Edge Code preview 3 なし HTML / CSS / JS コ`ドエディタ Edge Inspect 揖r俊A モバイルサイトのリモ`ト編^ 1.2 デバイス1岬 Edge Re?ow preview なし レスポンシブWebデザインツ`ル * 2013定2埖15晩F壓
涙灰サ`ビスの字嬬崙 サ`ビス C嬬崙 Edge Web Fonts 屎塀 なし oのWebフォントサ`ビス F壓は哂猟フォントのみ PhoneGap Build privateアプリ1つ クラウドでモバイルアプリを恬撹 屎塀 publicアプリo崙 * 2013定2埖15晩F壓
Web秤鷏M仝ADC OnAir々 4.3 WED. 20:30 ONAIR Vol. 04 PHPを岑ればもっとWordPressが中易い! 書晩から秘TDreamweaverでPHP GUEST?紅笥 割H2O Space http://onair.adobe-adc.jp
Adobe & HTML アドビのWebにする函りMみや Edge ツ`ル & サ`ビスの恷仟秤鵑d。 http://html.adobe.com/jp
Edge Inspect 盾h並 セットアップから聞い圭までを盾h。 http://bit.ly/adcjp_inspect
Adobe Edge Inspectを旋喘してデバッグ

More Related Content

Adobe Edge Inspectを旋喘してデバッグ

  • 1. Adobe Edge Inspectを 旋喘してデバッグ - Adobe Edge ツ`ル & サ`ビス - 及37指HTML5とか茶氏
  • 2. Who? - Z 初┐箸匹蹐 けいすけ - アドビのデベロッパ`マ`ケティング - 毅輝はFlashからHTML5まで謹瓷 - 念は_k宀 - Java/J2EE7定、AS3/Flex/AIR2定 - HTML/JS/PHPなどは駅勣な譴 @keisuke322 - USTREAM桑M仝ADC OnAir々MC ‐椗／脅坪で送しソ` - http://onair.adobe-adc.jp/ メンを奮べられる糾秤 を歪までにください。
  • 3. Adobe & HTML アドビのWebにする函りMみや Edge ツ`ル & サ`ビスの恷仟秤鵑d。 http://html.adobe.com/jp
  • 4. Modern Web Needs Modern Tools HTML5とそのvB室gで崙恬する仝Modern Web々、 それにして駅勣なものは仝Modern Tools々である
  • 5. Adobe Edge ツ`ル & サ`ビス 牢された恷枠極のWebサイトをBできる仟しいツ`ル&サ`ビス Edge Animate Edge Re?ow Edge Code Edge Inspect preview preview Edge Web Fonts Typekit PhoneGap Build Sep 26, 2012 - Debut
  • 7. Edge Inspect - 3つの蒙 - リモ`トでブラウジング - 銚PCの鮫中w卞が俊Aされたデバイス貧でも弖 - リモ`トでデバッグ - 銚PCからデバイス貧のHTML鮫中にして、Webイン スペクトが辛嬬Developer Tools - リモ`トでスクリ`ンショット - 銚PCからボタン匯kで畠デバイスのHTML鮫中のスク リ`ンショットを顔唹し、銚PCに隠贋
  • 9. インスト`ル PCに PCのChromeに デバイスに インスト`ル インスト`ル インスト`ル Win / Mac Chrome 14+ iOS / Android
  • 10. 秘返枠 - PC喘のEdge InspectWin / Mac - Adobe Creative Cloud から秘返 ─oメンバ`シップでも秘返辛嬬 http://creative.adobe.com/ - PCのChromeブラウザC嬬Chrome 14+ - Chrome ウェブストアo https://chrome.google.com/webstore/detail/adobe-edge-inspect/ ijoeapleklopieoejahbpdnhkjjgddem - デバイス喘のEdge InspectアプリiOS / Android - iOSo https://itunes.apple.com/jp/app/adobe-edge-inspect/id498621426 - Androido 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 / デバイスの俊A 1. 俊AデバイスがPCと揖じネットワ `ク貧にあることを_J - 徭奮するには揖サブネットに - IPアドレス峺協による返喀咯Aも辛 2. デバイスをPCのChromeに俊A A.徭奮 B. 返喀咯A 3. パスコ`ドの秘薦 - デバイスのアプリがパスコ`ド伏撹 - ChromeのInspectに秘薦
  • 13. ブラウジングC嬬 - PCのChomeブラウザ`でブラウジング - 俊Aされている畠デバイスで揖じURLが燕幣 - Edge Inspect軟嗽个魯好蟋`プモ`ドが盾茅 - localhostもブラウズ辛嬬 - バ`チャルホストにも http://blogs.adobe.com/edgeinspect/tag/virtual-hosts/ - ベ`シックJ^サイトもOK - http://ID:パスワ`ド@mydebugsite.com - 仝?le:///々U喇でのアクセスはo尖
  • 15. スクリ`ンショット字嬬 揖じ兆念のPNG ファイルとTXTフ ァイルが隠贋さ れる。 TXTファイルには デバイスや鮫中 秤鵑d。
  • 17. E W ! Edge Re?ow プレビュ`井巷_嶄 N レスポンシブWebデザイン喘ツ`ル
  • 18. Edge Code プレビュ`井巷_嶄 まったく仟しい階X楚コ`ドエディタ`
  • 19. Edge Animate 屎塀井o戻工嶄 岷湖議なHTML5アニメ`ション崙恬ツ`ル
  • 20. oビルドのC嬬崙 oビルドは Creative Cloud のoメンバ`シップから秘返 リリ`スビルド C嬬崙 Edge Animate 1.5 なし HTML5アニメ`ションツ`ル Animate 1.x は頼畠o戻工 Edge Code preview 3 なし HTML / CSS / JS コ`ドエディタ Edge Inspect 揖r俊A モバイルサイトのリモ`ト編^ 1.2 デバイス1岬 Edge Re?ow preview なし レスポンシブWebデザインツ`ル * 2013定2埖15晩F壓
  • 21. 涙灰サ`ビスの字嬬崙 サ`ビス C嬬崙 Edge Web Fonts 屎塀 なし oのWebフォントサ`ビス F壓は哂猟フォントのみ PhoneGap Build privateアプリ1つ クラウドでモバイルアプリを恬撹 屎塀 publicアプリo崙 * 2013定2埖15晩F壓
  • 22. Web秤鷏M仝ADC OnAir々 4.3 WED. 20:30 ONAIR Vol. 04 PHPを岑ればもっとWordPressが中易い! 書晩から秘TDreamweaverでPHP GUEST?紅笥 割H2O Space http://onair.adobe-adc.jp
  • 23. Adobe & HTML アドビのWebにする函りMみや Edge ツ`ル & サ`ビスの恷仟秤鵑d。 http://html.adobe.com/jp
  • 24. Edge Inspect 盾h並 セットアップから聞い圭までを盾h。 http://bit.ly/adcjp_inspect