ツールを準備

Zope&Ploneの準備をする

もしあなたがZMI経由ではなくファイルシステム上でスキンを作ろうとしている（推奨）ならば、デバッグを簡単にする方法がいくつかあります。

Zope Debug Mode

Zopeをデバッグモードで起動すると、変更が即座に反映されます。デバッグモードをオンにするにはいくつかのやり方があります。

• etc/zope.confで以下のようにする：
  

  debug-mode on

  そしてZopeを以下のようにして再起動する（エラーログをコンソールに表示するため）

  zope_instance/bin/runzope

• あるいはZopeを以下のように起動する：
  

  zopectl fg

• もしWindowsインストーラバージョンのPloneを利用しているならば、プログラムメニューにデバッグモードで起動するオプションがあります。

プロダクトをリロードする

デバッグモードを使わなくともスキンの変更をアップデートする方法はあります。これはリロードオプションを利用する事で可能になります。これを利用するには、プロダクトフォルダの中に「refresh.txt」を置いておく必要があります（DIYPloneStyleはデフォルトでこれを生成します）。

• ZMIにて（ルートから）Control_Panel→Product Management→スキンプロダクトフォルダ（例えばDIYPloneStyle）にいく
• Refreshタブを読み込んで「Refresh this product」ボタンを押す

と、リロードされます。

CSSリソースレジストリ

Ploneサイトのパフォーマンスを助けるために、portal_cssはすべてのスタイルシートをたった一つのCSSファイルにマージしてくれます。CSSのデバッグを簡単にするために、このマージを回避する事ができます：

• ZMIからPloneインスタンス→portal_cssにいく
• デバッグモードにチェックを入れて保存ボタンを押す

DOMインスペクタ

ドキュメントオブジェクトモデル（DOMと略される）は、どのようにHTMLページ（あるいはXMLドキュメント）が構築され、APIがアクセスするのかを記述した言葉です。ブラウザはhtml/xmlの生テキストからDOMに変換し、それにCSSやら何やらを適用したりなんかします。

それではこれが我々にとってどう役に立つのでしょうか。PloneのデフォルトスキンのHTMLとCSSは多くの事をうまくやってくれています。マイナス面としてはその複雑さがありますが…。というわけでたとえばちょっとした要素を変更したいと思っても、それに対応したCSSの記述をするための手がかりがわからないというようなこともあります。

ここでDOMインスペクタの登場です。あなたはページの構造をツリー構造で見て、すべての要素を探すためのフィードバックを得る事ができるでしょう。いじりたい要素を見つければ、その要素のclassやid、親要素といったすべての属性を簡単に知る事ができます。

Firefox DOM Inspector

firefoxをインストールするときに、カスタムインストールのメニューからWeb Developer toolのオプションが有効になっていることを確認してください。

Firefoxは非常に便利なDOMインスペクタツールを備えています。これを使うためには、「ツール」メニューから選べばOKです。あるいはWindowsなら「Ctl+Shift+I」、Macなら「Apple+Shift+I（？）」をショートカットとして利用できます。

おそらくあなたが一番最初にしなければならないのは、DOMインスペクタを最大化することです。大きい画面の方が便利ですから。

そのあとはファイルメニューにいって、URLを選びます。サイトのアドレスを入力すると、DOMインスペクタの下のパネルにページがロードされます。

ツリーをあっちこっち移動する

左上のツリーパネルでは＋のアイコンでノードを開いたり閉じたりできます。ツリーは「#document」から始まり、HTML、BODY、その他の要素をどんどん展開することができます。あなたがどこにいるかを教えてくれる、idやclassのカラムがあることを気にかけておいてください。

それぞれの要素をクリックすると、関連する要素がブラウザペインに現れます。

さぁ、ナビゲーションツリーの要素を探してみましょう。

visual-portal-wrapper（すべてのページを包むコンテナ）というDIVを展開する

portal-columns（ページの中央部のコンテナ）というTABLEを見つけて展開する

TBODYおよびTRを展開し、さらにportal-column-one（左カラム）というTDを展開する

最後にvisualPaddingというクラスのDIVを展開する

クリックして要素を選ぶ

検索メニューにいって、最後のオプション「Select Element by Click」を選びます。

ここでブラウザペインにいってハイライトしたい要素をクリックします。

他の要素を見つけたいときはもう一度「Select Element by Click」からやります。

Firefoxの機能拡張：Web Developer

Web Developer Extensionは、Ploneのスキンを開発するのを助けてくれる、とても強力で便利なツールバーです。

この拡張機能たとえばこんな機能を持っています：

• CSSをお手軽に編集する…ZMIやファイルシステム上で変更したり、画面をリフレッシュしたりする必要がない
• スタイル情報を見ることができる…ページの要素をクリックすると関連するCSS宣言を見ることができる
• すべての、あるいは、特定のスタイルシートを解除できる
• 新しいスタイルシートを適用できる
• すべての、あるいは、特定の要素のアウトラインを表示できる
• 使われている画像のリストを生成できる
• ブラウザウィンドウをリサイズできる
• フォーム、リンク、メタタグ、HTTPヘッダ、ドキュメントサイズなどの情報の詳細を見ることができる
• HTML、CSS、RSS、アクセシビリティやリンクのバリデーションができる
• ルーラー…ページのパーツがどのくらいの高さ、幅なのか測定する

Firefoxの機能拡張：FireBug

FireBugはDOMインスペクタステロイドで、HTML、CSSやJavascriptを調べるのにマジで便利です。

FireBugは、一度インストールするとFirefoxのステータスバー（ブラウザウィンドウの下部）に常駐します。ページが読み込まれるごとに、エラーを探してロギングします。エラーがなかった場合には緑色のチェックマークのアイコンを表示し、あった場合には赤色の×印のアイコンと、いくつエラーがあったのかを表示します。

すべてのクールな機能を使うには、ただ単にアイコンをクリックするだけでOKです。

アイコンにはこんなものがあります：

• FireBugアイコン…（エラーがなければ）緑色のチェックマーク
• インスペクタタブ…コンソールモード（エラーや警告のリスト）とインスペクションモードの切り替えスイッチ
• インスペクションボタン…マウスを使った要素選択を可能・不可能にするボタン。可能になっている場合は、ブラウザペインで要素にマウスオーバーし、インスペクトしたい要素を選択できる
• ソース＆スタイルタブ…HTMLとCSSのビュー切り替えスイッチ

これらによってエラーを見たり、HTMLを見たりすることができます。アローのアイコンをクリックすればそれぞれのタグを展開したり折り畳んだりして、調べたい要素をあちこち見回ることができます。もちろんこの代わりとして、ウェブサイトから特定の要素を選ぶためにインスペクタボタンを使うこともできます。

Firefoxの機能拡張：View Source Chart

この機能拡張は、HTMLの構造を理解するのに役立ちます。

インストールした後に自分の見たいページの任意の場所で右クリックし、「View Source Chart」というメニューを選びます。そうすると新しいウィンドウにチャートが表示されます。

読みやすいように異なる要素は異なる色で表示されます。それぞれのコンテナはクリックすることで折り畳めますので、自分の調べたい要素だけを見ることができます。

さてこれでidやclassを調べるための基本的なツールが用意できたので、Ploneの新しいルックスを作っていくことにしましょう。