前 [第五章：Ploneを設定する] | 目次 | 次 [第七章：Ploneスタイルガイド]
この章はページやスキンの要素、それらをどのように組み合わせるかを解説することで、Ploneサイトのルックアンドフィールのほとんどすべての面についてどの様に変更するのかを説明します。
スキンはコンテンツの周りの視覚的なカバー（包むもの）です。それは視覚的表現に直接関連したロジックも同様に多少含みます。Ploneをインストールするとディフォルトのスキンを見ることになります。これはほとんどのユーザが馴染みがあり plone.org や他のサイトで見かけるディフォルトのものです。新しいスキンを書くことにより、Ploneの感じを残したまま、Ploneの外観を変更することができます。- zopezen.org や zopera.org がいい例です。
とはいえ、完全なカスタムサイトを立ち上げるならば、Ploneは少しもPloneサイトとして見える必要はないし、それとわかる必要もありません。例としてこのようなサイトのリストが ここに あります。これらすべてのサイトが完全に異なる独特の経験をユーザーに与えています。大抵の場合、サイトはユーザに異なる外観を提供するスキンを簡単に切り替えることができます。たくさんのサイトが全く異なる外観を提供しながら、ユーザがコンテンツを簡単に追加したり編集したりできるPloneのインターフェースのパワーと柔軟性を内部的に使っています。
スキンはZMIの中でportal_skinsツールで定義されます。portal_skinsの中に入って、propertiesをクリックします。これはこのサイトで利用できるスキンの一覧を表示します。例えば、「Plone Default」というものがあります。フォームの中ではこのスキンの項目名が見え、その隣にいくつかの値があります。それはレイヤーです。
propertiesタブの中で、ユーザに表示されるディフォルトスキンをユーザが切り替えることができます。またユーザがスキンそのものを変更することもできます。もし、ユーザが自分たちのスキンを変更することが許されていれば、my preferences画面に行って、そこで変更することができます。
各々のスキンはいくつかのレイヤーを含んでいます。レイヤーはユーザに提示されるテンプレートとスクリプトの個別の組み合わせであり、これらのレイヤーを組み合わせることによりスキンが形成されます。これらのレイヤーを変更することによりユーザは構成要素をスキンに簡単に追加したり取り除いたりすることができます。もう一度「Plone Default」スキンの例で、ZMIを使ってportal_skins -> propertiesに行って「Plone Default」のスキンを見ると「custom, ...」 やら何やらの一連のレイヤーを持っています。それらがこのスキンのレイヤーです。
レイヤーについては知っておくべき二つの重要なことがあります。
今まで読んできた後では、もう何かを変えてみたくてうずうずしていることでしょう。最もよく聞かれる質問は、「どうしたら画面左上にあるロゴをPloneロゴから変更できるのか？」です。これはとても簡単です。
Customizeボタンをクリックします。Uploadをクリックして新しいイメージをアップロードします。これだけです。Ploneインターフェースに戻ります。するとイメージが変更されています。簡単です。
上記の例でメインページのロゴをどうやって変えるのかを説明しました。今まで説明したようにスキンの重要な特徴であるレイヤーを使って動きます。レイヤーに関する最も重要なことの一つは、検索順序です。アイテムが探されるときには常に一番上のレイヤー、つまりリストの中で最初のものが最初に評価されます。
最初に「Plone Default」スキンのレイヤーを見てみましょう。最初のレイヤーは「custom」であり、これはportal_skins -> customのところで見つかるcustomフォルダです。どこか下の方にplone_imagesレイヤーをあなたは見つけることでしょう。これはファイルシステムのディレクトリの見え方に対応しており、ファイルブラウザでファイルシステムの中にインストールされたPloneの中を見るとそれらのファイルを見つけることができます。portal_skins -> plone_imagesのイメージをクリックすると、このイメージを編集する選択肢が無い画面が表示されます。しかし実はそれをカスタマイズすることができます。下図のスクリーンショットにある説明文がそれを説明しています。
これはファイルシステム上にあるため、このイメージ自体は編集できません。ドロップダウンリストの中にcustomというディフォルトフォルダが与えられています。customizeをクリックすると、ZODBの中のcustomフォルダの中にイメージのコピーが作られ、すぐにそこに連れて行ってくれます。よく注意してみるとイメージへのパスが変わり、メタタイプが変わったことに気付くでしょう。イメージを編集することができるようになりました。
なぜこのようなことをするのか？実はこのイメージはcustomフォルダーの中にコピーされたばかりなので、レイヤーのリストの中でcustomレイヤーはplone_imageレイヤーの手前に現れます。今やこのイメージは一番最初に見つけ出されます。ブラウザがlogo.jpgを要求すると、Ploneは各レイヤーを探し回り、customフォルダの中で最初に見つけ出してそのイメージを返します。
これまでのところはわかったよね。さあ、上記のステップ４で新しいイメージをアップロードしました。そのイメージがリストの中で最初に見つかるために、これでlogo.jpgが変更されました。
これがPloneでのスキンとレイヤーの基本コンセプトです。レイヤーを変更したりレイヤー間で個々の要素を移動することで、サイトを容易に変更したりカスタマイズすることができます。これによって好きなだけ少しだけ、あるいは好きなだけたくさんサイトをカスタマイズできます。
サイトとページテンプレートのカスタマイズを奥深く追求する前に、最初に見ておく所はスタイルシートです。
Ploneの大部分のスタイルはスタイルシートによってコントロールされています。これらのスタイルシートの構成を変更することでPloneを抜本的に変更することができます。portal_skins -> plone_stylesの中に４つのスタイルシートがあります。
ひとつの要素であるstylesheet_propertiesは上記スタイルシートの中で使われる色、フォント、サイズ、の実際の定義をすべて含みます。これらのプロパティをカスタマイズすることはルックアンドフィールを変更する簡単な方法です。例えば、mainFontプロパティを「65% Verdana, Helvetica, Arial, sans-serif」から変更してこのオブジェクトをカスタマイズすることによって、メインフォントを変更することができます。
portal_skins -> plone_stylesの中にある他のフォルダーはPloneについてくるスキンであり、違うサイトのいい例を提供しています。
特定のプロダクト以外のすべてのイメージはplone_imagesに含まれています。
コンテンツに関連したテンプレートを含んでいます。これらはすべてZopeのテンプレート言語を使ったページテンプレートであり、大抵はHTMLを生成するためのものであり、ほとんどPloneでしか使わないようなものです。ページテンプレートは極めて強力でエレガントなテンプレート言語です。[1]これらのテンプレートを変更することで、コンテンツがどのように表現されるのかを変更することができます。
これはメインテンプレートやサイト標準のヘッダーとフッター等の、たぶんサイトの最も重要な部分を含んでいます。
実のところ、新しいサイトをカスタマイズする主な要領はカスタマイズするのに必要な部品を探すことです。これは実際やるのが簡単です。最初に呼び出すURLを見つけて、もしその最後の右端の要素が例えばlogin_formやdocument_editのようなものであれば、これらは直接にportal_skinsディレクトリの中のオブジェクトに関連しています。実際のオブジェクトを見つけるには、portal_skins に行き、Findタブをクリックし、containingフィールドにURLの最後の要素を入力します。より複雑な要素については、どんなアクションが呼ばれているのかを見るためにportal_typeツールを使って調べる必要があるでしょう。もし他の方法もすべてうまくいかなければ、findかgrepを使ってファイルシステム上のファイルを見つけてください。
もちろんスキンを変更することでたいていの場合十分でしょうが、どこかの時点で全く新しいスキンを作りたくなることでしょう。
alphaのような名前をそのフォルダーに付けます。alphaとだけ入力します。どちらでもいいですが、新しいスキンを作るのに新しいalphaレイヤーより後に既存のPloneとCMF要素を追加したくなるかもしれません。これだけです。alphaレイヤーから主にアイテムをとってくるようなalphaという名前の新しいスキンができました。
ZopeZen.orgはPloneを使ったサイトの例であり、ZopeZenのスキンのすべてのコードが入手可能です。さらに３つの文書のセットにはこのスキンがどのようにして作られたのかという議論が載っています。とはいえ、Ploneの新しいリリースが出たので、大部分はまだ適切ですが、不幸にもこれは部分的に少し古くなってしまいました。
この本の第五章で説明されたように、タブは「アクション」と「アクションプロバイダー」によって定義されます。タブはアクションエントリーを作成することにより生成されます。カテゴリーフィールドは次のようにタブに影響を及ぼします。
portal_tabsであれば、それはサイトの一番最初に表示されます。（例：ニュース）object_tabsであれば、それは緑色の編集可能域境界線の中に表示されます。（例：編集）folder_buttonsであれば、それはfolder_contentsの中でボタンとして表示されます。（例：フォルダーコンテンツ）documentationと呼ばれるフォルダの中に入っています。ユーザが簡単にドキュメントにアクセスできるように、アクションが追加されています。documentationという名前のフォルダを作成します。portal_actionsへ行きます。Addセクションのためにページの下までスクロールし、そして次のように入力します。
Addをクリックします。誰にでも見えるドキュメントのタブができました。
Ploneは読みやすいように日付をある一定の表示形式で表示します。それらの表示形式はZMIを使って変更することができます。それらの値はPloneサイトにプロパティとして保存されています。ZMIでportal_properties -> site propertiesへ行きます。
どちらの値もPythonの時間フォーマットモジュールを使って時間表示形式を生成します。表示形式の参考資料はここにあります。 - このモジュールについて知らなければ、下に簡潔な要約を記しておきます。
例えば、localTimeFormat のディフォルト設定は %b. %d, %yです。これは日付を省略月名、日番号、２桁の年に形式化します。例えば： Oct. 24, 02です。もし曜日を含めたいのであれば、localTimeFormatを%A, %b. %d, %yに変更するという簡単なものです。これは次のように表示します。03.8.15Thursday, Oct. 24, 02。
Credits: Jean Jordaan for initial documentation.
ここでは自分のサイトに適するように描画を取り替えたり編集したりできるように、Ploneページがどのように描画されるのかを説明します。Ploneではコンテンツはmain_template.ptと呼ばれるページテンプレートを経由して表現されます。ファイルシステム上でskins¥plone_templatesという所にあり、ZMIを使ってportal_skins -> plone_templates -> main_templateの所でカスタマイズすることができます。
＜今や古くなってしまいました。Plone 1.1に向け執筆中です。＞
[1] ページテンプレートはZope Bookで説明されています。より詳しい情報はChapter 6とChapter 13を見てください。
$Id: 6,v 1.1.1.1 2003/08/26 17:09:50 tyam Exp $