wiki.zope.jp
SkinningCMFSites
   
RecentChanges WikiHelp WikiPractice JumpSearch

SkinningCMFSites

スキンを書く

このドキュメントについて

このドキュメントは、CMFで使われている、カスタマイズを可能にする新しいテクニックの1つ、Skinのコンセプトを概観するものです。またこのドキュメントでは、あなたがDTMLやZopeの検索ツールなどのZopeのコンセプトに親しんでいることを仮定しています。

Skins Toolについて

ZopeのCMFでは、Toolsと呼ばれる新しいコンセプトが紹介されています。これらのToolsはコンテンツ・オブジェクトを実行したり、コンテンツ・オブジェクトにそれが表すコンテンツとして振舞うようにさせます。これらのToolsのうちの1つがSkins Tool、すなわりportal_skinsです。Skins Toolはシステムにおいてオブジェクトからサイト特有の振る舞いを分離し、使われるオブジェクトのコア・クラスに変更を及ぼすことなく、高いレベルでのカスタマイゼイションを可能とするものです。

それが解決する問題

Pythonで書かれた多くのZopeのクラスは、それらのマネージメント・スクリーンへの直接リンクを持っており、オブジェクトとそのビューを密接に結びつけます。ZClassはPythonのクラスをそのベース・クラスとすることができ、オブジェクトに関連する全てのロジックをベース・クラスに置いて、DTML MethodのようなすべてのビューをZClassに持つことができます。しかし、これらは配布時に問題となります。CMFのデベロッパーはZClassでビューをカスタマイズしますが、新しいCMFのリリースによりそれらの変更は上書きされてしまうでしょう。

したがって、解決されたい問題は:

Skins Toolには何がある?

Skins Toolはどのようにこれらの問題を解決するのでしょうか? Skinを構成するものにはいくつかあります。

レイヤーの定義

Skinそのものはレイヤーの定義です。

それらのレイヤーとは何ですか?

レイヤーの定義とは、DTMLやイメージ、プロパティなどを含むフォルダのようなオブジェクトのリストです。blueという名前のSkinは、blue, basic_css, generalというレイヤーを定義することになるでしょう。これは、blueスキンがアクティブなとき、standard_html_headerのようなものが、最初にblueで、次にbasic_cssで、最後にgeneralで探される、ということを意味します。

デフォルトでこれらの名前が探される場所には2つのタイプがあります。

このドキュメントの残りでは、あなたがCMFサイトのカスタマイズを始めるためにこれらの機能を使う方法を、詳しく説明しています。

Skinを書き始めるには

Skins Toolをより深く見る

このセクションでは、あなたがすでにCMFサイトのインスタンスをセットアップし、Zopeの管理画面(ZMI)にいることを仮定します。

さて、Skins Toolにはデフォルトで何が入っているのかについて、少し詳しく見ていく時間です。ZMIであなたのCMFサイトのportal_skinsオブジェクトへ行ってください。デフォルトのビュー、contentsでは、あなたのCMFのセットアップにより7つか8つのフォルダが見えるでしょう。ほとんどのフォルダは緑の鍵が付いたアイコンを持っています。これらはファイルシステム・ディレクトリ・ビューオブジェクトです。それらとそれらの中身はZMIを通して変更できます。デフォルトでskins toolの中には、customという通常のZopeフォルダがあります。これは我々のカスタマイゼーションを始める場所です。

portal_skinsオブジェクトのPropertiesタブをクリックすると、Skinが実際どのように設定されているかを見ることができるでしょう。デフォルトでは、3つのSkin、Basic、No CSS、Nouvelleがあります。1つのSkinはSkins Toolの中で違うフォルダにレイヤーとして作られています。PropertiesページのSkin Selection AreaのLayersカラムには、フォルダのカンマ区切りリストがあり、それらのSkin Selectionに対して探される順番に並んでいます。

デフォルトのフォルダを見る

デフォルトでSkins Toolにインストールされるファイルシステム・ディレクトリビューのデフォルトベースがあります。このセクションでは、それに何が入っているかを見ます。

Images

このフォルダはデフォルトSkinで使われるアイコンではないイメージだけを含みます。

content

このフォルダは、(CMFDefault?パッケージからの)コンテント・オブジェクトのデフォルト・セットのためのDTML Methodとアイコンを含みます。これらはmetadataの編集フォームとデフォルトのworkflowの設定をサポートするフォームなどすべてのコンテント・オブジェクトのためのドキュメント、ファイル、DTML Methodなどを含みます。

control

このフォルダはいくつかの一般的なコントロール・スクリプトとして振舞うDTML Methodを含みます。その例として、フォルダのデフォルトのコピー・メソッドのラッパーであるfolder_copyなどがあります。

custom

カスタマイゼーションを始める通常のZopeのフォルダ。Skins Toolに他のフォルダも追加できますが、とりあえずここから始めましょう。

generic

サイトのジェネリックなルックアンドフィール。ここには、デフォルトのstandard_html_headerのようなものや、actions_box DTML Method、ポータルページをリコンフィギュアするDTML Methodなどがあります。Skin basicで使われているデフォルトのスタイルシートのセットアップもここにあります。

no_css

No CSS Skinに使われます。このフォルダは通常Skinで使われるスタイルシートを無効にするためのファイルシステム・プロパティオブジェクトが含まれます。

nouvelle

Nouvelle Skinによって使われます。このフォルダはnouvelle_stylesheetと、それに使われる値を提供するファイルシステム・プロパティオブジェクトが提供されます。

topic

CMF Topicがインストールされていれば、topicフォルダも見えるでしょう。これはTopicオブジェクトに特有のビューを含んでいます。

以上が、あなたがサイトをカズタマイズするのに必要なものを探すためのガイドになれば幸いです。私がコンテンツを探すときに使う一般的なルールは:

シンプルなカスタマイゼーションを行ってみる

相対的に簡単なカスタマイゼーションを行ってみましょう。何も新しいアイテムがないサイトにいる場合は、Portalのフロントページのデフォルトのニュース・ボックスは、デフォルトで"No news is no news"といっているでしょう。これを"There is nothing new under the sun"と言うように変えてみましょう。最初のステップはカスタマイズすべきものを探すことです。ニュース・ボックスは実際の特定のコンテント・オブジェクトと結び付けられているわけではないので、それがgenericフォルダの一部であると想像することは正しいです。portal_skins/genericの中には、newsが名前についているいくつかのDTML Methodがありますね。news_boxをクリックして何が出てくるか見てみましょう。通常のDTML Methodの編集フォームの変わりに、グレーのボックスにソースコードが入っているのが見えるでしょう。ボックスの上には、カスタマイズが有効であるフォルダ・リストのポップアップリストを含んだカスタマイズ・アクションフォームがあるでしょう。portal_skins toolに何も新しいフォルダを追加していないのなら、デフォルトの(唯一の)オプションはcustomです。customが選ばれたままでCustomizeをクリックしましょう。すると、通常のDTML Method編集フォームに行きます。パスを見ると、あなたは今は、portal_skins/custom/news_boxにいることに気付くでしょう。ここが。CMFのデフォルトのスタイルに変更を及ぼすことなく、あなた独自のサイトを安全にカスタマイズし始める場所なのです。

他のブラウザのウィンドウで、あなたのCMFサイトのフロントページを見ると、"No news is no news"とニュース・ボックスに書かれていることでしょう(あなたが実際のニュース・アイテムを追加していなければ、ですが)。そして、news_boxの編集ウィンドウに戻り、"No news is no news"を"There is nothing new under the sun"と変更します。あなたのCMFのフロントページに戻ってリロードすると、今度はニュース・ボックスには新しいフレーズが見えます。

新しいSkinを定義する

新しいSkinを作ることは結構簡単です。それは基本的には、このドキュメントで触れたことの延長で、かえって標準的なZopeのテクニックのようなものです。

Skins Toolに新しいフォルダを作る

あなたの全ての仕事をcustomで行うことは、それでも十分ですが、それ以上が出来ません。新しいSkinを作り始めるとともに、カスタマイゼーションを組織化するチャンスです。Skins Toolはこういうことに対して開かれています。あなたはportal_skins toolの中に新しいフォルダを作ることができ、ファイルシステム・オブジェクト上で、カスタマイズアクションのターゲットオプションとして現れるようになります。

ここではメジャーなサンプルを行うつもりはありません。ここでテストできる大きな柔軟性があります。いくつかのサンプルは印刷可能なSkinの作り方を含んでいます。それは典型的には、サイトバーや他のサイト・デコレーションをページから切り離したり、特定のブラウザをターゲットにしたSkinを作ったりするものです。これらのそれぞれにおいて、portal_skinsに新しいフォルダを作って開始できます。例えばPrintableとかDHTMLとか。一旦これらの新しいフォルダを作ったら、その中でカスタマイズを行えます。

新しいフォルダでカスタマイズする。

この振る舞いは、前のサンプルで説明したとおりです。ファイルシステムベースのフォルダへ行って、オブジェクトを選択すると、そのメインの管理画面はそのオブジェクトの内容を表示し、あなたがカスタマイズできるフォルダのリストが表示されます。これらのフォルダは、portal_skins toolから始まります。

Skinを定義したり変更したりする。

Skinはレイヤーにより作られ、それらのレイヤーはportal_skins toolの中のフォルダであることを思い出してください。フォルダを作るだけではSkinは作れません。Skinを使うために設定する必要があります。

これはportal_skins toolのPropertiesタブで行います。このページでは、Skin Selectionのタイトルがあり、Skinの設定のテーブルを含むボックスがあります。このボックスで、Skinを追加、削除、設定することが出来ます。

Skinは指定されたレイヤーを右から左へ検索するように設定されます。デフォルトでは、ファイルシステムビューが左の方で、カスタムビューが右のほうです。CMF Topicを含む、basicのコンフィギュレーションでは、すべてのSkinがcustom、topic、content、generic、control、Imagesを含むことが見えるでしょう。これは、actions_boxという名前が出てきたら、最初にcustomを探し、次にtopic、次にcontentというように探されるということを意味しています。

あなたのカスタマイゼーション・フォルダを作って始める場合、あなたはそれをこれらのリストに挿入することができます。あるいは新しいSkinを定義できます。挿入するときは、あなたの新しいフォルダを最初に置くことがよい方法です。新しいSkinを定義するときは、既存のSkin、例えばBasicなどからデフォルトのリストをコピーして、新しいレイヤーを挿入すると良いです。

Last edited Sat, 09 Sep 2006 15:45:39 +0900 Edit this page