連載
» 2013年04月03日 16時33分 公開

UXClip(24):ビギナー向けデバッグツールで効率的に開発しよう (4/4)

[野中龍一,クラスメソッド]
前のページへ 1|2|3|4       

4.Adobe Edge Inspectの紹介

 スピーカー:轟氏(Adobe Systems inc.)

 Adobe Edge InspectはAdobe Edgeツール&サービスの1つ。USBで接続することなくパスコードで認証された同じネットワーク上にある複数のデバイスを同時にデバッグできます。

5.1,Adobe Edge Inspectのポイント

  • Chromeのみ対応
  • 母艦のChromeでデバッグ
  • 複数のデバイスを同時にデバッグ
  • 全デバイスのスクリーンショットを一度に撮ることができ母艦のPCに保存される(ファイルの情報を含んだテキストファイルも同時に生成)
  • バーチャルホスト、ベーシック認証可
  • Edge Reflow(コーディングなしでレスポンシブ対応のWebサイトが作れる)と連携してリアルタイムに表示確認ができる

5.2,無線状態でリモートインスペクションを実演

 実際に母艦となるPCからiPhoneとエミュレーターを接続し、無線状態でデバッグする実演が行われました。

DOMノードを選択している状態

 実際にDOMノードを選択しHTMLを編集すると……、

AdobeとWebがアドビと俺に書き換わっている

 Chrome上の変更がリアルタイムに反映されています。

5.3,Edge Reflowでレスポンシブ対応サイト

 Edge Inspectに関連して、Edge Reflowの紹介も行われました。

 Edge Reflowを使うと、コーディング不要でレスポンシブ対応サイトを作ることができます。

 このようにビューの上にスライダーが表示されています。特定の位置でブレイクポイントを打つと、その部分がMedia Queriesの切り替えポイントになります。

2つのブレイクポイントが設定されている

 また、Edge ReflowはEdge Inspectと連携することにより、リアルタイムにデバイス上の表示を確認できます。

リアルタイムにエミュレーター確認している

 Edge Inspect、Edge Reflowともに、いまのところ無料で使えるので試しておきたいですね。以上、ビギナー向けデバッグツールの紹介でした。

まとめ

 なんとなく使っているだけでは気付かない機能の紹介が多く、個人的にも良い勉強になりました。デバッグツールは開発時やバグなどに対処する際、またパフォーマンスチューニングと常にかかわることになります。基本をしっかり押さえて理解を深めてより効率的に開発したいですね。

 このレポートでは時間の関係でまとめられませんでしたが近いうちにデバッグツールでできること比較表(ビギナー向け)を作って弊社が運営している開発ブログに掲載しようと思います。

 また、Chrome Devtoolsのより深い活用方法について、4月2日にライブ配信がありました。

 併せてこちらも。

著者プロフィール

野中 龍一(のなか りゅういち)

クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。


前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。