Sencha Touch / Ext JS開発者へ App Inspector の紹介
こんにちは、ゼノフィnakamuraです。
私はほとんどの Sencha 開発者と同じように1日の半分くらいをお気に入りの IDE で JavaScript を書いてます。しかし、残りの半分はブラウザ上でアプリケーションのテストとデバッグに費やしています。
この数年間で各メジャーブラウザは大きく改善されてきました。全てのブラウザが HTML5 に対応していて、 JavaScript のパフォーマンスも素晴らしく、開発ツールもこれまでで最高の状況です。
Google Chromeのデベロッパーツールは長い間、標準よりも高品質だったため、ほとんどの開発者の行きつけのブラウザになっているのは、あまり驚くべきことではありません。Developer Tools はDom要素、CSSルール、JavaScriptソースコードなどを知ることができるのはとても良かったのですが、最近までSencha開発者は実行時のアプリケーションを分析することにうまく利用できませんでした。
数ヶ月前に Sencha Professional Services チームがお客様のアプリケーションをよりインテリジェントにデバッグする方法を検討しました。そこで App Inspector for Sencha が誕生しました。
弊社のチームはNPO団体である Sencha Labs の一環として、このツールをコミュニティと共有することにしたので、誰でもコントリビュートできます。現在、Sencha 2.0用の App Inspector for Sencha の2.0が利用でき、Ext JS (4.x) と Sencha Touch(2.x) に対応しています。
機能
Sencha アプリケーションの最も難しいデバッグ処理は、ブラウザの開発ツールでは高レベルの抽象化（例えばコンポーネント、レイアウト、データ、観察可能なイベント）は理解できないということです。
Sencha の環境でのデバッグツールは他にも存在していますが（例えば、Illuminations for Developers、Ext JS Page Analyzer、 Sencha Fiddle）、どれも Professional Services チームの要望に見合うものではありませんでした。それぞれのツールはユースケースや機能が異なり、App Inspector for Sencha はそれらのツールと入れ替わるものではありません。App Inspector for Sencha は簡単に使用できるツールで、Ext JS や Touch アプリケーションの分析と理解が可能になります。
Chrome の無料のエクステンションとして、App Inspector for Sencha は次のようにアプリケーションのデバッグを手助けします：
- Component Inspector: 簡単に素早くコンポーネントツリーをナビゲートする、DOMのコンポーネントをハイライトして、そのプロパティを監視する
- Store Inspector: アプリケーションのデータストアを監視して、個々のレコードを調べる
- Layout Profiles: 潜在的なパフォーマンスや表示の問題を発見するために、インテリジェントにアプリケーションのレイアウトを分析する
- Event Monitor: オブザーバブルなイベントを記録する
App Inspector for Sencha はアプリケーションで使われているフレームワークとパッケージのバージョンも検出しますので、それぞれのアプリケーションの仕様を見分けることができます。
SenchaがSenchaで作った
App Inspector for Sencha はChrome Developer Toolsのエクステンションですが、Sencha 技術で構築されたということが重要です。
Chrome Developer Tools エクステンションのアーキテクチャには２つの部分があります：Background と DevTools のページです。この２つの部分は互いにやり取りしますが、それとともに様々な方法で検査対象のウィンドウともやり取りします。
Background ページはエクステンションを初期化して検査対象ウィンドウのイベント（例えばページリフレッシュ）を観察するコードが含まれています。Background ページは postMessage API を通して、検査対象ウィンドウに関する情報を DevTools ページと通信します。
DevTools ページはChrome Delveloper Toolsの１つひとつのインスタンス（つまりブラウザのタブごとに）に必要なコードが含まれています。App Inspector for Sencha のインターフェイスは全て Sencha Architect と Ext JS で作成され、テーマの一部も変更されています。 DevToolsページが inspectedWindow API経由で検査対象アプリケーションと通信するために、いくつかのユーティリティクラス（Ext JS または Touch専用）が書かれました。
最後に、ビルド処理を自動化するために Sencha Cmd を Node.js、Gruntと共に使いました。我々のコードはまず JSHint のバリデーションを通し、次にアプリケーションのプロダクションビルドを実行し、最後に Chrome Web Store デプロイパッケージの追加リソースがバンドルされます。 JSDuck を使って、いくつかの内部的なドキュメントも作成しました。
このプロジェクトの目的は Sencha 技術を使って、パワフルなアプリケーションを作成するのがどれだけ簡単か見てもらおうというものです。自由に我々のコード と スクリーンキャストをご覧ください。皆様もフィードバックとコントリビュートをお願いいたします！
