Personal tools
You are here: Home Plone Visual Ploneに新しいルックスを イントロダクション

イントロダクション

チュートリアルのイントロダクションと、Plone2.1以降を利用することで可能になる新しいアプローチ

Plone2.1以降を使う事で、以前のバージョンよりもより簡単にPloneのスキンを作ることができます。

しかしここで、既存のCSSをいじったり、既存のCSSルールを上書きしたり、それをベースに新しいスキンを作るような事をつらつらと述べるつもりはありません。こういったやり方には多くの問題があります。

  • CSSについてあまり知らない人にとっては難しすぎる
  • Ploneのアップグレードに対応できない傾向にある
  • Ploneの出力するCSSファイルがとても大きくなる

新しいアプローチ

Plone2.1以降では、ResourceRegistriesという新しいコンポーネントが備わっています。このコンポーネントはCSSやJavascriptをサーバサイドで分割することができるため、効率的にそれらを管理する事ができます。CSS/JSファイルの部分部分に条件を付けて必要な者にチェックをし、それらを一つのCSS/JSファイルにマージすることができるので、ブラウザは減量された一つのファイルだけを参照することになるのです。さらにこの先のバージョンのRR(ResourceRegistries)には、ファイルサイズを小さくするための圧縮機能が加えられます。

Ploneのテーマを作るにあたって、このことが意味するのは、PloneのインターフェイスとなるCSSの一部を選択的に不適用とすることができるということです。そこで一般的な手法として考えられるのは、オーソライズのための(デフォルトで緑色の線で囲むような)CSSはそのままにしておき、ログインしていない人に対する部分だけをカスタマイズする、という方法です。これにはいくつかの利点があります。

  • まっさらな状態からカスタマイズを始め、Ploneの干渉なしにCSSを適用できる
  • CSSのダウンロードサイズを減らす事ができる
  • より変化に富むテーマを作る事ができる

このアプローチは今後のPloneへの互換性を考えた場合にはより強い意味を持ちます。なぜならこれらはHTMLのIDとclassにのみ基づいたカスタマイズであり、ID/classは今後のバージョンUPにおいてまず変更される事がないからです(実際にはいくつかの変更を行っていますが、ほとんどないといってよい頻度ですし、Ploneチームはこれらにはなるべく手をつけないようにしています)。

Ploneの見栄えを変更するには3つの方法があります。

シンプルな変更
ロゴを入れ替え、色を変える。これについてはここでは扱いませんが、いろいろな本やHowtoでは扱っている
広範囲な変更
外向けに見える部分のすべてを入れ替えるが、基本的なスタイルは保持する。main_templateもいくらかは変更するが、根本的に変えるわけではない。
完全な変更
スクラッチから始め、すべてのCSSを入れ替え、テンプレートも書き直す(おすすめできない。悪夢のようなメンテナンスが待っているだろう)

何故Ploneの構造を保持するのか

アクセシビリティの問題
Ploneは既に運動系や視覚に障害を持つ人にフレンドリーになるように設計されています。 こういったアクセシビリティには多くの努力とテストが必要ですが、Ploneの骨組みをキープすれば、あなたはそこから解放されるでしょう
サーチエンジンの問題
素のPloneサイトのGoogle Rankは7/10です。またplone.orgのGoogle Rankは9/10で、これはMicrosoftやIBMなどと同じです。我々はPloneサイトのサーチエンジン最適化に多くの時間を費やしてきました。GoogleはPloneを愛し、PloneはGoogleを愛しています(トリビア:私が見つけた10/10のページランクを持つ唯一のサイトはW3Cのページです)

用語についてのメモ

このチュートリアルを通して、見栄えの変更を行ったものの集合体を指す言葉として「テーマ」という単語を使います。他のPloneの文書では「スキニング」や「スキン」という単語が使われています。なぜここで「スキン」という単語を使わないかと言う事についてはいくつかの理由があります。

  1. Ploneの用語として「スキン」というのはテンプレートとCSS、両方の変更を指します。ここでは「テーマ」を、テンプレートのカスタマイズと可能な限り分離して扱います。すなわち「テーマ」は視覚的な変更に関する事のみを指す単語として使用されます
  2. 我々は、Ploneの変更を独立したファイルシステム上のプロダクトにする事をおすすめします。このことによって視覚的な変更(テーマ)が再利用しやすく、またシンプルになります

例えば、私たちの会社では次のようなプロダクトのネーミング規則を守っています。例えば「Site」という名前のプロジェクトの場合、

SiteTheme
視覚的なテーマや他の視覚的要素(ロゴ、背景、画像など)を扱う
SiteTweaks
 テンプレートやPythonスクリプトのちょっとした変更を扱う
SiteSetup
Plone2.5以降のGenericSetup(あるいはPlone2.1以前のCustomizationPolicies)を使って、サイトの初期化に必要な設定を扱う(例:SQLコネクションなど)

Document Actions