ザイルスコープ 1.1

Cultured CodeはXyle Scopeを「世界で最も革新的なCSS分析ツール」と謳っていますが、これは決して誇張ではありません。Xyle Scopeを使ったWebサーフィンはSafariでサーフィンするのと似ています（Xyle ScopeはSafariのレンダリングエンジンを使用しています）。しかし、Xyle Scope 1.1.5では、基盤となるHTMLとCSSのソースコードを同時に表示します。ページの様々な部分をハイライト表示するだけで、対応するコードがすぐに表示されるため、ページの構成を驚くほど簡単に解読できます。CSSを学ぶのに最適な方法であり、Webの奥深くまで深く掘り下げたいWebエキスパートにとって欠かせないツールです。

Xyle Scope の優れたインターフェース、特に Web ページとの統合は、このツールを他に類を見ないものにしています。ドキュメントウィンドウには、Web ビュー（ブラウザで表示されるとおりのページを表示）、HTML ビュー、CSS ビューの 3 つのビューがあります。Web ビューには、ブラウジングに適したブラウザモードと、任意の HTML 要素をハイライト表示できる選択モードの 2 つのモードがあります。Xyle Scope は、他のビューで選択された要素をハイライト表示し、関連する HTML および CSS のソースコードを表示します。

例えば、階層ビューではHTMLがツリー構造で表示されます。HTMLペインでは、コードが複数の異なるスタイルで表示され、完全にカスタマイズ可能です。ブロックフィルターを使用すると、ページ内のすべてのブロックを図として表示し、コンテンツを非表示にして基盤となる構造に焦点を当てることができます（スクリーンショットを参照）。図をクリックすると、Xyle ScopeはWebビューでWebページの対応する部分をハイライト表示します。CSSビューでは、カスケードとセレクタ（CSSスタイル定義）リストが表示されます。フィルターを使用してHTMLまたはCSSコード内を検索することで結果を絞り込むことができ、複雑なドキュメントを簡単にナビゲートできます。

Xyle Scopeの独自の分割ペインインターフェースでは、ブラウジングしながらページの基盤となるCSSとHTMLを確認できます。ブロックフィルターを選択すると、コンテンツを非表示にしてページの基盤となる構造を見やすくすることができます。(画像をクリックするとスクリーンショットが開きます)

Xyle ScopeほどWebページの基礎構造を深く理解できるツールはありませんが、エディタとしては少々の外部からの支援が必要です（Cultured Codeは現在、本格的なCSSエディタを開発中で、年末までにリリースされる予定です）。選択モードでWebページの要素をクリックすると、その要素に適用されているすべてのルールがCSSカスケードペインに表示されます。Xyle Scope内でCSS値を変更し、その場でプレビューすることも可能です。ソースがインターネット上にあってハードドライブ上にない場合でも（値を編集してReturnキーを押すだけで）、セレクタの追加や削除には外部エディタが必要です。

関連するすべてのスタイルシートを保存したり、現在のページのCSSをクリップボードにコピーしたりできます。保存したCSSファイルをお気に入りのエディタで開くと、Xyle Scopeに戻った際に変更内容が動的に更新されます。HTMLをコピーしてHTMLエディタに貼り付けて編集することも可能ですが、変更を加えた場合は、Xyle Scopeに戻った際に「再読み込み」ボタンを押して変更内容を確認する必要があります。