Soumettre la recherche
Mettre en ligne
Adobe Edge Inspectを利用してデバッグ
•
5 j'aime
•
8,163 vues
Keisuke Todoroki
Suivre
2013/3/21のHTML5とか勉強会のセッション資料です。
Lire moins
Lire la suite
Mode de vie
Signaler
Partager
Signaler
Partager
1 sur 25
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
Keisuke Todoroki
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用
Shinichi Tomita
Adobe Animate CCを触ってみた
Adobe Animate CCを触ってみた
Yusuke Kano
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
Atsushi Kaga
AngularJS 概説
AngularJS 概説
Kenichi Kanai
Recommandé
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
Keisuke Todoroki
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用
Shinichi Tomita
Adobe Animate CCを触ってみた
Adobe Animate CCを触ってみた
Yusuke Kano
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
Atsushi Kaga
AngularJS 概説
AngularJS 概説
Kenichi Kanai
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Angular1&2
Angular1&2
Kenichi Kanai
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Osamu Monoe
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
一希 大田
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
Risa Yuguchi
Microsoft Edge概要 物江氏
Microsoft Edge概要 物江氏
Japan Electronic Publishing Association
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
Chrome 拡張のご紹介
Chrome 拡張のご紹介
Tetsunosuke Saito
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
AngularJSについて
AngularJSについて
昌生 高橋
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
一希 大田
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
Hideki Akiba
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angular2
Angular2
Kenichi Kanai
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
Contenu connexe
Tendances
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Angular1&2
Angular1&2
Kenichi Kanai
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Osamu Monoe
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
一希 大田
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
Risa Yuguchi
Microsoft Edge概要 物江氏
Microsoft Edge概要 物江氏
Japan Electronic Publishing Association
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
Chrome 拡張のご紹介
Chrome 拡張のご紹介
Tetsunosuke Saito
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
AngularJSについて
AngularJSについて
昌生 高橋
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
一希 大田
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
Hideki Akiba
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angular2
Angular2
Kenichi Kanai
Tendances
(20)
Angular#Kanazawa
Angular#Kanazawa
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
最近のブラウザ状況
最近のブラウザ状況
Angular1&2
Angular1&2
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
XAML + C#で開発するときのVisual Studio 2013(とBlend)の便利機能
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
Microsoft Edge概要 物江氏
Microsoft Edge概要 物江氏
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Chrome 拡張のご紹介
Chrome 拡張のご紹介
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
AngularJSについて
AngularJSについて
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
次世代Web業務アプリケーション
次世代Web業務アプリケーション
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
Enterprise x AngularJS
Enterprise x AngularJS
俺とAngular JS 2
俺とAngular JS 2
Angular2
Angular2
Similaire à Adobe Edge Inspectを利用してデバッグ
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
Tsuyoshi Nakao
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Katsuhito Katoh
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developer Camp 2012 Japan Fall
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
デバイス WebAPI設計の進め方
デバイス WebAPI設計の進め方
Device WebAPI Consortium
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
decode2016
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Tsuyoshi Nakao
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
はじめてのAndroid
はじめてのAndroid
hiro nemu
進化するEdge! ~Creators Update版の新機能から既存機能までまとめて解説!~
進化するEdge! ~Creators Update版の新機能から既存機能までまとめて解説!~
Saki Homma
進化するEdge! Creators Update版の新機能一挙紹介!
進化するEdge! Creators Update版の新機能一挙紹介!
Saki Homma
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Web制作者がandriodのcddを読んでみた version1.1
Web制作者がandriodのcddを読んでみた version1.1
Masakazu Muraoka
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
invogue
HTML5とマイクロソフト(東京)
HTML5とマイクロソフト(東京)
Microsoft
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
Similaire à Adobe Edge Inspectを利用してデバッグ
(20)
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
デバイス WebAPI設計の進め方
デバイス WebAPI設計の進め方
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
はじめてのAndroid
はじめてのAndroid
進化するEdge! ~Creators Update版の新機能から既存機能までまとめて解説!~
進化するEdge! ~Creators Update版の新機能から既存機能までまとめて解説!~
進化するEdge! Creators Update版の新機能一挙紹介!
進化するEdge! Creators Update版の新機能一挙紹介!
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Web制作者がandriodのcddを読んでみた version1.1
Web制作者がandriodのcddを読んでみた version1.1
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
HTML5とマイクロソフト(東京)
HTML5とマイクロソフト(東京)
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Plus de Keisuke Todoroki
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
Keisuke Todoroki
PhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
PhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Keisuke Todoroki
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
Keisuke Todoroki
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
Keisuke Todoroki
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
Keisuke Todoroki
Flexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメ
Keisuke Todoroki
Air for android with flex
Air for android with flex
Keisuke Todoroki
Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17
Keisuke Todoroki
MA6 Caravan Adobe AIR
MA6 Caravan Adobe AIR
Keisuke Todoroki
Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09
Keisuke Todoroki
Adobe flex and mobile 4p
Adobe flex and mobile 4p
Keisuke Todoroki
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
Keisuke Todoroki
Plus de Keisuke Todoroki
(15)
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
PhoneGap Introduction
PhoneGap Introduction
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
PhoneGap Introduction
PhoneGap Introduction
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
Flexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメ
Air for android with flex
Air for android with flex
Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17
MA6 Caravan Adobe AIR
MA6 Caravan Adobe AIR
Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09
Adobe flex and mobile 4p
Adobe flex and mobile 4p
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
Adobe Edge Inspectを利用してデバッグ
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
Télécharger maintenant